CSS hacky pro nejpoužívanější prohlížeče

 |  HTML, CSS, JavaScript  |  7 816x
CSS hacky pro nejpoužívanější prohlížeče

Odlišené vykreslení různými prohlížeči je věc, která dříve či později potrápí každého kodéra. Ať už se jedná přímo o bugy, nebo pouze o drobný rozdíl při vykreslování konkrétních prvků, je potřeba dosáhnout shody ve všech majoritních prohlížečích. Chyby Internet Exploreru a způsoby, jak je obejít jsou dávno obecně známé, ovšem o umravnění zlobivého Firefoxu nebo Google Chrome se tolik nemluví. I když je v kodérově nejlepším zájmu, psát styly tak, aby hacků použil co nejméně, nastávají situace, kdy se jim vyhnout nemůžeme. Oprava stylů po někom jiném je práce, kterou nikdo nemá rád a nechce dělat, ale také vhodná chvíle, kdy nasadit CSS hacky.

Tento článek je z roku 2010, tudíž nemluví o prohlížečích posledních několika let. Můžete se zkusit podívat na článek novější: CSS hacky pro nejpoužívanější prohlížeče: díl II.

Jelikož jsem odpůrcem podmíněných CSS pro různé prohlížeče a mám rád vše dohromady, popíšu v článku pouze takzvané inline hacky. Nejdříve si vezmeme do parády právě Internet Explorer. Mějme div s třídou "div":

Internet Explorer 6

Verze 6 už sice takový dinosaurus mezi prohlížeči, bohužel ho ale stále spousta uživatelů odmítá aktualizovat. Pro něj je to jednoduché:

* html .div {border:1px solid blue;}
.div {_border:1px solid red;}

Připsání * html před třídu prvku nám zaručí, že skupinu vlastností si vezme právě jen IE 6.  Lze také použít známy podtržítkový hack.

Internet Explorer 7

U něj již to tak snadné není. Můžeme použít hvězdičku (nebo jakýkoli jiný paznak) před názvem CSS vlastnosti, čímž ovlivníme IE7. Problém je ale v tom, že tomuto hacku porozumí i starší verze, takže pokud opravujeme chybu pouze ve verzi 7, je potřeba vlastnost navrátit do původní hodnoty pro IE 6.

.div {*border:1px solid yellow;}
.div {&border:1px solid orange;}

.div {*border:1px solid yellow;_border:1px solid black;}

Internet Explorer 8

U verze 8 je to stejné jako u sedmičky: použijeme opět speciální hack, který pochopí 8 a 7, ale 6 už nikoli. (Nezapomeňte na "lomeno 9" na konci).

.div {border /*\**/: 1px solid violet\9;}

Firefox

Ač se to nezdá, i Firefox nám může někdy pěkně znepříjemnit kódování stránek. Jako jeden z bugů mohu zmínit odsazení floatovaného checkboxu. To je bohužel problém, kde floatovaný checkbox je v každém prohlížeči odsazen úplně jinak. Následující hack má ale nevýhodu, že ovlivní i Internet Explorer 7. To se může občas hodit, ale potřebujeme také zápis, který ovlivní pouze a jenom Firefox.

.div, x:-moz-any-link {border:1px solid red;} /* FF a IE 7 */

@-moz-document url-prefix() { /** FF */
	.div {border:1px solid green;}
}

Safari a Google Chrome

Hack pro prohlížeče na jádru KHTML je sice velmi špatně zapamatovatelný, ovšem funguje výborně:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .div {border:1px solid pink;}
}

Opera

Operu jsem musel hackovat opravdu snad jen párkrát, ale jsou situace, kdy znalosti hacku pro Operu využijeme.

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
	head~body .div {border:1px solid green;}
}
Facebook Twitter Google+

Komentáře k článku "CSS hacky pro nejpoužívanější prohlížeče"

Gravatar
Petr Kramář 4. 4 2010, 19:23
1/15 Neděle 4. Dubna 2010, 19:23  |  Opera, Windows 7

Hacky pro webkity a Operu jsou tak užasné až doufám, že jich nebude potřeba :-) člověk v nouzi někdy prostě sáhne po řešení kterému se někdy ani mu samotnému nezamlouvají a to jsou přesně tyto. Díky za ně :-)

