Přejít k navigační liště

Zdroják » PHP » Podmíněná pravidla v CSS

Podmíněná pravidla v CSS

Články PHP, Webdesign

Předvedeme si běžné strategie, jimiž se webdesigneři při kódování designu vypořádávají s rozdíly v implementaci kaskádových stylů mezi webovými prohlížeči. Seznámíme vás i s možností méně známou, a tou jsou podmíněná pravidla v kaskádových stylech. Představíme vám její dvě ukázkové implementace.

Než vysvětlím hlavní téma článku, kterým jsou podmíněná pravidla v kaskádových stylech, dovolím si trochu delší obecný úvod. Svět webdesignu není ideální. Ideální nebyl a pravděpodobně ani nebude. Asi vždy tu bude řada webových prohlížečů, které ne vždy budou podporovat stejné vlastnosti kaskádových stylů. Navíc občas ty stejné vlastnosti budou podporovat trochu odlišným způsobem.

Postupně se naštěstí ustaluje (a zvětšuje) podmnožina kaskádových stylů, na které se implementace v prohlížečích shodnou (říkáme tomu interoperabilita), ale současně se objevují nové zajímavé vlastnosti, které zatím ustálené nejsou.

WWW na cestě

Zajímavost

Věděli jste, že během prvních 5 let od vzniku Webu se objevilo okolo 40 různých webových prohlížečů? Myslíte, že pokud by časem nezačalo několik z nich dominovat a ovládat celý trh (původně Netscape, pak Internet Explorer a později i Firefox), tak by dnešní situace vypadala stejně? Nebo by naopak byl list webových standardů a interoperability neposkvrněn, protože ve všech 40 prohlížečích by žádný webdesigner nikdy netestoval a prohlížeče by se neodvážily příliš odlišovat?

Jak webdesigneři problémům čelí?

Webdesigneři vymysleli několik strategií, které používají, aby rozdíly v implementaci kaskádových stylů mezi prohlížeči vyrovnali. Jedná se zejména o:

  • podmíněné komentáře v Internet Exploreru
  • zasílání (generování) odlišných stylů po různé prohlížeče
  • CSS filtry (hacky)

Podmíněné komentáře v Internet Exploreru

Internet Explorer podporuje tzv. podmíněné komentáře v (X)HTML. Jsou populární nejspíš proto, že vyrovnání se s různými verzemi Internet Exploreru je častým úkolem webdesignerů. Webdesigner připraví stylopis společný pro všechny prohlížeče a vedle něj připraví jeden, resp. více stylopisů pro Internet Explorer, resp. jeho různé verze. Výsledek může vypadat takto:

<link rel="stylesheet" media="screen" type="text/css" href="main.css" />
<!--[if lt IE 7]><link rel="stylesheet" media="screen" type="text/css" href="ie.css" /><![endif]--> 

Zápis if lt IE 7 určuje, že daný stylopis se použije pouze u Internet Exploreru nižší verze než 7 (IE6, IE5.5, IE5 atd.). Prohlížeče jiné než Internet Explorer druhý stylopis vůbec nevidí (vidí jej jako součást HTML komentáře a komentáře se ignorují).

Nevýhody:

  • jiné prohlížeče podmíněné komentáře nepodporují
  • podmíněné komentáře existují na úrovni HTML a nikoliv CSS, což stěžuje tvorbu snadno udržovatelných stylopisů (související pravidla totiž umisťujeme do odlišných souborů)

Zasílání (generování) odlišných stylů po různé prohlížeče

Dalším řešením je detekovat již na serveru, který prohlížeč ke stránce přistupuje a zaslat mu kaskádové styly připravené přímo pro něj. Jedná se o úkol mnohem náročnější, než se může zdát. Už jen správná detekce prohlížečů, všech jejich verzí a variant je velmi složitá věc, kterou málokdo umí.

Autor článku za celou svou praxi nenarazil na detekci, o které by si troufl prohlásit, že je 100% bezproblémová. Detekce často fungují pro běžné prohlížeče, pokud ale používáte méně obvyklý prohlížeč, můžete mít smůlu.

S ohledem na komplexnost problematiky detekce prohlížečů neprovádí detekci často přímo tvůrce stránky, ale svěří ji nástrojům, např. platforma ASP.NET sama o sobě generuje pro řadu svých prvků odlišné vlastnosti kaskádových stylů pro různé prohlížeče.

Nevýhody:

  • nespolehlivost detekce pro méně obvyklé prohlížeče
  • závislost na detekčních nástrojích (s vydáváním nových prohlížečů je nutné průběžně aktualizovat i detekční nástroje)

CSS filtry (hacky)

CSS filtry (nespisovně „hacky“) jsou konstrukce, které způsobí, že ačkoliv všechny prohlížeče dostanou stejný stylopis, interpretují jej odlišně, protože některé vlastnosti před nimi skryjeme. Příkladem budiž tzv. podtržítkový hack:

