Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

We’re showing branches in this repository, but you can also compare across forks.

base fork: h5bp/html5please
base: c6f1292bfa
...
head fork: h5bp/html5please
compare: 6814556342
  • 6 commits
  • 4 files changed
  • 0 commit comments
  • 2 contributors
128 index.html
View
@@ -179,7 +179,7 @@ <h4 class="kind css">css</h4>
</header>
<div class="more">
<div class="recco">
- <p>Box reflection has never been part of a CSS specification. Certain presentations that are possible with <code>box-reflection</code> will be possible using CSS Filters. Until then, you should avoid using WebKit-only box reflections.</p>
+ <p>The <code>box-reflect</code> property has never been part of any CSS specification. Certain presentations that are possible with <code>-webkit-box-reflect</code> will be possible using CSS Filters. You should avoid using WebKit-only box reflections.</p>
</div>
<div class="polyfills"></div>
@@ -195,7 +195,7 @@ <h4 class="kind css">css</h4>
<footer class="tags">none</footer>
</article>
- <article class="none">
+ <article class="prefixes">
<header>
<h2 class="name" id="box-shadow">box-shadow </h2>
<h3 class="status caution">caution <i></i> </h3>
@@ -205,7 +205,9 @@ <h4 class="kind css">css</h4>
<div class="recco">
<p><code>box-shadow</code> is safe to use most of the time, except when you are applying it on a large area as that may cause significant performance impact when interacting with the page (on scroll and hovers, but also transitions and animations). </p>
-<p>Polyfills are unnecessary for box-shadow. They are too costly and slow down pageload. Users without a modern browser will not see a shadow, but aren't checking your site in multiple browsers anyhow.</p>
+<p>Polyfills are unnecessary for box-shadow. They are too costly and slow down page load. Users without a modern browser will not see a shadow, but aren't checking your site in multiple browsers anyhow.</p>
+
+<p>Box shadows can also be applied safely without prefixes. </p>
</div>
<div class="polyfills"></div>
@@ -218,7 +220,7 @@ <h4 class="kind css">css</h4>
<a href="https://github.com/h5bp/html5please/blob/master/posts/box-shadow.md">Edit this info</a>
</p>
</div>
- <footer class="tags">none</footer>
+ <footer class="tags">prefixes</footer>
</article>
<article class="fallback prefixes gtie7 border-box">
@@ -255,7 +257,7 @@ <h4 class="kind css">css</h4>
</header>
<div class="more">
<div class="recco">
- <p>Internet Explorer and Firefox are the only supporting browsers, which makes using calc() in production tedious given the impact it can have on layout and the consequent breaking of your design on unsupported browsers. We encourage you to use it for experimentation, but not yet for any production use.</p>
+ <p>Internet Explorer and Firefox are the only supporting browsers, which makes using calc() in production tedious given the impact it can have on layout and the consequent breaking of your design on unsupported browsers. We encourage you to use it for experimentation, but to avoid it in production.</p>
</div>
<div class="polyfills"></div>
@@ -279,9 +281,13 @@ <h4 class="kind html">html</h4>
</header>
<div class="more">
<div class="recco">
- <p>Canvas is definitely good to go for modern browsers. If you want to support Internet Explorer 8 and below, FlashCanvas provides a good polyfill.</p>
+ <p><code>canvas</code> is definitely good to go for modern browsers. If you want to support Internet Explorer 8 and below, ExplorerCanvas and FlashCanvas can be helpful in providing support for most <code>canvas</code> features. However, due to the complex nature of native <code>canvas</code> implementations, developers should be aware that the polyfills for <code>canvas</code> are not simple drop-in solutions in some cases.</p>
+
+<p>For example, both <a href="https://groups.google.com/forum/?fromgroups#!searchin/google-excanvas/drawImage">ExplorerCanvas</a> and <a href="https://groups.google.com/forum/?fromgroups#!searchin/flashcanvas/drawImage">FlashCanvas</a> may have difficulties handling the commonly used <code>drawImage</code> method. FlashCanvas cannot be passed the bitmap data from a DOM-based <code>Image</code> object, and therefore has to re-request the asset in the Flash Player causing undesired latency and flickering. Developers should be careful when handling image data and ensure thorough testing due to the unreliability and technical limitations of these features in the polyfills.</p>
+
+<p>That isn't to say <code>canvas</code> shouldn't be used if cross-browser compatibility is a concern. Existing polyfills are more than capable of rendering simpler bitmaps such as <a href="http://www.jqplot.com/deploy/dist/examples/kcp_pyramid2.html">charts/graphs</a>, <a href="http://thejit.org/static/v20/Jit/Examples/Sunburst/example2.html">visualizations</a>, and even <a href="http://flashcanvas.net/examples/www.chiptune.com/starfield/starfield.html">starfields</a>! For these uses and many more, <code>canvas</code> is highly encouraged.</p>
</div>
- <div class="polyfills"><b>Recommended polyfills: </b><p><a href="http://flashcanvas.net/">FlashCanvas</a></p></div>
+ <div class="polyfills"><b>Recommended polyfills: </b><p><a href="http://flashcanvas.net/">FlashCanvas</a>, <a href="http://code.google.com/p/explorercanvas/">ExplorerCanvas</a></p></div>
<p class="links">
@@ -451,7 +457,7 @@ <h4 class="kind api">api</h4>
<p>Experimentally use with caution until the shim implementations have matured.</p>
</div>
- <div class="polyfills"><b>Recommended polyfills: </b><p><a href="https://github.com/termi1uc1/ES5-DOM-SHIM">ES5-DOM-shim</a>, <a href="https://github.com/Raynos/DOM-shim">DOM-shim</a></p></div>
+ <div class="polyfills"><b>Recommended polyfills: </b><p><a href="https://github.com/termi/ES5-DOM-SHIM">ES5-DOM-shim</a>, <a href="https://github.com/Raynos/DOM-shim">DOM-shim</a></p></div>
<p class="links">
@@ -473,7 +479,7 @@ <h4 class="kind api">api</h4>
</header>
<div class="more">
<div class="recco">
- <p>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 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-dropzone-attribute">[dropzone]</a> attribute will improve the situation as it gains browser support.</p>
+ <p>Drag and Drop has been standardized in HTML5 based on Internet Explorer's original implementation. Therefore, it already has wide support, 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 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#the-dropzone-attribute">[dropzone]</a> attribute will improve the situation as it gains browser support.</p>
</div>
<div class="polyfills"><b>Recommended polyfills: </b><p><a href="https://github.com/MrSwitch/dropfile">dropfile</a>, <a href="https://github.com/eligrey/FileSaver.js">fileSaver</a>, <a href="https://github.com/vjeux/jDataView">jDataView</a></p></div>
@@ -535,6 +541,10 @@ <h4 class="kind js">js</h4>
<p class="links">
+ <a href="http://caniuse.com/es6">
+ View browser share %
+ </a>
+
<a href="https://github.com/h5bp/html5please/blob/master/posts/es6.md">Edit this info</a>
</p>
</div>
@@ -589,6 +599,62 @@ <h4 class="kind css">css</h4>
<footer class="tags">none</footer>
</article>
+ <article class="prefixes polyfill">
+ <header>
+ <h2 class="name" id="File API">File API </h2>
+ <h3 class="status caution">caution <i>with <b class=polyfill>polyfill</b></i> </h3>
+ <h4 class="kind api">api</h4>
+ </header>
+ <div class="more">
+ <div class="recco">
+ <p>Using the File API added to the DOM in HTML5, it's now possible for web content to ask the user to select local files.</p>
+
+<p>FileReader pairs very well with Drag n Drop to allow for drag 'n drop file uploads, and if neither of those features are present, the fallback of providing an <code>&lt;input type=file&gt;</code> is rather easy.
+Supported in Chrome, Firefox, Opera. Safari is currently missing FileReader support.</p>
+
+<p><a href="https://github.com/Jahdrien/FileReader">FileReader</a> provides useful fallback, based on Flash, jQuery and jQuery UI.</p>
+ </div>
+ <div class="polyfills"><b>Recommended polyfills: </b><p><a href="https://github.com/Jahdrien/FileReader">FileReader</a></p></div>
+
+ <p class="links">
+
+ <a href="http://caniuse.com/fileapi">
+ View browser share %
+ </a>
+
+ <a href="https://github.com/h5bp/html5please/blob/master/posts/fileapi.md">Edit this info</a>
+ </p>
+ </div>
+ <footer class="tags">prefixes polyfill</footer>
+ </article>
+
+ <article class="prefixes polyfill">
+ <header>
+ <h2 class="name" id="FileSystem &amp; FileWriter API">FileSystem & FileWriter API </h2>
+ <h3 class="status avoid">avoid <i>with <b class=polyfill>polyfill</b></i> </h3>
+ <h4 class="kind api">api</h4>
+ </header>
+ <div class="more">
+ <div class="recco">
+ <p>Filesystem API provides a method of reading and writing files to a sandboxed file system on the user's local file system.
+Supported only by Chrome 18+ with webkit prefix. Check out <a href="http://caniuse.com/filesystem">http://caniuse.com/filesystem</a> for a better understanding of the support.</p>
+
+<p><a href="https://github.com/ebidel/idb.filesystem.js">idb.filesystem.js</a> Implements a polyfill using IndexedDB as its underlying storage layer. Required support for IndexDB means that it works only in Firefox and Chrome.</p>
+ </div>
+ <div class="polyfills"><b>Recommended polyfills: </b><p><a href="https://github.com/ebidel/idb.filesystem.js">idb.filesystem.js</a></p></div>
+
+ <p class="links">
+
+ <a href="http://caniuse.com/filesystem">
+ View browser share %
+ </a>
+
+ <a href="https://github.com/h5bp/html5please/blob/master/posts/filesystem.md">Edit this info</a>
+ </p>
+ </div>
+ <footer class="tags">prefixes polyfill</footer>
+ </article>
+
<article class="none">
<header>
<h2 class="name" id="filters">filters </h2>
@@ -648,7 +714,7 @@ <h4 class="kind css">css</h4>
<div class="recco">
<p>Use the <a href="http://www.fontsquirrel.com/fontface/generator">Font Squirrel Generator</a> for fonts you have license for using as web fonts. <a href="http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax">Fontspring @font-face syntax</a> is also the most bullet-proof way of serving web fonts. You do not need polyfills - just fonts in several formats; WOFF is preferred, followed by TTF and then EOT. </p>
-<p>Also, don't use sIFR or Cufon anymore.</p>
+<p>Also, don't use solutions like sIFR or Cufon anymore, as they can cause accessibility and performance problems.</p>
</div>
<div class="polyfills"></div>
@@ -696,7 +762,7 @@ <h4 class="kind html">html</h4>
</header>
<div class="more">
<div class="recco">
- <p>HTML5 has baked in clientside form validation, and polyfills can enable this for legacy browsers as well. Using the defined HTML5 API for constraint validation may be a more maintainable direction than using a jQuery Validation plugin, depending on your team. When detecting this feature, be aware of Safari's half backed support. It does support the form validation, but don't highlight invalid fields or present error messages.</p>
+ <p>HTML5 has baked in clientside form validation, and polyfills can enable this for legacy browsers as well. Using the defined HTML5 API for constraint validation may be a more maintainable direction than using a jQuery Validation plugin, depending on your team. When detecting this feature, be aware of Safari's half baked support. It does support form validation, but won't highlight invalid fields or present error messages.</p>
</div>
<div class="polyfills"><b>Recommended polyfills: </b><p><a href="http://afarkas.github.com/webshim/demos/">webshims</a>, <a href="https://github.com/dperini/nwxforms">nwxforms</a>, <a href="https://github.com/ryanseddon/H5F">H5F</a></p></div>
@@ -850,7 +916,9 @@ <h4 class="kind css">css</h4>
</header>
<div class="more">
<div class="recco">
- <p><a href="http://dev.w3.org/csswg/css3-text/#hyphenation">CSS Text Level 3</a> allows you to tell the browser to break words using hyphens. As there won't by any noticable effects on browsers which don't support the feature, we recommend that you use it without any polyfills or fallbacks. <a href="http://code.google.com/p/hyphenator/">CSS Hyphenator</a> is a polyfill that works on browsers that support the soft hyphen. </p>
+ <p><a href="http://dev.w3.org/csswg/css3-text/#hyphenation">CSS Text Level 3</a> allows you to tell the browser to break words using hyphens. Read about how to effectively use <code>hyphens:auto</code> and <code>word-break</code> in <a href="http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/">Word wrapping/hyphenation using CSS</a>. </p>
+
+<p>As there won't by any noticable effects on browsers which don't support the feature, we recommend that you use it without any polyfills or fallbacks. <a href="http://code.google.com/p/hyphenator/">CSS Hyphenator</a> is a polyfill that works on browsers that support the soft hyphen. <a href="https://github.com/Modernizr/Modernizr/issues/312">Modernizr has good support</a> for hyphentation detection. </p>
</div>
<div class="polyfills"></div>
@@ -900,7 +968,7 @@ <h4 class="kind html">html</h4>
</header>
<div class="more">
<div class="recco">
- <p>A color input will fall back to a plain text input if it's not supported, but excluding Opera, no desktop browser has added support for color inputs.</p>
+ <p>A color input will fall back to a plain text input if it's not supported. So far, only Opera supports it, but it's rolling out in Chrome Canary.</p>
<p>You should probably avoid this until it has support in WebKit, Gecko or IE.</p>
</div>
@@ -926,13 +994,13 @@ <h4 class="kind html">html</h4>
</header>
<div class="more">
<div class="recco">
- <p>There are many date inputs: <code>datetime-local, date, time, month, week</code> that should provide a datepicker to the user. For a long time, WebKit offered a spinner UI on these inputs, but this was an incomplete implementation (and has since been removed). </p>
+ <p>There are many date inputs: <code>datetime-local, date, time, month, week</code> that should provide a datepicker to the user. For a long time, WebKit offered a spinner UI on these inputs, but this was an incomplete implementation (and has since been removed).</p>
-<p>A few polyfills offer a proper datepicker UI, if the feature is not offered natively. </p>
+<p>A few polyfills offer a proper datepicker UI, if the feature is not offered natively.</p>
<p>We suggest you use Modernizr to detect this feature, as it has correctly detected these features, regardless of WebKit's partial implementation or other browser bugs.</p>
</div>
- <div class="polyfills"><b>Recommended polyfills: </b><p><a href="http://afarkas.github.com/webshim/demos/demos/webforms.html">webshims</a>, <a href="http://www.useragentman.com/blog/2010/07/27/cross-browser-html5-forms-using-modernizr-webforms2-and-html5widgets/">html5widgets</a>,</p></div>
+ <div class="polyfills"><b>Recommended polyfills: </b><p><a href="http://afarkas.github.com/webshim/demos/demos/webforms.html">webshims</a>, <a href="http://www.useragentman.com/blog/2010/07/27/cross-browser-html5-forms-using-modernizr-webforms2-and-html5widgets/">html5widgets</a></p></div>
<p class="links">
@@ -1110,7 +1178,9 @@ <h4 class="kind css">css</h4>
</header>
<div class="more">
<div class="recco">
- <p>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 <a href="https://github.com/scottjehl/Respond">Respond.js</a><!--, but be aware it has performance overhead that slows down page load-->.</p>
+ <p>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 <a href="https://github.com/scottjehl/Respond">Respond.js</a> but be aware it has performance overhead that slows down page load.</p>
+
+<p>If you choose a <a href="http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/">mobile first approach</a>, you'll be targeting smallest screens first, then the different media queries will take effect as the window/device size increases. But if the browser doesn't support media queries and you don't use a polyfill, then the 'mobile first' styles will be applied to OldIE. You can serve a <a href="http://nicolasgallagher.com/mobile-first-css-sass-and-ie/">separate stylesheet for IE to help with this</a>.</p>
</div>
<div class="polyfills"></div>
@@ -1194,6 +1264,10 @@ <h4 class="kind API">API</h4>
<p class="links">
+ <a href="http://caniuse.com/microdata-domapi">
+ View browser share %
+ </a>
+
<a href="https://github.com/h5bp/html5please/blob/master/posts/microdata-domapi.md">Edit this info</a>
</p>
</div>
@@ -1260,7 +1334,7 @@ <h4 class="kind css">css</h4>
</header>
<div class="more">
<div class="recco">
- <p>Multiple backgrounds will be <a href="http://snook.ca/archives/html_and_css/multiple-bg-css-gradients">completely ignored</a> when they aren't supported. If you can make do with a simple background color, make sure to declare <code>background-color: &lt;color&gt;</code> before you start using multiple backgrounds. Alternatively, you can also set an image as a background with <code>background-image</code> and override it with a second background declaration. We strongly recommend you don't polyfill this.</p>
+ <p>Multiple backgrounds will be <a href="http://snook.ca/archives/html_and_css/multiple-bg-css-gradients">completely ignored</a> when they aren't supported. If you can make do with a simple background color, make sure to declare <code>background-color: &lt;color&gt;</code> on the element before declaring your multiple backgrounds. Alternatively, you can also set an image as a background with <code>background-image</code> and override it with a second background declaration. We strongly recommend you don't polyfill this.</p>
</div>
<div class="polyfills"></div>
@@ -1315,6 +1389,10 @@ <h4 class="kind html">html</h4>
<p class="links">
+ <a href="http://caniuse.com/ol-reversed">
+ View browser share %
+ </a>
+
<a href="https://github.com/h5bp/html5please/blob/master/posts/ol-reversed.md">Edit this info</a>
</p>
</div>
@@ -1401,7 +1479,7 @@ <h4 class="kind css">css</h4>
</header>
<div class="more">
<div class="recco">
- <p>Fixed positioning wasn't in IE6, but is fine in IE7 and everywhere else (<a href="http://bradfrostweb.com/blog/mobile/fixed-position/">except mobile, which is described at length here</a>). </p>
+ <p>Fixed positioning isn't supported in IE6, but is fine in IE7 and everywhere else (<a href="http://bradfrostweb.com/blog/mobile/fixed-position/">except mobile, which is described at length here</a>). </p>
<p>Use fixed positioning all you like, but you may want to check its behavior in mobile browsers afterward. There is a <a href="https://github.com/Modernizr/Modernizr/issues/167#issuecomment-2155861">messy feature detect</a> if you'd like it.</p>
</div>
@@ -1599,6 +1677,7 @@ <h4 class="kind css">css</h4>
<ul>
<li><code>:before, :after</code> and generated content</li>
<li><code>:focus</code> for elements with current focus</li>
+<li><a href="http://www.w3.org/TR/selectors/#lang-pseudo"><code>:lang(C)</code></a> which targets an element based on language</li>
</ul>
<h4>When you sunset IE8 support, you can use:</h4>
@@ -1617,6 +1696,7 @@ <h4 class="kind css">css</h4>
* http://analogysoft.com/learning/ui-hulk-out/#beyondie6
* http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx#selectors
* http://www.quirksmode.org/css/contents.html
+* http://www.impressivewebs.com/browser-support-css3-selectors/
[].forEach.call( document.querySelectorAll('td'), function(elem){
if (elem.innerText.trim() == 'No') elem.style.backgroundColor = 'red';
@@ -1647,12 +1727,16 @@ <h4 class="kind css">css</h4>
</header>
<div class="more">
<div class="recco">
- <p>Scoped stylesheets are still in active development. While you can experiment with them in Chrome Canary (see <code>about:flags</code>), there is no stable version of any browser supporting this now. </p>
+ <p><a href="http://css-tricks.com/saving-the-day-with-scoped-css/">Scoped stylesheets</a> are still in active development. While you can experiment with them in Chrome Canary (type <code>about:flags</code> in Chrome's address bar), there is no stable version of any browser supporting this now. </p>
</div>
<div class="polyfills"></div>
<p class="links">
+ <a href="http://caniuse.com/scoped-css">
+ View browser share %
+ </a>
+
<a href="https://github.com/h5bp/html5please/blob/master/posts/scoped-css.md">Edit this info</a>
</p>
</div>
@@ -1669,7 +1753,7 @@ <h4 class="kind svg">svg</h4>
<div class="recco">
<p>SVG has had good support for several years in most browsers, except for Internet Explorer. IE9 brings support, which means for oldIE you can use <a href="http://code.google.com/p/svgweb/">SVGWeb</a> as a polyfill, or create SVG dynamically via <a href="http://raphaeljs.com/">Raphael</a> (which uses a VML fallback). </p>
-<p>For Android Browser support, you can use <a href="http://code.google.com/p/canvg/">CanVG</a>. Meanwhile <a href="http://mbostock.github.com/d3/">D3.js</a> is a pure SVG library for data visualization.</p>
+<p>For Android Browser support, you can use <a href="http://code.google.com/p/canvg/">CanVG</a>. Meanwhile <a href="http://mbostock.github.com/d3/">D3.js</a> is an SVG and DOM library for data visualization.</p>
</div>
<div class="polyfills"><b>Recommended polyfills: </b><p><a href="http://code.google.com/p/svgweb/">SVGWeb</a></p></div>
@@ -1971,7 +2055,7 @@ <h4 class="kind api">api</h4>
</div>
<footer class="tags">none</footer>
</article>
-
+
</section>
</div>
<footer>
12 posts/fileapi.md
View
@@ -0,0 +1,12 @@
+feature: File API
+status: caution
+tags: prefixes polyfill
+kind: api
+polyfillurls: [FileReader](https://github.com/Jahdrien/FileReader)
+
+Using the File API added to the DOM in HTML5, it's now possible for web content to ask the user to select local files.
+
+FileReader pairs very well with Drag n Drop to allow for drag 'n drop file uploads, and if neither of those features are present, the fallback of providing an `<input type=file>` is rather easy.
+Supported in Chrome, Firefox, Opera. Safari is currently missing FileReader support.
+
+[FileReader](https://github.com/Jahdrien/FileReader) provides useful fallback, based on Flash, jQuery and jQuery UI.
10 posts/filesystem.md
View
@@ -0,0 +1,10 @@
+feature: FileSystem & FileWriter API
+status: avoid
+tags: prefixes polyfill
+kind: api
+polyfillurls: [idb.filesystem.js](https://github.com/ebidel/idb.filesystem.js)
+
+Filesystem API provides a method of reading and writing files to a sandboxed file system on the user's local file system.
+Supported only by Chrome 18+ with webkit prefix. Check out [http://caniuse.com/filesystem](http://caniuse.com/filesystem) for a better understanding of the support.
+
+[idb.filesystem.js](https://github.com/ebidel/idb.filesystem.js) Implements a polyfill using IndexedDB as its underlying storage layer. Required support for IndexDB means that it works only in Firefox and Chrome.
2  posts/indexeddb.md
View
@@ -6,4 +6,4 @@ polyfillurls: [IDBWrapper](https://github.com/jensarps/IDBWrapper)
IndexedDB was a volatile spec for a year, but has settled down. In addition to Chrome and Firefox, IE10 will have it; Opera has not yet implemented it and Safari has not yet committed to it.
-[IDBWrapper](https://github.com/jensarps/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.
+[IDBWrapper](https://github.com/jensarps/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.

No commit comments for this range

Something went wrong with that request. Please try again.