CSS Animations are still in a flux. The Working Group has decided to provide a universal animation spec that would work across CSS, SVG and HTML. For now, use animations for providing additional glamour and use feature detection to provide alternative experience on browsers that do not support this feature for critical animations.
+CSS Animations are still in a flux. The Working Group has decided to provide a universal animation spec that would work across CSS, SVG and HTML. For now, either use animations only to provide non-essential aesthetic enhancements or use feature detection to provide an alternative experience for browsers that do not support this feature.
As with video, you need to provide your audio file in multiple formats for these to work—you'll need Ogg and AAC. jPlayer has a jQuery dependency. Sound Manager has an extensive API for further customization.
+As is the case with video, you need to provide your audio file in multiple formats for these to work, namely in Ogg Vorbis and AAC. jPlayer has a jQuery dependency. Sound Manager has an extensive API for further customization.
New css3 background-image options includes background-clip, background-origin and background-size. They are each supported in modern browsers and can be used today.
++ + + View browser share % + + + Edit this info +
+Make sure to use all the right prefixes (-o-, -webkit, -ms-, -moz-); additionally, border-image.com may help. You should let this fallback to either a normal solid border or no border at all (depending on whether a border is essential for readability). We recommend you avoid polyfills.
Make sure to use all the right prefixes (-o-, -webkit-, -ms-, -moz-). Additionally, border-image.com may help. You should let this fallback to either a normal solid border or no border at all, depending on whether a border is essential for readability. We recommend that you avoid polyfills.
Box reflection has never been part of a CSS specification. Parts of what you can do with box-reflection would be possible to do with CSS Filters. Until then, you should avoid using WebKit-only reflection.
+Box reflection has never been part of a CSS specification. Certain presentations that are possible with box-reflection will be possible using CSS Filters. Until then, you should avoid using WebKit-only box reflections.
Datalist enables autocomplete combo boxes. It can be polyfilled well with any of the scripts below, though they have varying levels of support for the full feature. You can also use a graceful fallback if you choose not to polyfill.
@@ -377,7 +401,7 @@
elem.dataset is unsupported in IE and older mobile browsers. Using data-* attributes will be totally fine in all browsers, but instead of using elem.dataset.foo just use elem.getAttribute('data-foo'). A polyfill is availble if you want terser syntax.
elem.dataset is unsupported in Internet Explorer and older mobile browsers. Using data-* attributes will be totally fine in all browsers, but instead of using elem.dataset.foo just use elem.getAttribute('data-foo'). A polyfill is availble if you want terser syntax.
Use the details element if you intend to show a summary which when clicked reveals detailed information.
+Use the details element if you intend to show a summary which when clicked reveals detailed information. Without any fallback, non-supporting browsers will fall back to displaying the element in the opened state.
@@ -425,7 +449,7 @@
Drag n Drop was standardized in HTML5 but based on IE's original implementation. So it has wide support (except Opera), but many feel frustrated when using the API. You may want to use jQuery UI Draggable (or another JS library) to handle this for you. Meanwhile the proposed [dropzone] attribute will improve the situation as it gains browser support.
+Drag and Drop has been standardized in HTML5 based on Internet Explorer's original implementation. Therefore, it already has wide support (except Opera), but many feel frustrated when using the API. You may want to use jQuery UI Draggable (or another JavaScript library) to handle this for you. Meanwhile the proposed [dropzone] attribute will improve the situation as it gains browser support.
Unfortunately, older versions of this spec have been implemented in Gecko, Webkit and Trident. But the spec has changed significantly (starting from the syntax), hence we recommend you avoid using this until the stable version of the spec finds wide-spread implementation.
+Unfortunately, older versions of this spec have been implemented in Gecko, WebKit and Trident. But the spec has changed significantly (starting from the syntax), hence we recommend you avoid using this until the stable version of the spec finds wide-spread implementation.
Internet Explorer 10 and Firefox 4 support low level control over font feature settings. What this means is other browsers merely will not render the flourishes you seek. Many features available through the property may be extracted to separate properties in the future, such as font-variant-ligatures.
+Internet Explorer 10, Firefox 4+ and Chrome 16 (Windows and Linux only) support low level control over font feature settings. What this means is other browsers merely will not render the flourishes you seek. Many features available through the property may be extracted to separate properties in the future, such as font-variant-ligatures.
pushState gives you real proper URLs along with permalinks to dynamic app state. You can use it and fall back to page refreshes if you'd like. Alternatively, History.js smooths out some browser implementation differences and an and optional hashchange fallback for HTML4 browsers. PJax (pushState + ajax) is what is used by Github for their fallback solution.
The History API provides a way for JavaScript to change the URL displayed in the browser without reloading the page. There are several approaches to providing a fallback. The simplest is to fall back to page refreshes. Alternatively, the History.js plugin smooths out some browser implementation differences and provides an optional hashchange fallback for HTML 4 browsers. GitHub uses pjax (pushState + ajax).
@@ -746,7 +770,9 @@
The new sectioning elements (like <header>, <footer>, <nav>, <article>, and <section>) can be used to expose better accessibility to your document structure. All browsers except oldIE (IE <=8) handle these fine. The notes below only apply to oldIE:
All browsers except oldIE (IE <=8) handle new sectioning elements (like <header>, <footer>, <nav>, <article>, and <section>) fine. However they aren’t always mapped to accessibility APIs as the HTML5 spec requires. Currently only Firefox does this but other browsers are implementing the a11y APIs quickly. In the meantime, Accessifyhtml5.js maps them correctly.
The notes below only apply to oldIE:
The html5shiv enables you to use these in your markup (and Modernizr does the exact same by default).
@@ -754,14 +780,10 @@Lastly, if you need these elements to print correctly, use html5shiv-printshiv.js which addresses an IE bug there.
IndexedDB was a volatile spec for a year, but has settled down. In addition to Chrome and Firefox, IE10 will have it; Opera and Safari should have it soon.
+IndexedDB was a volatile spec for a year, but has settled down. In addition to Chrome and Firefox, IE10 will have it; Opera and Safari have not yet committed to it.
-IDBWrapper helps smooth out the cross-browser differences. You may still want to use WebSQL DB when IDB isn't present.
+IDBWrapper helps smooth out the cross-browser differences. You may consider falling back to WebSQL when IndexedDB isn't available, but do keep in mind that WebSQL has been abandoned.
Input placeholders are simply ignored in IE 9 and below. Note that they are only applied when the type of the input is text, search, tel, url, or email. Otherwise, it is ignored.
+Input placeholders are simply ignored in IE 9 and below. Note that they are only applied when the type of the input is text, password, search, tel, url, or email. Textareas can have placeholders, too. Otherwise, it is ignored.
-input[placeholder] is commonly the first polyfill anyone writes and, as such, there are many of them. Password inputs and submit event clearing are among many of the gotchas that catch naïve implemenations; Mathias's polyfill below handles these cases very well.
input[placeholder] is commonly the first polyfill anyone writes and, as such, there are many of them. Password inputs and submit event clearing are among many of the gotchas that catch native implemenations; Mathias's polyfill below handles these cases very well.
Local and session storage are a great way to store data without resorting to cookies. IE8 supported localStorage and sessionStorage so you may not need a polyfill. If you do, Remy's is a piece of cake to implement and use.
Local and session storage are a great way to store data without resorting to cookies. IE8 supported localStorage and sessionStorage so you may not need a polyfill. If you do, Remy's is a piece of cake to implement and use.
This is a simple key/value store, so if you want to store complex data use JSON.parse(str) and JSON.stringify(obj) on your way in and out. There is also no way to know if you exceeded the storage cross-browser, so wrap your store commands in try/catch. Up to 5MB is safe to use.
This is a simple key/value store, so if you want to store complex data use JSON.parse(str) and JSON.stringify(obj) on your way in and out. There is also no way to know if you exceeded the storage cross-browser, so wrap your store commands in try/catch. Up to 2.5MB is safe to use.
matchMedia provides a javascript API to see if a media query will succeed. MatchMedia.js provides a shim for unsupported browsers. If you want a shim that is responsive to window resizing, you can use this fork, though its limited to browsers that support css transitions.
+matchMedia provides a JavaScript API to see if a media query will succeed. MatchMedia.js provides a shim for unsupported browsers. If you want a shim that is responsive to window resizing, you can use this fork, though its limited to browsers that support CSS Transitions.
Media Queries (MQ) work on all modern browsers. OldIE (IE6,7,8) unfortunately do not understand media queries on features, which means none of your CSS within media queries will be parsed by them. We recommend you make peace with that (or use Chrome Frame), but if you absolutely cannot, then you can use Respond.js, but be aware it has performance overhead that slows down page load.
+Media Queries (MQ) work on all modern browsers. OldIE (IE6,7,8) unfortunately do not understand media queries on features, which means none of your CSS within media queries will be parsed by them. We recommend you make peace with that (or use Chrome Frame), but if you absolutely cannot, then you can use Respond.js.
Internet Explorer (10+), and Opera support CSS Multiple Column without vendor prefixes, so you only need prefixed versions for -webkit and -moz. A further note, features like column-break-after, column-break-before, and column-break-inside which are necessary for advanced typography are webkit-only right now.
Internet Explorer (10+), and Opera support CSS Multi-column Layout without vendor prefixes, so you only need prefixed versions for -webkit- and -moz-. A further note, features like column-break-after, column-break-before, and column-break-inside - which are necessary for advanced typography - are currently WebKit-only.
We recommend you do not polyfill this and let it fall back to single column text.
- + Edit this info +
+CSS3 opacity allows you to modify the opacity of HTML elements. It is safe to use. For IE6-IE8, use the proprietary "filter" property to achieve the same effect.
+Text stroke adds an outline or stroke to text and and is only supported by WebKit. Text stroke has never been part of a CSS specification and should be avoided.
++ + + View browser share % + + + Edit this info +
+There are polyfills and plugins to enable WebGL for IE, but you probably shouldn't use them. Use WebGL if it's present, else point the user to get.webgl.org.
+There are polyfills and plugins to enable WebGL for IE, but you probably shouldn't use them. Use WebGL if it's present, else point the user to get.webgl.org.
+ +You can also offer to the user to install Google Chrome Frame if they just want a plugin. Nearly all WebGL demos use GCF if it's available.
HTML5 Please is a community project (contribute on github!) from the people behind HTML5 Boilerplate, Modernizr & CSS3 Please.
Divya Manian
Paul Irish
Tim Branyen
Connor Montgomery & more
♥
diff --git a/template.html b/template.html index fcfd68af..b7a32190 100644 --- a/template.html +++ b/template.html @@ -85,8 +85,6 @@HTML5 Please is a community project (contribute on github!) from the people behind HTML5 Boilerplate, Modernizr & CSS3 Please.
Divya Manian
Paul Irish
Tim Branyen
Connor Montgomery & more
♥