CSS2 -- novΘ trendy v kaskßdov²ch stylech

Ji°φ Kosek ml.

Uplynulo o n∞co mßlo vφce ne₧ rok od doby, kdy byly kaskßdovΘ styly prvnφ ·rovn∞ (CSS1) p°ijaty jako doporuΦenφ W3C konsorcia -- a tedy de facto jako standard. Poslednφ verze prohlφ₧eΦ∙ ji₧ podporujφ v∞tÜinu vlastnostφ CSS1. I p°esto se vÜak se strßnkami, kterΘ vyu₧φvajφ mo₧nosti styl∙, setkßme na Internetu pom∞rn∞ z°φdka. Je to tφm, ₧e ve starÜφch prohlφ₧eΦφch bez podpory styl∙ vypadajφ tyto strßnky pon∞kud chud∞. Efekty, kterΘ lze dosßhnout jednoduch²m a krßtk²m stylem, se proto do strßnek jeÜt∞ po°ßd vklßdajφ jako velkΘ obrßzky, jejich₧ p°enos znaΦn∞ zat∞₧uje p°enosovou kapacitu Internetu a zpomaluje naΦφtanφ strßnky.

Pon∞kud paradoxnφ pak n∞komu m∙₧e p°ipadat zve°ejn∞nφ nßvrhu novΘ verze kaskßdov²ch styl∙ v dob∞, kdy kaskßdovΘ styly nemajφ p°φliÜ velkou podporu u tv∙rc∙ strßnek. KaskßdovΘ styly druhΘ ·rovn∞ (CSS2) jsou vÜak zcela zp∞tn∞ kompatibilnφ se starÜφ verzφ a standardizujφ novΘ vlastnosti, jejich₧ vznik si ji₧ vy₧ßdala praxe.

Ne₧ se podφvßme na jednotlivΘ novinky, struΦn∞ si jeÜt∞ p°ipomene, co to jsou kaskßdovΘ styly. KaskßdovΘ styly umo₧≥ujφ pro ka₧d² element na webovskΘ strßnce definovat mnoho jeho vizußlnφch atribut∙ -- barvu, druh pou₧itΘho pφsma, zp∙sob zarovnßnφ apod. P°i tvorb∞ strßnek pak pomocφ tag∙ vyznaΦujeme strukturu dokumentu -- konkrΘtnφ vzhled jednotliv²ch element∙ je vÜak urΦen stylem. Krom∞ v²hod, kterΘ p°inßÜφ odd∞lenφ struktury dokumentu od definice vzhledu, p°inßÜφ styly ·sporu mφsta a umo₧≥ujφ snadn∞jÜφ modifikace vzhledu strßnky nebo cel²ch skupin strßnek dohromady.

Podpora vφce mΘdiφ

Sami jist∞ vφte, ₧e obrazovka a tiskßrna jsou zcela odliÜnß v²stupnφ za°φzenφ. Pokud n∞co vypadß p∞kn∞ a Φiteln∞ na obrazovce, nemusφ to ji₧ tak dob°e dopadnou po vytiÜt∞nφ. P°φkladem je t°eba sprßvnß volba °ezu pφsma. Na obrazovce jsou dob°e Φitelnß bezpatkovß pφsma (Arial, Helvetica), pro tisk se vÜak mnohem lΘpe hodφ patkovß pφsma (Times), proto₧e patky p°irozen²m zp∙sobem vedou oko Φtenß°e po °ßdku z jednoho konce papφru na druh².

CSS2 umo₧≥ujφ v jednom stylu definovat n∞kterΘ vlastnosti odliÜn∞ pro r∙znß v²stupnφ za°φzenφ. Podporovßny jsou nßsledujφcφ typy v²stupnφch za°φzenφ: hlasovΘ syntetizßtory, on-line zobrazovaΦe braillova pφsma, tiskßrny braillova pφsma, malΘ obrazovky (PDA), tiskßrny, slide pro zp∞tnΘ projektory, obrazovky, znakovΘ terminßly a televiznφ obrazovky.