.box {
  width:  150px;
  _width: 160px;
} 

V tomto příkladu provádíme korekci na odlišný box model IE. Většina prohlížečů vidí zápis:

.box {
  width: 150px;
} 

Internet Explorer verze 6 a níže vidí zápis:

.box {
  width: 150px;
  width: 160px;
} 

a podle pravidla „poslední hodnota převažuje“ nastaví width na 160px.

Použití podtržítka v našem případě zafungovalo jako filtr – některé prohlížeče tuto vlastnost „vidí“, jiné ji ignorují (odfiltrují). Filtrů existuje celá řada a objevují se nové a nové. Nemusí se vztahovat jen na jednotlivé vlastnosti, ale i na celé stylopisy.

Nevýhody:

  • jedná se o „hacky“ – využití obezliček prohlížečů (často oficiálně nezdokumentovaných)
  • nebývají vždy validní
  • čas od času způsobí zmatení prohlížeče (např. starší verze prohlížeče Safari v některých případech zahodila zbytek stylopisu, jakmile narazila na hack používající na začátku názvu vlastnosti pomlčku nebo dvojtečku)
  • jsou pro nezasvěceného nečitelné (pokud daný CSS filtr neznáte, nemůžete si být jisti, zda se jedná o záměr nebo překlep, ani které prohlížeče filtruje)

Pozn.: Existují i další strategie, např. zcela se vyhnout používání problematických vlastností a konstrukcí (sem patří i matrjoška hack).

Kde je ideální cesta? Podmíněná pravidla v CSS?

Nyní se dostáváme k jádru našeho článku. Každá z uvedených strategií má totiž své nevýhody. Ideální cestou by se (pokud vynecháme ideál, že se prohlížeče začnou chovat stejně) mohly stát podmíněné sekce přímo v kaskádových stylech, po kterých někteří webdesigneři volají. Vypadat by mohly například takto (jedná se o výše uvedený příklad v box modelem přepsaný do podmíněné podoby):

.box { 
  width: 150;
  /*[if IE]*/ width:160;
} 

Je to také CSS filtr, ale postavený na jiném základě. Proč by byl takový přístup lepší než strategie uvedené výše?

  • syntaxe je samovysvětlující (pouhým přečtením zápisu vidíme, co znamená, nemusíme mít nastudované informace o CSS filtru)
  • zápis je validní
  • vede k tvorbě snadno udržovatelných stylopisů (související informace máme u sebe, jednotlivé filtry jsou snadno dohledatelné ručně i automatickými nástroji)

Autor článku nebyl schopen objevit nevýhody tohoto řešení. Pokud vás napadnou, podělte se s námi v komentářích.

Zmíněné řešení je ovšem jen návrhem, neexistuje ani ve specifikaci, ani jej prohlížeče nepodporují. Přesto je implementace možná (byť již zdaleka ne ideálním způsobem) a to jak na klientovi, tak na serveru.

Implementace pomocí JavaScriptu

Na klientovi můžeme podmíněná pravidla implementovat pomocí JavaScriptu (tím jsme sice závislí na JavaScriptu, ale pamatujte, že se to netýká našeho celého designu, ale jen podmíněných pravidel).

Na implementaci jsem narazil u Rafaela Lima pod názvem CSS Browser Selector. Do hlavičky stránky je třeba vložit:

<script src="css_browser_selector.js" type="text/javascript"></script> 

Následně můžete ve stylopisu používat tento zápis:

.ie .box {
  width: 160;
}

.ie7 .box {
  width: 160;
}

.gecko .box {
  width: 150;
} 

Skript podle detekovaného prohlížeče nastaví kořenovému elementu dokumentu příslušné třídy a my je můžeme využívat v našich stylopisech (třída „ie“ platí pro Internet Explorer, třída „ie7“ jen pro jeho sedmou verzi atd.). Oproti příkladu uvedenému výše nejsou podmínky vyjádřené v komentáři, ale další třídou, z praktického hlediska v tom ale není velký rozdíl.

Nevýhody:

  • závislost na JavaScriptu
  • závislost na detekci prohlížeče (která je ne vždy spolehlivá)

Implementace na serveru

Druhou možností je implementovat podmíněná pravidla na serveru a zpracovat je skriptem (preprocesorem), který pošle prohlížeči již přefiltrovanou podobu. V takovém případě jsme vlastně elegantně zkombinovali metodu generování odlišných stylů pro různé prohlížeče s CSS filtry.

Našel jsem hned dvě implementace. Tou první je plugin pro Ruby on Rails, který je serverovým rozšířením výše zmíněného CSS browser selectoru a tou druhou je projekt Conditional CSS pro PHP a ASP.NET. Zastavme se u druhé z nich.

Conditional CSS

Projekt nabízí  bohatou syntaxi, umožňuje podmiňovat jak celá pravidla:

