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

Transcript
Page 1: 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

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

What have we been up to?

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

Opera for Android phones & tablets

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

Opera for Windows & Mac

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

Opera Mini for Java & BlackBerry

Page 6: Intro to @viewport & other new Responsive Web Design CSS features
Page 7: Intro to @viewport & other new Responsive Web Design CSS features

Opera Max for Android

Page 8: Intro to @viewport & other new Responsive Web Design CSS features
Page 9: Intro to @viewport & other new Responsive Web Design CSS features

http://operasoftware.github.io/upstreamtools/

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

Four new CSS features to optimize websites for different devices.

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

Four new CSS features to optimize websites for different devices.

@viewport

viewport-percentage lengths

resolution media queries

object-fit & object-position CSS image values

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

’00

How did we get here?

’10

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

’00

fluid layouts

basic html

’10

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

’00

fluid layouts

fixed layouts

basic html

tables & lots of hacks

’10

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

’00

fluid layouts

fixed layouts

basic html

tables & lots of hacks

fixed CSS widths

’10

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

’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

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

’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

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

responsive web design example

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

’00 ’10

on Google Trendsresponsive web design

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

’00 ’10

but interestingly enough, it’s not such a new idea…

on Google Trendsresponsive web design

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

Karl Gerstner “Programme entwerfen”

’64

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

“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

“Programme entwerfen”

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

Karl Gerstner, Programme entwerfen, 2007. Copyright 2007 Lars Müller Publishers — used with kind permission.

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

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.

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

media queries + meta viewport

FFWD to today

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

media queries + meta viewportDealbreaker…

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;} }

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

Dealbreaker…

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

Dealbreaker…

Mobile browsers apply a default zoom to deal with legacy web pages…

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

Dealbreaker…

Mobile browsers apply a default zoom to deal with legacy web pages…

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

Dealbreaker…

Mobile browsers apply a default zoom to deal with legacy web pages…

Triggering “wrong” media queries…

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

to the rescuemeta viewport

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

<meta name="viewport" content="width=device-width">

to the rescuemeta viewport

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

<meta name="viewport" content="width=device-width">

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 +

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

<meta name="viewport" content="width=device-width">

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 +

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

<meta name="viewport" content="width=device-width">

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 +

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

<meta name="viewport" content="width=device-width">

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 +

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

<meta name="viewport" content="width=device-width">

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 +

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

After it was introduced in Safari, support for viewport meta also landed in Opera, Android browser, Firefox, Chrome, etc.

meta viewport

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

nice, but it’s not a real standard…

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

Safari had a long-time, infamous scaling bug when changing orientation.

nice, but it

’s not a

real st

andard…

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

Browser makers have to support both comma & semicolon delimiters as everyone mixes them up.

;nice, but it

’s not a

real st

andard…

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

Certain viewport edge cases are handled differently by each browser.

nice, but it

’s not a

real st

andard…

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

Certain properties are not supported everywhere: e.g. user-scalable=yes|no

nice, but it

’s not a

real st

andard…

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

Android browser (& later Opera) added a target-densitydpi property, which was later discontinued.

nice, but it

’s not a

real st

andard…

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

Internet Explorer interpretes width=device-width as width=320 for compatibility reasons.

nice, but it

’s not a

real st

andard…

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

Safari on iPad applies a 1.333× zoom in landscape mode even although width=device-width is set.

nice, but it

’s not a

real st

andard…

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

width=device-width, initial-scale=1 forces a 1× zoom. Say what?

nice, but it

’s not a

real st

andard…Safari on iPad applies a 1.333× zoom in landscape mode even although width=device-width is set.

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

And when we thought things were stable, Safari introduced a new, minimal-ui property.

nice, but it

’s not a

real st

andard…

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

You get the idea…

nice, but it

’s not a

real st

andard…

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

So, we thought (in 2011): Why not make a CSS spec for this?

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

Yes,����������� ������������������  CSS,����������� ������������������  because����������� ������������������  it’s����������� ������������������  layout!

So, we thought (in 2011): Why not make a CSS spec for this?

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

CSS Device Adaptation / @viewport

Yes,����������� ������������������  CSS,����������� ������������������  because����������� ������������������  it’s����������� ������������������  layout!

So, we thought (in 2011): Why not make a CSS spec for this?

http://dev.w3.org/csswg/css-device-adapt/

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

<meta name="viewport" content="width=device-width">

@viewport { width: auto; }

Corresponds to

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

<meta name="viewport" content="width=device-width, initial-scale=2">

@viewport { width: auto; zoom: 2.0; }

Corresponds to

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

<meta name="viewport" content="width=device-width, user-scalable=no">

@viewport { width: auto; user-zoom: fixed; }

Corresponds to

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

<meta name="viewport" content="width=device-width, user-scalable=yes">

