Projects:

by Peter Kröner

A great Achievement, heh?

And it's getting even better!

• CSS Shapes
• CSS Blending Modes
• CSS Flexbox
• CSS Writing Modes
• and a lot more…

Because we can!

See the Pen Single Element Pure CSS MacBook Pro by Joshua Hibbert (@joshnh) on CodePen

People getting more creative…

See the Pen Navigation Bar by Jan Kaděra by Katy DeCorah (@katydecorah) on CodePen

…and even draw horses

See the Pen CSS Fine Art by Josh Rutherford (@the_ruther4d) on CodePen

Some go insane.

Credit

♥
those Rockstar Techniques!

Our current workflow

Look at caniuse.com

Search/Write jQuery Plugin

Write a Prollyfill

Claiming »We want more awesomeness!«

WHATWG / W3C / Browser Vendors

»We give you more Awesomeness!«

CSS Selectors Level 4

Shaders, Shapes, Regions, HighlevelGraphicShit™

»Complaining is no answer!«

You know him?

Contribute!

Help to move the web forward

Evolve Standards

Write Polyfills

Care about the basics.

»But wait, we have our basics.«

Gimme features!

Media Behavior

Care about
The Aspect Ratio?

Oh but we…

							img, video {
    max-width: 100%;
    height: auto;
}
						

Ever tried that with an <iframe>?

Ever wanted to adjust width based on height?

Here is how you do the 'simple' way today:

Quite a mess, right?

object-fit

img, video {
    object-fit: contain;
    object-fit: cover;
    object-fit: fill;
    object-fit: scale-down;
}

The Browsers

Touch Events
Pointer Events

A bit history

• The first modern touch device came out
• Touch Events were introduced in WebKit
• Microsoft wasn't pleased with TE
• MS + W3C develop Pointer Events
• MS and Firefox OS introcude PE to public
• WebKit and Blink went separate
• 10/2013: Touch Events are now W3C Recommendation, while PE are still CR
• The mess was created…

Written a touch application recently?

Boo, that isn't funny since both event types are used right now:

• Windows Phone 8, Firefox OS: Pointer Events
• iOS, Android: Touch Events

Rescue to pointer.js

Thank god someone has written an abstraction.

But there is way to go for Blink & WebKit and Firefox. At least, implementation has been started recently.

Bugvoting

This Blink-task needs to be finished soon!

<img>

#respimg

Ø web page is 1.6MB

Ø 65% are images

1MB on a 320px smartphone?

72% could be saved here

srcset ships tomorrow!

Supported in WebKit Nightly already;
Blink to follow soon.

Then, there's <picture>

• Discovered as the best solution to cover all use-cases over 1.5 years.
• Bloat markup if used very extensively but yeah, you still can use srcset (even inside of it).
• Easy and understandable for developers.

And now I proudly present:

The Fun Part

Photo by Victor Gumayunov

August, 2011

September, 2013

It's outta control

Even RICG is now partly on that train of srcN, but yet no browser vendor took any step into one direction.

In 2035

Photo by Tuomas Puikkonen

How can we avoid?

Help and participate:

• responsiveimages.org
• GitHub
• IRC: #respimg

Resource Priorities

How awesome is that?

Web Components

Finished? Not at all!

• CSS Media Query variables
• Fixing the multi-language hell.
• A font-size: line-fit; property.
• Complex footnotes
• …to be continued.

Anselm, damn you!

I want all this stuff now!

• For Web Components: Polymer Projects
• For RespImgs: picture/srcsetfill + Imager.js
• For Resource Priorities: Well, sorry. Only require.js
• For aspect-ratio: nothing cool, do it!
• Touch/Pointer: Pointer.js