[if IE] .box {
  width: 250px;
  padding: 10px;
} 

tak jednotlivé vlastnosti:

.box {
  [if Gecko] -moz-border-radius:15px;
  [if ! Webkit] float: left;
  [if lte IE 6.0] margin-top: -1px; 
} 

Všimněte si, že obsahuje jak pozitivní ( [if Gecko]), tak negativní podmínky ( [if ! Webkit]) a omezení verzí ( [if lte IE 6.0]). Detekuje všechny běžné prohlížeče včetně Safari pro iPhone, více viz dokumentace.

Stylopis se zapsanými podmínkami neposíláme prohlížeči přímo, ale pomocí jednoduchého PHP nebo ASP.NET skriptu, který napřed detekuje připojený prohlížeč a podle výsledku vyhodnotí podmínky a zašle prohlížeči zpracovaný výsledek. Ten zároveň i trochu zoptimalizuje (odstraní nadbytečné bílé znaky a provede sloučení importovaných stylopisů).

Nevýhody:

  • závislost na detekci prohlížeče (která je ne vždy spolehlivá)

Disclaimer: Autor článku nástroj Conditional CSS zatím v praxi nikdy nepoužil, ale vážně uvažuje o jeho využití při dalším kódování webů, kdy je potřeba web rychle odladit pro všechny prohlížeče. Dokonce si myslí, že se jedná o ideální řešení, který jak urychlí vývoj (nakódování stránky), tak usnadní následující údržbu stylopisů. Přesto, jelikož má k detekci prohlížečů nepřekonatelnou skepsi, by po dokončení webu přešel na některou jinou metodu, např. CSS filtry. Převod by provedl nahrazením podmínek za adekvátní CSS filtry (pokud takové existují) a jelikož se jedná o rutinní přepis, pokusil by se nalézt automatické řešení, které by náhradu provedlo automaticky. Tím by si mohl uchovat stylopis s podmínkami vhodný pro údržbu a vývoj, ale na produkční server dávat jeho vyexportovanou podobu.

Závěr

Pokud nyní přemýšlíte, kterou z možností si vybrat, tak dnes pro vás milí čtenáři jednoduchou odpověď nemáme. Žádný z uvedených způsobů totiž není bez problémů.

Je na vás, pro který ze způsobů se rozhodnete. A pokud některý z nich preferujete a máte pro to své důvody, podělte se o ně s námi v komentářích.

Odkazy

Co používáte nejčastěji?

Komentáře

Subscribe
Upozornit na
guest
56 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
yacht

Co je spatne na reseni pouzit spolecne vlastnosti ne-IE prohlizecu a pak pro IE prohlizecce vlozit podminkou styl pro IE, ktery styl doupravi pro IE?

Mozna se mylim, mam jen pocit ze mezi ne-IE prohlizeci zas takove rozdily nejsou a spolecna mnozina vlastnosti je dostacujici. Oproti rozdilum IE a ne-IE svet.

Hoween

Podle mých zkušeností je to podstatně menší problém, než různé hacky nacpat přímo do hlavního CSS souboru. Pro normální prohlížeče mám jeden čistý a přehledný CSS soubor, a konkrétní opravy mám v souboru mimo, o kterém podle podmíněného komentáře přesně vím, pro co je určený.

Samozřejmě mám CSS knihovnu, kterou sdílím mezi více weby, mám ji napsanou tak, že hacky nepotřebuje a s menšími úpravami mi funguje už tři roky. Opět jsem si nevšiml nějakých chyb, nebo vícenákladů při její údržbě.

f4bian

Take mi vice vyhovuje mit styly pro IE v oddelenych souborech. Pokud mi v tom pitomem IE neco nefunguje, tak to muzu ladit v tom samostatnem souboru a vim, ze nerozdrbu styly pro ostatni prohlizece.

Dundee5

Já jsem si celkem zvykl na nevalidní filtry. Když blbne IE 7, přidám previdlo s rovnítkem. Když blbne IE 6, přidám pravidlo s podtržítkem. A je to :)

Je to sice nevalidní, ale co. Implementace CSS v IE 6 je také "nevalidní" :) Nemusím tak rozdělovat styly do více souborů a jsem pak schopen rychleji měnit design.

(Nejsem grafik ani webdesignér, spíše pragmatický programátor, který se s tím moc nemaže)

Plaváček

Ideální řešení ve webdesignu neexistují. Existují praktické ochcávky. To je historicky daný fakt. Autor tohoto jinak dobrého článku možná nebyl schopen najít nevýhody podmíněných pravidel v CSS, já ale objevil jedno velmi podstatné.

Do CSS patří výhradně definice odpovídající specifikaci CSS. A nic víc. Komentář má zůstat komentářem. Definice definicí. Její správnou aplikaci má zajistit prohlížeč, což je problém výrobce a nikoliv kodéra.