Gravatar
Milan 7. 4 2010, 07:23
2/15 Středa 7. Dubna 2010, 07:23  |  Chrome, Windows XP

Prečo sa všetci snažia o 100% zhodu v zobrazení v rôznych prehliadačoch? Ako si mi uteká pointa. Bežný užívateľ používa jeden primárny prehliadač a netestuje či je to v IE odsadené o 2px v pravo oproti FF. Mojimi prioritami pri návrhu a samotnom kódovaní sú 1.validita 2.seo a aby samotný design bol užívateľsky prívetivý.
Jediné hacky, ktoré som ešte ochotný robiť sú tak z PNG obrázkami pre IE6:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoa-der(enabled='true', sizingMethod='scale', src='/public/images/main_bg.png');
background-image:none;

Je pravda, že nerobím žiadne super zložité weby.

Gravatar
Milan 7. 4 2010, 07:32
3/15 Středa 7. Dubna 2010, 07:32  |  Chrome, Windows XP

Ešte k tomu checkboxu. Nemám to síce otestované ale nepomohlo by zresetovať formátovanie a dodatočne ho nastaviť na požadovanú hodnotu?

"Strielam od brucha" tak snad to nebude úplna hovadina :).

input {
paddin: 0px;
margin: 0px;
}

#form input {
paddin: 0px 2px;
margin: 0px;
}

Gravatar
Mike 7. 4 2010, 08:49
4/15 Středa 7. Dubna 2010, 08:49  |  Opera, Windows Vista

@: Většinou je důvod ten, že to chce šéf :-) Jinak validita je vcelku bezpředmětná... to je jen taková věc pro dobrý pocit. (Je jasné, že tam nesmí být např. duplicitní IDčka, ale např. zastaralé tagy a atributy jsou opravdu bezpředmětné).

Pokud jdi někdy kódoval nějaký složitější formulář (takový, který vezme i 3-4 hodiny), chápal bys, že někdy je to zobrazení prostě tak hrozné, že se to nemůžeš nechat být. A ten hlavní důvod, jak jsem již zmínil je oprava stylů po někom jiném.

Jinak co se týče tvého resetu, moc tomu nepomůže... Vynulování paddingu to ještě zhorší a margin inputy defaultně žádný nemají (nikde, naštěstí).

Gravatar
Milan 7. 4 2010, 09:54
5/15 Středa 7. Dubna 2010, 09:54  |  Chrome, Windows XP

Mám pocit ,že hádzanie validity do pomyselného koša je nový hit. Každý o tom hovorí ako o nepodstatnej veci. V skutočnosti si len málokto dovolí robiť web nevalidný. Jednoducho je to už štandard (prvý predpoklad pre korektné zobrazenie obsahu). Samozrejme validny kód nezvýši návševnosť . Ale to už vysvetlujem "vodníkovy čo je voda" :D.

A čo sa formulárov týka je to super vec pre kódera :).
Máš nejaké skúsenosti s používaním jquery pluginu tušim sa vola "form skinning" ?

link:
http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements#1

Gravatar
Mike 7. 4 2010, 11:58
6/15 Středa 7. Dubna 2010, 11:58  |  Opera, Windows Vista

@: Validitu samozřejmě do košu úplně neházím, mluvím o následujících věcech - například:

<a href="" target="_blank">

tohle sice není validní ve všech DTD, ale na 100% to všude funguje, i s vyplým js, pomalu to funguje i s vyplým počítačem :-)

Jinak díky za tip, jsou tam vskutku zajímavé věci. Stylování formulářů si ale stejně asi budu dělat sám, přecijen u těch menších by to bylo kulometem na mravence... A když už má člověk zažitý způsob, není potřeba ho nahrazovat. Myslíš, že v tom pluginu nejsou hromady hacků pro různé prohlížeče? :-)

Gravatar
Milan 7. 4 2010, 13:28
7/15 Středa 7. Dubna 2010, 13:28  |  Chrome, Windows Vista