Krom∞ nejb∞₧n∞jÜφ pot°eby odliÜit zp∙sob zobrazenφ na obrazovce od tisku, je kladen velk² d∙raz na usnadn∞nφ v²stupu pro u₧ivatele s r∙zn²mi posti₧enφmi a na podporu za°φzenφ s menÜφ rozliÜovacφ schopnostφ (nap°. WebTV).

Typ mΘdia nemusφ b²t urΦen jen v kaskßdovΘm stylu. P°i p°ipojovßnφ stylu k HTML dokumentu nynφ m∙₧eme urΦit typ mΘdia, pro kter² je styl urΦen. Prohlφ₧eΦ sßm zvolφ vhodn² styl podle toho, zda chceme dokument zobrazit na obrazovce nebo nap°. vytisknout.

Podpora mΘdiφ se strßnkovan²m v²stupem

P°i tisku HTML dokumentu musφ prohlφ₧eΦ rozd∞lit v²stup do n∞kolika strßnek. Tento ·kol vypadß na prvnφ pohled jednoduÜe, ale v praxi p°inßÜφ mnoho problΘm∙. Nejv∞tÜφm problΘmem je prßv∞ nalezenφ vhodnΘho mφsta pro zalomenφ strany. Jist∞ se vßm stalo, ₧e se p°i tisku webovskΘ strßnky objevil strßnkov² zlom uprost°ed obrßzku, tabulky nebo bezprost°edn∞ za nadpisem.

N∞kterΘ z t∞chto problΘm∙ pomßhajφ prohlφ₧eΦi vy°eÜit prßv∞ novΘ vlastnosti p°idanΘ do CSS2. U ka₧dΘho elementu nynφ m∙₧eme specifikovat, zda se p°ed Φi za nφm strßnka musφ, m∙₧e nebo nesmφ zalomit. ObvyklΘ je tedy takovΘ nastavenφ, kterΘ zakß₧e zalomenφ strany za vÜemi nadpisy a naopak jej p°ed vÜemi nadpisy umo₧nφ.

Dßle m∙₧eme nastavit minimßlnφ poΦet °ßdk∙ jednoho odstavce na konci nebo na zaΦßtku strßnky. Tφm lze zamezit vzniku sirotk∙ a vdov p°i tisku.

M∙₧eme nastavit i velikost a orientaci papφru, oboustrann² tisk, okraje zvlßÜ¥ pro prvnφ stranu a pro vÜechny levΘ a pravΘ strany. Stylem lze ovlivnit i tisk o°ezov²ch a pasovacφch znaΦek.

Vlastnosti pro hlasovΘ syntetizßtory

HlasovΘ syntetizßtory nejsou zatφm zcela b∞₧n²m dopl≥kem ka₧dΘho poΦφtaΦe, ale CSS2 pro n∞ ji₧ nabφzφ celkem dobrou podporu. Pro ka₧d² element m∙₧eme nastavit mnoho vlastnostφ. Vyberu jen n∞kterΘ: velikost prodlev, sφlu a t≤n hlasu, druh hlasu (mu₧, ₧ena, dφt∞), hlasitost, sm∞r odkud hlas p°ichßzφ atd. Nastavit lze nap°φklad i to, zda se bude obsah elementu Φφst nebo hlßskovat. To je velmi u₧iteΦnΘ, zvlßÜ¥ kdy₧ v HTML 4.0 existujφ elementy prßv∞ pro oznaΦenφ zkratek.

VylepÜenß prßce s fonty, download font∙

P°edchozφ verze styl∙ umo₧≥ovala pom∞rn∞ p°esn∞ specifikovat druh pφsma, kter² chceme pou₧φt pro zobrazenφ konkrΘtnφho elementu. Pokud vÜak dan² °ez pφsma nebyl v systΘmu k dispozici, pou₧il se v podstat∞ libovoln² jin² °ez pφsma. CSS2 p°inßÜejφ v tΘto oblasti mnohß zlepÜenφ.