Zanášení cizorodých prvků do stylového předpisu je cestou do pekel. Ostatně výrobci prohlížečů mají už tak dost starostí, aby alespoň na sto procent zvládli podporu CSS 2.1 (o CSS 3 nemluvě, ale to sem nechci tahat).

Z mých dlouholetých zkušeností navíc vím, že podmíněný komentář v HTML je sice tak trochu nutné zlo, ale ničemu a nikomu nevadí a ani u větších projektů jsem nikdy neměl problém s jeho použitím. Ostatně je určen výhradně dnes už jenom jedné verzi jednoho postaršího prohlížeče a těch pár drobností, které v podstatě neznamenají nic jiného, než zapnutí hasLayoutu, lze ve většině případů eliminovat geniální Pixyho matrjoškou.

Navíc IE 7 už je tak daleko, že pro něj prakticky žádné extra hacky nepotřebujeme a nejpozději do dvou let bude tyran IE 6 definitivně pohřben stejně jako jeho předchozí verze.

IE 8 má pak našlápnuto k tomu, aby se stal prohlížečem moderním stejně jako konkurence.

Závěr? Podmíněná pravidla v CSS ani náhodou. O spoustě jiných vymyšleností, po kterých především zahraniční webdesigneři volají, se ale dá ještě diskutovat a některé nápady vypadají dobře.

Možná by se další článek mohl věnovat právě tomu.

Jirka Kosek

Přesně tak. A kdyby přece jen mělo něco jako podmíněná pravidla existovat, tak by měla používat již jednou navrženou syntaxi:

http://www.w3.org/TR/css3-mediaqueries/

Plaváček

Podmíněně souhlasím s výhradou, že "media queries" jsou určena k trochu jinému účelu, než k oblafnutí implementačních chyb jednotlivých prohlížečů. Ale i to může být cesta.

Nicméně vzhledem k tomu, jak se vývojáři Microsoftu (dalo by se říci konečně) postavili postavili ke kritice webdesignerské komunity, doufám, že jednou v životě, dříve než okusím webdesignerský důchod, prostě napíšu jeden jediný stylový předpis a ten bude správně a bez chyb fungovat všude :)

Marv

Pokud se ale použije ta serverové verze, tak prohlížeč dostává vygenerované čisté CSS. Komentáře se použijí jen na straně serveru pro zpracování a odstraní se.

Jirka Kosek

A co kešování na úrovni HTTP? Používá to správně hlavičku Vary?

Anonymní

Naprostý souhlas. Všechno vyjma standardního zápisu a k němu podmíněný komentář pro IE s fixací chyb dnes nedává smysl. Ostatně těch oprav je od MSIE7 o dost méně a šestka pomalu ale jistě mizí.

výhody podmíněných komentářů:
-soubor se styly je pak maximálně čistý a čitelný, člověk nemusí přemýšlet, proč zrovna tento hack je použit, jak funguje v této verzi a pod.
-bezproblémový chod na všech existujících prohlížečích dnes i do budoucna
-snadné ladění díky funkční validaci (nepřehlédnu problémový zápis uvnitř shluku hacků, prostě zelená znamená OK)
-kdykoliv lze snadno odpojit stylopis pro starší MSIE, aniž bych musel čistit css nebo nechávat kostlivce

nevýhody hacků:
-nepřehledný zápis
-nelze odstřihnout styl pro starý MSIE, který již nemá být podporován (třeba díky novým modulům, které již nebudu chtít pro něj stylovat)
-řešení ignoruje možnost, že nějaký minoritní prohlížeč hacky přečte podobně jako IE, ale interpretuje podle jiného modelu
-totéž platí pro budoucí verze MSIE

nevýhody detekce prohlížeče:
-autor asi nikdy neslyšel o proxy serverech, které při detekci prohlížeče ztrácí smysl či přínosy pro uživatele

Radek Hulán

Některé problémy se vyřeší jejich dlouhodobým ignorováním, a tento je jeden z nich :-)

Za prvé – jako "IE" obecně rozhodně není problém. IE, ve své době vydání, to byl téměř vždy naprosto nejlepší prohlížeč, co existoval. V roce 2001 prostě nebyl na trhu lepší prohlížeč než IE6. V roce 2006 toho také nebylo moc výrazně lepšího než IE7 (ano, byl zde FF2 a Opera 8, ale ty nejsou výrazně lepší, a pokud ano, jen v některých bodech; IE7 zase měl pěkné ergonomické GUI, a ne to staré, co FF obšlehl od IE6). A ke konci roku 2008 to nejde o moc lépe než to dělá dnešní IE8 Beta 2, s web slices či activities, podobně dobrý je i Webkit a Gecko a Prsto jako jádra se hodně snaží. Je tu zdravá, ale zcela srovnatelná, konkurence.

