Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

adding a few of these polyfills.

  • Loading branch information...
commit cebaede46860eb7099aff76f1fb1cf2f83901dde 1 parent c307a35
Divya Manian authored
View
62 index.html
@@ -30,25 +30,67 @@
<div id='main' role='main'>
<section class="features">
- <article class=" gtie8">
- <h2 class='name'> box-shadow</h2>
+ <article class=" polyfill">
+ <h2 class='name'> audio</h2>
<h3 class=" use"><b><i></i></b></h3>
- <div class='recco'><p>All modern browsers support SVG. For legacy browsers, you can use <a href="http://svgweb.org">svgweb</a> as a flash-based polyfill, or develop with <a href="http://raphaeljs.com">Raphaél</a> which has a VML renderer for oldIE.</p></div>
- <div class='polyfills'><b>Recommended Polyfills: </b><p><a href="#">isotope</a>, <a href="#">yui transition</a>, <a href="#">scripty2</a></p></div>
+ <div class='recco'><p>As with video, you need to provide your audio file in multiple formats for these to work. jPlayer also has a jQuery dependency. Sound Manager has extensive API for further customization. </p></div>
+ <div class='polyfills'><b>Recommended Polyfills: </b><p><a href="https://github.com/happyworm/jPlayer">jPlayer</a>, <a href="http://kolber.github.com/audiojs/">audio.js</a>, <a href="http://www.schillmania.com/projects/soundmanager2/">Sound Manager 2</a></p></div>
</article>
- <article class=" gtie9 no-polyfill">
- <h2 class='name'> CSS3 Transitions</h2>
+ <article class=" gtie8 polyfill">
+ <h2 class='name'> canvas</h2>
<h3 class=" use"><b><i></i></b></h3>
- <div class='recco'><p>shim layer recomendded to get hwaccel with js fallback (isotope, yui transition, scripty2) or let it degrade</p></div>
- <div class='polyfills'><b>Recommended Polyfills: </b><p><a href="#">isotope</a>, <a href="#">yui transitio</a>, <a href="#">scripty2</a></p></div>
+ <div class='recco'><p>Canvas is definitely good to go for modern browsers. But if you are looking to use it in IE 8 and below, use FlashCanvas. </p></div>
+ <div class='polyfills'><b>Recommended Polyfills: </b><p><a href="http://flashcanvas.net/">FlashCanvas</a></p></div>
</article>
- <article class=" nopolyfill">
+ <article class=" fallback">
+ <h2 class='name'> Eventsource</h2>
+ <h3 class=" use"><b><i></i></b></h3>
+ <div class='recco'><p>EventSource.js provides base fallback and is not dependent on jQuery.</p></div>
+ <div class='polyfills'><b>Recommended Polyfills: </b><p><a href="https://github.com/remy/polyfills/blob/master/EventSource.js">EventSource.js</a>, <a href="https://github.com/rwldrn/jquery.eventsource">jQuery.eventsource</a></p></div>
+ </article>
+
+ <article class=" polyfill">
+ <h2 class='name'> geo-location</h2>
+ <h3 class=" use"><b><i></i></b></h3>
+ <div class='recco'><p>The Geolocation shim requires jQuery to work, but if you are looking for a mobile specific script, you are better off using the geo-location-javascript.</p></div>
+ <div class='polyfills'><b>Recommended Polyfills: </b><p><a href="https://gist.github.com/366184">Geolocation Shim</a>, <a href="http://code.google.com/p/geo-location-javascript/">geo-location-javascript</a></p></div>
+ </article>
+
+ <article class=" fallback">
+ <h2 class='name'> history</h2>
+ <h3 class=" use"><b><i></i></b></h3>
+ <div class='recco'><p>History.js has cross-compatibility between HTML5 browser implementations and optional hashchange fallback for HTML4 browsers. PJax (pushState + ajax = pjax) is what is used by Github for their fallback solution.</p></div>
+ <div class='polyfills'><b>Recommended Polyfills: </b><p><a href="https://github.com/balupton/history.js">History.js</a>, <a href="http://pjax.heroku.com/">pjax</a></p></div>
+ </article>
+
+ <article class=" fallback">
+ <h2 class='name'> ruby</h2>
+ <h3 class=" use"><b><i></i></b></h3>
+ <div class='recco'><p>If you are using Ruby element you dont need a script-based fallback but you can provide a CSS based set of good defaults. </p></div>
+ <div class='polyfills'><b>Recommended Polyfills: </b><p><a href="http://www.useragentman.com/blog/2010/10/29/cross-browser-html5-ruby-annotations-using-css/">Cross-browser Ruby</a>, <a href="http://sideshowbarker.net/2009/11/13/html5-ruby/#comment-3388">basic fallback</a></p></div>
+ </article>
+
+ <article class=" gtie8 polyfill">
+ <h2 class='name'> svg</h2>
+ <h3 class=" use"><b><i></i></b></h3>
+ <div class='recco'><p>SVG has good support for several years in most browsers except IE. IE9 brings support, which means you can use a polyfill library like SVGWeb or Canvg or create SVG dynamically via RaphaelJS.</p></div>
+ <div class='polyfills'><b>Recommended Polyfills: </b><p><a href="http://code.google.com/p/svgweb/">svgweb</a>, <a href="http://raphaeljs.com/">raphaeljs</a>, <a href="http://code.google.com/p/canvg/">canvg</a></p></div>
+ </article>
+
+ <article class=" polyfill">
<h2 class='name'> text-shadow</h2>
<h3 class=" use"><b><i></i></b></h3>
<div class='recco'></div>
- <div class='polyfills'><b>Recommended Polyfills: </b></div>
+ <div class='polyfills'><b>Recommended Polyfills: </b><p>[]</p></div>
+ </article>
+
+ <article class=" polyfill">
+ <h2 class='name'> video</h2>
+ <h3 class=" use"><b><i></i></b></h3>
+ <div class='recco'><p>Do note you need to supply your video in various formats to cater to all browsers and fallbacks. There is also a way to do this without any scripting as explained by Kroc Camen in his article <a href="http://camendesign.com/code/video_for_everybody">Video for Everybody</a>.</p></div>
+ <div class='polyfills'><b>Recommended Polyfills: </b><p><a href="http://mediaelementjs.com/">mediaelementjs</a>, <a href="http://videojs.com/">videojs</a></p></div>
</article>
</section>
View
14 new_feature.sh
@@ -10,6 +10,7 @@ promptValue() {
feature=
status=
tags=
+kind=
while [ -z "$feature" ]
do
@@ -34,13 +35,23 @@ do
while [ $# -gt 0 ]
do
case "$1" in
- gtie6|gtie7|gtie8|nopolyfill|pollyfill|fallback) shift ;;
+ gtie6|gtie7|gtie8|nopolyfill|polyfill|fallback) shift ;;
*) echo "Unknown Tag: $1" 1>&2; tags= ; break ;;
esac
done
fi
done
+while [ -z "$kind" ]
+do
+ kind=$(promptValue "Enter Type (css,html,js,dom or svg)")
+ case $kind in
+ css|html|dom|svg) : ;;
+ *) kind= ;;
+ esac
+done
+
+
# Creating markdown file in posts folder
POSTS_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )/posts"
@@ -50,6 +61,7 @@ cat > $POSTS_DIR/$feature.md <<EOF
feature: $feature
status: $status
tags: $tags
+kind: $kind
polyfillurls:
View
7 posts/Eventsource.md
@@ -0,0 +1,7 @@
+feature: Eventsource
+status: use
+tags: fallback
+kind: html
+polyfillurls:[EventSource.js](https://github.com/remy/polyfills/blob/master/EventSource.js), [jQuery.eventsource](https://github.com/rwldrn/jquery.eventsource)
+
+EventSource.js provides base fallback and is not dependent on jQuery.
View
7 posts/audio.md
@@ -0,0 +1,7 @@
+feature: audio
+status: use
+tags: polyfill
+kind: html
+polyfillurls: [jPlayer](https://github.com/happyworm/jPlayer), [audio.js](http://kolber.github.com/audiojs/), [Sound Manager 2](http://www.schillmania.com/projects/soundmanager2/)
+
+As with video, you need to provide your audio file in multiple formats for these to work. jPlayer also has a jQuery dependency. Sound Manager has extensive API for further customization.
View
7 posts/canvas.md
@@ -0,0 +1,7 @@
+feature: canvas
+status: use
+tags: gtie8 polyfill
+kind: html
+polyfillurls: [FlashCanvas](http://flashcanvas.net/)
+
+Canvas is definitely good to go for modern browsers. But if you are looking to use it in IE 8 and below, use FlashCanvas.
View
7 posts/datalist.md
@@ -0,0 +1,7 @@
+feature: datalist
+status: use
+tags: polyfill
+kind: html
+polyfillurls: [jQuery Datalist Plugin](http://miketaylr.com/code/datalist.html), [Relevant Dropdowns Polyfill](http://css-tricks.com/15346-relevant-dropdowns-polyfill-for-datalist/)
+
+Jeremy Keith has a [graceful fallback solution](http://adactio.com/journal/4272/) that does not use a script.
View
7 posts/dataset.md
@@ -0,0 +1,7 @@
+feature: dataset
+status: use
+tags: polyfill
+kind: html
+polyfillurls:[HTML5 dataset support](http://eligrey.com/blog/post/html-5-dataset-support)
+
+[More info about dataset](http://dev.opera.com/articles/view/an-introduction-to-datasets/)
View
7 posts/details.md
@@ -0,0 +1,7 @@
+feature: details
+status: use
+tags: polyfill
+kind: html
+polyfillurls: [Details](http://mathiasbynens.be/notes/html5-details-jquery)
+
+Use detail element if you intent to show a summary which when clicked reveals detailed information.
View
7 posts/geo-location.md
@@ -0,0 +1,7 @@
+feature: geo-location
+status: use
+tags: polyfill
+kind: html
+polyfillurls: [Geolocation Shim](https://gist.github.com/366184), [geo-location-javascript](http://code.google.com/p/geo-location-javascript/)
+
+The Geolocation shim requires jQuery to work, but if you are looking for a mobile specific script, you are better off using the geo-location-javascript.
View
7 posts/history.md
@@ -0,0 +1,7 @@
+feature: history
+status: use
+tags: fallback
+kind: dom
+polyfillurls:[History.js](https://github.com/balupton/history.js), [pjax](http://pjax.heroku.com/)
+
+History.js has cross-compatibility between HTML5 browser implementations and optional hashchange fallback for HTML4 browsers. PJax (pushState + ajax = pjax) is what is used by Github for their fallback solution.
View
7 posts/menu.md
@@ -0,0 +1,7 @@
+feature: menu
+status: use
+tags: polyfill
+kind: html
+polyfillurls:[contextMenu](https://github.com/medialize/jQuery-contextMenu)
+
+Do note that this polyfill requires a jQuery dependency.
View
6 posts/meter.md
@@ -0,0 +1,6 @@
+feature: meter
+status: use
+tags: polyfill
+kind: html
+polyfillurls:[meter-polyfill](https://gist.github.com/667320), [jQuery shim](https://github.com/xjamundx/HTML5-Meter-Shim)
+
View
7 posts/progress.md
@@ -0,0 +1,7 @@
+feature: progress
+status: use
+tags: polyfill
+kind: html
+polyfillurls:[HTML5 Progress Polyfill](https://github.com/LeaVerou/HTML5-Progress-polyfill)
+
+
View
7 posts/ruby.md
@@ -0,0 +1,7 @@
+feature: ruby
+status: use
+tags: fallback
+kind: html
+polyfillurls: [Cross-browser Ruby](http://www.useragentman.com/blog/2010/10/29/cross-browser-html5-ruby-annotations-using-css/), [basic fallback](http://sideshowbarker.net/2009/11/13/html5-ruby/#comment-3388)
+
+If you are using Ruby element you dont need a script-based fallback but you can provide a CSS based set of good defaults.
View
7 posts/svg.md
@@ -0,0 +1,7 @@
+feature: svg
+status: use
+tags: gtie8 polyfill
+kind: svg
+polyfillurls:[svgweb](http://code.google.com/p/svgweb/), [raphaeljs](http://raphaeljs.com/), [canvg](http://code.google.com/p/canvg/)
+
+SVG has good support for several years in most browsers except IE. IE9 brings support, which means you can use a polyfill library like SVGWeb or Canvg or create SVG dynamically via RaphaelJS.
View
6 posts/test.md
@@ -1,6 +0,0 @@
-feature: box-shadow
-status: use
-tags: gtie8
-polyfillurls: [isotope](#), [yui transition](#), [scripty2](#)
-
-All modern browsers support SVG. For legacy browsers, you can use [svgweb](http://svgweb.org) as a flash-based polyfill, or develop with [Raphaél](http://raphaeljs.com) which has a VML renderer for oldIE.
View
6 posts/test2.md
@@ -1,6 +0,0 @@
-feature: CSS3 Transitions
-status: use
-tags: gtie9 no-polyfill
-polyfillurls: [isotope](#), [yui transitio](#), [scripty2](#)
-
-shim layer recomendded to get hwaccel with js fallback (isotope, yui transition, scripty2) or let it degrade
View
5 posts/text-shadow.md
@@ -0,0 +1,5 @@
+feature: text-shadow
+status: use
+tags: polyfill
+polyfillurls:[]
+
View
7 posts/video.md
@@ -0,0 +1,7 @@
+feature: video
+status: use
+tags: polyfill
+kind: html
+polyfillurls:[mediaelementjs](http://mediaelementjs.com/), [videojs](http://videojs.com/)
+
+Do note you need to supply your video in various formats to cater to all browsers and fallbacks. There is also a way to do this without any scripting as explained by Kroc Camen in his article [Video for Everybody](http://camendesign.com/code/video_for_everybody).
View
2  sass/style.scss
@@ -26,7 +26,7 @@ $yes: saturate($light, 10%);
/*
* HTML5 ✰ Boilerplate
*/
- * What follows is the result of much research on cross-browser styling.
+/* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
Please sign in to comment.
Something went wrong with that request. Please try again.