![Page 1: W3Conf slides - The top web features from caniuse.com you can use today](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b755274a795917738b4618/html5/thumbnails/1.jpg)
Yes, you can!
The top web features from caniuse.com you can use today
Alexis Deveria
![Page 2: W3Conf slides - The top web features from caniuse.com you can use today](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b755274a795917738b4618/html5/thumbnails/2.jpg)
2009: “When can I use…” launched
![Page 3: W3Conf slides - The top web features from caniuse.com you can use today](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b755274a795917738b4618/html5/thumbnails/3.jpg)
![Page 4: W3Conf slides - The top web features from caniuse.com you can use today](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b755274a795917738b4618/html5/thumbnails/4.jpg)
![Page 5: W3Conf slides - The top web features from caniuse.com you can use today](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b755274a795917738b4618/html5/thumbnails/5.jpg)
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
![Page 6: W3Conf slides - The top web features from caniuse.com you can use today](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b755274a795917738b4618/html5/thumbnails/6.jpg)
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
![Page 7: W3Conf slides - The top web features from caniuse.com you can use today](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b755274a795917738b4618/html5/thumbnails/7.jpg)
![Page 8: W3Conf slides - The top web features from caniuse.com you can use today](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b755274a795917738b4618/html5/thumbnails/8.jpg)
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
![Page 9: W3Conf slides - The top web features from caniuse.com you can use today](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b755274a795917738b4618/html5/thumbnails/9.jpg)
Top features you can use today!*
No polyfills, no doubts or worries. Just use it.
*Assumption: You're not supporting IE6 or 7
![Page 10: W3Conf slides - The top web features from caniuse.com you can use today](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b755274a795917738b4618/html5/thumbnails/10.jpg)
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)
![Page 11: W3Conf slides - The top web features from caniuse.com you can use today](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b755274a795917738b4618/html5/thumbnails/11.jpg)
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.
![Page 12: W3Conf slides - The top web features from caniuse.com you can use today](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b755274a795917738b4618/html5/thumbnails/12.jpg)
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;
}
![Page 13: W3Conf slides - The top web features from caniuse.com you can use today](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b755274a795917738b4618/html5/thumbnails/13.jpg)
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
![Page 14: W3Conf slides - The top web features from caniuse.com you can use today](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b755274a795917738b4618/html5/thumbnails/14.jpg)
CSS Tables
Beyond tables...
CSS Flexible Layout Module
caniuse.com/#feat=flexbox
![Page 15: W3Conf slides - The top web features from caniuse.com you can use today](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b755274a795917738b4618/html5/thumbnails/15.jpg)
CSS Tables
Beyond tables...
CSS Grid Layout
caniuse.com/#feat=grid
![Page 16: W3Conf slides - The top web features from caniuse.com you can use today](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b755274a795917738b4618/html5/thumbnails/16.jpg)
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
![Page 17: W3Conf slides - The top web features from caniuse.com you can use today](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b755274a795917738b4618/html5/thumbnails/17.jpg)
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…
![Page 18: W3Conf slides - The top web features from caniuse.com you can use today](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b755274a795917738b4618/html5/thumbnails/18.jpg)
Pseudo-elements / generated content
Even more elements with :before:before ?Not yet, but being discussed!
http://dev.w3.org/csswg/css4-pseudo/
![Page 19: W3Conf slides - The top web features from caniuse.com you can use today](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b755274a795917738b4618/html5/thumbnails/19.jpg)
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...
![Page 20: W3Conf slides - The top web features from caniuse.com you can use today](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b755274a795917738b4618/html5/thumbnails/20.jpg)
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;
![Page 21: W3Conf slides - The top web features from caniuse.com you can use today](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b755274a795917738b4618/html5/thumbnails/21.jpg)
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") );
![Page 22: W3Conf slides - The top web features from caniuse.com you can use today](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b755274a795917738b4618/html5/thumbnails/22.jpg)
sessionStorage and localStorage
Beyond localStorage...
IndexedDBStore and retrieve data from a database
caniuse.com/#feat=indexeddb
![Page 23: W3Conf slides - The top web features from caniuse.com you can use today](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b755274a795917738b4618/html5/thumbnails/23.jpg)
sessionStorage and localStorage
Beyond localStorage...
File API: Directories and SystemStore and retrieve data as files
caniuse.com/#feat=filesystem
![Page 24: W3Conf slides - The top web features from caniuse.com you can use today](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b755274a795917738b4618/html5/thumbnails/24.jpg)
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)
![Page 25: W3Conf slides - The top web features from caniuse.com you can use today](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b755274a795917738b4618/html5/thumbnails/25.jpg)
hashChange event
beyond hashChange...
Session History Management
caniuse.com/#feat=history
![Page 26: W3Conf slides - The top web features from caniuse.com you can use today](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b755274a795917738b4618/html5/thumbnails/26.jpg)
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
![Page 27: W3Conf slides - The top web features from caniuse.com you can use today](https://reader033.vdocuments.site/reader033/viewer/2022061218/54b755274a795917738b4618/html5/thumbnails/27.jpg)
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;}