IE prohlížeče jsou obecně dobré. Naprostý průser ale je, že jejich uživatelé jsou s nimi spokojeni a neupgradují. Zatímco 7 roků stará Opera či 7 roků starý Firefox (pokud se v té době nejmenoval ještě Firebird či Phoenix) se nikde nevyskytuje, uživatelé kdysi alternativních prohlížečů dělají upgrade nejpozději po 6 měsících. Starý prohlížeč existuje jen u IE.

Dokud se nenalezne řešení, jak donutit spokojené uživatele IE6 aby změnili prohlížeč na IE7 či lepší (IE8), bude to pro webdesign špatné. Na druhou stranu, když si vezmu IE7, IE8, Opera 8, Opera 9, FF2, FF3 a dám jim jeden společný stylopis, bude to fungovat velice dobře. Jen 7 roký starý (přesto na svoji dobu nejlepší!) IE6 bude mírně odporovat, ale i tohoto různými hacky (validními * html {}) přinutím k poslušnosti. Nakonec je až neuvěřitelné, co ten staříček z roku 2001 umí :-)

No a pak je ještě potřeba dávat pozor, aby se nestal staříček z dosud hodně dobrého IE7, aby jej nemělo 50% lidí na PC v roce 2012-2013, ale aby tam byl nejhůře IE8 či ještě lépe IE9, ale už snad nenastane, protože nové verze IE se upgradují podobně jako Opera či FF – tedy velice často.

Hoween

A nebyl jste to náhodou Vy, kdo možná ještě před rokem vyřvával, jak je Opera pro profesionály a všechno ostatní je odpad pro socky a závistivce? A najednou už Opera není nejlepší, nejlepší je IE7.

Už jste **** co říct.

Mimochodem, pokud podle Vás FF obšlehl GUI od IE6, možná si zajděte k očaři, aby vaši pidlookost něčím korigoval. Návštěvou **** pokračovat.

18. 10. 2008 8:17 redakčně upravil Martin Hassman, důvod: Názor obsahoval urážky. Názory takové podobě na Zdroják NEPATŘÍ!
Anonymní

IE jsou všeobecně k posrání (a ne, že ne!). Je sice pravda, že je IE7 o kapku lepší, než IE6, ale pořád je to v některých oblastech naprostá katastrofa (hlavně implementace javascriptových metod, např. DOM aj.). Už se mi stokrát stalo, že skript odladěný ve FF bezproblému fungoval ve všech moderních prohlížečích, jenom kvůli dementí chybě IE jsem jej musel naprosto překopat (a to způsobem 5x tak složitějším)… Takže si ty kecy nech pro svoje přitroublý fanynky!

vozice_09

Dobry den, zajimave shrnuti nekolika metod. Osobne se snazim pouzivat jen hacky, ale jen ty ze skupiny validnich (matrjoska apod). Podtrzitkovemu hacku a dalsim nestandardnim se snazim vyhnout (kdo vi ktery hack vyvojari zariznou z dalsi verzi prohlizece).

xxlugh

Diky za pekny clanek.

Hoween

Tenhle článek by měl smysl tak před čtyřmi lety, kdy situace na trhu prohlížečů byla ještě rozhádaná a byly mezi námi takové CSS paskvily, jako IE5, nebo Opera 7. Dnes, kdy je trh v podstatě konsolidovaný na neproblémové prohlížeče a jeden problémový, mi stačí jeden podmíněný komentář, přes který IE6 vnutím konkrétní opravy a mám CSS hotové. Matrjošky, vendor-specific vlastnosti, ksindly typu Tantek Celik hack, nebo zrůdnosti typu javascriptové detekce prohlížeče, už jsou dnes absolutně nepotřebné a zbytečné.

Mete, při vší úctě mi tenhle článek přijde jako zbytečnost, kterou jsi napsal jen proto, že si neměl jiné téma a nějaký článek si podle redakčního plánu napsat musel. Nemyslím si, že pro Zdroják je tlačení velkého počtu článků tou správnou cestou.

pcs

Já to také nevidím jako zbytečný článek. Možná pro profíky, kteří se webdesignem živí, ale pro nás co občas sesmolíme nějaký ten web je tenhle fundovaný souhrn v článku a komentáře uživatelů podnětný.

Hoween

A proto než se to CSS naučit pořádně, abych podobné hacky nepotřeboval (a to včetně dopředné a zpětné kompatibility), tak to CSSS prostě zprasím hacky pro každý prohlížeč zvlášť a s každou verzí nějakého prohlížeče se budu modlit, aby se to zobrazovalo správně.

Tohle je bohužel typicky amatérský postoj, který celému webdesignu škodí nejvíc. Když "tydlencty vebový stránky" dělá každý jouda, nemůžeme se těm prasečinám, co člověk potkává na webu, divit. Amatéři degradují webdesign na večerní kratochvíli, co se dá dělat za pár stovek a profíci mají problém, protože i ten zámečník co má na rohu dílnu, si radši nechá udělat hnus za 2, než pořádně vypadající a fungující web za 10.