Pomocφ selektoru @font-face lze definovat vlastnφ °ezy pφsma. U ka₧dΘho °ezu m∙₧eme definovat jednak nßzev pφsma, pod kter²m se bude °ez hledat p°φmo v systΘmu. Krom∞ toho lze definovat URL adresu, z kterΘ se dan² °ez m∙₧e stßhnout. Proto₧e se dnes pou₧φvß n∞kolik formßt∙ font∙, lze u URL urΦit formßt, ve kterΘm je pφsmo ulo₧eno. Prohlφ₧eΦ se pak nesna₧φ stahovat pφsma ve formßtech, kter²m nerozumφ.

Nejv∞tÜφ zajφmavostφ je vÜak mo₧nost zapsat u ka₧dΘho vlastnφho °ezu zßkladnφ charakteristiku, kterß se sklßdß z urΦenφ rodiny, varianty, stylu, duktusu a velikosti pφsma. V charakteristice m∙₧eme navφc urΦit i sφlu vertikßlnφch a horizontßlnφch tah∙ pφsma, sklon a velikost jednotliv²ch dota₧nic. Pokud prohlφ₧eΦ nemß k dispozici definovan² °ez v systΘmu a ani se mu nepoda°φ pφsmo nahrßt z Internetu, pou₧ije nainstalovan² font, kter² sv²mi parametry nejlΘpe odpovφdß zadanΘ charakteristice. Dosßhneme tak p°ekvapiv∞ dobrΘ v∞rnosti zobrazenφ, i pokud po₧adovan² font nenφ p°φmo k dispozici.

Tabulky

CSS2 nov∞ p°idßvajφ vlastnosti pro formßtovßnφ tabulek. Tato Φßst nßvrhu vÜak jeÜt∞ nenφ zdaleka ve finßlnφ podob∞.

Vlastnosti pro °φzenφ pozice

Vlastnosti pro °φzenφ pozice umo₧≥ujφ pro ka₧d² element urΦit jeho p°esnou polohu na obrazovce. Tento rys ji₧ dnes podporujφ prohlφ₧eΦe Netscape Communicator a Internet Explorer, proto₧e je to jeden ze zßkladnφch kamen∙ dynamickΘho HTML.

Krom∞ pozice lze urΦit i po°adφ element∙, kterΘ se p°ekr²vajφ, a tφm ovliv≥ovat jejich viditelnost.

Selektory

Selektor slou₧φ v kaskßdov²ch stylech k urΦenφ element∙, na kterΘ se budou danß pravidla stylu aplikovat. V novΘ verzi styl∙ byly mo₧nosti selektor∙ podstatn∞ rozÜφ°eny.

CSS1 umo₧≥ovaly pou₧itφ kontextovΘ selektoru X Y, kter² platnost pravidla omezil na elementy Y obsa₧enΘ v elementu X. Nynφ m∙₧eme pou₧φt i selektor X > Y, kter² pravidlo aplikuje na elementy Y obsa₧enΘ pouze p°φmo v elementu X.

Nov² pseudoelement X:first-child, aplikuje pravidlo pouze na prvnφ element obsa₧en² v elementu X.

Pokud chceme, aby se pravidlo aplikovalo na element Y, kter² bezprost°edn∞ nßsleduje za elementem X, m∙₧eme pou₧φt nov² selektor X + Y.

Novinkou jsou selektory, kterΘ pracujφ na zßklad∞ obsahu atribut∙. Selektoru X[z] vyhovujφ vÜechny elementy X, kterΘ majφ na n∞jakou hodnotu nastaven atribut z. Pokud chceme pravidlo aplikovat pouze pro urΦitou hodnotu w atributu z, pou₧ijeme selektor X[z=w]. Poslednφ novß varianta selektoru mß tvar X[z~=w]. Oproti p°edchozφ variant∞ nynφ staΦφ, aby hodnota atributu obsahovala slovo w.

AutomatickΘ Φφslovßnφ

