Scurtă poveste despre :first-child

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 :twisted:

6 Comentarii to “Scurtă poveste despre :first-child”

  1. Multa bafta si pune un plugin (mobile version) la blog ca sa se incarce mai repede

  2. Staicu Ionuț-Bogdan

    @Ionut Popa & @Prafuitu: chestia e că m-am uitat întâi pe quirksmode (parcă) și când am văzut că :first-child merge pe toate browserele, am presupus că și :last-child va merge. Țeapă totală! :|

  3. Wow! Deci ai reusit sa ai 3 clienti consecutivi care nu cer compatibilitate in IE6! Asta e o mare realizare. Eu nu-i conving nici daca le ofer mai mult daca renunta la IE6. In ce priveste selectorii avansati, eu prefer sa evit folosirea lor pana nu capata un pic de vechime. N-as vrea sa ma trezesc ca trebuie sa rescriu o bucata serioasa de cod pentru ca s-a gandit clientul intre timp ca vrea si IE6.

  4. Staicu Ionuț-Bogdan

    @Daniel, în principiu, dacă se vrea și IE6, taxez cu 20-30% în plus, depinde cât de complexă e treaba. Din fericire însă, cei trei clienți au spus din start că nu vor IE6, înainte să știe de „extra fee”.

    În plus, în cazul în care clientul se răzgândește, taxăm la oră. Iar tariful meu pe oră nu e chiar cel mai mic :) Este o relatie win-win :D

Show trackbacks

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>

windows apple dropbox facebook twitter