Yes, you can!The top web features fromcaniuse.com you can use today                         Alexis Deveria
2009: “When can I use…” launched
About caniuse.comWhy use caniuse?• Support information for 130+ features (HTML5, CSS3, etc)• Good for quick overview of ba...
About caniuse.comOther features:• Community help accepted via GitHub & feedback form• Import Google Analytics data to see ...
About caniuse.comComing (hopefully) in 2013:• New design (by Lennart Schoors)• More web tech features• More (mobile) brows...
Top features you can use today!*No polyfills, no doubts or worries. Just use it.*Assumption: Youre not supporting IE6 or 7
Supported in IE8+                 CSS                            Other•   CSS 2.1 Selectors                               ...
CSS TablesYay!• Layout benefits of HTML <table>, without the table  semantics• Easier to use than float-based layoutsBut.....
CSS Tables.parent {       display: table;       width: 80px;}.parent > div {       display: table-cell;       text-align: ...
CSS TablesAlso nice:•  Use display: table-cell on a parent element to vertically   align any content:.parent {  display: t...
CSS TablesBeyond tables...CSS Flexible Layout Module                             caniuse.com/#feat=flexbox
CSS TablesBeyond tables...CSS Grid Layout                   caniuse.com/#feat=grid
Pseudo-elements / generated contentPseudo-elements: :before, :afterTwo free CSS-generated elements per 1 HTML element!Gene...
Pseudo-elements / generated contentTwo extra elements means…• Using characters/character icons to prepend to elements• Mul...
Pseudo-elements / generated contentEven more elements with :before:before ?Not yet, but being discussed!http://dev.w3.org/...
CSS Counters Use incrementing numbers in generated contentbody { counter-reset: foo; }h1 { counter-increment: foo; }h1:bef...
CSS Outline• Like border, similar properties• Never affects size or layout• Surrounds the CSS border• Useful for debugging...
sessionStorage and localStorageEasier, better, more data storage than cookies• 5MB of storage space per site, rather than ...
sessionStorage and localStorageBeyond localStorage...IndexedDBStore and retrieve data from a database                     ...
sessionStorage and localStorageBeyond localStorage...File API: Directories and SystemStore and retrieve data as files     ...
hashChange eventDOM event that fires when:• User changes URL after hash sign (#)• Internal navigation on page, e.g. <a hre...
hashChange eventbeyond hashChange...Session History Management                             caniuse.com/#feat=history
CSS text-overflow: ellipsisEnd overflowing lines with ellipsis.article-preview {  text-overflow: ellipsis;  white-space: n...
Data URIs (for images) Embed images in HTML or stylesheets.icon1 {  background: url(data:image/png;base64,<data>) no-repea...
Questions?@caniuse@Fyrdadeveria@adobe.com
W3Conf slides - The top web features from caniuse.com you can use today
W3Conf slides - The top web features from caniuse.com you can use today
W3Conf slides - The top web features from caniuse.com you can use today
Upcoming SlideShare
Loading in …5
×

W3Conf slides - The top web features from caniuse.com you can use today

966 views
897 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
966
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • - (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 &amp; CSS3 emerging Wanted overview of support of latest tech, so made one
  • - Launched Jan 2009: &quot;When Can I Use&quot; - 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 &amp; links for each feature - Bugs don&apos;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&apos;s up to date.
  • Community help accepted via GitHub &amp; 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&apos;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&apos;re interested in pitting browsers against each other.
  • So for those unfamiliar with the site, here&apos;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 &quot;Show all versions&quot; 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&apos;t have google analytics data, currently there&apos;s just global data. In the future you&apos;ll be able to select your geographic region Better notes on partial support - Currently there&apos;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 &lt;table&gt;, without the table semantics - Reason you shouldn&apos;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&apos;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 &lt;table&gt;, &lt;tr&gt;, &lt;td&gt; 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 &amp; control
  • Another awesome layout feature is grid layout, but it&apos;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 &amp; more)
  • There&apos;s actually tons of effects you can accomplish using these two generated elements. Using characters/character icons to prepend to elements - ... Multiple backgrounds &amp; 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&apos;t I create even more elements by just adding more :before&apos;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 &amp; color &amp; 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&apos;s URL bar Internal navigation on page, e.g. &lt;a href=&quot;#foo&quot;&gt; - Any link on the page that directs to an ID to scroll to Change using JS: location.hash = &quot;bar&quot;; - ... Back/forward buttons (on same page) - Important to remember - Useful for webapps to manage behavior of clicking buttons &amp; links - But...limited to current page, not entire site
  • - Session history management allows URL updating on domain without navigation
  • - Firefox didn&apos;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&apos;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&apos;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
  • W3Conf slides - The top web features from caniuse.com you can use today

    1. 1. Yes, you can!The top web features fromcaniuse.com you can use today Alexis Deveria
    2. 2. 2009: “When can I use…” launched
    3. 3. About caniuse.comWhy 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
    4. 4. About caniuse.comOther features:• Community help accepted via GitHub & feedback form• Import Google Analytics data to see support based on your own sites 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
    5. 5. About caniuse.comComing (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
    6. 6. Top features you can use today!*No polyfills, no doubts or worries. Just use it.*Assumption: Youre not supporting IE6 or 7
    7. 7. Supported in IE8+ CSS Other• CSS 2.1 Selectors • PNG alpha transparency• @font-face• min/max-width/height • querySelector• display: inline-block • JSON parsing• position: fixed • Contenteditable attribute• opacity • postMessage• CSS Tables• Pseudo-elements / Generated • sessionStorage & localStorage content • hashChange event• Counters• outline • Data URIs (for images)• text-overflow: ellipsis
    8. 8. CSS TablesYay!• Layout benefits of HTML <table>, without the table semantics• Easier to use than float-based layoutsBut...• No cellspan or rowspan CSS properties• Table-related limitations: e.g. no relative/absolute positioning of cells.
    9. 9. 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>
    10. 10. CSS TablesAlso 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>
    11. 11. CSS TablesBeyond tables...CSS Flexible Layout Module caniuse.com/#feat=flexbox
    12. 12. CSS TablesBeyond tables...CSS Grid Layout caniuse.com/#feat=grid
    13. 13. Pseudo-elements / generated contentPseudo-elements: :before, :afterTwo free CSS-generated elements per 1 HTML element!Generated contentDefining the content displayed in the pseudo-element .foo { color: green; } .foo:before { content: =>; } =>This! .foo:after { content: !; } <p class="foo">This</p>
    14. 14. Pseudo-elements / generated contentTwo 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/
    15. 15. Pseudo-elements / generated contentEven more elements with :before:before ?Not yet, but being discussed!http://dev.w3.org/csswg/css4-pseudo/
    16. 16. CSS Counters Use incrementing numbers in generated contentbody { 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>
    17. 17. CSS Outline• Like border, similar properties• Never affects size or layout• Surrounds the CSS border• Useful for debugging/highlightingborder: 2px solid red; border: 2px solid red; outline: 10px solid blue;
    18. 18. sessionStorage and localStorageEasier, 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") );
    19. 19. sessionStorage and localStorageBeyond localStorage...IndexedDBStore and retrieve data from a database caniuse.com/#feat=indexeddb
    20. 20. sessionStorage and localStorageBeyond localStorage...File API: Directories and SystemStore and retrieve data as files caniuse.com/#feat=filesystem
    21. 21. hashChange eventDOM 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)
    22. 22. hashChange eventbeyond hashChange...Session History Management caniuse.com/#feat=history
    23. 23. CSS text-overflow: ellipsisEnd 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
    24. 24. 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
    25. 25. Questions?@caniuse@Fyrdadeveria@adobe.com

    ×