Patří procedurální grafika do CSS?

Nadpis typu „Konec éry potrhlého…“ na mě působí bulvárně, extrémisticky. Ne, nejsem suchar… Kreativní nadpisy mám rád.

Kodér je člověk, který dostane obrázek nebo PSD a ten přepracuje na fungující web. Jestli si vypomůže css nebo obrázky, to je jeho věc a starost, pokud technologie využije v odůvodněné míře, na správných místech a nezapomene na přístupnost a použitelnost. Správný kodér by měl aspoň lehce grafice rozumět, což platí i obráceně.

Proč nevyužít kulatý roh nebo stín pro objekt, kde není složitá grafika; a na druhou stranu – proč skládat 12cípou hvězdu z css, když si ji můžu pěkně nakreslit se složitější grafikou na pozadí? Ale možná neodpovídám přímo na otázku, třeba ji úplně nechápu.

Osobně se v kratším kódu orientuji lépe než v dlouhém a něco mi říká, že nebudu sám. Je-li kód s obrázkem kratší, nevidím důvod použít jiné řešení. Samozřejmě do únosné datové velikosti obrázku, ale tady bych čistě od boku střelil, že i datově by obrázková varianta měla být úspornější než alternativa pomocí CSS (je-li obrázek složitý, bude o to delší i alternativní kód, a je-li obrázek jednoduchý, je zas datově malý).

Takže v tom čichám spíš marketingově oblbovací strategii některých kodérů, používajících vždy nejnovější technologie a zamlčujících zadavateli prostý fakt, že starší postupy mívají z přirozenosti věci širší a spolehlivější podporu než ty nové. Tak tomu vždy bylo a vždycky bude, protože odstřelit zpětnou kompatibilitu je nejlepší metodou odstřelit prohlížeč. A protože hlídat zpětnou kompatibilitu je snazší než programovat do prohlížeče nové funkce, budou se prohlížeče vždycky lišit víc v podpoře nových funkcí než v podpoře starých kodérských postupů.

Pri článku Konec éry potrhlého uživání bitmap — tentokrát ryze prakticky je to veľmi pekne zhrnuté v komentári od Miloslava Ponkráca (k tomu je zbytočné niečo dodávať).
Páči sa mi, ako tí, ktorí zvládajú obidve činnosti "perfektne" (rozumej, v ani jednej nie sú dobrí) píšu články o konci vytvárania grafických podkladov v Photoshope a o budúcnosti "dizajnovania" priamo v prehliadači. Píšu o tom tak, ako keby sme to nerobili už dávno (ak mi niektoré detaily nesedia, tak nebežím hneď za grafikom, ale upravujem si to napríklad cez firebug) a hlavne, ako keby všetci koderi/programátori mali grafické cítenie a vedeli si navrhnúť dizajn stránky sami (vieme, ako to väčšinou dopadá, stačí sa pozrieť napr. na webylon :-) ).

Nie som zaslepený zástanca Chamurappiho, mám svoju hlavu a súhlasím s ním, keď si myslím, že má pravdu.
Ale mrzí ma, že niektorí ľudia, ktorí sa môžu javiť ako autority a odborníci v tejto oblasti (Pixy), sa vyjadrujú celkom hanlivo na adresu Chamurappiho a pritom sú to práve oni, ktorých mylné názory boli časom a praxou vyvrátené (by ma zaujímalo, či stále používa to hyperpokrokové XHTML).

Reaguji na shaggyho:
„...ako keby všetci koderi/programátori mali grafické cítenie a vedeli si navrhnúť dizajn stránky sami (vieme, ako to väčšinou dopadá, stačí sa pozrieť napr. na webylon :-)“

Jsme tak trochu v oftopíku, ale osobně nemám grafice Webylonu co vytknout. Dobře, to červené pozadí mě moc nebere, ale ty stránky jsou přehledné, přístupné, flexibilní, formátování citátů umožňuje okamžité rozlišení citátu od vlastního textu atd. Přímo nadšený jsem z ilustračních obrázků v úvodu každé stránky – co obrázek, to perla, vystihující v geniální zkratce podstatu článku. Nějak nevím, co víc řešit graficky na stránkách, věnovaných technickému povídání o webových technologiích.

Petr ZZZ:
„nemám grafice Webylonu co vytknout“
To, čo som napísal, tak tomu sa vraví irónia na odľahčenie textu :-)

Článku niet čo vytknúť, ukážka na bubline je trefná, viem si živo predstaviť aj požiadavku na inú "šípku" bubliny – napr.: http://www.clker.com/cliparts/F/R/G/X/h/E/speech-bubbles-7.svg

Pobavila aj zmena grafiky ikonky http://www.webylon.info/B.20 a pozdrav od Pixiho.

http://www.webylon.info/B.20.img vs http://www.webylon.info/B.20.MM :-D

Otázka je, kde má být ta hranice, kdy používání CSS už je kreslení. Rámeček pomocí čáry je OK, rámeček s bradavkou už je kreslení. Co třeba background-color? Proč nepoužít obrázek? Grafik si dovymyslí ornament na jednolitém pozadí a nemá který obrázek přepsat.

Co se týče odměřování všemožných parametrů v editoru, tak lze očekávat, že se editory naučí příslušné údaje generovat, takže to jako takový problém nevidím.

