5. 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
6. 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
7.
8. 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
9. Top features you can use today!*
No polyfills, no doubts or worries. Just use it.
*Assumption: You're not supporting IE6 or 7
11. 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.
12. CSS Tables
.parent {
display: table;
width: 80px;
}
.parent > div {
display: table-cell;
text-align: center;
}
<div class="parent">
<div style="background: #EEA">foo</div>
<div style="background: #AEE">bar bar bar</div>
</div>
13. 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; My block
}
content
<div class="parent">
<p>My block content</p>
</div>
16. Pseudo-elements / generated content
Pseudo-elements: :before, :after
Two free CSS-generated elements per 1 HTML element!
Generated content
Defining the content displayed in the pseudo-element
.foo {
color: green;
}
.foo:before { content: '=>'; } =>This!
.foo:after { content: '!'; }
<p class="foo">This</p>
17. Pseudo-elements / generated content
Two extra elements means…
• 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/
18. Pseudo-elements / generated content
Even more elements with :before:before ?
Not yet, but being discussed!
http://dev.w3.org/csswg/css4-pseudo/
19. CSS Counters
Use incrementing numbers in generated content
body { counter-reset: foo; }
h1 { counter-increment: foo; }
h1:before {
content: 'Chapter ' Chapter 1 - The beginning
counter(foo) ' - ';
}
Chapter 2 - And next...
<h1>The beginning</h1>
<h1>And next...</h1>
20. 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;
21. 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 data
localStorage.setItem("myString", "foo");
localStorage.setItem("myObject", JSON.stringify(myObj));
// Retrieve data
var str = localStorage.getItem("myString");
var obj = JSON.parse( localStorage.getItem("myObject") );
24. 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)
26. CSS text-overflow: ellipsis
End overflowing lines with ellipsis
.article-preview {
text-overflow: ellipsis;
white-space: nowrap; In this article I will be discuss...
overflow: hidden;
}
• Requires additional properties to work
• Only works for single lines, not wrapping text
• Good when variable length of text may not fit
27. Data URIs (for images)
Embed images in HTML or stylesheets
.icon1 {
background: url(data:image/png;base64,<data>) no-repeat;
}
.icon2 {
background: url(data:image/png;base64,<data>) no-repeat;
}
• Alternative to sprites to reduce HTTP requests
- (introduce myself) - work for adobe, create and maintain web compat site caniuse - Will talk about site, then some features you can use today - In 2008, enjoyed learning about new tech, HTML5 & CSS3 emerging Wanted overview of support of latest tech, so made one
- Launched Jan 2009: "When Can I Use" - Purpose: Quick overview of support for different web tech - Shows which browsers prevent devs from using (IE6, etc) - Site grown over time listing more features and having more functionality like search, added mobile browsers Personal note: Site management has been educational, forced to keep up to date
- Site today, index of 130-something feats by category
Example of support table, will go into more detail later
Support information for 130+ features (HTML5, CSS3, etc) - SVG, APIs, file formats . - Over the years as browsers support more, more is added to the site Good for quick overview of basic browser support - Support / partial / no support Known issues & links for each feature - Bugs don't always mean partial support, Links: reference like WebPlatform Docs, MDN, polyfills and blog posts See percentage of users with supporting browsers (using StatCounter data) - Support may seem good, but may only be in lesser used browsers #1 priority: Keeping up to date with new browser versions - Within 24 hours of a new version being released, I test its support and update the site so you can be sure it's up to date.
Community help accepted via GitHub & feedback form - On GitHub you can see editable JSON files for each feature, and new features can be added - Feedback form for each feature for corrections, bugs, etc Import Google Analytics data to see support based on your own site's users - Very powerful, much more specific than StatCounter Versions shown on table are based on their usage - Under Options you can change the threshold, default is 1% Compare support of multiple browser versions - Under browser comparison you can see what features multiple browsers have in common or where they differ Summary table shows total support % of each browser version - If you're interested in pitting browsers against each other.
So for those unfamiliar with the site, here's what a support table currently looks like. A few things to point out are: - The usage support percentage globally from StatCounter as well as for my own site - Subset of versions shown, use "Show all versions" link for all - Feedback form and GitHub link
New design (by Lennart Schoors) - Some time last year Lennart sent an unsolicited new design. Undeniably better, working on it now More web tech features - Of course Select specific regions for usage share data - If you don't have google analytics data, currently there's just global data. In the future you'll be able to select your geographic region Better notes on partial support - Currently there's an area where partial support is described, but this will be replaced by footnotes to make it clearer what information applies to which versions
Next part of the talk: Features you can use today - Tracked a long time, finally safe to use today - Why? Hard for devs to accept when feature has cross-browser support - Takeaway: Use today without worry about compat. All IE8+ - Will also note related features
- List gathered from caniuse supported in IE8 or higher. - picked out 8 of the more interesting ones.
Layout benefits of HTML <table>, without the table semantics - Reason you shouldn't use table elements for layout: for tabular data Easier to use than float-based layouts - Floats never meant for layout, tables allow much better structure No cellspan or rowspan CSS properties - So you can't do everything you can with HTML tables, which sucks Table-related limitations: e.g. no relative/absolute positioning of cells. - Which of course is quite limiting when doing layout
- Works by setting display: table, table-row, table-cell - act as <table>, <tr>, <td> elements - Worth looking into; easy to understand and design with.
- Can make any element a table cell (no table needed) - Table cells with vertical-align tell children how to align - Align regardless of height - NOTE: No abspos of table-cell, will change back to block (use wrapper)
Better than tables for layout - Flexbox allows just rows or columns with much more flexibility & control
Another awesome layout feature is grid layout, but it's currently only supported by IE10.
- Pseudo-elements: different kinds, :before and :after create new stylable elements - Appear before and after the CONTENT of the element - Generated content - for defining the content displayed in the pseudo-element - Strings and special functions (for images & more)
There's actually tons of effects you can accomplish using these two generated elements. Using characters/character icons to prepend to elements - ... Multiple backgrounds & multiple borders - Since for each element you can set a background or more borders. - no true multiple backgrounds yet in IE8, but 3 like this Pure-CSS shapes - Using CSS tricks you use the elements to make triangles, other shapes to make elaborate shapes Layout issue fixes - Sometimes extra element needed to make a layout work Displaying links in printed pages (using content: attr(href) ) - Content attribute can display value of a given attribute - Useful to display URLs of links on print pages ...lots more! - Dozens of other uses, examples came from css-tricks.com
- Even more elements with :before:before ? - Not yet, but being discussed! - Proposal by Adobe, no implementations So you may ask yourself, well can't I create even more elements by just adding more :before's? The answer is no for right now, though there is a spec proposed by Adobe that will make that possible. No implementations yet, though.
- Used with pseudo-elements - Display and control number values - Like lists, but for any element - Ex: numbered headings counter-reset - This property indicates that the given counter should be reset. counter-increment - Every element with this property has its counter increased by 1. Use counter() function in content property to include generated number
Defined like border properties - Width, style & color & shorthand Never affects size or layout - Different from margin, padding and border, positioned on top Surrounds the CSS border - See example Useful for debugging/highlighting - When designing may have been changing background/border - outline interferes much less
- Two storage mechanisms replace cookies - sessionStorage - client until closed tab - localStorage - permanent 5MB of storage space per site, rather than 4KB (from cookies) - Previously only pieces of text, now enough for files Much friendlier API - Used to be pain for cookies, now use setItem and getItem. No data is sent to the server - Unlike cookies, data from the storage objects not automatically shared with server
Two other upcoming features related to storing data include IndexedDB for local database storage...
...and the Directories and System File API - store in sandboxed file system.
- Fires when anything after hash of URL changes User changes URL after hash sign (#) - By typing into browser's URL bar Internal navigation on page, e.g. <a href="#foo"> - Any link on the page that directs to an ID to scroll to Change using JS: location.hash = "bar"; - ... Back/forward buttons (on same page) - Important to remember - Useful for webapps to manage behavior of clicking buttons & links - But...limited to current page, not entire site
- Session history management allows URL updating on domain without navigation
- Firefox didn't used to support this, been around a while now - Only cross-supported value is ellipsis - Puts ellipses where text would otherwise overflow Requires additional properties to work - white-space: nowrap - overflow: hidden Only works for single lines, not wrapping text - important to note! Good when variable length of text may not fit - preview content (first line in article, etc)
Data URIs - Files converted into very long URLs - Use Data URL where you'd otherwise specify a path to a file to embed - IE8 only supports images limited to 32KB Alternative to sprites to reduce HTTP requests - With sprites you'd put multiple images in one so you only need to load one. - With data URLs just put the URI in the file for each image with no extra requests NOTE: Must serve gzipped to prevent size increase - By default encoded data will be larger
