70-480: CSS3 media queries

CSS istorija

1980 - CSS (Cascading Style Sheets) pagrindinius principus paėmęs iš SGML (137 psl.).
1996 - W3C išleido CSS 1 lygio rekomendacijas. Čia žodis rekomendacija reiškia formalus paleidimas.
1998 gegužę - išleistos rekomendacijos CSS 2 lygio ir pradėta dirbti prie CSS3. CSS3 išskirstė į modulius.
2005 - išleido CSS Level 2 Revision 1 (CSS2.1), CSS3 Selectoriai, CSS3 Text - galutinė versija, t.y. ne juodraštinė, pasirodė tik 2011.

Kadangi CSS3 sudarytas iš modulių, tai kiekvieno modulio statusas ir stabilumas - skirtingi. Modulių yra apie 50. Rekomendacinius statusus turi:

• media types
• namespace
• selectors level 3
• color

CSS2.1 įeina į CSS3, nes jie buvo kartu baigti.

Style - taisyklė, kuri apibrėžia HTML elemento dalį.

Style sheet - taisyklių rinkinys.

Bene pats galingiausias CSS įrankis - cascading.

Media queries

Pvz.,

@media screen and (max-width: 1024px){
    img.bg {
        left: 50%;
        margin-left: -512px; }
}

HTML4 ir CSS2 palaiko media, todėl žinome, kad galime vieną formatą vaizduoti ekrane, o kitą - spaudsdinimui. Buvo apibrėžti media tipai: print, screen.

Media queries leidžia daryti užklausas su width, color, height. Taigi, dizainas gali būti pritaikytas prie bet kokio įrenginio (išmaniesiems telefonams, tabletams), nekeičiant programinio kodo turinio.

Media tipas gali būti apibrėžtas ir taip:

media="screen, 3d-glasses, print and resolution > 90dpi"
nurodo į:



     
"screen"
"3d-glasses"
"print and resolution > 90dpi"

Media užklausa susidaro iš media tipo ir nulio arba kelių sąlygų.

Pavyzdys, parašytas su HTML:






Šis pavydzys išreiškia, kad tam tikras style sheet (example.css) naudojamas tam tikro media tipo įrenginyje ("screen") su tam tikra savybe (screen turi būti spalvotas).







Pavyzdys CSS su @import-rule:




@import url(color.css) screen and (color);

   

Media užklausa - tai loginė išraiška, turinti rezultatą true arba false.





All nurodo, kad tinka visų tipų įrenginiams.



@media all and (min-width:500px) { … }
@media (min-width:500px) { … }


Jeigu media neapibrėžta, tai reiškia true. Pvz., tas pats jei užrašyta:


@media all { … }
@media { … }


Išraiškose naudojami "min-" ir "max-", t.y. "ne mažesnis nei", "ne didesnis nei" - naudojami norint išvengti "daugiau", "mažiau" ženklo su "snapeliu."


Skirtimas tarp properties ir features:


Properties - deklaruoja, suteikia informaciją, kam bus naudojamas dokumentas. Jos gali turėti sudėtingesnių apskaičiavimų.
Features - apibrėžia reikalavimus output įrenginiui. Dažniausiai tai yra raktažodis ir skaičius.


Su media dar galime apibrėžti:

device-height ()
orientation (@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … })
device aspect ratio - santykis tarp device-with ir device-height


    For example, if a screen device with square pixels has 1280 horizontal
    pixels and 720 vertical pixels (commonly referred to as "16:9"), the
    following Media Queries will all match the device:




@media screen and (device-aspect-ratio: 16/9) { … }
@media screen and (device-aspect-ratio: 32/18) { … }
@media screen and (device-aspect-ratio: 1280/720) { … }
@media screen and (device-aspect-ratio: 2560/1440) { … }



  


color - apibrėžia, kiek spalvų turi palaikyti išorinis įrenginys.


monochrome


resolution


grid - naudojamas, kai išorinis atvauzdavimo įranginys yra grid arba bitmap.

http://www.w3.org/TR/css3-mediaqueries/