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

reference spletnih strani
« Primerjava Mozilla Firefox in Google Chrome
PHP – Konvertiranje datotek CP1250, UTF-8 – iconv »
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:

PLAIN TEXT
CSS:
  1. IE 6: "* html imeDiv { css:koda; }"
  2. IE 7: "*:first-child+html imeDiv { css:koda; }"

Za ostalo pa mogoče pridejo v poštev sledeče:
FF, Opera, Safari (brez IE 7):

PLAIN TEXT
CSS:
  1. html>/**/body imeDiv { css:koda; }

Opera v9:

PLAIN TEXT
CSS:
  1. html:first-child imeDiv { css:koda; }

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.

Deli s skupnostjo:

  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Podobni članki:

  1. Internet Explorer 8 CSS hack
  2. Več nivojski CSS selektorji
  3. CSS triki za Google CHROME brskalnik
  4. Zakaj odsvetujemo uporabo brskalnika Internet Explorer?
  5. FireBug v Internet Explorer-ju
  6. Kako ohraniti pregledno strukturo CSS dokumenta
  7. Opera 9.5 – prvi brskalnik opravil Acid3 test
  8. CSS 3 delovne skupine – zadnji sklepi
  9. Kdaj uporabiti class in kdaj id oznako za CSS selektorje
  10. Zaokroževanje robov s CSS ukazov

Antony || Saturday, September 6th, 2008 ob 2:00 pm || Splet, Splet (XHTML, CSS) || RSS 2.0 | Dodaj komentar || Trackback


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

  1. ace je napisal:
    September 6th, 2008 ob 9:04 pm

    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:
    September 6th, 2008 ob 10:53 pm

    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:
    September 7th, 2008 ob 11:28 am

    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:
    September 7th, 2008 ob 4:31 pm

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

  5. brezimenko je napisal:
    September 7th, 2008 ob 8:12 pm

    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:
    September 8th, 2008 ob 8:27 am

    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:
    September 8th, 2008 ob 8:35 am

    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:
    September 8th, 2008 ob 9:35 am

    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:
    September 8th, 2008 ob 2:55 pm

    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:
    September 8th, 2008 ob 4:18 pm

    Delate non-javascript site?

  11. brezimenko je napisal:
    September 8th, 2008 ob 6:12 pm

    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:
    September 8th, 2008 ob 9:34 pm

    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:
    September 9th, 2008 ob 7:29 am

    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:
    September 9th, 2008 ob 8:10 am

    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:
    September 9th, 2008 ob 8:15 am

    [...] 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:
    September 9th, 2008 ob 4:22 pm

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

Dodaj komentar