Všimli jste si, jak se CSS přizpůsobuje módním trendům? Mnoho vlastností přibývá jen proto, aby uspokojily krátkodobou poptávku. Následující roky a desetiletí pak buď přidělávají vrásky tvůrcům prohlížečů, nebo se užívají úplně jinak…
Kdysi dávno přimyslel Explorer 2 k tabulkovým elementům v HTML prezentační atributy bordercolorlight a bordercolordark. Kodér mohl určit barvu zvlášť u levých horních okrajů a zvlášť u pravých dolních okrajů a tím vytvořit v jinak vizuálně suché a nezáživné tabulce úchvatný trojrozměrný efekt. Kam se hrabe Avatar…
O necelý rok později vydalo konsorcium první CSS doporučení a v něm se zrodila vlastnost border. Čtyřkové verze Netscapu i Exploreru ji nadšeně implementovaly, včetně všech hodnot border-style. Web přestal být nudně placatý…
outset inset ridge groove
— Živá ukázka různých hodnotborder-style.
… začal být nudně plastický. Nicméně tehdejší generaci uživatelů se moderní trojrozměrný styl líbil. Bylo to něco nového, v prostředí webu neokoukaného.
Vzpomenete si, kdy jste naposledy použili tyto styly okrajů?
Čtyřkové prohlížeče zavedly do každodenního užívání grafických operačních systémů jednu zajímavou vizuální novinku: plochá ovládací tlačítka, která vystoupla z jednolitého panelu nástrojů při přejetí myší. Jako kdyby se každý čudlík vyloženě těšil na zmáčknutí. Uživatel díky tomuto efektu získal příjemnou zpětnou vazbu, že je opravdu kurzorem najetý na tlačítku (a že se prohlížeč během putování kurzoru nezaseknul).
Microsoft zkusil tuto zázračnou novinku protlačit i do CSS. Podpora pseudotřídy :hover se brzy stala jednou z uživatelsky nejviditelnějších předností Exploreru 4. Na hůře nastylovaných webech uživatelé Netscapu jen těžko rozpoznávali, co je odkaz.
— Živá ukázka pseudotřídy:hover.
Někdo vdolky, jiný rolky…
Rok po vynalezení se pseudotřída ocitla v CSS 2, s universálnější definicí, která se nesoustředila výhradně na odkazy. Podle specifikace ji můžete použít na kterémkoliv elementu. Skvělé, že? Tenkrát to nikomu moc zajímavé nepřipadalo. Proč by mělo na rejdění myškou reagovat něco, co při stisku tlačítka nikam nevede? Nejen podtržení, ale i :hover se stal v myslích brouzdalů jasným indikátorem odkazu.
Prohlížeče se do podpory universálnějšího pojetí :hoveru také moc nadšeně nehrnuly, přestože po technické stránce v ní žádná velká věda nebyla. Zlom nastal okolo roku 2003, kdy uzrála podpora v Opeře i Mozille a blíže neidentifikovatelného koumáka ohromeného možnostmi CSS napadlo využít :hover, display a selektor potomka k sestavení vyskakovacího menu. Fascinující fígl. Pomohlo mu, že se zrodil v éře javascriptofóbie. Kodérům tehdy přišlo ošklivější dát na menu atribut onclick, než nacpat do kódu hack na Explorer, jehož vývoj v letech 2001 až 2006 spal.
Díky fíglu, jehož vznik patrně nikdo z vizionářů v konsorciu nepředpokládal, vzniklo mnoho děsivě nepoužitelných i otřesně nepřístupných menu. Ale byly zcela bez JavaScriptu, což byl údajně krok směrem k jednomu z možných světlých zítřků
Do Bludiště pro myšku vstoupíte najetím na čtvereček:
98765432(Celé bludiště je bez JavaScriptu, včetně finálové parády.)
— Živá ukázka vyskakovacích bloků při:hoveru.
Dnes vidíme, jaký ten světlý zítřek je. Rostoucí tržní podíl dotykových displejů momentálně význam :hoveru upozaďuje. Čekáme na bezdotykové displeje, kde si „hover“ užijeme doslova.
Co rozhodně upozaděné není, je pozadí, čili background. CSS vlastnost vymyšlená k umístění nějaké (pokud možno nerušivé) opakující se textury pod obsah stránky se docela výrazně vymkla původním představám. Texturová móda hodně rychle vyprchala.
Nyní na většině webových stránek najdete obalové či dokonce prázdné elementy, které mají jedinou funkci: zobrazit obrázek. Zpravidla není překrytý žádným dalším obsahem (maximálně jiným obrázkem), takže je de facto na popředí, přestože je ve stylopisu určený jako pozadí. Paradoxně je populární i překrytí popředí pozadím.
Vlastnost background se 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í.
Talentovaní grafici marketingově pomohli při prosazování CSS, stačí si vzpomenout na všechny ty takzvané „CSS galerie“, které před pár lety rostly jako houby po dešti. Typicky se v nich ocitaly vizuálně oslnivé výkresy, které měly to štěstí, že je někdo nastrkal do backgroundů a přiložil k nim náznak obsahu. Wow. Jistě by bylo férovější používat spíše pojem „galerie webové grafiky“, ale když ona ta grafika bývá stejně jen na pozadí… :-)
Svého času se říkalo, že stylům by měl vládnout uživatel. Že si může psát uživatelské stylopisy, nebo vybírat z několika možností nachystaných tvůrcem stránky pomocí <link rel="alternate stylesheet">. Každý správný webdesignérský blog roku 2003 měl alespoň jeden alternativní stylopis.
Tato stránka má alternativní stylopis (natahovaný z w3.org). Projděte si menu prohlížeče a třeba zjistíte, jak ho zapnout — pak uvidíte tento ukázkový blok jinak.
— Živá ukázka alternativního stylopisu.
Webové prohlížeče se tomuto „hladu“ přizpůsobily a dnes pokročilejší práci se stylopisy docela dobře podporují Explorer, Mozilla i Opera. Docela zbytečně. Kvůli rozmanitosti HTML i CSS si uživatelské stylopisy moc dobře psát nejde
Sotva byly pohřbené rozpracované zdrojáky pátého Netscape Navigatoru, lidé odpovědní za vývoj Mozilly zanesli do svého prohlížeče zbrusu novou vlastnost -moz-border-radius na kulaté rohy. Ty v té době v módě příliš nebyly, takže novinka přežívala mnoho let víceméně bez povšimnutí, nanejvýš probleskla blogosférou jako ukázka, že nejen Microsoft si vymýšlí vlastní zlepšováky. Ani její zahrnutí do návrhů CSS 3 roku 2002 ji moc neproslavilo.
Když už si nějaký grafik usmyslel, že rohy zaoblí, často nezůstal u prostého zaoblení, ale něčím celý okraj vyšperkoval, takže se stejně do popředí zájmu opět vetřelo obrázkové pozadí.
Blok se dvěma
kulatými rohy.
— Živá ukázka kulatých rohů.
Teprve nedávno se s obyčejnými kulatými rohy roztrhnul kulatý pytel. Přestože nefungují ve starších Explorerech (lze použít záplaty využívající VML). Ani hojně užívaná osmička je nepodporuje, jelikož Microsoft příchod této módy neodhadnul, zatímco výrobci ostatních prohlížečů ji v podstatě přivolaly. Grafici si nyní nevymýšlejí žádné vylomeniny, kterými by rohy komplikovali, takže všichni vesele užívají border-radius. Zatím.
Nicméně vše se jednou okouká, stejně jako se okoukala plastická tlačítka. Co přijde pak? Měla by existovat i vlastnost na zkosené rohy? Co třeba na špičaté? Budeme kreslit nedotažené rámečky vlastností border-clip z návrhu CSS 4? Nebo zavedeme border-nipple na rohy s bradavkou? Kdo ví…
Ani border-radius není úplně věrný svému názvu, umožňuje obrousit ostré rohy i u obsahů elementů, které žádný border nemají. Třeba u obrázků a formulářových prvků. A to dokonce tak, že plocha elementu nemá být v rohovém prostoru ani prokliknutelná.
Je jednou ze dvou vlastností, které dokážou vystříhnout část elementu — druhou je clip s hodnotou rect(…). Dávný sen o tom, že clip jednou obdrží hodnoty na vystřihnutí kruhu, oválu či mnohoúhelníku, nejspíš dostal na frak.
Poznámka: V CSS 2 jsou všechny střihací oblasti obdélníkové. Očekáváme, že budoucí rozšíření dovolí neobdélníkové stříhání.
— 11.1.2. Vlastnostclip, CSS 2, W3C, 12. května 1998
Do rozšiřování clipu se nikdo nehrne, protože by musel odpovídat na související otázky:
overflow-x a overflow-y?
U kulatých rohů se na ně konsorcium vybodlo, protože vše související s borderem popisuje v jiném modulu CSS 3 než overflow a float. Mazané :-)
Jednoduché barevné přechody zkusil poprvé do CSS našroubovat Microsoft roku 2000 ve formě jednoho z filterů. Málokdo o ně tehdy stál. Ani v době, kdy Explorer 6 okupoval drtivou většinu trhu, je vesměs nikdo neužíval. Záhlaví oken ve Windowsu 98 zřejmě stačilo ke štěstí všem tehdejším přechodomilům na internetu.
Strůjcem nové módy barevných přechodů v uživatelském rozhraní je pravděpodobně Apple se svým chytrým telefonem. Lidem se to líbí, šup s tím do Webkitů a z Webkitů do CSS specifikace…
— Živá ukázka opakovaného přechodu nedělaného pomocírepeating-linear-gradient.
Škoda, že prohlížeče nepoužívají při kreslení barevných přechodů dithering. Kdyby jej používaly, byla by alespoň ta prefixovaná ohavnost
Před šesti lety bylo v módě pruhované pozadí, to se dělávalo obrázkem a nikoho nenapadlo zavádět background-stripes nebo něco podobného.
S podporou dynamicky načítaných písem přišly jako první také revoluční čtyřkové verze prohlížečů. Netscape prosazoval TrueDoc načítaný přes HTML element <link rel="fontdef"> nebo CSS pravidlo @fontdef, Microsoft s Adobe za krkem zase Embedded OpenType načítaný přes pravidlo @font-face.
V roce 1997 o podobný vynález nebyl moc zájem.
Díky @font-face je snazší psát ošklivě a špatně čitelně.
— Živá ukázka neoblíbeného písma nenačítaného přes@font-face.
Konsorcium zařadilo Explorerem raženou syntaxi do CSS 2, ale nedoporučilo žádný konkrétní formát písma. Kvůli všeobecnému nezájmu a vysokým nárokům na implementaci se později rozhodlo, že @font-face z první revize (označované jako 2.1) opět vyhodí. Toto rozhodnutí získalo punc právoplatného W3C doporučení v červnu 2011, paradoxně v době, kdy se @font-face konečně dočkal rozumně využitelné podpory ze strany všech prohlížečů.
Alespoň se teď mohou frikulíni radovat z novinky v CSS 3.
Stín u textu se též vyskytl již v CSS 2. Jako jediný vizuální efekt svého druhu tam docela vyčníval. Zejména v roce 1998, kdy se grafické karty radovaly, že umí 24-bitovou barevnou hloubku při rozlišení 1024×768.
Čtyřkový Explorer sice tou dobou podporoval filter: shadow, ale jeho efekt nebyl tak hezký a rozmazaný jako sen konsorcia a k funkčnosti potřeboval zapnout tehdy nepříliš pochopený hasLayout.
Samotný stín. Text, od něhož je vrhnut, je někde pryč.
— Živá ukázka něčeho rozmazaného.
Ukázkově pěkný text-shadow přineslo až o pět let později Safari. Explorer tuto vlastnost nepodporuje dodnes, i když devítka zná alespoň blokovou variantu stínů: vlastnost box-shadow.
Jiné optické efekty, jako je třeba odraz, se do CSS neprobojovaly. Nemáme reflection, protože módní vlna „Webu 2.0“ stihla včas odplout.
Některé pokusy o obohacení stylopisového jazyka módními výstřelky odumřely dříve, než se jim povedlo došourat do specifikací:
filtery.
filtery.
scrollbar-něco-color ohrnovali experti přes použitelnost nos. Nyní se cosi podobného pokouší prosadit Webkit.
appearance.
border.
border-něco-colors se nechytil.
include-source od Netscapu i -o-replace od Opery ustoupily elementu <iframe>.
::selection vypadl z návrhů krátce poté, co jej všechny významné prohlížeče implementovaly (s prefixem či bez).
Kynutí CSS specifikací zvyšuje nároky na prohlížeče, proto by konsorcium mělo důkladně přemýšlet nad tím, které vlastnosti mají šanci na dlouhodobé využívání. Je sice fajn, že jsou všechna W3C doporučení veřejně dostupná a patentůprostá, ale k tomu, aby kdokoliv mohl svobodně napsat vlastní prohlížeč, sama otevřenost nestačí — důležitý je i rozumný rozsah požadavků.
Až si budete příště říkat, jak jsou prohlížeče hloupé, uvědomte si prosím, kolik zbytečností musí umět.