Weblabor

Elkezdtem használni a HTML5 elemeket és a CSS3 kiválasztókat az új projektjeimben. Azokat a JavaScript könyvtárakat osztanám meg veletek az alábbiakban, amelyekkel a régebbi böngészőket is rávehetjük a megjelenítésükre.

A HTML5 elemeket engedélyezéséhez szúrd be ezt a sort a head-be:

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Integrálták bele az IE Print Protector-t, így a nyomtatás is megoldott.

CSS-ben minden új elemre használom a display: block stílust, mert az újonnan létrehozott elemek nem blokk szintűek, ráadásul nekem a pozicionálásnál is problémásak voltak enélkül. Így például a főoldalom struktúrájában nem használok konténert, csak header, nav, section, article, footer elemekkel rendszerezek.

A CSS3 kiválasztók használatához ezt a kódot szúrd be a head-be:

<!--[if lt IE 9]>
<script type="text/javascript" src="js/IE9.js"></script>
<script type="text/javascript" src="js/ie7-squish.js"></script>
<![endif]-->

A fenti kóddal az IE9 előtti böngészőkben is használhatjuk a modern kiválasztókat. A második script behúzásával a bugok nagy részét javítjuk. (Vigyázni kell a CSS-ben használt relatív hivatkozásokkal. Nekem egy órába telt, míg rájöttem, hogy a style.css-ben a reset.css behúzása miatt omlott össze.) Viszont a dolgok egyszerűbbek lettek mióta használom őket: a :last-child, :first-child, :nth-child(2n), input[name*="valami"] mind nagyszerű dolgok.

Még egy kis finomságként a CSS3 PIE-jal a CSS3 tulajdonságokat erőltetjük az IE régebbi verzióira (box-shadow, linear-gradient, border-radius).

Ti használjátok őket? Tapasztalatok?

Bővebb olvasnivalóért a The 30 CSS Selectors you Must Memorize és New elements in HTML 5 című cikkeket ajánlom.