mofo

bohužel bez nastylování některých prvků specielně pro ten který prohlížeč stále nejsi schopen splnit všechna zákazníkova přání. můžeme si popovídat třeba o blbých políčkách formuláře. na druhou stranu není až tak velký problém udělat validní web (skoro) stejně vypadající od msie 5.5+, ff2+, safri/chrome i třeba operu. ale nějaký ten hack potřeba bude.

Marv

No formulářové prvky jsou kapitola sama pro sebe. V některých prohlížečích s některými formulářovými prvky nic nenaděláš, ani kdyby ses pokrájel. Leda si ten prvek celý sám vytvořit, ale to je ještě větší prasárna.

Plaváček

Tvůj komentář moc nesouvisí s tématem článku.

Jde prostě jenom o to, že vykreslování většiny formulářových prvků má na svědomí operační systém uživatele a nikoliv prohlížeč. CSS jsou prostě často mimo.

I proto doporučuje devět z deseti kodérů se stylování těchto prvků zdaleka vyhnout, i když to grafikům (a také klientům) nejde moc pod nos. To je ale věc, kterou jednou možná vyřeší Xforms.

Prozatím vzdálená budoucnost.

Marv

To nebyl komentář k článku ale ke komentáři :-)
Jinak s tebou plně souhlasím.

Láďa

Nebudu komentovat dohady o důvodech vzniku článku, ale s první částí souhlasím. Spousta IE6 bugů se navíc dá odstranit CSS pravidly, které jsou sémanticky správné a ostatní prohlížeče neovlivní (dvojitý margin u plovoucích prvků, peek-a-boo bug), takže ani není potřeba je vkládat do zvláštního souboru.

urso

Ve výpočetní technice se vyvíjí vše velice rychle. Co platilo včera, to již neplatí dnes. Takže ti dávám za pravdu až na ten IE 6,7,8. Stačí psát podle standardu a ne pro dnes již menšinový prohlížeč IE.
Takže jeden standardní styl pro WEB, ne pro každý prohlížeč. A ten problémový se bude muset přizpůsobit, nebo ho bude používat ještě méně lidí, ale je potřeba jim to nějak sdělit, že používají zmetek, třeba takto: http://zmsoft.cz/clanky/p2p.php

M.

Toto je podla mna velmi radikalny nazor. Predsa Vy chcete, aby Vam chodili ludia na tie stranky, nie? Pokial si robite web pre svoje vlastne potesenie a pre kamaratov, tak je Vas nazor podla mna v poriadku.

Hnidopich

No, abych rekl pravdu, moje zvedavost neni natolik silna, abych spustil jiny prohlizec a zjistoval, jake skvosty autor tech stranek vyplodil. Ba prave naopak…

--==[FReeZ]==--

Granda Urso: skvele stranky. M$IE take blokuji a jelikoz M$IE nema implementovan ECMAScript, ale JScript, povzoru CSS preprocessoru pridavam svou trosku do mlyna – JS Preprocessor http://freez.security-portal.cz/index.php?article=55

Hnidopich

"Nize uvedene prohlizece, u kterych je striktni dodrzovani webovych standardu naprostou samozrejmosti…" Hned mam lepsi naladu, diky. :-)

--==[FReeZ]==--

Tato veta, vytrzena z kontextu, se vztahuje prinejmensim na uvede standardy v chybovem hlaseni, jako napr. XHTML 1.1

Hnidopich

A vztahuje se take na DIV s nastavenym padding ve FF?

obrys

Já si myslím, že v dnešní době tento článek MÁ SMYSL, ale mělo tam být více řečeno, co je faktprasárna (CSS hacky typu podtržítka před vlastností) a co je celkem ok (podmíněné komentáře).

Už několik let mi funguje následující postup:

  • Používat nekonfliktních konstrukcí a odladění pro Gecko
  • Odladění na Opeře, Webkitu a IE7 (kupodivu se dá odladit web pro tyto prohlížeče, aniž by to rozhodilo layout pro Gecko)
  • Odladění pro IE6 pomocí podmíněného komentáře – vloženého CSS na konec inkluzí, který přiohne chování zbytku (toto bývá zpravidla nejnáročnější část, protože IE6 je fakt zmetek)

Toť moje zkušenost.

Hoween

Jenže z článku vyplývá přesný opak – jakékoli hacky a "filtry" přímo v CSS jsou dobré, standardní podmíněné komentáře jsou špatné.

Vůbec nejsou zmíněné klasické podmíněné komentáře, které jsou dnes nejpoužívanější a hlavně, 100% funkční.

karf

