Din câte am apucat să citesc (foarte puțin), pare suficient de bine explicat pentru a înțelege tot poporu’. Adică tot poporu’ interesat de așa ceva.

sourcemaking.com. Enjoy!

Așa cum m-am lăudat pe twitter în urmă cu câteva zile, sunt deja la al treilea client consecutiv care a renunțat la suportul pentru IE6. Prin urmare, am început să folosesc și pseudo clase și selectori mai „șmecheri”. Astfel încât codul HTML a început să conțină mai puține clase de genul first sau last.

Și încep eu bucuros, nevoie mare să folosesc :first-child. Care nu este suportat de IE6 dar merge pe versiunile mai noi (7+). Am testat temător la început și… cam asta a fost. Pentru că eu merg pe regula (dacă se poate spune așa): dezvoltă în firefox, testează în safari/opera/chrome și repară în IE.

Prima bubă

Am văzut eu că merge :first-child și am presupus că ar fi normal să meargă și :last-child. Greșit! Nu numai că nu merge, dar :last-child nici nu face parte din specificația CSS 2.1! Face parte din CSS 3.0! Prin urmare, dă-i și rescrie codul. Moment în care am găsit…

A doua bubă

A doua bubă a fost un pic mai nasoală. Ca să înțelegi mai bine, îți arăt o bucată de cod:

<div class="wrapper">
	<h3>Titlu</h3>
	<div class="entry">
		conținut
	</div><!-- /.entry-->
	<div class="entry">
		conținut
	</div><!-- /.entry-->
	<div class="entry">
		conținut
	</div><!-- /.entry-->
</div><!-- /.wrapper-->

Iar eu trebuia să pun border-top la toate div.entry, mai puțin la primul:

.wrapper div.entry:first-child {
	border-top:none
}

Totul e ok, nu? NU! În niciun browser nu mergea și nu înțelegeam de ce. După ceva căutări am aflat că :first-child ține cont de TOATE elementele, nu de toate elementele căutate. Astfel, first-child în cazul meu era.. h3! Dă-i cu Dumnezei, biserici, sărbători și alte neamuri și pune toate div.entry într-un alt div și… cam asta fu.

Soluția elegantă

Dincolo de extra markup (folosit din motive de grabă – deadline-ul venea cu pași repezi și deja pierdusem prea mult timp cu rescrierea codului & căutarea problemei), ar mai exista două rezolvări:

1. Adjacent Sibling Selector. Îl puteam folosi la modul .wrapper h3+div.entry. Și partea bună este că ar fi mers fără prea mari probleme în toate browserele.
2. :first-of-type. Care nu prea merge decât în ultimele versiuni de Firefox/Safari/Chrome dar… Cam atât. Nu merge în niciun IE deci nu prea ar fi bun.

Deznodământul

Cum orice minune ține trei.. clienți, următorul client are un site la care vrea și compatibilitate IE6

Dar care nu merge prea grozav pe IE. Din păcate fericire mi-a pierit cheful total după câteva minute, prin urmare a rămas așa.

Dacă nu te prinzi la ce s-ar putea folosi chestia asta, imaginează-ți că ai de afișat mai multe foldere cu poze (gen picasa). Și pentru a nu intra în fiecare folder, te plimbi cu mausul peste folder și vezi un quick preview al primelor X poze (unde X e zece în cazul de față).

A fost doar un experiment rapid ce a durat mult mai puțin decât scrierea acestui post