T&R splet blog o spletnih storitvah. Razgaljamo tehnologijo!

reference spletnih strani
6th September

CSS triki – selektorji za Internet Explorer

Znano je, da Microsoft HTML in CSS kodo generira malo po “svoje” in ne upošteva v celoti pravil W3C priporočil. Rezultat je napačno prikazana stran v brksalnikih IE6 in IE7 (IE6 je sploh katastrofa). Nekaj let nazaj teh težav ni bilo, ker smo pač vsi optimirali strani za Internet Explorer. Danes pa je brskalnikov že malo morje, samo največjih 4 (Explorer, Firefox, Safari, Opera,…). Kako odpraviti razlike med generiranjem HTML in CSS kode med posameznimi brkskalniki?Rešitev je več. Od ločenega nalaganja celotnega CSS dokumenta glede na brskalnik z javascriptom pa do CSS trikov, ki izkoriščajo “luknje”, oz bolje specifike posameznih brskalnikov.

Največkrat uporabljam selektorje(ukaze) za IE brskalnika in sicer:
[css]
IE 6: “* html imeDiv { css:koda; }”
IE 7: “*:first-child+html imeDiv { css:koda; }”
[/css]

Za ostalo pa mogoče pridejo v poštev sledeče:
FF, Opera, Safari (brez IE 7): [css]html>/**/body imeDiv { css:koda; }[/css]
Opera v9: [css]html:first-child imeDiv { css:koda; }[/css]

CSS triki največkrat  pridejo v poštev pri raznih float ukazih, kombinacijah margin in padding, nujno recimo pri prvem naslovu v div, kjer IE top-margin ignorira, FF in ostali pa ga upoštevajo, kombinacija H1 in p zopet razlika pri margin ukazih.


16x komentirano na “CSS triki – selektorji za Internet Explorer”

  1. ace je napisal:

    A ni boljša rešitev uporabiti dodatni CSS file za IE, če je pač treba uvesti kakšne hacke zaradi nedelovanja?

  2. Mesko je napisal:

    Hmm, tale način se mi zdi malo zakompliciran … jst po navadi vse probleme rešim szi !important tako, da nisem še imel problemov, ki jih ne bi rešil szi njim … drugače pa ja … raje 2 ali več CSS datotek in potem szi JS-jem spremeniti glede na browser

  3. brezimenko je napisal:

    So bli časi, ko sem tut jst mev v css datotekah cev kup takih trikov. Potem pa sem začel delat v eni firmi, kjer so me naučili, da ne rabiš niti enega trika in bo stran še vedno izgledala isto v vseh brskalnikih. Samo včasih je potrebno malce več telovadbe.

  4. ace je napisal:

    brezimenko> kako pa rešujete transparentne pngje v ie6?

  5. brezimenko je napisal:

    Ni potrebe. Vsaj odkar sodelujemo (kakšno leto), je ni bilo. JPG za fotografije, gif za vso ostalo grafiko. Bi mi podal primer, kjer bi bla uporaba pngjev (predvidevam da zaradi delne transparence) sploh nujna oz. potrebna? 100% transparenco pa tudi ie prebavi.

  6. Emanuel je napisal:

    Pametno je imeti ie.css. Razni hacki po css-u suckajo. Pravtako sucka zloraba ! important ukaza. Najboljša rešitev se mi zdi, da narediš ie.css za VSE ie-je, potem pa znotraj tega cssa, pač ločiš za različne verzije, na način kot je opisal Roky.

    Za ie6 png, pa tole:

    * html #element {background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”/path/to/image.png”, sizingMethod=”crop”);}

  7. Roky je napisal:

    Kot Emanuel pravi je pomoje za CSS res najbolje includanje posebne datoteke, drugače pa za ie6 png obstaja tudi elegantna rešitev preko javascript-a, ki ga samo vključiš. Več o tem:
    http://trsplet.com/blog/2008/07/17/ie-60-png-transparentnost-resitev/

  8. Antony je napisal:

    Metod je seveda več. Vsak ima svoje favorite. Strinjam se z Brezimenkom, da je potrebno pravilno postaviti osnovo. Toda do sedaj je bil še vedno kakšen detajl, ki so ga različno prikazovali različni brskalniki(ne samo IE).
    Kaj storiti v tem primeru? Lahko bi se sicer igral z postavitvijo HTML elementov in CSS ukazi, da bi uskladil vse brskalnike, vendar dvomim da to zadošča za vse primere (margin+padding, float ukazi, position,…. Za vsak brskalnik narediti svoj CSS s tisto specifiko? Meni osebno je še vedno lažje s CSS selektorji podelati razlike med brskalniki. Pomojem tudi ceneje, ker vsaka telovadba in eksperimentiranje nanese kar precej časa.

  9. brezimenko je napisal:

    Niti ne, ker teh for ni tako veliko (kar si našteval pa še kej zraven) in ko jih enkrat poznaš, ne rabiš veliko dodatnega časa.
    @Roky: kaj pa tisti, ki imajo js izklopljen?

  10. Roky je napisal:

    Delate non-javascript site?

  11. brezimenko je napisal:

    Vse strani, ki jih naredimo, uporabljajo minimalno js. Velika večina samo za povečavo oz. zmanjšanje teksta na strani pa še te linke prikažeš z js, tako da se sploh ne pojavijo, če ni vklopljen. Pa še kkšen lightbox za slike, kjer se slika ravno tako pokaže, če js ni vklopljen. To je vse.

  12. ace je napisal:

    Brezimenko> Primerov najdeš na internetu veliko, praktično vsak malo bolj svoboden designer bo hitro prišel na idejo, ki je drugače kot z »variabilno transparenco« ne boš uspel rešiti.
    Roky> Jaz javascript rešitve nebi označil za »elegantno«, saj v praksi izgleda tako, da imajo vsi PNGji sivo ozadje dokler se stran ne naloži in se izvede javascript. V tem primeru se mi zdi veliko boljša rešitev specifični selectorji za IE6.
    Anthony> Mislim, da vsi stremimo k tem, da z enotnim CSSjem pokrijemo vse browserje, ko pa prideš do situacije, ko dejansko nimaš alternative, potem se rabiš odločiti za najboljši način, kako to rešiti. In tukaj mislim, da je browser specific CSS preglednejši in tudi optimalnejši, saj ga ostali niti ne rabijo naložiti.

  13. Roky je napisal:

    ace, tisto lahko modificiraš da imajo display: none, potem jim poštimaš transparentnost, potem pa prikažeš. No, CSS je v tem primeru boljša rešitev, se strinjam, samo mogoče malce več dela.

  14. Antony je napisal:

    ace > lep povzetek! Se strinjam, čeprav ločen CSS za različne browserje zaenkrat nisem potreboval.
    Roky > javascript je mogoče hitr zate, ki ga obvladaš, zame je pa muka.

    Sicer pa itak probleme povzroča v večini IE6. Tako ali tako kasneje pogruntaš na kakšen način elemente postavit, da ne bo težav.

  15. CSS triki za Google CHROME brskalnik | .: TRSplet - internetne storitve .: je napisal:

    [...] komentarji Antony – Chrome – uporabni vsakdAntony – Css triki – selektorji Roky – Css triki – selektorji zaace – Css triki – selektorji za brezimenko – Css triki – selektoRoky [...]

  16. brezimenko je napisal:

    @ace: ponavadi se stranko prepriča, da je za optimizacijo bolše, da dizajni niso preveč “svobodni” :)

Dodaj komentar

You must be logged in to post a comment.