Učitavanje ...
Ukoliko čitate ovaj tekst to znači da ste već imali problema sa različitim prikazivanjem css-a u različitim browserima. Najpoznatija je, naravno Internet Explorer 6 priča. Svaki web dizajner ili web developer morao je do sada imati ogromnih problema sa tim i izgubiti sate i sate dragocjenog rada samo kako bi uspjeo natjerati IE 6 da se ponašao kao normalni browseri. Na svu sreću vrijeme je učinilo svoje i IE 6 se sve manje koristi i na veliku sreću nas koji radimo na webu odlazi u povijest. Noćna mora zvana IE 6 uskoro će pasti u zaborav i samo developeri željni izazova će je se još sjetiti.
Ipak, IE 6 nije jedini problematičan. Svaki browser ima neke svoje dječje bolesti, a na toj činjenici je nastala cijela nauka zvana cross-browser compatability. Sve je počelo još dok je internet bio jako mlad. Kasnih 90-tih počeo je poznati rat browsera između Netscape Navigatora i Microsoft Interne Explorera. 1994. godine osnovan je World Wide Web Consortium (W3C) koji od onda pokušava uvesti standarde svim kompanijama koje razvijaju browsere. Od tada puno toga se promjenilo na bolje, ali cross-browser compatibility problem još nije u potpunosti rješen. To je proces koji i danas traje i čiji smo svjedoci. U tablici je popis svih postojećih rendering engine-a i browsera koji ih koriste.
| Rendering Engine | Browser |
|---|---|
| Gecko | Firefox, Camino, SeaMonkey, Thunderbird, K-Meloeon |
| KHTML | Konqueror |
| Presto | Opera, Nintendo Browser |
| Trident | Microsoft Outlook, Internet Explorer, MSN, Google Talk |
| Webkit | Chrome, Safari |
Izvor: Wikipedia
Ipak, ovu priču sam pokrenuo jer sam prije par dana imao problema sa Opera browserom. Jedno tekstualno input polje lijepilo se za vrh stranice, za razliku od drugih browsera, nije bilo paddinga. Pošto nije baš lako naći css hack za Opera browsere želim ovo podjeliti sa vama.
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { /* Safari-Opera css hack ovdje */ } |
Izvor: css-tricks
Malo bi se zadržao na ovome, pošto css hack treba koristiti sa velikom dozom opreza.
Cross-browser compatability se može rješiti na dva načina. Prvi je već spomenutim css hack. Ovaj postupak ima velike mane i generalno pravilo bilo bi izbjegavati css hack koliko god je moguće. Zašto? Css hack za sadašnju verziju verziju određenog browsera vrlo vjerovatno neće raditi u nekoj budućoj. Ovo je brzo i jednostavno rješenje ali ga koristite samo u nuždi i sa oprezom.
Ovdje je popis nekih od css hackova.
IE 6 and below * html {} IE 7 and below *:first-child+html {} * html {} IE 7 only *:first-child+html {} IE 7 and modern browsers only html>body {} Modern browsers only (not IE 7) html>/**/body {} Recent Opera versions 9 and below html:first-child {} |
Izvor: css-hacks
Drugi način je učitati poseban css file za svaki problematičan browser. Ovo je trenutno prihvatljivo i legalno rješenje. Mana nu je ta što mi ipak ne želimo raditi poseban css file za svaki browser. Također ni sami browseri ne vole da učitavaju posaban css file samo zato što su drugačiji. Ovo je poput browser rasizma. Primjenjujte ovo kao opciju, ne kao pravilo, tak kada ne postoji drugo rješenje.
Dakle, kako učitati poseban css file za određeni browser? U nastavku su primjeri najčešćih problematičnih browsera.
Svaki css file treba pozvati u <head> dijelu html stranice
Svi IE browseri
<!--[if IE]> <link rel="stylesheet" type="text/css" href="all-ie-only.css" /> <![endif]--> |
Svi browseri osim IE
! = osim
<!--[if !IE]><!--> <link rel="stylesheet" type="text/css" href="not-ie.css" /> <!--<![endif]--> |
Samo IE 7 browser
ili bilo koju drugu verziju u zavisnosti od navedenog broja
<!--[if IE 7]> <link rel="stylesheet" type="text/css" href="ie7.css"> <![endif]--> |
IE 7 ili noviji
gt – “greater than” = veći od
gte – “greater than or equal” = veći od ili jednak
<!--[if gt IE 6]> <link rel="stylesheet" type="text/css" href="ie7-and-up.css" /> <![endif]--> |
<!--[if gte IE 7]> <link rel="stylesheet" type="text/css" href="ie7-and-up.css" /> <![endif]--> |
IE 7 ili stariji
lt – “less than” = manji od
lte – “less than or equal” = manji od ili jednak
<!--[if lt IE 8]> <link rel="stylesheet" type="text/css" href="ie7-and-down.css" /> <![endif]--> |
<!--[if lte IE 7]> <link rel="stylesheet" type="text/css" href="ie7-and-down.css" /> <![endif]--> |
Izvor: css-tricks
Ovaj post raspoloživ je i na drugom jeziku: English
(No Ratings Yet)
Loading...
[…] big thanks goes to an article CSS Hack or New CSS File for Problematic Browsers?. I took the liberty to shorten this hack a little since it seems the first part of the hack […]
Thanks Samuli for your response. I’m glad if my article helped you.