keeping responsive into the future by chris mills
DESCRIPTION
Chris Mills will go beyond the obvious, looking at what we can do today to adapt our front-ends to different browsing environments, from mobiles and other alternative devices to older browsers we may be called upon to support. You’ll learn some advanced media query and viewport tricks, including a look at @viewport; insights into responsive images: problems, and current solutions; how to provide usable alternatives to older browsers with Modernizr; what other CSS3 modules provide responsive capabilities; and where media queries are going in the future, with CSS4 media queries.TRANSCRIPT
![Page 1: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/1.jpg)
Friday, 9 November 12
![Page 2: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/2.jpg)
Hi.I am chris mills.
‣Open standards advocate and Education agitator
‣dev.opera.com editor‣W3C fellow, workingon webplatform.org
‣Accessibility whiner‣HTML5/CSS3 wrangler‣Heavy metal drummerand proud dad
Friday, 9 November 12
![Page 3: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/3.jpg)
Friday, 9 November 12
![Page 4: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/4.jpg)
useful stuff
‣dev.opera.com‣webplatform.org‣slideshare.net/chrisdavidmills
‣[email protected]‣@chrisdavidmills
Friday, 9 November 12
![Page 5: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/5.jpg)
in this talk... ‣MQ: Beyond width and height‣Other “responsive modules”‣Legacy support‣RWD for the future
Friday, 9 November 12
![Page 6: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/6.jpg)
Friday, 9 November 12
![Page 7: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/7.jpg)
A quick flashback
Friday, 9 November 12
![Page 8: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/8.jpg)
In the beginning...
‣There wasn’t much RWD‣We only really looked at the Web on desktops/laptops
Friday, 9 November 12
![Page 9: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/9.jpg)
Ok. We had wap
Friday, 9 November 12
![Page 10: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/10.jpg)
Friday, 9 November 12
![Page 11: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/11.jpg)
Friday, 9 November 12
![Page 12: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/12.jpg)
Then the mobile web arrived
Friday, 9 November 12
![Page 13: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/13.jpg)
Then the mobile web arrived
Friday, 9 November 12
![Page 14: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/14.jpg)
Then the mobile web arrived
Friday, 9 November 12
![Page 15: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/15.jpg)
Then the mobile web arrived
Friday, 9 November 12
![Page 16: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/16.jpg)
media typesmedia="screen"
media="print"
Friday, 9 November 12
![Page 17: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/17.jpg)
media typesmedia="handheld"
media="tv"
Friday, 9 November 12
![Page 18: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/18.jpg)
small tv rant“Searching, browsing, updating and buffering are not TV-like. In fact an enormous number of people found that the technology they had purchased wasn't what they expected at all, that they were bringing the worst parts of using a computer into the television environment.”
-- www.insideci.co.uk/news/rovi-research-reveals-changing-consumer-habits.aspx
Friday, 9 November 12
![Page 19: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/19.jpg)
small tv rant“Searching, browsing, updating and buffering are not TV-like. In fact an enormous number of people found that the technology they had purchased wasn't what they expected at all, that they were bringing the worst parts of using a computer into the television environment.”
-- www.insideci.co.uk/news/rovi-research-reveals-changing-consumer-habits.aspx
Friday, 9 November 12
![Page 20: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/20.jpg)
Friday, 9 November 12
![Page 21: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/21.jpg)
Back to the modern world
Friday, 9 November 12
![Page 22: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/22.jpg)
media="screen and (max-width: 481px)"
@media screen and (max-width: 481px) { /* do amazing stuff for narrow screens */}
media queries
Friday, 9 November 12
![Page 23: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/23.jpg)
media queries
Friday, 9 November 12
![Page 24: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/24.jpg)
the mobile problem
Friday, 9 November 12
![Page 25: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/25.jpg)
<meta name="viewport" content="width=device-width">
viewport
Friday, 9 November 12
![Page 26: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/26.jpg)
other rwd issues
Friday, 9 November 12
![Page 27: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/27.jpg)
other rwd issues
Friday, 9 November 12
![Page 28: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/28.jpg)
Other considerations
‣Making replaced elements responsive
‣Bandwidth/loading of resources
‣Resolution‣Processing power‣Control mechanisms
Friday, 9 November 12
![Page 29: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/29.jpg)
replaced elements
Friday, 9 November 12
![Page 30: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/30.jpg)
replaced elements#related img {
display: block;
margin: 0 auto;
max-width: 100%;
}
Friday, 9 November 12
![Page 31: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/31.jpg)
be warned‣Old IE versions don’t support max-width, so you’ll have to fallback to width: 100% instead.
Friday, 9 November 12
![Page 32: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/32.jpg)
file size also important
‣Users on slow connections won’t want to download huge media files.
‣We need to try to serve them smaller files/alternatives.
‣Assumptions: e.g. narrow equals mobile equals slow connection
Friday, 9 November 12
![Page 33: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/33.jpg)
css resources easy to deal with
‣Use “mobile first” ‣Load smaller resources by default, and larger ones inside MQs
‣And in the future we’ve got things like image-set coming up (possibly...)
Friday, 9 November 12
![Page 34: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/34.jpg)
Mobile first example
header { background: url(small-image.png); }
@media screen and (min-width: 480px) { header { background: url(large-image.png); }}
Friday, 9 November 12
![Page 35: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/35.jpg)
html5 video also well served
<source src="crystal320.webm"type="video/webm" media="all and (max-width: 480px)">
<source src="crystal720.webm" type="video/webm" media="all and (min-width: 481px)">
Friday, 9 November 12
![Page 36: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/36.jpg)
But html images are not so lucky
<img src="thats-all-folks.png"> ?
Friday, 9 November 12
![Page 37: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/37.jpg)
Various solutions
‣http://dev.opera.com/articles/view/responsive-images-problem/
‣None work perfectly‣Pre-fetch is a bitch
Friday, 9 November 12
![Page 38: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/38.jpg)
adaptive-images
‣adaptive-images.com‣Add .htaccess and adaptive-images.php to your document root folder.
‣Add one line of JavaScript into the <head> of your site.
‣Add your CSS Media Query values into $resolutions in the PHP file.
Friday, 9 November 12
![Page 39: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/39.jpg)
the picture element
<picture alt="a picture of something">
<source src="mobile.jpg">
<source src="medium.jpg" media="min width: 600px">
<source src="fullsize.jpg" media="min width: 900px">
<img src="mobile.jpg"> <!-- fallback for non-supporting browsers -->
</picture>Friday, 9 November 12
![Page 40: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/40.jpg)
suggested solutions
‣Srcset‣New image formats?‣Defined the media tests in meta tags?
‣New headers and protocols?
Friday, 9 November 12
![Page 41: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/41.jpg)
processing power‣You might want to turn off effects like shadows, gradients and animations for small screen devices.
‣CSS effects are arguably less power draining than JS or Flash, but even so.
‣They can cause the display to look cluttered too.
Friday, 9 November 12
![Page 42: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/42.jpg)
resolution
Friday, 9 November 12
![Page 43: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/43.jpg)
resolution
Friday, 9 November 12
![Page 44: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/44.jpg)
resolution
Friday, 9 November 12
![Page 45: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/45.jpg)
resolution
64px
Friday, 9 November 12
![Page 46: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/46.jpg)
resolution
64px
48px
Friday, 9 November 12
![Page 47: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/47.jpg)
now we have hi fidelity devices
‣e.g. iPhone 4s is 960 x 640 pixels at 326ppi
‣These devices lie twice‣One CSS pixel = multiple device pixels
‣Images can start to look pixellated
Friday, 9 November 12
![Page 48: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/48.jpg)
SOLUTIONS
<img src="500px_image.jpg" width="250">
Friday, 9 November 12
![Page 49: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/49.jpg)
SOLUTIONS
@media screen and (-o-min-device-pixel-ratio: 3/2) {
body { background-size: 250px; }
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
body { background-size: 250px; }
}
Friday, 9 November 12
![Page 50: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/50.jpg)
Friday, 9 November 12
![Page 51: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/51.jpg)
soon to bereplaced by
@media screen and (resolution: 1.5dppx) {
body { background-size: 250px; }
}
Friday, 9 November 12
![Page 52: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/52.jpg)
tell the truth with viewport
<meta name="viewport"
content="width=device-width,
target-densitydpi=device-dpi">
Friday, 9 November 12
![Page 53: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/53.jpg)
All good but...
‣Images may now start to look a little small
‣You could serve larger images for devices with higher resolutions
Friday, 9 November 12
![Page 54: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/54.jpg)
control mechanisms‣Currently tricky‣Usual wisdom about web sites applies — make pages keyboard accessible, etc.
‣Can’t be detected in CSS(yet)
‣JavaScript touch detection is an option — Modernizr, jQuery
Friday, 9 November 12
![Page 55: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/55.jpg)
supporting older browsers
Friday, 9 November 12
![Page 56: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/56.jpg)
old ie versions
‣Lack support for media queries
‣Although we don’t get old IE on small screen devices
‣But mobile first is a problem
Friday, 9 November 12
![Page 57: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/57.jpg)
solutions
‣Provide fallbacks such as simpler layouts or pixels instead of % or rems
‣Use a media query polyfill such as respond.js
Friday, 9 November 12
![Page 58: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/58.jpg)
modernizr
<html lang="en-US" class="no-js">
<head>
<script src="modernizr.js"></script>
</head>
Friday, 9 November 12
![Page 59: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/59.jpg)
modernizr
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d csstransitions fontface generatedcontent video audio ... ">
Friday, 9 November 12
![Page 60: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/60.jpg)
modernizr css
#wrapper:hover, #wrapper:focus { transform: rotateX(180deg);}
Friday, 9 November 12
![Page 61: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/61.jpg)
modernizr css
.no-csstransforms3d #wrapper #front { transition: 0.8s all ease-in;}
.no-csstransforms3d #wrapper:hover #front,
.no-csstransforms3d #wrapper:focus #front { transform: rotate(-30deg) translate(-50%,-100%);}
Friday, 9 November 12
![Page 62: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/62.jpg)
modernizr JS
function rotateForm() { if(Modernizr.cssanimations && Modernizr.csstransforms3d) { form.setAttribute("class","form-rotate"); form.style.left = "0rem"; } else { back.style.zIndex = "5"; } }
Friday, 9 November 12
![Page 63: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/63.jpg)
@supports
@supports (display:flex) { section { display: flex } ...}
Friday, 9 November 12
![Page 64: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/64.jpg)
other responsive css3 modules
Friday, 9 November 12
![Page 65: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/65.jpg)
other responsive css3 modules
Friday, 9 November 12
![Page 66: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/66.jpg)
worthy of note
‣CSS device adaptation‣Flexbox‣Multi-col‣(Regions, Grids, etc.)
Friday, 9 November 12
![Page 67: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/67.jpg)
CSS device adaptation
‣Because viewport is really more of a CSS type thing than an HTML type thing
‣This spec provides a @viewport at-rule to contain viewport equivalents
‣Currently supported in Opera and IE10, with prefixes
‣dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport
Friday, 9 November 12
![Page 68: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/68.jpg)
CSS device adaptation
<meta name="viewport" content="width=550, maximum-scale=1.0, target-densitydpi=device-dpi">
@viewport { width: 550px; max-zoom: 1; resolution: device;}
Friday, 9 November 12
![Page 69: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/69.jpg)
Flex box
‣A spec for easier UIlayout
‣Makes certain layout tasks much easier
‣New syntax supportcurrently very limited
‣Old syntax supportedin most modernbrowsers
Friday, 9 November 12
![Page 70: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/70.jpg)
Flex box
<section> <article id="first"></article> <article id="second"></article> <article id="third"></article></section>
Friday, 9 November 12
![Page 71: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/71.jpg)
Friday, 9 November 12
![Page 72: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/72.jpg)
Flex box
section { display: flex; flex-flow: row;}
section { display: flex; flex-flow: column;}
Friday, 9 November 12
![Page 73: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/73.jpg)
Friday, 9 November 12
![Page 74: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/74.jpg)
Flex box
section { display: flex; flex-flow: row; align-items: center;}
Friday, 9 November 12
![Page 75: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/75.jpg)
Friday, 9 November 12
![Page 76: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/76.jpg)
Flex box
#first, #third { order: 2;}
#second { order: 1;}
Friday, 9 November 12
![Page 77: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/77.jpg)
Friday, 9 November 12
![Page 78: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/78.jpg)
Flex box
#first { flex: 1;}
#second { flex: 1;}
#third { flex: 1;}
Friday, 9 November 12
![Page 79: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/79.jpg)
Friday, 9 November 12
![Page 80: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/80.jpg)
Flex box
#first { flex: 1;}
#second { flex: 1;}
#third { flex: 2;}
Friday, 9 November 12
![Page 81: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/81.jpg)
Friday, 9 November 12
![Page 82: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/82.jpg)
multi col
‣A spec for breaking content into multiple columns.
‣Column widths/numbers, column rules, column spacing, column gaps, column breaks.
‣Supported across all major browsers, mostly.
Friday, 9 November 12
![Page 83: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/83.jpg)
Multi col
article { column-width: 20em; column-gap: 2em;}
Friday, 9 November 12
![Page 84: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/84.jpg)
Friday, 9 November 12
![Page 85: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/85.jpg)
other future developments
Friday, 9 November 12
![Page 86: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/86.jpg)
matchmedia
if (window.matchMedia("(min-width: 400px)").matches) { /* Do stuff for wider screens */} else { /* Do stuff for narrow screens */}
For IE9 and Opera, polyfill
github.com/paulirish/matchMedia.js/
Friday, 9 November 12
![Page 87: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/87.jpg)
script MQ
@media screen and (script) {...}@media screen and not (script) {...}
Friday, 9 November 12
![Page 88: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/88.jpg)
hover MQ
The ‘hover’ media feature is used to query whether the primary pointing system used on the output device can hover or not.
@media screen and (hover) {...}
Friday, 9 November 12
![Page 89: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/89.jpg)
pointer MQ
@media screen and (pointer: coarse) {...}
‣none: The input mechanism of the device does not include a pointing device.
‣coarse: The input mechanism of the device includes a pointing device of limited accuracy.
‣fine: The input mechanism of the device includes an accurate pointing device.
Friday, 9 November 12
![Page 90: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/90.jpg)
luminosity MQ
@media screen and (luminosity: dim) {...}
‣dim: The device is being used in a dim environment, such as nighttime.
‣normal: The device is being used in average lighting conditions, which don’t require significant adjustment.
‣washed: The device is being used in washed out conditions, e.g. in bright sunlight.
Friday, 9 November 12
![Page 91: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/91.jpg)
other future MQs
@media (paged) and (interactive:0) { // I am like a printer}@media (paged) and (interactive) { // I'm a projector, or like a Kindle}@media (paged) and (interactive) and (touch){ // I'm like a touch-screen Kindle}
Friday, 9 November 12
![Page 92: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/92.jpg)
other future MQs
@media (touch) and (max-width: 480) { // looks like an smart phone}@media (touch) and (keyboard) and(min-width:600) { // looks like a touch-screen laptop}
Friday, 9 November 12
![Page 93: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/93.jpg)
other future MQs
@media (remote) { // TV or set-top box?}@media (remote) and (hover) { // Wii?}
Friday, 9 November 12
![Page 94: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/94.jpg)
other future MQs
@media (network: v-slow) {...}
“It has been proposed. Most people agree that it would be cool, nobody has a clue about how to spec it ... submit proposals to me or to [email protected]. Use [css4-mediaqueries] in the subject line, and read lists.w3.org/Archives/Public/wwwstyle/2012Mar/0691.html first.”
-- Florian Rivoal
Friday, 9 November 12
![Page 95: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/95.jpg)
Buy my book
“Subtle” advertisement
Friday, 9 November 12
![Page 96: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/96.jpg)
game over
1up 0000000Friday, 9 November 12
![Page 97: Keeping responsive into the future by Chris mills](https://reader033.vdocuments.net/reader033/viewer/2022060109/5558446ad8b42ac6078b51f7/html5/thumbnails/97.jpg)
01. dev.opera.com
02. slideshare.net/chrisdavidmills
04. @chrisdavidmills
05. Practical CSS3: Develop & Design
06. www.w3.org/Style/CSS/current-work.en.html
07. http://dev.w3.org/csswg/mediaqueries4/
08. CDM
09. WOW
game over
1up 0000000Friday, 9 November 12