CSS Selector Shell: vyzkoušejte si, jak prohlížeče vidí vaše kaskádové styly

Jistě to znáte. Vytvořili jste stylopis s vaším designem, ale v některém z prohlížečů nefunguje jak jste si přáli. K problému mohlo dojít hned v několika krocích, ale tím prvním je, že prohlížeče vámi zapsané stylové předpisy „vidí“ jinak, než si myslíte.

V takovém případě vám přijde vhod CSS Selector Shell. Jedná se o jednoduchý nástroj. Na jedné straně do něj vložíte pravidla z vašeho stylopisu a na straně druhé vám vypadne podoba, jak je vidí prohlížeč (ten prohlížeč, ve kterém právě CSS Selector Shell spouštíte). Nástroj ke zpětnému zrekonstruování pravidel CSS používá DOM API pro práci s kaskádovými styly, měl by tedy skutečně zobrazit to, co prohlížeč „vidí“, resp. jak kaskádové styly načetl (nijak nám to samozřejmě nenapoví, zda s nimi bude dále správně pracovat). Zdrojový kód nástroje je vám k dispozici po Apache licencí.

Můžete tak objevit chybu prohlížeče, o které jste nevěděli, nebo chybu ve vašem stylopisu (o které jste také nevěděli). V případě, že používáte CSS filtry, potom u těch, které jsou postaveny na různém „ohýbání“ syntaxe CSS (např. podtržítkový hack), snadno zjistíte, který prohlížeč pravidlo odfiltroval, a který je načetl.

K TÉMATU: Podmíněná pravidla v CSS