Trikovi sa CSS atributima i selektorima za "gađanje" određenih (verzija) browsera.
CSS targeting je pojam koji označava korištenje CSS trikova koji mijenjaju stvari u određenom pregledniku, skupu preglednika ili određenoj verziji preglednika.
Preglednici koje će obuhvatiti primjeri u nastavku teksta su:
1. Internet Explorer (verzije 6, 7 i 8)
2. Firefox (verzije 1.x , 2.x i 3.x)
3. Safari te Chrome
4. Opera
CSS targetiranje može ići preko atributa ili selektora. Preko čega? Dobro, za one koji su zbunjeni evo ovako (selektor je zapravo naziv stila):
selektor { atribut: vrijednost }
Jasnije? Ok. Idemo dalje.
• • • • •
ATRIBUTI
Targetiranje preko atributa je način koji treba izbjegavati. (Zapravo CSS targetiranje općenito treba izbjegavati. Ali kad se drugačije ne može...)
Evo primjera za Internet Explorer, verzije 6, 7 i 8:
.attr { color: black } /* non IE */
.attr { color/*\**/: blue\9 } /* IE8, first and alone */
.attr {
*color: red; /* IE7 + IE8 in IE7 mode */
_color: green; /* IE6 */
}
Kao što vidite atribut je "neznatno" primijenjen da bi ga kužile samo određene verzije IE preglednika. Pravila (dobijena eksperimentiranjem):
1. IE8 mora biti prvi na popisu
2. IE6 i IE7 moraju biti zajedno, s tim da
3. IE6 mora biti zadnji na popisu.
Plus: prije svega stavljena je normalna definicija koja ide svim ostalim browserima.
Atribut color možete zamijeniti s nekim drugim i stvar će radit.
btw IE8 u IE7 modu je osmica koja se ponaša kao sedmica, što se može dobiti ručno (F12 pa ALT+B) ili preko META taga:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
(Zapravo zgodna fora da se istovremeno radi za 7 i 8 bez problema.)
• • • • •
SELEKTORI
Kod targetiranja (gađanja?) preko selektora na iste se stavljaju prefiksi ili drugi selektori koje kuže samo određeni preglednici.
Prvo Internet Explorer, pravila ista kao gore:
.sel { color: black; } /* non IE */
* html .sel { color: green;} /* IE6 */
*+html .sel { color: red; } /* IE7 + IE8 in IE7 mode */
.sel { color: blue\0/; } /* IE8 (must be last in IE list) */
Onda tri okrugle skupine Firefoxa:
@-moz-document url-prefix() { .sel { color: magenta; }} /* FF1+
.sel, x:-moz-any-link { color: gray; } /* FF 2+ */
.sel, x:-moz-any-link, x:default { color: brown; } /* FF3+ */
Poredak nije bitan, plus prvu liniju (za FF1) isparsat će i Netscape browser.
Safari i Chrome, koji se isto ponašaju zbog webkita, pročitat će ovu liniju:
body:first-of-type .sel { color: orange } /* Safari + Chrome */
I na kraju - najveća kobasica je za Operu:
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sel { color: cyan !important } } /* Opera */
• • • • •
DEMO
Demo se nalazi ovdje (kao i css u jednom komadu). Ili skinite ZIP datoteku (1.2K).
Napomena: ovaj niz nije konačan, tj. danas sutra može izaći nova varijanta nekog preglednika koja će se ponašati mimo dosadašnjih pravila. Osim toga u obzir nisu uzeti npr. mobiteli. Anyway, vratit ćemo se na ovaj post za par mjeseci i napraviti reviziju.
Do tada - stay CSS tuned!
(Naravno, ako nađete na grešku u ovim CSS škrabotinama ni slučajno me nemojte ispraviti dolje u komentarima.)
• • • • •
I to je sve: CSS trikovi za sve najčešće preglednike na jednom mjestu. Možda da bookmarkirate za preksutra kada će onaj #%&!! browser uporno stavljati 2 piksela razmaka više nego ostali.
PS. Meowmania, Flash zezancija protiv stresa, ne nužno CSS stresa.
Programiranje
Komentara: 13
RSS feed