Skip to the main content

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

Internet Explorer Firefox Safari Chrome Opera

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...)

Internet Explorer

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.

Internet Explorer

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) */

Firefox Netscape

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 Chrome

Safari i Chrome, koji se isto ponašaju zbog webkita, pročitat će ovu liniju:

body:first-of-type .sel { color: orange } /* Safari + Chrome */

Opera

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.