IE:hover {nyní:jednodušeji;}
Na CSS-D se objevilo několik nových zajímavých řešení problému absence podpory různých pseudotříd v IE.
Známe všelijaké klasické metody – od připojování JavaScriptové podpory v samostatném JS souboru (představeno v různých Suckerfish menu), přes přídavné behavior HTC komponenty až po různé krkolomné expressions. V konferenci se ale mihlo zajímavé řešení pomocí inline behavior, ze kterého nakonec různým ořezáváním zbytečností a doladěním vznikl postup používající expression, který rozhodně stojí za zmínku.
Klaus Hartl představuje toto jednoduché a elegantní řešení, které je naprosto ideální pro vložení do podmíněného separátního stylopisu pro IE:
element {
background-color: expression(
this.onmouseover = function() { this.className += ' hover'; },
this.onmouseout = function() { this.className = this.className.replace(' hover', ''); }
);
}Uvedený kód přidá danému elementu třídu s názvem hover, kterou můžeme vzhled při :hoveru ovlivnit. Ideální je tuto třídu přidat do výčtu v selektoru stavu daného elementu.
Kód by tedy mohl vypadat např. takto:
/* BĚŽNÝ STYLOPIS: */
p { color: #333; }
p:hover, p.hover { color: #900; }a ještě separátní styl, připojený pomocí podmíněných komentářů IE:
/* PODMÍNĚNÝ STYLOPIS PRO IE */
p /* IE:hover */ {
background-color: expression(
this.onmouseover = function() { this.className += ' hover'; },
this.onmouseout = function() { this.className = this.className.replace(' hover', ''); }
);
}a :hover pro MS Internet Explorer je na světě, viz ukázka.
Toto „CSS“ sice není zrovna dvakrát košér pro oči normálních prohlížečů či robotů, proto výrazně doporučuji použít výše zmíněné podmíněné komentáře, ale při naservírování pouze pro IE (zvlášť pokud již separátní stylopis používáme) se jedná o zjednodušení berličky pro zaktivování těchto pseudotříd.
Pochopitelně se tento postup dá aplikovat i na další pseudotřídy :focus a :active, stačí jen změnit odpovídající JS ovladače událostí.
Update:
Výše uvedené řešení chybuje v IE 5.0 a 5.5 – pro expression, která funguje i v těchto viz IE:hover {také-pro:IE5;}.
Čtvrtek, 14. 7. 2005 7.50 | Trvalý odkaz | Trackback
[1] Shaman
To vůbec není špatné řešení. Líbí se mi to, mnohem lepší neš *.htc. Nádhera!
15. 7. 2005 10.01
[2] Daniel Steigerwald
No mozná to bude rychlejsi nez muj oblibeny hover.htc, kde, nedali si clovek pozor, a priradi behaviour treba k tagu, ma prohlizec co delat aby to zvladl. Vzdy je lepsi prirazovat tridam, nez tagum.
15. 7. 2005 10.03
[3] Leo
Asi jsem konzervativni purista, ale nejcistsi mi prijde externi soubor s JavaScriptem, coz krasne oddeli HTML, CSS a JS, a patricny kod se stahuje jen pokud je potreba, Leo
15. 7. 2005 10.08
[4] Titlak
Nefunguje pod MSIE 5 a 5.5 :(
15. 7. 2005 10.33
[5] Pachollini
Problém je, pokud člověk ty události pak chce zpracovat ještě jinde, ale to nebude příliš častý případ.
Navíc to přiřadí background-color, bál bych se, že se to pak bude s něčím tlouct:
#menu li {background-color: [expression]} .cervena {background-color: red;}
Co to udělá u prvku #menu li.cervena ?
Ne že by to nebyly řešitelné problémy (nefunkčnost v IE 5 je horší), ale asi zůstanu u behaviors, připadá mi to čistší.
15. 7. 2005 10.55
[6] kvezt
co ona zminovana rychlost? co vytvorit priklad (jsem linej a bude lepsi kdyz to bude tady hezky pohromade.)) s nejakou opravdu dlouhou tabulkou (tak 500 radek trebas) a zkusit menit bg radku…
15. 7. 2005 11.38
[7] Tomáš Kučera
Super!! To je pekne reseni :-)
15. 7. 2005 16.03
[8] Plaváček
Hezké, leč pro profesionály nepoužitelné. Pavla Kouta napadlo, že by to bylo pěkné využít na vysouvací navigaci. Nefukčnost v IE 5.5 celý nápad diskvalifikuje do rčení „pěkné, ale naprd“. Bohužel.
15. 7. 2005 18.43
[9] Jan Brašna
[3] Toto by mělo skutečně být schované v „odpadním“ stylopisu pro IE, tudíž se to také stáhne jen dle potřeby, navíc to vlastně pro zbytek světa ani neexistuje.
[4] Ano, to je celkem problém :(
[5] Dá se tam vložit ještě jako první expression
kteréžto by to mělo vyřešit 100%, ale jde to i bez toho, viz příklad níže. Mně se behaviory těžce nelíbí, ale pokud jsou také vloženy do podmíněných stylů, tak proč ne. Jen musí být správně nastavený server a posílat odpovídající content-type!
[6] http://www.janbrasna.com/…over-tbl.htm – Kolik tam je řádek nevím, ale funguje to v rámci možností (aneb ne zcela přesně se odpalují krysí události, ale samotné zpomalení nesleduji). Je zde také vidět, že zápis nekoliduje s pozadím.
[8] Přesně pro ten účel jsem to také předpokládal ;) Kvůli nečemu jinému by podobné blbosti neměly cenu. No, budu přemýšlet, jak se vyhnout dynamickému přiřazení funkce, aby to šlo i v 5.5, do té doby bych těch pár procent mohl ignorovat :D
15. 7. 2005 21.44
[10] halogan
[9] http://www.janbrasna.com/…over-tbl.htm Sleduju rychlost tady na nejakym odpadnim IE a mensi sekani je znat :/
17. 7. 2005 5.11
[11] Fred
Tak tedy asi pěkně děkuji, zdá se že po testování toho triku se mi poškodilo IE5 a IE5,5. Ladím jiné scripty a stále mi vše hází chybu Line:170; Char: 18; Error: Neočekávaný kvantifikátor; A to na čemkoliv co předtím fungovalo. Dokonce i na stránkách, kde žádný script není. Děje se to jenom mně, nebo ještě někomu, kdo to v těhle prohlížečích zkoušel a má multiinstalaci více verzí IE?
17. 7. 2005 10.18
[12] Fred
Tak se omlouvám, chyba je u mě. Po testování se to sice seklo, ale důvodem je konflikt s rozšířením TurnAbout http://www.reifysoft.com/turnabout.php , je to něco jako GreaseMonkey. Musel jsem ho v IE5 a IE 5.5 vypnout a je po problému, už jsem se děsil :-)
17. 7. 2005 10.34
[13] Jan Brašna
[10] No, zpoždění tam je při rychlejším přejíždění vidět i na rychlých strojích, ono se IMHO občas neodpálí onmouseout události (stejně jako ti leckde na webu zůstávají rozbalená menu).
OT: A pak věř statistikám, to tvoje IP má přiřazenou síť v Salt Lake City, UT ;) Dobrý matení nepřítele ;)
[11][12] :DD
Jinak zatím zkouším dohnat funkčnost i v IE 5.5, ale zatím to vypadá na boj s větrnými mlýny
17. 7. 2005 16.42
[14] Shaman
Hmmm, tak nic. A to jsem byl na začátku tak nadšený. Ale bez MIE 5.5 je to přesně, jak to řekl Plaváček. Ach jo…
17. 7. 2005 17.40
[15] Pachollini
No, já bych tak nehořekoval, osobně mi přijdou behaviors opravdu v pohodě, fungují a za nějaké ty roky, co je používám s nimi neyl žádný problém. Odpovídající content-type si můžeš poslat sám, třeba v PHP pomocí header() (a rovnou přitom nastavit i „nekonečnou“ expiraci v keši).
17. 7. 2005 23.13
[16] halogan
[13] Under cover all the time :D
18. 7. 2005 0.03
[17] Fred
Tak jsem se taky o to pokoušel a nepodařilo se. Při hledání jsem narazil na jinou zdařilou fičurku http://www.matrix.org.cn/…/001172.html tahle funguje i v IE5.
19. 7. 2005 12.11