Moving Web Standards Forward, Faster

betravis / bear_travis

About Me

Web Engine Team

What is a Web Standard?

Web standards are technologies, established by the W3C and other standards bodies, that are used to create and interpret web-based content. These technologies are designed to future-proof documents published on the Web and to make those documents accessible to as many people and devices as possible.

Roger Johansson

The Web is Viewed By

Different People

On Different Devices

Using Different Browsers

Authors don't control how content will be viewed

Standards are

.content:before {
  display:block;
  float:left;
  width:240px;
  height:280px;
  background:url(...);
}

browser display

Can I Use It?

Media Queries

@media screen and (max-width: 600px) { }

Browser Support:

Very Good. Just avoid IE < 9.

Gradients

.gradient{
  background-image:
    linear-gradient(bottom, white, black);
}

Browser Support:

Fair. IE 10+, prefixed in S/CR, not yet in O Mobile

Border Radius

border-radius: 10px;

Browser Support:

Very Good. IE 9+, not yet on Opera Mobile.

What happens when you don't have standards?

// CR 1+, FF 1+, IE 9+, O 7+, S 1+ 
if (el.addEventListener) 
    el.addEventListener('click', 
         clickHandler, false); 
// IE < 9 
else if (el.attachEvent) 
     el.attachEvent('onclick', 
         clickHandler);

9% of your audience uses IE < 9

When standards come late

.gradient { ... }
.gradient {
-ms-filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffffff, endColorstr=#000000);
}
Internet Explorer 6+ 
.gradient {
background-image: -webkit-gradient(linear,
    0% 0%, 0% 100%,
    from(white), to(black));
}
Safari 4+, Chrome 1-9 
.gradient {
background-image: -webkit-linear-gradient(
    top, white, black);
background-image: -moz-linear-gradient();
background-image: -ms-linear-gradient();
background-image: -o-linear-gradient();
}
CR 10+, S 5.1+, FF 3.6+, IE 10+, O 11.1+
Still missing > 17% of the market

When standards take too long

Quirks Mode

Legacy Browsers

Standards Bodies

Making Standards Happen

W3C publishes documents that define Web technologies. These documents follow a process designed to promote consensus, fairness, public accountability, and quality. At the end of this process, W3C publishes Recommendations, which are considered Web standards.

W3C FAQ

The W3C Process

Working Draft

Candidate Recommendation

Recommendation

Who takes part in the W3C Process?

  • Specification Authors
  • Specification Implementors
  • Community

CSS Grid Layout

#container { display: grid; }

FLEX C O L S

FLEX R O W S

{ grid-column-definition: auto 1fr;

grid-row-definition: auto 1fr; }

The Golden Grid System

Line Based Placement

{ grid-start: 3; grid-end: span 3; }

Is it a W3C Recommendation?

Media Queries

@media screen and (max-width: 600px) { }

W3C Status:

Media Queries

(Recommendation 2012.06.19)

Gradients

.gradient{
  background-image:
    linear-gradient(bottom, white, black);
}

W3C Status:

CSS Image Values and Replaced Content

(Candidate Recommendation 2012.04.17)

Border Radius

border-radius: 10px;

W3C Status:

CSS Backgrounds and Borders

(Candidate Recommendation 2012.07.24)

Faster functionality

Polyfills

fake the functionality of the future, today

polyfill.js

older browsers

polyfill.js

new functionality

Polyfills

  • work now
  • across browsers
  • can be replaced by native
  • let you try out new features
CodePen Regions Rodeo

But

  • Polyfills are a workaround
  • Feature specs are likely to change
  • Polyfills can be non-performant

Check 'em out

Standards aren't standing still

Standards are Tools

{ shape-inside:
circle(...); }
C O
N T E
N T

Help get them where they need to go

  • Grab a test version of your browser
  • Test drive a new feature
  • Write up a bug
  • Give feedback on a spec

The End

betravis / bear_travis

built with reveal.js, font awesome, and images from the noun project by Dmitry Baranovskiy