Media queries
Media Queries (srpski: upiti medija) je CSS3 modul koji omogućava renderovanje sadržaja kako bi se prilagodio uslovima kao što je rezolucija ekrаna (npr. ekranu telefona i ekranu računara). Postao je W3C preporučeni standard u junu 2012.[1].
Istorija
[уреди | уреди извор]Media queries su osmišljeni u Håkon Wium Lie-ovom početnom predlogu CSS-a 1994,[2] ali nisu postali deo CSS1. HTML4 preporuka iz 1997 prikazuje primer kako se Media Queries mogu dodati u budućnosti.[3] U 2000, W3C počinje da radi na Media Queries i na drugoj šemi za podršku različitih uređaja: CC/PP. Ovo su dve stvari koje rešavaju isti problem, ali CC/PP je orijentisan ka serveru, dok su Media Queries orijentisani ka pretraživaču.[4] Prvi javni radni nacrt za Media Queries je objavljen 2001.[5] Specifikacija postaje deo W3C preporuke 2012. nakon što su pretraživači dodali podršku.
Korišćenje media queries
[уреди | уреди извор]Media query se sastoji od tipa medija i jednog ili više izraza, uključujući medija karakteristike, koje mogu imati vrednost ili true ili false. Rezultat upita je tačan ako se tip medija naveden u upitu poklapa sa tipom uređaja na kom je prikazan dokument i ako su svi izrazi u upitu tačni. Kada je upit tačan, odgovarajući stil strane ili pravila stila se primenjuju, praćen normalnim kaskadnim stilom.[6][7]
Jedan jednostavan primer:
@media screen and (min-width:500px) { ... }
Tip medija
[уреди | уреди извор]Tip medija može biti deklarisan u head HTML dokumenta koristeći "media" atribut unutar <link> elementa. Vrednost "media" atributa određuje na kom uređaju će se linkovon dokument prikazati.[8] Tipovi medija mogu biti deklarisani i u XML instrukcijama, @import at-rule, i @media at-rule. CSS2 definiše sledeće tipove medija:[9]
- braille
- embossed
- handheld
- projection
- screen
- speech
- tty
- tv
Tip medija "all" se može koristiti da se ukaže da se stil strane primenjuje na se tipove medija.[10]
Karakteristike medija
[уреди | уреди извор]Sledeća tabela sadrži karakteristike medija nabrojane u poslednjoj W3C preporuci za media queries, (19. 6. 2012).[11]
| Karakteristika | Vrednost | Min/Max | Opis |
|---|---|---|---|
| color | integer | da | broj bitova po komponenti boje |
| color-index | integer | da | broj unosa u tabeli pretraživanja boja |
| aspect-ratio | integer/integer | da | odnos širine i visine (width/height) |
| device-aspect-ratio | integer/integer | da | odnos širine i visine na uređaju (device-width/device-height) |
| device-height | dužina | da | visina na izlaznom uređaju |
| device-width | dužina | da | širina na izlaznom uređaju |
| grid | integer | ne | tačno za uređaje sa gridom |
| height | dužina | da | visina rendirane površine |
| monochrome | integer | da | broj bitova po pikselu u monohromatskom frejm baferu |
| resolution | rezolucija ("dpi" ili "dpcm") | da | rezolucija |
| scan | "progressive" ili "interlaced" | ne | proces skeniranja za "tv" tip medija |
| width | dužina | da | širina rendirane površine |
| orientation | portrait ili landscape | ne | orijentacija dokumenta |
Reference
[уреди | уреди извор]- ^ Media Queries Publication History 19 June 2012
- ^ Håkon Wium Lie. „Cascading HTML Style Sheets”. Приступљено 20. 1. 2013.
- ^ Basic HTML data types
- ^ Re: Feedback on Media Queries CR from Håkon Wium Lie on 2002-07-17 (www-style@w3.org from July 2002)
- ^ Media queries
- ^ „CSS media queries”. Mozilla Developer Network and individual contributors. Приступљено November 2012. Проверите вредност парамет(а)ра за датум:
|access-date=(помоћ) - ^ How to create media queries in Responsive Web Design - 31st July 2012
- ^ „HTML link tag”. W3Schools. Приступљено November 2012. Проверите вредност парамет(а)ра за датум:
|access-date=(помоћ) - ^ „Media Queries”. World Wide Web Consortium. Приступљено November 2012. Проверите вредност парамет(а)ра за датум:
|access-date=(помоћ) - ^ „Media Queries”. World Wide Web Consortium. Приступљено November 2012. Проверите вредност парамет(а)ра за датум:
|access-date=(помоћ) - ^ „Media Queries”. Sitepoint. Приступљено November 2012. Проверите вредност парамет(а)ра за датум:
|access-date=(помоћ)