Kol zdejší otázky mi přijde ideální zůstat někde mezi. Pokud vezmeme příklad bublinky, tak v případě, že ji budu potřebovat na webu v proměnlivých výškách a šířkách a v několika různých barvách, tak bude CSS řešení nejspíš výhodnější než skládání několika CSS spritů. A jindy je zase vhodnější potrhle použít bitmapu.

Procedurální grafika do CSS patří! :) Samozřejmě — jak která, jak kdy a jak pro koho.

Pojďme vzít postupně tři konkrétní situace:
a) Nakreslení lampy pomocí CSS
b) Poskládání tooltip bubliny
c) Užití CSS pro zakulacení rohů nebo vytvoření stínu

Ad. a) Lampu lze ocenit jako ukázku možností technologií. Ve webdesignérské praxi by to bylo trochu jako malovat hasákem po plátně. :)

Ad. b) Tooltip bublina bez bitmap – jak kde. Projekt, pro který jsem ji navrhoval, má celkovou návštěvnost skrze MSIE7+8 za poslední měsíc 3,59 %. Bublina na různých místech projektu mění svou výšku. Design projektu se iteruje. Pokud by některý z těchto parametrů byl nastavený jinak, hledal bych jinou cestu a skončil buď u řešení, které se i v Chamurappiho-prohlížeči-pro-testování-CSS3-webů zobrazí fajn nebo zůstal u bitmapy.

Ad. c) Zakulacení rohů nebo vytvoření stínu — i tady samozřejmě existují scénáře kdy CSS3 prostě použít nelze. Pokud děláte interní systém pro banku kde vše běží na IE6 a postupy v týmu nastavené tak, že kóder design poprvé uvidí týden po schválení nejvyšším z nejvyšších schvalovačů a pak ho musí nějak (rychle!:)) převést do HTML/CSS, pak ok. Jako kolečku v tomhle soukolí vám border-radius nepomůže.

Jestli se zakulacování rohů nebo vytvoření stínu pomocí CSS3 hodí pro jeho způsob práce a jeho typ projektů, ať si rozhodne každý sám. Zkusím sesumírovat proč se hodí mě:

1) Šetří energii — většina mých projektů se zhusta iteruje, mění se drobnosti v barvách, rozměrech elementů atd. I po spuštění se do nich často zasahuje. Přegenerovávání bitmap po každé změně by nebylo nic příjemného.
2) Je vizuálně flexibilní – Jak jinak ošetřit různá ppi, například na Retina displejích nebo různé rozměry elementů v responzivních layoutech? Vektory, ano. Ale ty v použitelné podobě prohlížeče neumí. :) Zmenšovat bitmapy v prohlížečích sice lze, ale u grafiky webu bývají výsledky tristní.
3) Uživateli šetří requesty a objem stahovaných dat, což je třeba na mobilních webech zásadní. Jindy samozřejmě ne a je pravda, že na druhou stranu může CSS3 zatěžovat procesor náročnějším vykreslováním.

CSS3 samozřejmě nejsou jen kulaté rohy a stíny. Jednotlivé vlastnosti se pohybují na škále od "s rozumem můžeme docela v pohodě používat" (např. font-face, media-queries) až po "bacha na ně" (gradienty, animace). Tápajícímu dá určitou odpověď třeba HTML5 Please: http://html5please.com/

Odpověď Chamurappimu:

"Teď přegenerováváš CSS, v tom nevidím moc velký rozdíl."

To máš pravdu jen v malém procentu situací — třeba u CSS3 gradientů. U kulatých rohů, stínů nebo dejme tomu transitions se žádné "přegenerovávání CSS" neděje. Syntaxe je i s prefixy docela snesitelná. Syntaxe kulatých rohů vypadá nějak takhle (viz CSS3please.com):


Nikdo netvrdí, že zrovna CSS3 gradienty je rozumné používat vždy a všude. Tam je aktuálně potřebný kód poměrně šílený je na pováženou jestli je to v obvyklých kóderských situacích dobré řešení.

"Retiny mají dohromady mnohem menší tržní podíl než starší Explorerové…"

Jasnačka, ale weby děláme pro dnešek, pro zítřek a pro období za dva až tři roky. Důležité je si uvědomit, že pro včerejšek ne. :) Jak to bude na konci životnosti u tvých jednorázově vyráběných projektů na dva roky těžko říct, protože to záleží na cílové skupině.

V případě projektu pro cílovou skupinu frikulínů mezi 20-30 lety s polovičním podílem přístupů z MSIE oproti normálu kde životnost kódu bude minimálně 4-5 let a často se do něj bude sahat prostě vsadím na to, že se mi současná příprava na Retinu a snadnější spravovatelnost pomocí CSS3 vrátí daleko dříve než ke konci životnosti.

U každého projektu je míra užitečnosti CSS3 jiná.

"Současné prohlížeče již zmenšují dost dobře."

Fotky ano. Zkoušel jsi bitmapovou grafiku typu ikony?

"HTML5 Please — Momentálně jsem v Exploreru 7 a na odkázané stránce mi nejdou rozklikávat jednotlivé položky, takže se k obsahu nemám šanci proklikat."

To rozhodně. Takhle by se to dělat nemělo.