w3conf slides - the top web features from caniuse.com you can use today
DESCRIPTION
TRANSCRIPT
Yes, you can!
The top web features from caniuse.com you can use today
Alexis Deveria
2009: “When can I use…” launched
About caniuse.com
Why use caniuse?
• Support information for 130+ features (HTML5, CSS3,
etc)
• Good for quick overview of basic browser support
• Known issues & links for each feature
• See percentage of users with supporting browsers
(using StatCounter data)
• #1 priority: Keeping up to date with new browser
versions
About caniuse.com
Other features:
•Community help accepted via GitHub & feedback form
• Import Google Analytics data to see support based on
your own site's users
•Browser versions shown on table are based on usage
•Compare support of multiple browser versions
•Summary table shows total support % of each
browser version
About caniuse.com
Coming (hopefully) in 2013:
•New design (by Lennart Schoors)
•More web tech features
•More (mobile) browsers
•Better notes on partial support
•Select specific regions for usage share data
Top features you can use today!*
No polyfills, no doubts or worries. Just use it.
*Assumption: You're not supporting IE6 or 7
Supported in IE8+
CSS• CSS 2.1 Selectors
• @font-face
• min/max-width/height
• display: inline-block
• position: fixed
• opacity
• CSS Tables
• Pseudo-elements / Generated content
• Counters
• outline
• text-overflow: ellipsis
Other
• PNG alpha transparency
• querySelector
• JSON parsing
• Contenteditable attribute
• postMessage
• sessionStorage &
localStorage
• hashChange event
• Data URIs (for images)
CSS Tables
Yay!
•Layout benefits of HTML <table>, without the table semantics
•Easier to use than float-based layouts
But...
•No cellspan or rowspan CSS properties
•Table-related limitations: e.g. no relative/absolute positioning of cells.
CSS Tables
<div class="parent"> <div style="background: #EEA">foo</div> <div style="background: #AEE">bar bar bar</div></div>
.parent {display: table;width: 80px;
}
.parent > div {display: table-cell;text-align: center;
}
CSS Tables
Also nice:
•Use display: table-cell on a parent element to vertically align any content:
.parent { display: table-cell; vertical-align: middle; height: 100px; width: 70px;}
<div class="parent"> <p>My block content</p></div>
My blockcontent
CSS Tables
Beyond tables...
CSS Flexible Layout Module
caniuse.com/#feat=flexbox
CSS Tables
Beyond tables...
CSS Grid Layout
caniuse.com/#feat=grid
Pseudo-elements / generated content
.foo { color: green;}.foo:before { content: '=>'; }.foo:after { content: '!'; }
<p class="foo">This</p>
=>This!
Pseudo-elements: :before, :afterTwo free CSS-generated elements per 1 HTML element!
Generated contentDefining the content displayed in the pseudo-element
Pseudo-elements / generated content
• Using characters/character icons to prepend to elements
• Multiple backgrounds & multiple borders
• Pure-CSS shapes
• Layout issue fixes
• Displaying links in printed pages (using content: attr(href) )
• ...lots more!
css-tricks.com/pseudo-element-roundup/
Two extra elements means…
Pseudo-elements / generated content
Even more elements with :before:before ?Not yet, but being discussed!
http://dev.w3.org/csswg/css4-pseudo/
CSS Counters
Use incrementing numbers in generated content
body { counter-reset: foo; }
h1 { counter-increment: foo; }
h1:before { content: 'Chapter ' counter(foo) ' - ';}
<h1>The beginning</h1><h1>And next...</h1>
Chapter 1 - The beginning
Chapter 2 - And next...
CSS Outline
•Like border, similar properties
•Never affects size or layout
•Surrounds the CSS border
•Useful for debugging/highlighting
border: 2px solid red; border: 2px solid red;outline: 10px solid blue;
sessionStorage and localStorage
Easier, better, more data storage than cookies
•5MB of storage space per site, rather than 4KB
•Much friendlier API
•No data is sent to the server// Store datalocalStorage.setItem("myString", "foo");localStorage.setItem("myObject", JSON.stringify(myObj));
// Retrieve datavar str = localStorage.getItem("myString");var obj = JSON.parse( localStorage.getItem("myObject") );
sessionStorage and localStorage
Beyond localStorage...
IndexedDBStore and retrieve data from a database
caniuse.com/#feat=indexeddb
sessionStorage and localStorage
Beyond localStorage...
File API: Directories and SystemStore and retrieve data as files
caniuse.com/#feat=filesystem
hashChange event
DOM event that fires when:
•User changes URL after hash sign (#)
• Internal navigation on page, e.g. <a
href="#foo">
•Change using JS: location.hash = "bar";
•Back/forward buttons (on same page)
hashChange event
beyond hashChange...
Session History Management
caniuse.com/#feat=history
CSS text-overflow: ellipsis
End overflowing lines with ellipsis
.article-preview { text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
In this article I will be discuss...
• Requires additional properties to work
• Only works for single lines, not wrapping text
• Good when variable length of text may not fit
Data URIs (for images)
Embed images in HTML or stylesheets
•Alternative to sprites to reduce HTTP requests
•NOTE: Must serve gzipped to prevent size increase
•Max file size: 32KB (for IE8)
.icon1 { background: url(data:image/png;base64,<data>) no-repeat;}.icon2 { background: url(data:image/png;base64,<data>) no-repeat;}
