Marquee v CSS3

„Tak se nám marquee dostalo do CSS, paní Müllerová.“

Marquee je HTML značka s pohnutou historií. Představená v Internet Exploreru během první války prohlížečů a následně implementovaná v řadě dalších prohlížečů v oné válce poražených.

Je to takový pionýr z dob, kdy na nás každá webová stránka blikala a byla plná posouvajícího se textu. Značka <marquee> měla za úkol právě ono svislé nebo vodorovné posouvání obsahu.

Kam se nám staré značky ztrácejí

V HTML5 jsem <marquee> zahrnutou nenašel, takže i nadále se bude jednat o v prohlížečích běžně podporovaný nevalidní relikt. Narazil jsem na ni až při dnešním pročítání CSS blogu. Marquee se nám totiž možná dostane do CSS3.

Ono to není zas tak nelogické, když se rozhlédnu po webu, tak „posouvající se obsah“ naleznu skoro všude (pokud se pozorně podíváte, najdete ho i na titulce Root.cz) zpravidla řešený JavaScriptem. To po nějakém „centrálním“ řešení prostě volalo.

Overflow v CSS3

CSS3 rozšiřuje vlastnosti overflow, která je používaná již v CSS2 v případě, kdy není obsah bloku celý zobrazitelný. CSS2 umožňuje „přečnívající“ obsah buď prostě skrýt nebo zobrazit posuvník pro jeho nastránkování.

CSS3 zavádí vlastnost overflow-style, která může nabýt hodnot: scrollbar, panner, move, marquee.

Hodnota marquee odpovíná naší staré známé HTML značce <marquee>: The marquee effect consists of the content moving autonomously, without any user events to control it. A user who waits long enough will eventually see all the content that overflows.

Pro ovlivnění, jakým způsobem se bude takový marquee blok posouvat bylo do CSS3 přidáno několik dalších vlastností: marquee-style, marquee-loop, marquee-direction a marquee-speed.

Skriptovat nebo deklarovat?

Ať už se nám na webu posouvající se obsah líbí nebo ne, mne marquee v CSS3 těší, protože se jedná o další případ, kdy zbytečné javascriptování ustupuje možnosti deklarativní definice.

Nutno podotknout, že se jedná pouze o pracovní návrh specifikace, který se může změnit. Zatím jsem si nevšiml, že by nějaký prohlížeč začal CSS3 marquee podporovat, na to si ještě chvíli počkáme.

WebKit průkopníkem

Za zmínku stojí, že autoři WebKitu se pouští do mnohem odvážnějších CSS experimentů.

Označení odvážnější není vůbec přehnané, vždyť koho by ještě nedávno napadlo umístit do CSS vlastnosti volné transformace objektů jako je změna rozměrů bloku, zrcadlové převrácení, rotace nebo naklánění, to vše přímo ve webovém prohlížeči aplikovatelné na libovolný obsah.

A to už vůbec nemluvím o CSS animacích, pomocí kterých můžete deklarovat průběh změny jakékoliv CSS vlastnosti. Což v případě barvy zajistí ono zmíněné blikání. Pokud zapojíme transformační vlastnosti, může nám objekt na obrazovce třeba poletovat a rotovat zároveň (k vyzkoušení v nočních verzích WebKitu).

Některé z těchto odvážných experimentů jsou již součástí CSS3 (např. ona rotace), zda se tam dostanou i další si vůbec netroufám odhadovat.

BTW kdo si ještě myslí, že průkopníkem v CSS je dnes stále ještě Opera nebo snad dokonce ten populární prohlížeč Firefox?