@viewport { width: auto; user-zoom: zoom; }

Corresponds to

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

for widths up to 400px: <meta name="viewport" content="width=400"> for widths larger than 400px: <meta name="viewport" content="width=device-width">

Corresponds to

@viewport { width: 400px auto; }

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

<meta name="viewport" content="width=device-width"> and page orientation is locked to landscape.

@viewport { width: auto; orientation: landscape; }

Corresponds to

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

To try it out, turn on “experimental web platform features” in opera:flags or chrome:flags.

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

resolution media queries

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

https://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

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

What’s in a (CSS) pixel?

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

1 device px

What’s in a (CSS) pixel?

Macbook Aire.g.

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

1 device px 2,25 device px

What’s in a (CSS) pixel?

Macbook Aire.g. HTC Desire

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

1 device px 2,25 device px 4 device px

What’s in a (CSS) pixel?

Macbook Aire.g. HTC Desire iPhone 4

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

1 device px 2,25 device px 4 device px 9 device px

What’s in a (CSS) pixel?

Macbook Aire.g. HTC Desire iPhone 4 HTC One

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

1 device px 2,25 device px 4 device px 9 device px

What’s in a (CSS) pixel?

this makes graphics look blurry…(unless you serve oversized ones that are scaled down)

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

1 device px 2,25 device px 4 device px 9 device px

this makes graphics look blurry…

(responsive image spec)

hence:

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

1 device px 2,25 device px 4 device px 9 device px

this makes graphics look blurry…

resolution media queries

hence:

(responsive image spec)

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

1 device px 2,25 device px 4 device px 9 device px

1 dppx 1,5 dppx 2 dppx 3 dppx

What’s in a (CSS) pixel?

(can) use dots per ‘px’ unitsresolution media queries

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

body {background: url(bg.png) 0 0 repeat;} @media (screen and min-resolution: 2dppx) { body {background-size: 50% !important;} } @media (screen and min-resolution: 3dppx) { body {background-size: 33.3% !important;} }

resolution media queries

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

body {background: url(bg.png) 0 0 repeat;} @media (screen and min-resolution: 2dppx) { body {background-size: 50% !important;} } @media (screen and min-resolution: 3dppx) { body {background-size: 33.3% !important;} }

resolution media queries

Pattern from http://subtlepatterns.com/tree-bark/ by Getdiscount. CC-BY-SA 2.0.

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

body {background: url(bg.png) 0 0 repeat;} @media (screen and min-resolution: 2dppx) { body {background-size: 50% !important;} } @media (screen and min-resolution: 3dppx) { body {background-size: 33.3% !important;} }

resolution media queries

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

body {background: url(bg.png) 0 0 repeat;} @media (screen and min-resolution: 2dppx) { body {background-size: 50% !important;} } @media (screen and min-resolution: 3dppx) { body {background-size: 33.3% !important;} }

resolution media queries

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

resolution media queries

Very useful to optimize background graphics and other resources for hi-dpi screens.

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

If this looks familiar…

It’s very similar to device-pixel-ratio, but resolution is standardized, and comes without quirky vendor prefixes. !

However, for now, use both…

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

http://www.w3.org/TR/css3-values/#resolutionhttp://www.w3.org/TR/css3-mediaqueries/#resolution

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

object-fit & object-position CSS image values

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

Photo from https://secure.flickr.com/photos/61508583@N02/10873650644/ by Butz.2013. CC-BY 2.0.

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

eh…

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

img { object-fit: fill; }

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

img { object-fit: contain; }

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

img { object-fit: cover; overflow: hidden; }

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

img { object-fit: cover; overflow: hidden; object-position: 20% 50%; }

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

img { object-fit: cover; overflow: hidden; object-position: 60% 50%; }

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

Very useful to make small adjustments to images.

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

Note: there is some overlap here with responsive image use cases. Best practices need to emerge.

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

http://dev.w3.org/csswg/css-images-3/#the-object-fit

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

viewport-percentage lengths

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

100 × 100

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

100 × 100

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

100 × 100

1vw = 1/100 of viewport width

1vh = 1/100 of viewport height

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

100 × 100

1vw = 1/100 of viewport width

1vh = 1/100 of viewport height

1vmax = 1/100 of whichever is bigger

1vmin = 1/100 of whichever is smaller

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

100 × 100

vw, vh, vmax, vmin can be used with font-size, width, height, etc. to create designs that work with small viewports, not fight against them.

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

demo

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

http://www.w3.org/TR/css3-values/#viewport-relative-lengths

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

Four new CSS features to optimize websites for different devices.

@viewport

viewport-percentage lengths

resolution media queries

object-fit & object-position CSS image values

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

Thank you! Any questions? :-)

Andreas Bovens | Opera Software | @andreasbovens | #SOTB4