Ještě ke štítkování zastarávajících CSS deklarací
Navážeme na článek ze Zdrojáku a následnou zajímavou diskuzi, kde laskaví čtenáři nalezli několik slabin nabízeného řešení štítkování v CSS pomocí štítku [OBSOLETE?]. Prošel jsem stylopis Scuku a shledal ho nabitým příklady k podrobnější demonstraci nabízené metody.
Pro potřeby článku jsem je zbavil deklarací, která nás v kontextu problematiky nezajímají. Aby to někomu nebylo líto, kompletní nekomprimovaný zdroják scukovského stylopisu přidávám na závěr. .-)
Nejjednodušší varianta štítku bude označovat jedinou deklaraci:
nav#categories li a {
-moz-border-radius: 7px 7px 0 0; /* [OBSOLETE?] */
border-radius: 7px 7px 0 0;
}
Jak u článku zmiňovali Tomáš Hellebrand a Honza Sládek, vlastnosti s vendor prefixy by měly předcházet standardizovaným, protože se jejich implementace v jednom prohlížeči a v čase může lišit. Proto štítek [OBSOLETE?] jako inline komentář.
Vysoce pravděpodobně nám zastará také Cufón (jakmile se používaný font dostane do nabídky některé z webfont knihoven). Výše uvedené pravidlo tedy rozšíříme takto:
nav#categories li a {
-moz-border-radius: 7px 7px 0 0; /* [OBSOLETE?] */
border-radius: 7px 7px 0 0;
}
/* [OBSOLETE?] Cufon: Verze navigace s fontem Apexem, ktery ma trochu jine propozice */
.cufon-active nav#categories li a {
padding: 9px 9px 7px 9px;
line-height: 12px;
}
Třídu .cufon-active nám do dokumentu přidá samotný Cufón, takže detekovat nic nemusíme. Druhé pravidlo kromě oštítkováni a opatření komentářem také odsadíme. Není toho označování už moc? Myslím, že ne. Zatím se mi osvědčuje značkovat štítkem kvůli vyhledávání a odsazením si pravidla odlišit, aby na mě křičely při běžných úpravách. Odsazení říká: “Tady pozor!”.
Jdeme na další příklad. V této skupině pravidel očekáváme, že trvalou zůstane vlastnost border-image a jako [OBSOLETE?] tedy označíme nejen dočasné implementace pomocí vendor prefixů ve Firefoxu a Webkitu, ale také alternativní stylopis pro prohlížeče, které border-image vůbec neumějí (MSIE):
#content .box h1 {
-moz-border-image: url(/img/layout/border.gif) 0 0 2 0 repeat repeat; /* [OBSOLETE?] */
-webkit-border-image: url(/img/layout/border.gif) 0 0 2 0 repeat repeat; /* [OBSOLETE?] */
border-image: url(/img/layout/border.gif) 0 0 2 0 repeat repeat;
}
/* [OBSOLETE?] Pro prohlizece, ktere neumi border-image (napr. IE) */
.no-borderimage #content .box h1 {
background-image: url(/img/layout/border.gif);
background-repeat: repeat-x;
background-position: left bottom;
}
Detekční třídu .no-borderimage nám nedodal nikdo jiný než velký kamarád Modernizr.
Ještě vám to připadá srozumitelné? Pak na závěr lahůdka - gradient na pozadí tlačítka. Ke dnešku není prohlížeče, který by implementoval v CSS3 doporučovanou specifikaci a tak zde vládne každý po svém:
input[type=submit] {
-moz-border-radius: 7px; /* [OBSOLETE?] */
border-radius: 7px;
background-color: #f8e7cd;
}
/* [OBSOLETE?] kulate rohy a gradienty na pozadi pomoci vendor prefixu */
input[type=submit] {
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.11, rgb(255,255,255)),
color-stop(0.78, rgb(248,231,205))
);
background-image: -moz-linear-gradient(
center top,
rgb(255,255,255) 11%,
rgb(248,231,205) 78%
);
}
Detekční třídu Modernizru pro odlišení zastarávajících jsme zde ani nevyužili. Prohlížeče, které gradienty nezvládnou, zobrazí tlačítko v jedné barvě podle deklarace v prvním nezastarávajícím pravidlem.
Slíbený centrální stylopis Scuku, kde najdete příkladů ještě daleko více i s kontextem dalších pravidel je na Gihub gyzdu. :-)
Jak metodu pojmenovat?
Zatím se zdá, že je tahle metoda organizace CSS kódu životaschopná. Je to ale děťátko bez jména. “Štítkování zastarávajících deklarací” je poněkud strojené.
Nemáte kamarády mezi lesníky? Se štítky totiž zacházíme podobně jako to dělají muži lesů se stromy určenými k pokácení. :-)
