ugrás a tartalomhoz

CSS trükkök Internet Explorer 7-re

Hojtsy Gábor · 2006. Ápr. 30. (V), 08.47
Két álláspont tartja magát a CSS stílusok kialakítói között. Az egyik szerint külön stíluslapokat kell készíteni az elvault IE 6 vagy régebbi IE böngésző motorok számára, és ezt feltételes megjegyzésekkel kell elrejteni a szabványosabb böngészők elől. A másik megközelítés szerint egyszerű, jól felismerhető trükköket kell bevetni egy CSS fájlon belül, mint a * html {}, melyet csak az IE 6 és a régebbi IE-k dolgoznak fel. Az első módszer időtálóbb, ám kényelmetlenebb, a másodiknál megvan az esély, hogy kijavítják a kihasznált hibát. Ez történt az Internet Explorer 7-ben is.

Mivel a * html {} trükk már nem használható az IE 7-ben, David Hammond előállt néhány lehetséges megoldással. Jópár javaslata mellett megjegyzi, hogy azok nem érvényes CSS kódot ereményeznek, viszont van egy érvényes kiválasztókat használó kész javaslata azoknak, akik vele ellentétben a feltételes megjegyzések helyett a CSS trükkök hívei, és IE7-ben is ezutóbbiakat használnák szívesen.

  • IE 6 és korábbi verziókban a * html {} használható a HTML gyökérelem kiválasztására.
  • IE 7 és korábbi verziókban a *+html, * html {} kombinációval választható ki a HTML gyökérelem.
  • Csak IE 7 kiválasztására használható (az IE 8 megjelenéséig legalábbis) a *+html {} kiválasztó a HTML gyökérelemhez
  • Csak az IE 7-ben és a modernebb böngészőkben aktív a html>body {} kiválasztó a HTML törzselemre
  • A modern böngészőkben, az IE 7 kihagyására használható a html>/**/body {} a HTML törzselem kiválasztására

David nem győzi többször is megjegyezni, hogy a legjobb módszer még mindig a feltételes megjegyzések használata, hiszen azok a későbbi Internet Explorer verziókban is a kívánt célt fogják elérni, nem kell CSS fájlukat frissíteni az új verzió megjelenésekor.
 ■
1

Béta!!

Jano · 2006. Ápr. 30. (V), 11.00
A végleges IE7 még nem jött ki, a fenti hackek csak a béta alapján születhettek. Megvan az esély, hogy akár ezeket a hibás értelmezéseket is javítani fogják a végleges verzióra.
2

layout complete

Hojtsy Gábor · 2006. Ápr. 30. (V), 12.26
Mint ahogy David is megjegyzi, és már nálunk is szerepelt az IE 7 jelenleg már layout complete, azaz ilyen jellegű változtatásokat már nem szeretnének megtenni a fejlesztők a hírek szerint, hogy az IE 7 kompatibilitásra fel legyenek készülve a weblapok, és ne egy utolsó pillanatban módosított szoftverre (mozgó célpont) kelljen tervezni.
3

Nem jó gyakorlat

Jano · 2006. Ápr. 30. (V), 13.05
Ok. Azonban pont az IE7 és a csilag-html hack példájából kéne tanulni és nem belemenni egy csillagpluszhtml hack használatába, mert nem tudni mikor fogják ezt az újabb félreértelmezést kijavítani.

Fejelsztő oldaláról: Mi lesz ha MS a 7.1-ben kijavítja? Akkor fél év múlva lehet visszamenni oldalakhoz és javítgatni.

Másik oldalról: A webes fejlesztők minden alkalmat megragadnak arra, hogy kritizálják a MS-ot, hogy nem tartja be a szabványokat. A MS válasza pedig erra az, hogy neki a szabványok mellett a való életben előforduló lapokra is figyelemmel kell lenni. Az új plusszos hacket ha nem terjed el, egy tollvonással ki lehetne javítani, ha azonban a fejlesztők el kezdik használni akkor a MS-nak ezen is el kell gondolkodnia, hogy akkor hogyan is kezelje.
4

nem kell elgondolkodnia

Hojtsy Gábor · 2006. Ápr. 30. (V), 14.32
Azon sem gondolkodtak el, hogy a *html hacket hogyan kezeljék. Nem kezelik, kijavították. Megadták a szerintük legjobb módszert, használjunk feltételes megjegyzéseket.

A Weblaboron is felbukkannak mindig olyan arcok (például Bártházi András ilyen :), akik úgy gondolják, hogy a jól felismerhető hackek számukra elegendő megnyugtatást adnak, nem kell két külön CSS stílus fájlt karbantartaniuk, jobban átlátják, hogy mit csinálnak. Naigen, kell majd nézni a kiválasztókat az új IE megjelenése miatt, de ugyanezt meg kellene tenni a külön CSS fájllal is (ha előre kompatibilis feltételes kommentet használnak, ha meg nem, akkor a kommentet kellene megváltoztatni legalább, és utána még a CSS-t is megnézni). Ebből a szempontból szinte mindegy, hogy *html-re keresel a CSS-ben, vagy megnyitsz egy új fájlt, az első esetben viszont rögtön látod a környezetben, hogy miért is vannak a speckó IE stílusaid. Fejlesztői szempontból nekem úgy tűnik, hogy ugyanannyi dologra kell figyelned, ugyanannyit kell módosítanod, csak máshol.

