Moving Web Standards Forward, Faster
About Me
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
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);
}.gradient {
background-image: -webkit-gradient(linear,
0% 0%, 0% 100%,
from(white), to(black));
}.gradient {
background-image: -webkit-linear-gradient(
top, white, black);
background-image: -moz-linear-gradient();
background-image: -ms-linear-gradient();
background-image: -o-linear-gradient();
}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; }
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)
Which definition of standard?
- Is it what is available in browsers?
- Is it what has a specification?
Where should we focus?
History
Standards with Perspective
- 1990 First web page & web browser
- 1994 The W3C is formed to help shape standards on the web
- 1995 CSS1 First public working draft
- 1996 CSS1 Recommendation
- 1997 CSS2 First public working draft
- 1998 CSS2 Recommendation
- 2000 CSS3 Roadmap
- 2002 CSS2 Revision 1 Working draft
- 2011 CSS2 Revision 1 Recommendation
CSS 2.1
- CSS2 lacked a Candidate Recommendation phase
- Specification and implementations differed
- Some material was removed
- Some material was added
Standards synthesize specification & implementation
If specification outpaces implementation
CSS 2.1
If implementation outpaces specification
Filters
The W3C helps guide this process
Standards are continuously evolving
Where do standards come from?
Surveying the present and think-tanking the future
Text Layout
From André Graciotti
On the Web
Source: simonfosterdesign.com
Source: tvsafety.org
Source: The Great Discontent
but it's still hard
.content:before {
display:block;
float:left;
width:240px;
height:280px;
background:url(...);
}
???
Regions and Exclusions
Extending the language
Regions
.content { flow-into: story-flow; }
.region { flow-from: story-flow; }Exclusions
.circle {
float: left;
shape-outside: circle(50%, 50%, 50%);
shape-inside: outside-shape;
}Demo
Demo
Moving these standards forward, faster
Faster Specifications
Reduce Complexity
- CSS 1 - 24,630 words
- CSS 2 - 92,050 words
- CSS 2.1 - 140,396 words
- CSS 3 - 391,611 words
Modular Standards
Regions and Exclusions
Regions, Exclusions, and
Page
Temp
late
s
Fragmentation
break-before:
region
Masking
clip-path: shape
How lightweight can we make modules?
Each module is part of a larger toolset
C
SS
REG
IONS
A
N
D
EXCL
USI
ON
S
.region {
flow-from: story-flow;
shape-inside: polygon(...);
}
.content { flow-into: story-flow; }.region { shape-inside: polygon(...); }
.content { shape-inside: circle(...); }Regions and
M
U
L
T
I
-
C
O
L
U
M
N
Regions and
M
U
L
T
I
-
C
O
L
U
M
N
Faster Implementations
Releasing early, and often
Native implementations
- Prove a feature can be done
- in a performant manner
- just like any other web feature
But
- You are tied to a specific browser,
- and its release schedule,
- and a higher degree of finish
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(...); }
circle(...); }
C O
N T E
N T
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
built with reveal.js, font awesome, and images from the noun project by Dmitry Baranovskiy