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
  • print
  • 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

  1. ^ Media Queries Publication History 19 June 2012
  2. ^ Håkon Wium Lie. „Cascading HTML Style Sheets”. Приступљено 20. 1. 2013. 
  3. ^ Basic HTML data types
  4. ^ Re: Feedback on Media Queries CR from Håkon Wium Lie on 2002-07-17 ([email protected] from July 2002)
  5. ^ Media queries
  6. ^ „CSS media queries”. Mozilla Developer Network and individual contributors. Приступљено November 2012.  Проверите вредност парамет(а)ра за датум: |access-date= (помоћ)
  7. ^ How to create media queries in Responsive Web Design - 31st July 2012
  8. ^ „HTML link tag”. W3Schools. Приступљено November 2012.  Проверите вредност парамет(а)ра за датум: |access-date= (помоћ)
  9. ^ „Media Queries”. World Wide Web Consortium. Приступљено November 2012.  Проверите вредност парамет(а)ра за датум: |access-date= (помоћ)
  10. ^ „Media Queries”. World Wide Web Consortium. Приступљено November 2012.  Проверите вредност парамет(а)ра за датум: |access-date= (помоћ)
  11. ^ „Media Queries”. Sitepoint. Приступљено November 2012.  Проверите вредност парамет(а)ра за датум: |access-date= (помоћ)

Spoljašnje veze