Standards versus reality, part 4

Dziś krótko o stylach.

CSS ma taką przemiłą cechę, że pozwala przypisać dowolnemu elementowi nieograniczoną liczbę klas. Definiuje się to rozdzielając nazwy klas za pomocą spacji:

<p class="pierwsza druga">Lorem ipsum, baby!</p>

O dziwo, działa to nawet w IE. Przynajmniej częściowo. Pewien nieznośny bug sprawia, że w przypadku wystąpienia kilku klas, IE zaczyna przypisywać je dość rozrzutnie, aplikuje mianowicie wszystkie klasy, których nazwa zaczyna się (a może zawiera) dowolną z wymienionych. Stąd jeśli do powyższego przykładu przypisze się poniższy arkusz, efekt może być dość nieoczekiwany:

.pierwsza
{
	color: #000;
}
.druga
{
	border: 1px solid #000;
}
.pierwszaNotka
{
	background: #000;
}

IE z ogromną radością zaaplikuje nam wszystkie trzy klasy, a efektem będzie czarny pasek. Czyż to nie przepysznie? Dlatego też należy unikać jak ognia sytuacji, kiedy nazwa jednej klasy jest jednocześnie prefiksem nazwy innej. Można też unikać aplikowania kilku klas do pojedynczego elementu.

Drugi problem dotyczy wielkości liter, standard definiuje nazwy klas i identyfikatorów jako rozróżniające duże i małe litery. IE z kretesem ignoruje te informacje. Są dwa przypadki, kiedy może nas to zaboleć. Pierwszy to arkusz styli zbudowany z myślą o IE (o ile można w ogóle budować arkusze styli z myślą o konkretnej przeglądarce). Jeśli bowiem nasz dokument jest serwowany jako XHTML, przeglądarka ma obowiązek ściśle przestrzegać tagów elementów pisanych małymi literami. Stąd poza IE poniższy styl nie ma żadnego zastosowania, jako że nie istnieje element <STRONG/>:

STRONG
{
	color: #f00;
}

Druga sytuacja to nazwy klas pisane jako pojedynczeSłowo (preferuję ten styl ze względu na czytelność arkusza):

<p class="loremIpsum">Lorem ipsum dolor sit amet</p>
.loremIpsum
{
	color: #f00;
}
.lOrEmIpSuM
{
	color: #00f;
}

Kto zgadnie, jakiego koloru będzie powyższy paragraf? Tutaj sprawa jest prosta, nazwy trzeba definiować z rozmysłem i konsekwentnie, wtedy taka sytuacja raczej nie będzie mieć miejsca. Stosuje się tu też powyższa uwaga - do testowania CSS (jako podstawowej przeglądarki) należy używać czegoś, co działa. Dopiero potem dostosowywać kod do IE.

web