Základní úlohou HTML/CSS kodéra bývá převod grafického návrhu do rozumně napsané HTML a CSS šablony. Některé novinky z CSS 3 tuto jeho roli posouvají blíž a blíž směrem k roli grafika. Proč se z nich odborná veřejnost tolik raduje?
Během posledního desetiletí mezi profesemi kodéra a grafika vyrostla docela zřetelná bariéra. V historickém pozadí této membrány najdete pozadí obrázkové.
Vlastnost
backgroundse stala styčným bodem mezi dvěma tvory, kteří se na přelomu tisíciletí vyvinuli z původního prapředka homo webdesignérus: mezi webovým grafikem a webovým kodérem. Grafik si v rámci svého talentu něco uměleckého napatlal ve Photoshopu, poslal to kodérovi a ten v rámci technických možností jeho čmáranici nařezal a přetavil do HTML/CSS šablony. Chytrá symbióza uměleckého a analytického myšlení.— Kaskádová móda[K.46] , Webylon, 12. června 2012
Pod třetí verzí CSS si lidé obvykle představují všelijaké vizuální efekty, protože ty mají na rozdíl od skutečně revolučních novinek dostatečnou podporu. Nejčastěji bývají zmiňované kulaté rohy, stíny a gradienty.
Kodéřina je dřina převážně analytická. Profesionální kodér musí rozumět chování různých prohlížečů, chápat potenciální rozmanitost prostředí a systematicky řešit či obcházet problémy, na které při skládání obsahových bloků naráží. Zároveň by měl dbát na řadu pouček z oblasti přístupnosti, uvědomovat si stinné rysy různých technologií a postupů a z pozice své odborné autority krotit či usměrňovat mizerné požadavky svých (mnohdy technicky málo zdatných) chlebodárců. Vlastní estetické cítění může mít, ale nemusí.
Naproti tomu kreslení webů se neobejde bez výtvarného talentu. Profesionální webový grafik musí vědět, co chce grafikou sdělovat, jaké pocity chce vyvolávat, a podle toho pracovat s místem, volit barvy a tvary… tedy i kreslit gradienty, stíny, zakulacovat rohy. Z grafika zpravidla vypadne několikavrstvý převážně bitmapový obrázek lahodící oku chlebodárce. Toto dílko putuje od spokojeného oka rovnou k rukám kodéra.
Mezidruhová spolupráce může občas kvůli diametrálně rozdílným způsobům uvažování skřípat, ale to už je život, meziprofesní skřípání je všude.
Pojďme nastartovat stroj času a projet historií…
Píše se rok 1990. World Wide Web prakticky neexistuje. Posíláme do CERNu přísně tajné pokyny, jak ho vytvořit, a jedeme dál.
Píše se rok 1996. Weboví grafici prakticky neexistují, stávající podpora HTML a CSS společně s hlemýždími modemy nedovoluje žádné velké obrázkové zázraky, kodéři do značné míry odpovídají za vzhled díla a navzájem si půjčují GIFy s ozdobnými puntíky a tlačítky. Jedeme dál.
Píše se rok 2002. Grafikovi zpravidla stačí vyexportovat jeden až dva JPEGy, protože dost brouzdalů má Explorer 5, který nepodporuje alfakanál, a proto vrstvení průsvitných ploch na webu nepřipadá moc v úvahu. Kodér v primitivním editoru řeže a krájí, skládá tabulky, jednotlivé buňky vykládá elementy <img>. Kapátkem zjišťuje barvy okrajů a pozadí, od oka tipuje řez písma (moc možností nemá), seznamuje se s taji CSS. Jedeme dál.
Píše se rok 2008. Kodér musí být vybaven programem (typicky Photoshopem) na práci s vícevrstvým formátem od grafika (typicky PSD). Vyřezává a exportuje jednotlivé kousky do formátu průsvitného PNG. Někdy se snaží v dobré (občas i slepé) víře šetřit počty HTTP dotazů, a proto seskládává více bitmapových kousků do společného obrázku. CSS soubory kynou. Jedeme dál.
Píše se rok 2014. Grafik stále stejně fotošopuje — představa, že z procesu vypadne, se ukazuje jako hodně naivní. Vnímá nové trendy stavěné na nových vynálezech z CSS, což mu otevírá další kreativní dvířka. Co nového provádí kodér?
V podstatě krok za krokem dekompiluje výrobní postup grafika, aby ho přepsal do odpovídajících CSS vlastností. Místo střežení technické příčetnosti hledá postupy, jak kreslit stylopisem. Což může být příjemná zábavička pro hračičky, ale co má takové patlání společného s analytickým uvažováním? Stále šetříme HTTP dotazy, jo? Jedeme dál.
Píše se rok 2020. Připravované CSS 5 nabízí všechny efekty, které grafik ve Photoshopu používá. Stačí mu zmáčknout čudlík „exportovat do webové šablony“ a program mu vyplivne hotové dílo, přesně podle kdysi nechvalně proslulého hesla „Co vidíš, to dostaneš“ — včetně méně očividných zásadních nevýhod. Weboví kodéři prakticky neexistují. Vždyť stejně většinu pracovní doby přepisovali efekty do CSS, ne? Tak proč je živit? Jedeme dál.
Vzdálenější budoucno je příliš rozmazané a nesnesitelně radioaktivní, vracíme se do roku 2012. Můžeme neblahému osudu zabránit?
Neodmyslitelnou součástí technické příčetnosti je úcta k účelu užívaného instrumentu a z ní plynoucí snaha jít cestičkami nejmenšího odporu. Můžete s úsměvem mazaného koumáka názorně ukázat, co všechno jde stvořit v extrémních podmínkách, ale nezapomeňte se po vybelhání ze své rekordně malé klece zase narovnat.
Již v roce 2003 se znalci CSS trumfovali v bezobrázkovém kreslení. Jistý Chris Hester postavil domeček. U nás vyrobil Marek Prokop W3C ikonky a Honza Bien rozsvěcel lampu z říše <div>ů…
CSS Lampa demonstruje některé formátovací možnosti kaskádových stylů. V CSS Lampě není použít žádný obrázek, vše co vidíte je vytvořeno pouze za pomocí kaskádových stylů. Kaskádové styly pochopitelně k účelu kreslení určeny nejsou a tuto ukázku berte spíše jako CSS vtip.
Zkuste i vypínač přímo na CSS Lampě.
— Jan Bien, CSS Lampa, 4. listopadu 2003Zde je živoucí kopie lampy →
Vtip postupně mutuje. Loga bez obrázků? Jů!
Co na tom, že kreslení pomocí stylů z výkonostních důvodů nedoporučují ani výrobci prohlížečů. Pokrok nezastavíš…
Konec éry potrhlého užívání bitmap
Není nač čekat. Každý, kdo si v Photoshopu při exportu obrázků pro web někdy zaťukal na čelo, teď vezme do ruky trubku a společným „Tramtadadá!“ oznámíme konec Epochy potrhlého užívání bitmap ve webdesignu.
- Třeba obrázkové nadpisy - to už dneska zní jako vtip, že?
- Ani přechody, kulaté rohy nebo stíny už v CSS nejsou žádná vyšší dívčí.
- Obrázková tlačítka? V době generátorové a presetové už skoro žádná nepotřebujeme.
- Některé ikony můžeme nahradit písmem, některé vektory a některé úplně ujetě v CSS.
- Mezi indikátory načítání už obrázky taky skoro vyhynuly. A pokud obrázek potřebujeme, stačí nám jeden namísto 36 variant pro každý projekt.
- Blbiny a tvary už umíme někdy divně, jindy docela prakticky v CSS taky.
Navíc - doba, kdy i zbývající potrhlé bitmapy nahradíme vektory, není daleko.
— Martin Michálek, Konec éry potrhlého uživání bitmap, 10. dubna 2012
Vezmu do ruky trubku a zaťukám si na čelo.
Na znamení počátku Epochy potrhlého zneužívání stylů, písma a skriptů k napodobování obrázků. Touha po vektorové grafice je zčásti pochopitelná, ale nebude nakonec cena za její šmoulování ve formátech, které nejsou ke grafice určené, příliš vysoká?
Uklidí někdy někdo ten binec, který se kvůli démonizaci obrázků zanáší do Unicodu?
Odborná veřejnost nad novými efekty v CSS žasne zejména proto, že si svých patnáct minut slávy čerpají převážně projekty, jejichž tvůrci mají kousek grafického nadání a zároveň i víceméně provozuschopné analytické myšlení, a ve svých schopných rukách pevně třímají otěže vizuální i technické části svých výtvorů. Patříte-li do této šťastné soběstačné podmnožinky, uvědomte si prosím, jak je maličká.
Navíc momentálně frčí minimalismus — kodérovi teď stačí bloky zakulatit, přidat stín, na pozadí vrazit jemný přechod a výsledek nikoho neurazí, ba dokonce připadá běžnému brouzdalovi elegantní a moderní. Nyní.
Ovšem módní vlny jsou pomíjivé. Vývoj je přirozený ostatně i u názorů tvůrců…
Hmm. Pánové, toto není nic jiného než CSS onanie. Jediný pozitivní důsledek téhle věci je zviditelnění autora. Je to krásná ukázka weblog marketingu, nikoliv CSS „vychytávky“.
— Martin Michálek, komentář k CSS tužce, About weblog, 19. ledna 2004
Doba, kdy se lidem (vědomě či podvědomě) zalíbí složitější malůvky, pravděpodobně opět přijde.
Moudrá otázka, jak moc/málo je vzhled skutečně důležitý/potřebný, je v tomto ohledu mimoběžná, protože význam grafiky se nemění v závislosti na aktuálních schopnostech CSS.
Obrázkem dělaná lampa může též zaujmout:
Kliknutím ji můžete zapnout.
Svítí v ultrafialovém spektru. Zkuste zhasnout tu druhou lampu.
— UV lampa, originální fotka © HouseOfRave.com
Třetí pokolení CSS se snaží zavést i vlastnosti, které stávající dělbu práce neruší. Ba dokonce ji celkem hezky doplňují. Jmenovitě:
background-size
background.
border-image
Tyto dvě vlastnosti vystačí společně s obrázky k pohodlnému umístění jakkoliv složitého přechodu na pozadí, k sestavení blokových stínů všelijaké hustoty i k libovolnému ozdobení rohů. Díky nim se nejčernější varianta budoucího scénáře nenaplní… a díky nim grafika dělaná obrázkem přežije.
Proč přeměřovat poloměry oválných rohů, když jdou vyříznout? Proč zkoumat gradient? Měřit úhly? Proč načítat kvůli jednomu nadpisu v hlavičce celé písmo? Proč mu ladit stíny? Které dodatečné změny by měl dělat kodér, které grafik a které oba dva?
Pokud by se opravdu měla masově prosadit vektorová grafika (což není příliš pravděpodobné), bude v režii obrázků ve formátu SVG. Nakreslených grafikem a umístěných na pozadí.
Navazující polemika: Ryze praktická potrhlost