Nem szeretnék ítéletet mondani egyik módszer fölött sem, a blog bejegyzésben is igyekeztem legalább olyan arányban ismételgetni, hogy a feltételes megjegyzések jelentik David szerint az üdvözítő utat, mint amennyiszer David is leírta. Ez SZVSZ nem jelenti azt, hogy el kellene felejteni a CSS trükköket, azok egy más megközelítésű megoldást adnak azoknak, akiknek ez áll kézre.
5

ms elgondolkodás, vannak biztonságos hackek

Jano · 2006. Ápr. 30. (V), 16.18
Az elgondolkodás alatt valami olyasmire gondoltam mint anno a doboz modell és a doctype viszonya.

Ha valaki mégis hackek melett dönt akkor törekedjen legalább a kijavított hibára épülő "alúl áteresztő" szűrőket használni.
6

Blogmark

paal · 2006. Ápr. 30. (V), 19.33
Ja, ezzel kapcsolatban volt egy blogmark is "Stop Hacking, or be Stopped" címmel Dave Shea "tollából".

Üdv, Pali
7

ez már ki van javítva a 7-esben?

inti · 2006. Május. 1. (H), 22.27
Én már jó ideje azt a kis hacket használom, hogy a css attribútum elé mondjuk egy *-ot teszek, így azt a Firefox nem tekinti értelmesnek, azaz a height: 234px; *height: 235px; firefoxban 234, IE-ben 235 lesz. NEM ne keverje senki, ez nem a STARHTML hack, de rengeteg helyen használjuk a site-unkon, és kiváncsi lennék ezzel mi lesz az IE7-ben?
8

egyelőre műkődik

Jano · 2006. Május. 1. (H), 22.39
Snook Tergeting IE7 using CSS bejegyzése szerint még műkődik, de a hasonló (egy nem betű első karakterre épülő) "underscore hack"-et már javították.

Megj: eme 2 hack hibajavítása alapján nekem elég gyanus a MS hibajavító elgondolása, mintha nem a logikai hibát (html felett még egy elem, illetve hibás tulajdonság név) kezelnék, csak az ismert előfordulásokat hegesztenék meg.
9

"... csak az ismert előfordulásokat hegestenék meg"

Anonymous · 2006. Május. 2. (K), 10.52
Sajnos ez jellemző az egész rendszerre. Toldoznak, foldoznak, nem javítanak csak elrejtenek. Igazából az lenne jó, ha fognák magukat és javítandó dolgokat nem újabb tákolással, hanem szabványossá tétellel és a korábbi verzió ignore-álásával oldalnák meg.
Mert akkor a css-en belül pl a * html{...} és a html>body{...} közül akkor már a másodikat választaná és az elsőt kihagyná, mert mostmár az hibás nála. És mivel szerintem sokan írják oda mindkettőt, így maradna minden működően. És a korábbi IE-k is mennének jól, mivel azok meg a szabványosat nem ismerik.

A *+html{...} szerintem teljesen fölösleges lépés volt.
10

Important jelölés?

suexID · 2006. Május. 2. (K), 20.20
Az !important-et ismerni fogja az új IE7?
11

IE6 is

Bártházi András · 2006. Május. 3. (Sze), 08.13
Az !important-ot az IE6 is ismeri. Van benne egy bug, de attól még egész jól használható.
12

important bug

Fekete Ferenc GDA · 2006. Május. 5. (P), 06.54
igen, épp a bug miatt használható hack-elésre:)

margin: 0 0 0 5px !important;
margin: 0 0 0 10px;
Na, akkor leszünk gondban, ha az important bugot kijavítják, de a margin duplázást nem (float bug):)
13

display:inline

Jano · 2006. Május. 5. (P), 08.29
Én margó duplázás ellen a display:inline szabály hozzávételét szoktam alkalmazni. Ez IE-ben megoldja ezt (és más float hibákat is), szabvány böngészőkben pedig nem zavar be. Szabvány szerint ugyanis egy floatolt elem blokk tipusúvá vállik.
14

átok

Solo · 2007. Május. 24. (Cs), 01.32
sziasztok! asszem elmegyek asztalosnak... készítettem egy drupal oldalt, és ie6-ban is és firefoxban is szép volt meg jó, amíg ki nem jött az ie7. a bluebreeze sminkből indultam ki. megjavulok ígérem... szóval a jobb oldali sidebar ie7ben nem átallik átcsúszni bal oldalra (eredeti bluebreeze sminkel is). No, uccu neki készítettem egy alternatív css-t, ahol adtam a divnek egy position:relativot meg egy left:jónagyszámot és jó lett ie7ben is, és örültem, és feltöltöttem online, és ott meg nem volt jó. szóval kesürités után egy localhostos és egy online tökugyanolyan honlapot nem ugyanúgy jelenít most meg az ie7esem (nem vistán vagyok hanem xp /integrált-sp2esen). Muldör és Szkálli már úton vannak... éjjel fél kettő van... megyek aludni.
akinek volt/van hasonló problémája jelezze lécci.
15

google

gex · 2007. Május. 24. (Cs), 09.11
http://www.google.hu/search?q=bluebreeze+ie7 után http://drupal.org/node/115604
ha meg az a kérdés miért mutat mást az ie7, akkor annak szentelj egy új témát, mert nem tartozik a "css trükkök ie7-re" témakörbe.
16

köszi

Solo · 2007. Május. 24. (Cs), 11.36
köszi szépen, előbb aludnom kellett volna, aztán postolni :)

update: akit érdekel, ez volt a gond:
#sidebar-right {
  .margin-left: -150px; /* IE7 Fix */
}

* html #sidebar-right {
  margin-left: -150px; /* IE6 Fix*/
}
egy pötty miatt nem aludtam tegnap.... ááá... még1x köszi gex