CSS: Targetiranje preglednika

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.

većina ovih hackova koje navodiš nisu CSS valid stoga ih je bolje ne koristiti, općenito CSS hackove ne bi trebalo koristiti nego smisliti neki workaround, također pošto je zapravo najviše problema uvijek sa IE x bolje je koristiti condiotional comments, IE 7 emulate tag je također zgodna stvar međutim upravo zato što emulirate da se IE 8 ponaša kao IE 7 ostaje zakinuti za one stvari koje zapravo IE 8 možda podržava, a IE 7 ne ... poanta je ne koristiti hackove ako je ikako moguće (barem ne one koji nisu validni, odnosno koji ionako kod sljedećeg update-a na noviju verziju ionako nemaju efekta).

meni nije jasno zakaj itko koristi ie
da nema opere i ff, radije bi koristil Lynx

http://en.wikipedia.org/wiki/Lynx_(web_browser)

btw, svaka dala dadi kaj je ovak lijepo sročil tekstić ;-)

pobornik sam generiranja css-a za svaki browser ~ daklem, ak se ima posla z Operom, dostavi se opera9.css ili opera1050.css, ak je posrijedi ff, koristi se ff35.css ili ff3.6.css ...

znal sam lika koji je inzistiral na tome da verzija za tadašnji ie i tadašnji netscape budu u dlaku (tj. pixel) jednake... wtf, pa koga je bilo briga za to ~ važna je FUNKCIONALNOST !!!

ne da mi se užasno spava ~ nego sam zaspal

[div style='border:solid 1px gray;padding:5px;]>zakaj ovdije nema divova ?[/div]

ko je prdnul ?

http://englishrussia.com/wp-content/uploads/2010/01/boom500.jpg

zaglavila se

http://danas.net.hr/hrvatska/page/2010/05/29/0044006.html

hehehehehehehe ;-))

Kako protiv ludila?

Skupiti 450.000 potpisa i Sabor natjerati na raspisivanje referenduma
o prijedlogu imjena ZOR-a.

Imate li za to volje i građanske odvažnosti?

http://drlesar.bloger.hr/post/ludilo/3193301.aspx

da imam nofčeke, kupil bi nekaj ovakvoga

http://www.city24.hr/Pages/Advertise/SearchDetail.aspx?id=60906

Ajmo u Europu, ajmo u mirovinu sa 70!

Europska komisija do ljeta će izložiti plan da se u državama EU dobna granica odlaska u mirovinu podigne, kako ljudi ne bi više od trećine odraslog života provodili u mirovini, što se sada događa. Sadašnja ciljana dob odlaska u mirovinu u EU je 65 godina, zapravo se u mirovinu odlazi s oko 60 godina, a EK bi da se u budućnosti u penziju ide sa 70. Francuzi su već ustali protiv ove ideje; muškarci ondje u mirovinu idu sa 58. Nijemci su se pak bili pobunili protiv pomoći Grčkoj jer Grci u penziju idu s 61 godinom, dok je Njemačka dob za odlazak u mirovinu nedavno povisila na 67.

http://www.monitor.hr/vijesti/u-mirovinu-sa-70/146558/

krađa identiteta na 'domaći' način

http://danas.net.hr/hrvatska/page/2010/05/30/0035006.html

Ja sam Jaca a www.vlada.hr je moj blog...

pogledajte gdje sam sve bila i kaj sam delala ;-))

http://danas.net.hr/hrvatska/page/2010/06/01/0517006.html

http://www.vlada.hr/

zgodan helikopterčić

http://www.youtube.com/watch?v=MvRTALJp8DM