Spravovatelnost — o důvod víc proč využít CSS3

Dobře, toto sice je blog vývojářského frikulína — ale telelícího se radostí, že vám konečně může ukázat jak používání CSS3 a dalších nových front-end není akt frikulínství. Je to akt úspornosti. Šetření vlastní energie a klientovy peněženky kromě jiného pomocí lepší spravovatelnosti projektu.

Pojďme si to ukázat na zjednodušeném příkladu kolovrátku (znáte jako preloader nebo spinner). Konvenční příprava pro použití na webu vypadá asi takto — navštívíte Ajaxload, vyberete typ a barvy a necháte si vygenerovat animovaný gif.

Na jiném místě webu potřebujete jinou velikost a tak si vygenerujete nový gif.

A pak ještě potřebujete dvě variany pro jinou barvu pozadí. Přidáte třetí a čtvrtý gif. Pak i pátý a šestý.

Za týden si designér prohlédne web a upraví barevné schéma.

CSS řešení: fotogalerie se zvětšením po najetí myši

Tohle řešení není žádná věda, ale můžete si tady hezky osvojit principy progressive enhancement a taky se třeba naučit obrázky s kulatými rohy. ;-)

Demo >

Základní funkčnost je jednoduchá: Absolutně pozicovaný element (zelený .photo) leží uvnitř relativně pozicovaného (fialového .photo_contai­ner):

Proč je Gmail pro tvůrce newsletterů větší pohromou než Outlook 2007

Povzdech uondaného kodéra na Twitteru…

…doprovodily reakce co by se daly shrnout do věty: „Navrhovat newslettery pro Gmail sice je nepříjemné, ale daleko větší nadělení je renderovací jádro MS Outlooku 2007”.

Jasně, MS Word jádro Outlooku 2007 je vážně zastaralé a usilovně se brání všem snahám o náročnější vzhled nebo layout. Jenže Outlook 2007 na rozdíl od Gmailu (a dalších, minimálně českých, webmailů) přináší jeden zásadní vklad do budoucnosti řemesla — podporu stylopisu vloženého do těla dokumentu.

Právě uvnitř elementu <style> se během posledních let odehrává zásadní posun v pracovních postupech kodérů.

Mezi běžně užívanými desktopovými prohlížeči už není žádný co by vložený stylopis nepodporoval. A i když se i na desktopu úroveň podpory různých CSS vlastností liší, kodér se díky media-queries, progressive enhancement nebo vendor prefixům v kapse může zeširoka rozkročit a jeden vzhled jednoho dokumentu navrhout několika způsoby pro dobré, horší i ty nejhorší prohlížeče.

<style> je tlačítko pro zapnutí webdesignu nové generace. Potřebujeme jej ve webmailech.

Web nevypadá ve všech prohlížečích stejně. Jak to vidí návštěvník a jak kodér?

Nejdříve se podívejme jak vidí Scuk.cz návštěvník s MSIE8:

Vidí vizuální chybu? Dobře, vy byste určitě nějakou našli :), ale návštěvník nebude nad vzhledem webu příliš přemýšlet.

Pohroma ale nastane, pokud se na Scuk podíváte jako webový vývojář. Pak jej vidíte asi takto:

„Vidím chybu! Vždyť ta lišta co vypadá dobře v Chrome, Firefoxu, je v MSIE chybná — kde jsou kulaté rohy, kde gradient na pozadí?!”

Napadlo vás to? :) Pak vítejte ve světě, kde kodéři při ladění webů napříč prohlížeči nevyjí zoufale na měsíc, protože vědí, že web nemusí v každém prohlížeči vypadat stejně.

Kontext „grafického zadání” a citlivost na rozdíly v jednotlivých prohlížečích v jakém my vývojáři posuzujeme vzhled prvků webu je pohledem, kterého se musíme zbavit.

Lidé, kteří naše weby používají, jej neznají. Vzhled prvků webu vnímají v kontextu celého webu. Proč by jim mělo vadit, že lišta nemá kulaté rohy, když náš pohled neznají?

„Ne, web nemusí vypadat stejně ve všech prohlížečích” a jak to vysvětlit klientovi?

Client: “I saw the design on Sam’s IE7 today and she doesn’t see the rounded corners or shadows. Can IE not ‘do’ those?”
Me: “No. IE uses very old technology. I can hack the site to use lots of images and other things, but that will likely slow the site down for everyone. Plus it means that I will tie the HTML to the visual layout, making the site less flexible (and expensive) to update in the future. It’s your choice, you’re paying. You can either spend my time and your money on hacks for a diminishing return, or we can spend it on making more cool functionality. What’s it to be?”
Client: “Let’s do the cool stuff.”

Obhájce myšlenky “ne, web nemusí vypadat stejně ve všech prohlížečích” Andy Clark ve svém výborném komentáři pod vlastním výborným článkem na 24 ways dodává příkladným interview s klientem odvahu všem kodérům dosud váhajícím před progressive enhancement metodou.