Seznámení s Media Queries v CSS 3
V době, kdy webové technologie ještě nebyly rozvinuté a existovalo jen málo prohlížečů, se v zásadě dařilo vytvářet stránky, které vypadaly a fungovaly všude stejně. Postupem času však webové technologie pronikaly na další a další platformy, důsledkem čehož nelze webovým stránkám zajistit všude naprosto stejnou funkcionalitu a vzhled.
Co si v této situaci počít? Nabízejí se dvě odlišné cesty:
- Předestřený fakt ignorovat a nadále se soustředit na jedinou platformu – grafické desktopové prohlížeče. To je nejjednodušší, leč nikoliv nejefektivnější. Weby takto vytvořené nemusí být ideální pro tisk nebo se z nich v nevizuálních interpretech vytratí informace prezentované grafickou formou atd.
- Přizpůsobovat weby zvlášť pro každou platformu. To je sice flexibilní a z principu správný přístup, ale kdyby měl být uplatňovaný opravdu důsledně, bylo by to velmi náročné vzhledem ke stále větší segmentaci.
Nás bude dál zajímat b. Abychom mohli poskytnout každému zařízení optimální podobu webové stránky, je nutné tato zařízení nejprve nějak rozlišit. Pro potřeby CSS k tomuto rozlišení výborně poslouží selektor média, který lze uplatnit už na úrovni značkovacích jazyků.
XML:
<?xml-stylesheet rel="stylesheet" media="print" href="tisk.css" ?>
XHTML:
<link rel="stylesheet" type="text/css" media="print" href="tisk.css" />
HTML:
<link rel="stylesheet" type="text/css" media="print" href="tisk.css">
Kompletní seznam mediálních selektorů pro HTML 4 je: all, aural, braille, handheld, print, projection, screen, tty, tv
. CSS 2 definuje v podstatě tytéž mediální selektory, pouze vynechává aural
a přidává embossed
a speech
. Novější normy mohou opět selektovat jiné nebo další typy médií. Specifikace Media Queries, která je momentálně ve stádiu Candidate Recommendation, čili již velmi blízko ke schválení, tyto jednoduché selektory výrazně sofistikuje – přidává k nim operátory a výrazy. Na tuto specifikaci se odkazuje i připravovaný HTML 5.
Selektor média lze využít i uvnitř CSS a to buď při připojení externího stylopisu (IE 6 ani 7 však nepodporuje pravidlo @import!
):
@import „display.css“ handheld;
nebo u pravidla @media
:
@media screen, projection, tv {…}
Při takto selektivně utvářeném stylování se vyplatí řadit jednotlivé mediální selektory od nejobecnějších směrem ke konkrétnějším.
Nejobecnějším selektorem je nepochybně all
. Sada stylů s tímto selektorem by měla být proto uvedena nejdřív, aby její konfliktní deklarace mohly být snadněji „přebity“ deklaracemi v následujících sadách stylů.
O selektoru screen
se asi nedá hovořit jako o obecném selektoru, faktem však zůstává, že jej reflektuje mnoho zařízení, což ze sady stylů s tímto selektorem dělá kandidáta na druhé místo.
Další místa by měla patřit sadám stylů s hromadnými mediálními selektory (tj. selektory pro více médií, jednotlivá média se od sebe oddělují čárkou, viz předchozí příklad). Teprve pak je vhodná chvíle na sady stylů s nejkonkrétnějšími selektory. Jak by celý takový stylopis mohl vypadat, nastiňuje následující příklad.
@media all {
/* styly pro všechna zařízení */ }
@media screen {
/* styly pro obrazovku */ }
@media projection, tv {
/* styly pro projekci a televizi */ }
@media projection {
/* styly pro projekci */ }
@media print {
/* styly pro tisk */ }
@media only handheld and (max-width: 25em) {
/* styly pro zařízení s malým displayem */ }
Syntaxe
Mediální selektor je vlastně dotazem na typ interpreta (odtud jeho standardní název media query), který může být ještě upřesněn pomocí libovolného počtu výrazů. Výraz (expression) v terminologii Media Queries znamená požadavek na určité parametry interpreta, např. rozlišení, šířku, škálu barevnosti, orientaci apod. Výrazy jsou uzavřeny do kulatých závorek a oddělené operátorem AND. Operátor NOT (negace), nebo ONLY (vždy maximálně jen jeden z nich!) musí stát na začátku! Operátor ONLY slouží jako nárazník proti interpretům, kteří neznají výrazy podmíněné mediální selektory a kteří by z nich teoreticky mohli vyhodnocovat pouze typ média. Pro názornost je zde pár příkladů s logickými operátory:
@media screen, not handheld, only tv {
/* styly pro obrazovku, potažmo i televizi */ }
@media only print and (min-resolution: 300dpi) and (min-color-index: 256) {
/* styly pro barevnou tiskárnu s kvalitním tiskem */ }
Media features
Media features jsou součástí výrazů. Syntakticky připomínají CSS vlastnosti (properties): mají svá jména a akceptují určité hodnoty. Zásadně se však od nich liší svým účelem. S pomocí CSS vlastností se prvkům deklaruje zamýšlený styl, s pomocí features se konkretizuje dotaz na výstupní zařízení.
V následující tabulce jsou seřazeny všechny navržené features. Druhý sloupec udává, zda je možné danou feature použít s prefixem min
nebo max
. Proměnné x, y ve třetím sloupci reprezentují čísla.
Název | Prefix | Hodnoty |
---|---|---|
width | Ano | xpx, xem, xex, xcm, … |
height | Ano | xpx, xem, xex, xcm, … |
device-width | Ano | xpx, xem, xex, xcm, … |
device-height | Ano | xpx, xem, xex, xcm, … |
orientation | Ne | portrait, landscape |
aspect-ratio | Ano | x/y |
device-aspect-ratio | Ano | x/y |
color | Ano | x |
color-index | Ano | x |
monochrome | Ano | x |
resolution | Ano | xdpi, xdpcm |
scan | Ne | progressive, interlace |
grid | Ne | 0, 1 |
Tipy
Místo prefixů min
či max
lze používat porovnávací operátory <
a >
. Např.:
(resolution > 300dpi).
Zápis výrazů lze zkrátit o hodnoty. Pár příkladů:
@media print and (color) /* pro barevnou tiskárnu */ { … }
@media print and (monochrome) /* pro černobílou tiskárnu */ { … }
Není pravidlem, aby se rozměry obrazovky shodovaly s rozměry okna prohlížeče. Okno nemusí být maximalizované z řady důvodů, např. když je stránka otevřena do nového okna; v systému Mac OS X se maximalizace okna ani moc nepoužívá, panuje zde poněkud jiná filosofie práce s okny než ve Windows a preferuje se optimální šířka okna. Na features device-width
, device-height
a device-height
je proto lepší raději nespoléhat a upřednostňovat width, height, aspect-ratio
.
Podpora
Podpora Media Queries je zatím sporadická a chabá, což by však nikoho od používání pokročilých mediálních selektorů nemělo odrazovat. Media Queries podporuje už Opera a Firefox 3.5.
Aktualizace 18. 10. 2010: Media Queries již podporují všechny významnější webové prohlížeče na mobilní i desktopové platformě. Opera 7+, Firefox 3.5, Safari 3+, Chrome, Internet Explorer 9+.
Mohlo by vás také zajímat
-
Členská sekce: 4 důvody proč ji mít na svém webu
12. března 2024 -
Windows App: Pracujte odkudkoliv, kdykoliv
3. listopadu 2024 -
Moderní trendy ve webdesignu: Top trendy pro rok 2024
12. ledna 2024 -
Jak zabezpečit váš chytrý telefon před kybernetickými hrozbami
30. listopadu 2023
Nejnovější
-
Nové trendy v doménách pro osobní projekty – DIY, LIVING a LIFESTYLE
9. prosince 2024 -
Jak chránit webové stránky před Web/AI Scrapingem
27. listopadu 2024 -
Jaký monitor je nejlepší k novému Macu Mini?
25. listopadu 2024 -
Výkonný a kompaktní: ASOME Max Studio s výjimečným poměrem cena/výkon
11. listopadu 2024
Sislik
Čvn 29, 2009 v 1:32Bych chtel jen dodat, ze desktopova Opera a desktopove Safari podporuje Media Queries z CSS3 uz delsi dobu (stable FF a IE8 bohuzel ne), ale co je podstatnejsi – Media Queires podporuji snad vsechny mobilni webove prohlizece (krome IEM) a tady to nadherne pomaha pri optimalizaci pro ruzna rozliseni a ruzne velke displaye
Jan Mikula
Čvc 1, 2009 v 21:39Tusim, ze novy Firefox 3.5 Media Queries rovnez podporuje.
Panzany
Říj 10, 2012 v 14:42Samá teorie, ale jak to vypadá v kódu, to už třetí den nemůžu najít… Jak se to kurva načítá nebo stačí jen jedno CSS? Kde jsou relevantní informace k tomuto tématu, když ně tady?
john
Říj 10, 2012 v 15:13Panzany: četl jste vůbec článek? :-)