ugrás a tartalomhoz

HTML5 és CSS3 kiválasztók IE6-8 alatt

gyoridavid · 2010. Dec. 14. (K), 14.23

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.

 
1

Új elemek

Poetro · 2010. Dec. 14. (K), 14.45
Azért nem minden elem blokk elem. (megjegyzés: a New elements in HTML 5 link hibás). A következő elemek azok, amiket blokk elemnek kell tekinteni:
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
  display: block; 
}
A canvas, details, summary, time, mark, audio, video elemek inline illetve inline-block megjelenítést igényelnek.

Bővebben a CSS részéről és az ajánlott HTML illetve webszerver beállításokról érdemes az HTML5 ★ Boilerplate oldalon tájékozódni.
2

És azt a js/ie7-squish.js-t

kuka · 2010. Dec. 14. (K), 15.15
És azt a js/ie7-squish.js-t honnan kellene előteremtsük? A megadott címeken nem hallottak a "squish" szóról.
3

ie7-js

Poetro · 2010. Dec. 14. (K), 15.25
Valószínűleg az ie7-js projektre gondolt. De persze ebben nem lehetek biztos.
5

ie7.js

gyoridavid · 2010. Dec. 15. (Sze), 07.46
igen, arra, lemaradhatott a link.
4

Én beírtam a Googleba, hogy

virág · 2010. Dec. 14. (K), 23.23
Én beírtam a Googleba, hogy "ie7-squish.js" és csoda történt ;)
6

szerintem

Gixx · 2010. Dec. 15. (Sze), 15.06

<!--[if lt IE 9]>
<meta http-equiv="refresh" content="0;url=http://www.yoursite.com/too_old.html" /> 
<![endif]--> 
7

ROTFL

Poetro · 2010. Dec. 15. (Sze), 15.08
ROTFL