Používám téměř výhradě a zásadně podtržítové (resp. rovnítkové pro IE7) hacky. Ať si to kdo chce považuje za faktprasárnu, neznám lepšího způsobu, jak se vypořádat s odlišnostmi IE6 a IE7. V zásadě má většina hacků za účel přepnutí do hasLayout módu. Podmíněné komentáře jsou sice na první pohled elegantnější řešení, ale drasticky zhoršují orientaci v CSS (dvojí-trojí pravidla ve dvou souborech namísto jednoho dpolněného hackem), Za druhé je to pro většinové prohlížeče request navíc. A za třetí, podmíněné komentáře nejsou o nic "standardnější" než podtržítkový hack. Otázky validity se řešily před X lety. Dneska je už nějaká validita v podstatě bezpředmětná, používá se to, co prostě funguje. Stejně si dneska do specifikace HTML5 každej přidává, co ho zrovna napadne.

Hoween

95%-98% mého CSS je stejné pro všechny prohlížeče, takže cpát do čistého CSS nějaké hacky naopak drasticky zhoršuje orientaci v tomto souboru, se kterým pracuju 95% času. Těch pár řádků, na které sahám jednou za uherský rok, mám v samostatném souboru a nepletou se mi v čistopisu.

A request navíc? Koho to neportálových webech zajímá, server odešle 304 a tím pro něj request končí. Whitespaces a špatně rozřezaná grafika generují podstatně větší zátěž, než jakou představuje request na kešovaný soubor.

karf

Ale já se nehádám, jen jsem napsal, co vyhovuje mně. Jde čistě o workflow. Vyzkoušel jsem oba přístupy a oddělené styly prostě pro mě nefungovaly dost efektivně.

M.

Taky preferuju hacky pred podminenymi komentari.

Prakticke zkusenosti mi ukazuji, ze pouzit podtrzitkovy (apod.) hack je prehlednejsi. Uz jen proto, ze vsechny vlastnosti daneho prvku mam pohromade. V druhem pripade jsem casto narazil na problem, ze nekdo jiny upravoval moje css, ale nevsiml si ze jsou i nejake vlastnosti v IE stylesheetu a problem byl na svete. Sutuace nastava predevsim pokud vyvojar slepe spoleha na firebug :)

Navic se mi moc nelibi zatahovani "detekce" prohlizecu primo do tela dokumentu. Vim ze je to validni vec, ale prijde mi mensi zlo mit perfektni semanticky html dokument bez zbytecnosti s lehce ohackovanym css.

Rozhodne souhlasim, ze vetsinu veci je uz dnes mozne resit bez obou pristupu, ale kdyz nejde jinak sahnu po podrtzitku (hvezdicce).

A osobne bych nepodcenoval ani jeden zbytecny http request navic, predevsim na velkych projektech. Zazil jsem projekt, kde pouha redukce rozkouskovanych css prinesla vyreseni (odsunuti) problemu s poctem paralelnich vlaken na webserveru.

obrys

Rozhodně nesouhlasím. Na rozdíl od podmíněných komentářů, které v podstatě všechny prohlížeče respektují (a pokud ne, tak je berou jako komentáře a nevadí to, protože obvykle se opravuje stejně jenom bugózní IE, který je umí), jsou CSS hacky interpretovaný každými prohlížeči jinak. Když se vyloupne na scéně nový prohlížeč, který respektuje W3C doporučení, nemusí se s takto spraseným vůbec CSS vypořádat (viz Safari) a nastává další problém, jak opravit chyby v něm.

Naopak mi přijde podmíněným komentářem vložený styl přehlednější, protože opravuje pouze chybně interpretované vlastnosti nekvalitním prohlížečem. V mých projektech takovýto opravný styl vždy opravoval chování jen několika elementů. Pokud by měl obsahovat více elementů, je na zvážení použití jiných html konstrukcí.

karf

Neberu vám osobní preferování podmíněných komentářů. Ovšem v té části o CSS se velmi mýlíte. CSS specifikace přesně definuje, jak se má UA zachovat v případě neznámých vlastností (musí je ignorovat). Dokonce garantuje, že žádná budoucí CSS vlastnost nebude začínat podtržítkem. Čili když se na scéně vyloupne nový prohlížeč, který respektuje W3C doporučení, musí se s takto napsaným CSS vypořádat zcela bez problémů (jinak by nerespektoval W3C doporučení).

Hoween

Pro takový případ nemusíme chodit daleko, že? Třeba neustále zkriplené IE, u kterého se klidně vsadím, že jeho osmá verze bude rovněž paskvil. Nebo jste opravdu tak naivní, že si myslíte, že další verze IE už určitě bude plně respektovat doporučení W3C? :-)))

obrys

Ono skutečně není třeba chodit hodně daleko. Stačí se podívat na IE7. Teď jsem se matlal s jednou věcí, nad kterou zůstává rozum stát. Jedná se sice javascriptu, ale holt v IE7 znamená událost onchange na inputu typu checkbox něco úplně jiného než všude jinde (zavolá se ta událost až po ztracení focusu). I mrzák IE6 to interpretuje správně.

