Bruce Lawson: What's Next in StandardsLand

Published: March 1st 2013by Orde Saunders

Bruce Lawson was speaking about what's coming up in web standards at Responsive Conf, these are my notes from his talk.

The web has always been responsive and work anywhere - it's not new.

Viewport

[Viewport meta tag explanation skipped because we all know it.]

Not to everyone's taste. It's using HTML to control presentation so it's moving to CSS. Prefixed in Opera Presto, IE10 and WebKit support is beginning. Probably coming to FF at some point. CSS viewports can have min and max width and be nested in media queries.

W3C Flex Box

Brand new box model. There are three different versions of the syntax (2009, 2011 and current).

We get vertical centering. Boxes can know about each other and flow - alignment happens perpendicular to the flex. Boxes can be defined as relative without knowing the number of elements. Can be spaced in different ways. Visual order can be independent of the source order.

Media Queries Level 4

script
hover
pointer
paged
interactive
touch
keyboard
remote (control)

A 50" TV across the room is about the same size as a phone in your hand.

Pointer events

Unifies mouse, touch, pen, keyboard and other events into one, hardware agnostic, API. Modeled on the mouse events - onMouse[event] maps to onPointer[event]. Doesn't cope with more than one pointer - e.g. games.

Adaptive images

Art direction use case - might want to use different images at different sizes. With SVG we can address individual elements of the imge and turn them on and off using media queries.

WebP is a lossless image format that are ~25% smaller than equivalent PNG or JPEG. Support is limited to Opera and Chrome. Faster but uses more battery to decode.

Image values and replaced content module level 4. background-image: image('image.webp', 'image.png');

HTML5 has a fallback method for video tag, why not have the same thing for images? Spec is with the W3C for consideration.