Media Queriesdisruptive-innovations.com/zoo/slides/20130614-CSSDay/MQ.pdf · 14/06/2013 · Media...
Transcript of Media Queriesdisruptive-innovations.com/zoo/slides/20130614-CSSDay/MQ.pdf · 14/06/2013 · Media...
![Page 1: Media Queriesdisruptive-innovations.com/zoo/slides/20130614-CSSDay/MQ.pdf · 14/06/2013 · Media Features width height device-width](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa7e9247dee680c8e2f4b04/html5/thumbnails/1.jpg)
Media QueriesDaniel Glazman
CSSDay.nl · 14 June 2013
![Page 2: Media Queriesdisruptive-innovations.com/zoo/slides/20130614-CSSDay/MQ.pdf · 14/06/2013 · Media Features width height device-width](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa7e9247dee680c8e2f4b04/html5/thumbnails/2.jpg)
CSS WG
![Page 3: Media Queriesdisruptive-innovations.com/zoo/slides/20130614-CSSDay/MQ.pdf · 14/06/2013 · Media Features width height device-width](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa7e9247dee680c8e2f4b04/html5/thumbnails/3.jpg)
What it is about...
Select styles based on device's characteristics
The main component of « Responsive Design »
• A large CSS-based part...
• and a little API-based part
![Page 4: Media Queriesdisruptive-innovations.com/zoo/slides/20130614-CSSDay/MQ.pdf · 14/06/2013 · Media Features width height device-width](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa7e9247dee680c8e2f4b04/html5/thumbnails/4.jpg)
History (CSS part)
• Proposed as a WD by Opera and Microsoft in April 2001
• First CR in July 2002
• PR in April 2012...
• REC in June 2012...
• Implemented by all modern browsers
![Page 5: Media Queriesdisruptive-innovations.com/zoo/slides/20130614-CSSDay/MQ.pdf · 14/06/2013 · Media Features width height device-width](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa7e9247dee680c8e2f4b04/html5/thumbnails/5.jpg)
Original HTML4/CSS2 media types
all braille embossed handheld print
projection screen speech tty tv
![Page 6: Media Queriesdisruptive-innovations.com/zoo/slides/20130614-CSSDay/MQ.pdf · 14/06/2013 · Media Features width height device-width](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa7e9247dee680c8e2f4b04/html5/thumbnails/6.jpg)
HTML 4.01
6.13 Media descriptorsFuture versions of HTML may introduce new values and may allow parameterized values.
Each entry is truncated just before the first character that isn’t a US ASCII letter [a-zA-Z] (ISO 10646 hex 41-5a, 61-7a), digit [0-9] (hex 30-39), or hyphen (hex 2d)
![Page 7: Media Queriesdisruptive-innovations.com/zoo/slides/20130614-CSSDay/MQ.pdf · 14/06/2013 · Media Features width height device-width](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa7e9247dee680c8e2f4b04/html5/thumbnails/7.jpg)
CSS 2.1@media screen { ...}
<link rel="stylesheet" type="text/css" href="foo.css" media="screen" />
<style type="text/css" media="screen" />
![Page 8: Media Queriesdisruptive-innovations.com/zoo/slides/20130614-CSSDay/MQ.pdf · 14/06/2013 · Media Features width height device-width](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa7e9247dee680c8e2f4b04/html5/thumbnails/8.jpg)
Media Queries@media screen and (max-width: 500px) { ...}
<link rel="stylesheet" type="text/css" href="foo.css" media="screen and (max-width: 500px)" />
<style type="text/css" media="screen and (max-width: 500px)" />
![Page 9: Media Queriesdisruptive-innovations.com/zoo/slides/20130614-CSSDay/MQ.pdf · 14/06/2013 · Media Features width height device-width](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa7e9247dee680c8e2f4b04/html5/thumbnails/9.jpg)
Syntax
screen AND (color) AND (min-width: 100px)
NOT screen AND (max-width: 500px)
projection, handheld AND (max-resolution: 92dpi)
(orientation: portrait)
ONLY screen AND (max-width: 500px)
false
true
true
true
false
false
![Page 10: Media Queriesdisruptive-innovations.com/zoo/slides/20130614-CSSDay/MQ.pdf · 14/06/2013 · Media Features width height device-width](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa7e9247dee680c8e2f4b04/html5/thumbnails/10.jpg)
CSS powaaaah
screen AND (max-width: calc(650px - 2em))
![Page 11: Media Queriesdisruptive-innovations.com/zoo/slides/20130614-CSSDay/MQ.pdf · 14/06/2013 · Media Features width height device-width](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa7e9247dee680c8e2f4b04/html5/thumbnails/11.jpg)
NOT
NOT projection and (orientation: landscape)
truetrue
truefalse
NOT negates the whole query,not the media type only...
![Page 12: Media Queriesdisruptive-innovations.com/zoo/slides/20130614-CSSDay/MQ.pdf · 14/06/2013 · Media Features width height device-width](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa7e9247dee680c8e2f4b04/html5/thumbnails/12.jpg)
ONLY
it's only here to hide style sheetsfrom older user agents...
![Page 13: Media Queriesdisruptive-innovations.com/zoo/slides/20130614-CSSDay/MQ.pdf · 14/06/2013 · Media Features width height device-width](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa7e9247dee680c8e2f4b04/html5/thumbnails/13.jpg)
Don't worry...
Groups of media descriptors are notdropped if one descriptor only is invalid
screen, projection, print AND (vendor: epson)
screen, projection
![Page 14: Media Queriesdisruptive-innovations.com/zoo/slides/20130614-CSSDay/MQ.pdf · 14/06/2013 · Media Features width height device-width](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa7e9247dee680c8e2f4b04/html5/thumbnails/14.jpg)
Media Featureswidth <length>height <length>
device-width <length>device-height <length>orientation portrait | landscapeaspect-ratio <integer>/<integer>
device-aspect-ratio <integer>/<integer>color <integer> | ∅
color-index <integer> | ∅monochrome <integer> | ∅
resolution <number>(dpi | dpcm)scan progressive | interlacegrid <integer> | ∅
![Page 15: Media Queriesdisruptive-innovations.com/zoo/slides/20130614-CSSDay/MQ.pdf · 14/06/2013 · Media Features width height device-width](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa7e9247dee680c8e2f4b04/html5/thumbnails/15.jpg)
The API part
media serialization of the query
matchestrue if the current
rendering matches the query
addListener()removeListener()
to listen to query changes
MediaQueryList window.matchMedia(query)
![Page 16: Media Queriesdisruptive-innovations.com/zoo/slides/20130614-CSSDay/MQ.pdf · 14/06/2013 · Media Features width height device-width](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa7e9247dee680c8e2f4b04/html5/thumbnails/16.jpg)
What's missing #1
• paginated browsing
• ambient light detection
• JavaScript's availability
• human language
• ...
![Page 17: Media Queriesdisruptive-innovations.com/zoo/slides/20130614-CSSDay/MQ.pdf · 14/06/2013 · Media Features width height device-width](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa7e9247dee680c8e2f4b04/html5/thumbnails/17.jpg)
What's missing #2
CSSRule.matchingMediaquery necessary for that
rule to be applied
CSSRule.matchMedia(query)is the query enabing that
CSS rule?
MediaListparsed representation of
each query
![Page 18: Media Queriesdisruptive-innovations.com/zoo/slides/20130614-CSSDay/MQ.pdf · 14/06/2013 · Media Features width height device-width](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa7e9247dee680c8e2f4b04/html5/thumbnails/18.jpg)
Media Querieson steroids
• a Media Query is a condition
• a condition is a boolean
• trivial to write a JavaScript function returning a boolean
Conclusion ?-)
![Page 19: Media Queriesdisruptive-innovations.com/zoo/slides/20130614-CSSDay/MQ.pdf · 14/06/2013 · Media Features width height device-width](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa7e9247dee680c8e2f4b04/html5/thumbnails/19.jpg)
Media Querieson steroids #2
CSS.customMedia("foobar", CSSMFfoobar);
CS.customMedia.update(aFeature, aValue);
![Page 20: Media Queriesdisruptive-innovations.com/zoo/slides/20130614-CSSDay/MQ.pdf · 14/06/2013 · Media Features width height device-width](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa7e9247dee680c8e2f4b04/html5/thumbnails/20.jpg)
Media Querieson steroids #3
CSSMFfoobar {
get value() { ... },
resolve: function(aFeature, aPrefix, aValueString) { /* BOOL */ },
addListener: function(aEngine, aFeature) { /* adds device listener /* },
removeListener: function(aEngine, aFeature) { /* remove device listener /* },}
![Page 21: Media Queriesdisruptive-innovations.com/zoo/slides/20130614-CSSDay/MQ.pdf · 14/06/2013 · Media Features width height device-width](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa7e9247dee680c8e2f4b04/html5/thumbnails/21.jpg)
Maintenance
We should be able to associate a name toa given Media Query for readability and
maintenance reasons.
@var iPadRetinaL screen AND (orientation: landscape) AND (resolution: 264dpi);
@media var(tablet) { ... }
21
![Page 22: Media Queriesdisruptive-innovations.com/zoo/slides/20130614-CSSDay/MQ.pdf · 14/06/2013 · Media Features width height device-width](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa7e9247dee680c8e2f4b04/html5/thumbnails/22.jpg)
Future of Media Types
• we don't need screen, print or speech
• we can move to media features !
![Page 23: Media Queriesdisruptive-innovations.com/zoo/slides/20130614-CSSDay/MQ.pdf · 14/06/2013 · Media Features width height device-width](https://reader034.fdocuments.in/reader034/viewer/2022043012/5fa7e9247dee680c8e2f4b04/html5/thumbnails/23.jpg)
Thank you!Questions?
http://www.w3.org/TR/css3-mediaqueries/http://www.w3.org/TR/cssom-view/
http://www.bluegriffon.org/
[email protected]@glazou