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

Martin Hassman založil a vede magazín Zdroják. Absolvoval VŠCHT Praha. Byl u založení projektu CZilla (dnes už nepamatujete, nevadí). Stavěl mosty a metal cestu pro HTML5 (to tu ještě máme). V GUG.cz organizoval akce pro vývojáře (a jestli neumřeli, kódují si dodnes…).

Zdroj: https://www.zdrojak.cz/?p=442