Nemá to ale smysl tady zažehávat plamen. IE se dá upálit z jakéhokoli pohledu a holt kvůli tomu se dohadujem, která špatná nebo ještě horší varianta napraví toto špatné chování, místo, aby se opravil zdroj problémů – IE.

mofo

nemyslím, že je dobré snažit se přeložit hack jako css filtr. filtry v css jsou podle ms něco jiného. hack je hack. už jak to slovo zní je poznat o co jde ;-)

Anonymní

Nejlepsi reseni je tlacit na vyrobce prohlizecu, aby se drzeli standardu a zadne takovehle hacky nepouzivat! Dyt pixel nebo milimetr ma byt vsude stejny ne?!

BigLama

Moja rec, standard by mal byt pre vsetkych rovnaky

Marv

No právě že zrovna ten pixel pobdle specifikace W3C pro CSS stejný být nemusí. 1px v kaskádovém stylu nemusí odpovídat jednomu fyzickému pixelu zobrazovacího zařízení.

petík

Používáte někdo tohle (tj. zabalení všeho do div pro IE a samostatná opravující pravidla v css?

<body>
<!–[if ie 6]><div class='IE6'><![endif]–>
<!–[if ie 7]><div class='IE7'><![endif]–>
….
<!–[if ie 6]></div><![endif]–>
<!–[if ie 7]></div><![endif]–>
</body>

a v css:
div.IE6 #Register div.GrayBorderRound5 {width: 731px;}

Hoween

Ne. To existuje nějaký šílenec, kterého by taková prasečina napadla?

MD

.box {
width: 150;
/*[if IE]*/ width:160;
}

Tohle je fakt prasarna. Jednou je to komentar, tak to ma zustat komentarem a ne to "neco delat"

Hoween

A ještě ke všemu bez uvedených jednotek, takže by to stejně fungovalo jen v IE a Opeře :-) Nebo už to konečně v Opeře opravili? :-)

To si vždycky vzpomenu na svou učitelku matematiky, která se mě při podtržení výsledku bez jednotek zeptala: "A čeho? Brambor? Facek?".

Anonymní

Uplne suhlasim.

Radek Hulán

osobně používám toto:

* html .box {width:!160px;}

Funguje to na IE6 bugy, výborně, je to přehledné, validní (je to zcela korekrní CSS konstrukce), a přitom jasně poznatelné jako hack.

Hoween

A pak se vynoří další verze IE, která tento hack odstraní a můžeme CSS znovu předělávat. Amatéřina.

Radek Hulán

Omyl, tato chyba je pouze v IE6, a pouze ten bývá pro webdesign problém.

Martin Michálek

To zatínání svalů některých diskutujících ("hacky jsou prasárna", "podmíněná pravidla ani náhodou") je legrační. :)

Web přeci není prostředí pro jediný správný přístup. Vše co v článku Martin zmiňuje je v konkrétních případech legitimním přístupem.

Vyrábím třístránkový web? Je super, že existují hacky a nemusím pro dvouřádkové CSS pravidlo zakládat zvláštní soubor pro MSIE6.

Dělám složitou webovou aplikaci pro širokou masu uživatelů MSIE6 počínaje a iPhone konče? Vážně bych se zajímal o detekci na straně serveru a budu neskutečně rád za to, že někdo věnuje svou energii na projekty jako Conditional CSS.

V těch zbylých případech vsadím na jednoduchost a dopřednou kompatibilitu, využiju úzkou skupinu pravidel spolehlivých napříč prohlížeči a zlý MSIE6 oddělím do zvláštního souboru, který za dva roky smažu. :)

Hoween

Jasně, zaflákáme CSS hacky a až vyjde zase nová verze nějakého prohlížeče, která pár hacků deaktivuje, budeme opět celé CSS překopávat. Nakonec se možná vrátíme k podmíněným komentářům, které fungují spolehlivě a které jsme mohli použít dávno.

A detekce prohlížeče na straně serveru… CSS (HTML) to má dávno ošetřené. Stačí správně implementovat css media a nemusím prasárny typu detekce na serveru řešit. Plýtvám výkonem a při nezvládnutém kešování i trafficem. Konec konců, situace se ani v tomto případě nemění. V mainstreamu prohlížečů mám k dispozici standard, plus IE6, mobilní prohlížeče už CSS chápou dostatečně (a stačí mít pořádně udělaný layout, aby se to kvůli absenci floatování nesesypalo) a pro iPhone, pokud to potřebuju, mám detekci přes jeho speciální události.

Jakékoli hacky v tomto smyslu už jsou dávno out, a jejich neustálé tlačení vpřed vychovává jen další generaci amatérů. Když člověk občas dělá výběrová řízení na kodéry, tak nestačí žasnout, co jsou dneska lidi schopní vydávat za profesionální kodéřinu.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.