Intro to @viewport & other new Responsive Web Design CSS features

download Intro to @viewport & other new Responsive Web Design CSS features
  • date post

    23-Aug-2014
  • Category

    Mobile

  • view

    1.357
  • download

    0

Embed Size (px)

description

From meta viewport to @viewport and from device-pixel-ratio to the resolution media query: various responsive design hooks are undergoing standardization, allowing for future-proof sites that work well in different contexts. In addition, new CSS features like object-fit, relative length units and so on are increasingly supported by browsers as well, and allow for more versatile responsive design solutions. In my talk, I will look at these features and explain how they can be used in websites today.

Transcript of Intro to @viewport & other new Responsive Web Design CSS features

  • Intro to @viewport & other new Responsive Web Design CSS features Andreas Bovens | Opera Software | @andreasbovens | #SOTB4
  • What have we been up to?
  • Opera for Android phones & tablets
  • Opera for Windows & Mac
  • Opera Mini for Java & BlackBerry
  • Opera Max for Android
  • http://operasoftware.github.io/upstreamtools/
  • Four new CSS features to optimize websites for different devices.
  • Four new CSS features to optimize websites for different devices. @viewport viewport-percentage lengths resolution media queries object-fit & object-position CSS image values
  • 00 How did we get here? 10
  • 00 fluid layouts basic html 10
  • 00 fluid layouts fixed layouts basic html tables & lots of hacks 10
  • 00 fluid layouts fixed layouts basic html tables & lots of hacks fixed CSS widths 10
  • 00 fluid layouts fixed layouts liquid / fluid layouts basic html tables & lots of hacks fixed CSS widths %, em-based CSS widths, max/min-widths 10
  • 00 fluid layouts fixed layouts liquid / fluid layouts responsive web design basic html tables & lots of hacks fixed CSS widths %, em-based CSS widths, max/min-widths %, em-based CSS widths, max/min-widths, media queries and more 10
  • responsive web designexample
  • 00 10 on Google Trends responsive web design
  • 00 10 but interestingly enough, its not such a new idea on Google Trends responsive web design
  • Karl Gerstner Programme entwerfen 64
  • Gerstner defined a design programme as a set of rules for constructing a range of visual solutions. Connecting his methodology with the new field of computer programming, Gerstner presented examples of computer- generated patterns that were made by mathematically describing visual elements and combining them according to simple rules. ! Ellen Lupton, Thinking with Type (2nd edition), 2010, Princeton Architectural Press, p165
  • Karl Gerstner, Programme entwerfen, 2007. Copyright 2007 Lars Mller Publishers used with kind permission.
  • FFWD to today Image from http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/ by Addy Osmani for HTML5 Rocks. CC-BY 3.0.
  • media queries + meta viewport
  • media queries + meta viewport article, aside {width: 100%;} @media screen and (min-width: 480px) { article {float: left; width: 68%;} aside {float: right; width: 30%;} } @media screen and (min-width: 800px) { article {padding: 20px;} }
  • Dealbreaker
  • Dealbreaker Mobile browsers apply a default zoom to deal with legacy web pages
  • Dealbreaker Mobile browsers apply a default zoom to deal with legacy web pages
  • Dealbreaker Mobile browsers apply a default zoom to deal with legacy web pages Triggering wrong media queries
  • to the rescuemeta viewport
  • to the rescuemeta viewport
  • article, aside {width: 100%;} @media screen and (min-width: 480px) { article {float: left; width: 68%;} aside {float: right; width: 30%;} } @media screen and (min-width: 800px) { article {padding: 20px;} } meta viewportmedia queries +
  • applied on screens with width >= 800px article, aside {width: 100%;} @media screen and (min-width: 480px) { article {float: left; width: 68%;} aside {float: right; width: 30%;} } @media screen and (min-width: 800px) { article {padding: 20px;} } meta viewportmedia queries +
  • applied on screens with width < 800px article, aside {width: 100%;} @media screen and (min-width: 480px) { article {float: left; width: 68%;} aside {float: right; width: 30%;} } @media screen and (min-width: 800px) { article {padding: 20px;} } meta viewportmedia queries +
  • applied on screens with width < 480px article, aside {width: 100%;} @media screen and (min-width: 480px) { article {float: left; width: 68%;} aside {float: right; width: 30%;} } @media screen and (min-width: 800px) { article {padding: 20px;} } meta viewportmedia queries +
  • by setting 1:1 zoom, media queries are triggered as intended! article, aside {width: 100%;} @media screen and (min-width: 480px) { article {float: left; width: 68%;} aside {float: right; width: 30%;} } @media screen and (min-width: 800px) { article {padding: 20px;} } meta viewportmedia queries +
  • After it was introduced in Safari, support for viewport meta also landed in Opera, Android browser, Firefox, Chrome, etc. meta viewport
  • nice, but its not a real standard
  • Safari had a long-time, infamous scaling bug when changing orientation. itsnota realstandard
  • Browser makers have to support both comma & semicolon delimiters as everyone mixes them up. ; itsnota realstandard
  • Certain viewport edge cases are handled dierently by each browser. itsnota realstandard
  • Certain properties are not supported everywhere: e.g. user-scalable=yes|no itsnota realstandard
  • Android browser (& later Opera) added a target-densitydpi property, which was later discontinued. itsnota realstandard
  • Internet Explorer interpretes width=device-width as width=320 for compatibility reasons. itsnota realstandard
  • Safari on iPad applies a 1.333 zoom in landscape mode even although width=device-width is set. itsnota realstandard
  • width=device-width, initial-scale=1 forces a 1 zoom. Say what? itsnota realstandardSafari on iPad applies a 1.333 zoom in landscape mode even although width=device-width is set.
  • And when we thought things were stable, Safari introduced a new, minimal-ui property. itsnota realstandard
  • You get the idea itsnota realstandard
  • So, we thought (in 2011): Why not make a CSS spec for this?
  • Yes,
  • CSS,
  • because
  • its
  • layout! So, we thought (in 2011): Why not make a CSS spec for this?
  • CSS Device Adaptation / @viewport Yes,
  • CSS,
  • because
  • its
  • layout! So, we thought (in 2011): Why not make a CSS spec for this? http://dev.w3.org/csswg/css-device-adapt/
  • @viewport { width: auto; } Corresponds to
  • @viewport { width: auto; zoom: 2.0; } Corresponds to
  • @viewport { width: auto; user-zoom: fixed; } Corresponds to
  • @v