Zatiaľ ten plugin obchádzam zoširoka :). Ešte nedozrel čas a chuť sa v tom ňurať. Snažím sa moc vepchať JS do webu.
Z toho mála čo som si o tom pozeral by to malo riešiť v podstate všetko (IE6,7,8,...20 :).

Pošli mi prosím ťa screen toho tvojho formulára (ak uznáš za vhodné aj html verziu).
Mrkol by som sa na to.

Inak na tom "<a href="" target="_blank">" nevidím nič neobyčajného (netuším , kde by som to potreboval bez hodnoty hrefu) .

Tento zápis je validný
<a href="#" target="_blank">čosi</a>

Srandovnejš-ie je prazdny div resp. span. Tušim som to skúšal v takomto tvare.

<ul>
<li><a href="#">čosi</a><div class="ikonka"></div></li>
</ul->

a toto vy validne nemalo byť. Ak do toho divu šupneš´čosi tak to validne bude.

Gravatar
Mike 7. 4 2010, 15:06
8/15 Středa 7. Dubna 2010, 15:06  |  Opera, Windows Vista

@: S těmi formuláři jsem si jednu dobu opravdu užíval :-D No byla jich hromada, zkusím nějaké pohledat:

http://www.inzerceprace.cz/registrace/uchazec/ Tohle bylo docela peklo (je tam ještě druhý pod záložkou)

Nebo si zde: http://www.inzerceprace.cz/ rozklikni ty selektboxy.

Jinak co se týče tohodle: <a href="" target="_blank"> tak jsem myslel ten target="_blank", který je v xHTML 1.0 Strict nevalidní (koho to zajíma, že ano)

To, co uvádíš ty, je také správně, div může být v LI, může být i prázdný. Jakýkoli prvek může být prázdný. Div nemůže být akorát v odkazu (to už je ale prasárna, dávat blokové prvky do řádkových) a blbě se to pak styluje v IE.

Gravatar
Milan 7. 4 2010, 16:29
9/15 Středa 7. Dubna 2010, 16:29  |  Chrome, Windows Vista

@: Brrr. Večer sa na to mrknem.
Je to dosť podivne formátované :)
Skusim na to našrobovať aj ten jquery plugin.

Gravatar
Milan 7. 4 2010, 23:18
10/15 Středa 7. Dubna 2010, 23:18  |  Chrome, Windows Vista

Tu je trochu lepšejší link na transformáciu formulára. A vyskúšal som to ja v IE6 (funguje to pekne).

link:
http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

Gravatar
Mike 8. 4 2010, 08:50
11/15 Čtvrtek 8. Dubna 2010, 08:50  |  Opera, Windows Vista

@: Koukám na to a hned v Opeře jsou inputy typu text úplně špatně :-)

Gravatar
Bb 22. 9 2010, 11:58
12/15 Středa 22. Září 2010, 11:58  |  Firefox, Windows 7

@: neni nutný je dělat stejně, ale třeba dneska jsem řešil to, že jedinej Chrome mi hlavičku odsadil o 1px doleva, takže nalevo narušil stín a napravo vznikl 1px bílej pruh, což už je hnus...

Takže díky za hacky

Gravatar
Slávek 24. 1 2011, 21:27
13/15 Pondělí 24. Ledna 2011, 21:27  |  Firefox, Windows XP

Máš pěkný články a pěknej web, ale když se kouknu do tvýho zdrojáče tak to je strašný :D

Gravatar
Mike 25. 1 2011, 09:28
14/15 Úterý 25. Ledna 2011, 09:28  |  Opera, Windows Vista

@: díky, každopádně by mě zajímalo, co konkrétně máš na mysli, že je strašné? Vím, ty onkliky u hvězdiček tam nemají co dělat, ale to se mi fakt nechce předělávat... A validita stejně nikoho nezajímá :-)

Gravatar
Zuzi 7. 11 2011, 16:41
15/15 Pondělí 7. Listopadu 2011, 16:41  |  Firefox, Windows 7

Díky za to! Už jsem si fakt nevěděla rady. Pomohlo mi to několikrát!

Přidat komentář







Nevím, kolik to je
Parak simati, Muballit mitte, Nergal allatu mellamu mesaru, La tapallah Annuaki, Kettu Puluthu qillatua