Nßvrh poΦφtß s tφm, ₧e ve stylu p∙jde definovat n∞kolik ΦφtaΦ∙. ╚φtaΦe pak m∙₧eme vyu₧φt nap°. pro automatickΘ Φφslovanφ nadpis∙, obrßzk∙ nebo tabulek. Krom∞ samotnΘho obsahu ΦφtaΦe m∙₧eme p°ed nebo za element p°ipojit libovoln² text (nap°. Tabulka Φ.).

KaskßdovΘ styly a XML

Zatφmco CSS1 byly ·zce svßzßny s jazykem HTML, nynφ m∙₧eme CSS2 pou₧φt i jako stylov² jazyk pro XML (eXtensible Markup Language). Hlavn∞ kv∙li XML byly do CSS2 p°idßny selektory, kterΘ umo₧≥ujφ reagovat na obsah atribut∙.

V blφzkΘ dob∞ bude velice zajφmavΘ sledovat oblast stylov²ch jazyk∙ pro XML. Dnes toti₧ existujφ nejmΘn∞ t°i stylovΘ jazyky, kterΘ je mo₧no spoleΦn∞ s XML pou₧φt. Krom∞ CSS2 se jednß o DSSSL a XSL.

DSSSL (Document Style Semantics and Specification Language) je pom∞rn∞ slo₧it² stylov² jazyk a proto se asi neuplatnφ v Internetov²ch aplikacφch XML. Jeho v²sadnφ postavenφ vÜak bude v oblastech s vysok²mi nßroky na typografickou ·rove≥ v²stupu. Za pßr let se s nφm tedy nejspφÜe setkßme v r∙zn²ch publikaΦnφch systΘmech zalo₧en²ch na XML. Na Internetu se m∙₧e uplatnit jeho podmno₧ina DSSSL On-line specißln∞ zjednoduÜenß prßv∞ pro pot°eby elektronick²ch dokument∙.

Novinkou je XSL (eXtensible Stylesheet Language) stylov² jazyk navr₧en² specißln∞ pro pot°eby XML. Vytvo°ila jej firma Microsoft spoleΦn∞ s n∞kolika dalÜφmi spoleΦnostmi, kterΘ se zab²vajφ elektronick²m publikovßnφm (nap°. ArborText). Nynφ se Φekß na to, jak se k nßvrhu vyjßd°φ ostatnφ ΦlenovΘ W3C konsorcia.

XSL vychßzφ z DSSSL, ale vÜe p°izp∙sobeno pot°ebßm Internetu. Samotn² styl XSL se zapisuje v jazyce XML. ZajφmavΘ je, ₧e v XSL lze pou₧φvat skripty zapsanß v jazyce ECMAScript, co₧ je standardizovanß verze JavaScriptu. Je to o to zajφmav∞jÜφ, kdy₧ si uv∞domφme, ₧e Microsoft jinak protlaΦuje Visual Basic kam to jen jde.

P°esto₧e je XSL teprve v plenkßch, ji₧ nynφ existuje n∞kolik program∙, kterΘ jej podporujφ. Jednak je to ActiveX komponenta od Microsoftu, kterß umo₧≥uje zobrazenφ XML dokument∙ zformßtovan²ch podle XSL. DalÜφm p°φkladem m∙₧e b²t XML Styler od ArborTextu, kter² umo₧≥uje vytvß°enφ XSL styl∙ bez znalosti syntaxe tohoto jazyka.

O tom, jak rychle se CSS2 stane b∞₧n∞ pou₧φvanou technologiφ, rozhodne p°edevÜφm podpora prohlφ₧eΦ∙. Ji₧ dnes jsou n∞kterΘ z novinek v CSS2 podporovßny Communicatorem i Internet Explorerem.

Nßvrh CSS2 naleznete na adrese http://www.w3.org/TR/WD-css2.

Specifikace CSS2 je mnohem srozumiteln∞jÜφ ne₧ jejφ p°edch∙dce CSS1. Pomßhß tomu i velkΘ mno₧stvφ ilustrativnφch obrßzk∙.