Skip to content

Commit ec48e62

Browse files
paulirishpaulirish
committed
comparator added for correct sort.
1 parent c7d917f commit ec48e62

File tree

5 files changed

+91
-87
lines changed

5 files changed

+91
-87
lines changed

‎index.html

+84-84
Original file line numberDiff line numberDiff line change
@@ -642,54 +642,54 @@ <h4 class="kind css">css</h4>
642642
<footer class="tags">none flexible</footer>
643643
</article>
644644

645-
<article class="none">
645+
<article class="fallback">
646646
<header>
647-
<h2 class="name">font-feature-settings </h2>
648-
<h3 class="status use">use <i></i> </h3>
647+
<h2 class="name">@font-face </h2>
648+
<h3 class="status use">use <i>with <b class=fallback>fallback</b></i> </h3>
649649
<h4 class="kind css">css</h4>
650650
</header>
651651
<div class="more">
652652
<div class="recco">
653-
<p>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. </p>
653+
<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>
654+
655+
<p>Also, don't use sIFR or Cufon anymore.</p>
654656
</div>
655657
<div class="polyfills"></div>
656658

657659
<p class="links">
658660

659-
<a href="http://blog.fontdeck.com/post/15777165734/opentype-1?503cde40">
660-
Learn more
661+
<a href="http://caniuse.com/fontface">
662+
View browser share %
661663
</a>
662664

663-
<a href="https://github.com/h5bp/html5please/blob/master/posts/font-feature-settings.md">Edit this info</a>
665+
<a href="https://github.com/h5bp/html5please/blob/master/posts/fontface.md">Edit this info</a>
664666
</p>
665667
</div>
666-
<footer class="tags">none</footer>
668+
<footer class="tags">fallback</footer>
667669
</article>
668670

669-
<article class="fallback">
671+
<article class="none">
670672
<header>
671-
<h2 class="name">@font-face </h2>
672-
<h3 class="status use">use <i>with <b class=fallback>fallback</b></i> </h3>
673+
<h2 class="name">font-feature-settings </h2>
674+
<h3 class="status use">use <i></i> </h3>
673675
<h4 class="kind css">css</h4>
674676
</header>
675677
<div class="more">
676678
<div class="recco">
677-
<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>
678-
679-
<p>Also, don't use sIFR or Cufon anymore.</p>
679+
<p>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. </p>
680680
</div>
681681
<div class="polyfills"></div>
682682

683683
<p class="links">
684684

685-
<a href="http://caniuse.com/fontface">
686-
View browser share %
685+
<a href="http://blog.fontdeck.com/post/15777165734/opentype-1?503cde40">
686+
Learn more
687687
</a>
688688

689-
<a href="https://github.com/h5bp/html5please/blob/master/posts/fontface.md">Edit this info</a>
689+
<a href="https://github.com/h5bp/html5please/blob/master/posts/font-feature-settings.md">Edit this info</a>
690690
</p>
691691
</div>
692-
<footer class="tags">fallback</footer>
692+
<footer class="tags">none</footer>
693693
</article>
694694

695695
<article class="polyfill gtie9">
@@ -896,32 +896,6 @@ <h4 class="kind api">api</h4>
896896
<footer class="tags">fallback gtie8</footer>
897897
</article>
898898

899-
<article class="gtie9">
900-
<header>
901-
<h2 class="name">input[placeholder] </h2>
902-
<h3 class="status use">use <i></i> </h3>
903-
<h4 class="kind html">html</h4>
904-
</header>
905-
<div class="more">
906-
<div class="recco">
907-
<p>Input placeholders are simply ignored in IE 9 and below. Note that they are only applied when the <strong>type</strong> of the input is <em>text</em>, <em>password</em>, <em>search</em>, <em>tel</em>, <em>url</em>, or <em>email</em>. <em>Textareas</em> can have placeholders, too. Otherwise, it is ignored.</p>
908-
909-
<p><code>input[placeholder]</code> is commonly the first polyfill anyone writes and, as such, there are <a href="http://bit.ly/polyfills">many of them</a>. 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.</p>
910-
</div>
911-
<div class="polyfills"><b>Recommended polyfills: </b><p><a href="https://github.com/mathiasbynens/jquery-placeholder">Placeholder jQuery Plugin</a></p></div>
912-
913-
<p class="links">
914-
915-
<a href="http://caniuse.com/input-placeholder">
916-
View browser share %
917-
</a>
918-
919-
<a href="https://github.com/h5bp/html5please/blob/master/posts/input-placeholder.md">Edit this info</a>
920-
</p>
921-
</div>
922-
<footer class="tags">gtie9</footer>
923-
</article>
924-
925899
<article class="polyfill gtie9">
926900
<header>
927901
<h2 class="name">&lt;input type=color> </h2>
@@ -1004,6 +978,32 @@ <h4 class="kind html">html</h4>
1004978
<footer class="tags">polyfill gtie9</footer>
1005979
</article>
1006980

981+
<article class="gtie9">
982+
<header>
983+
<h2 class="name">input[placeholder] </h2>
984+
<h3 class="status use">use <i></i> </h3>
985+
<h4 class="kind html">html</h4>
986+
</header>
987+
<div class="more">
988+
<div class="recco">
989+
<p>Input placeholders are simply ignored in IE 9 and below. Note that they are only applied when the <strong>type</strong> of the input is <em>text</em>, <em>password</em>, <em>search</em>, <em>tel</em>, <em>url</em>, or <em>email</em>. <em>Textareas</em> can have placeholders, too. Otherwise, it is ignored.</p>
990+
991+
<p><code>input[placeholder]</code> is commonly the first polyfill anyone writes and, as such, there are <a href="http://bit.ly/polyfills">many of them</a>. 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.</p>
992+
</div>
993+
<div class="polyfills"><b>Recommended polyfills: </b><p><a href="https://github.com/mathiasbynens/jquery-placeholder">Placeholder jQuery Plugin</a></p></div>
994+
995+
<p class="links">
996+
997+
<a href="http://caniuse.com/input-placeholder">
998+
View browser share %
999+
</a>
1000+
1001+
<a href="https://github.com/h5bp/html5please/blob/master/posts/input-placeholder.md">Edit this info</a>
1002+
</p>
1003+
</div>
1004+
<footer class="tags">gtie9</footer>
1005+
</article>
1006+
10071007
<article class="gtie7 polyfill">
10081008
<header>
10091009
<h2 class="name">JSON </h2>
@@ -1230,54 +1230,54 @@ <h4 class="kind css">css</h4>
12301230
<footer class="tags">gtie6</footer>
12311231
</article>
12321232

1233-
<article class="fallback gtie8">
1233+
<article class="prefixes gtie9 columns">
12341234
<header>
1235-
<h2 class="name">multiple backgrounds </h2>
1236-
<h3 class="status use">use <i>with <b class=fallback>fallback</b></i> </h3>
1235+
<h2 class="name">multicolumn </h2>
1236+
<h3 class="status use">use <i></i> </h3>
12371237
<h4 class="kind css">css</h4>
12381238
</header>
12391239
<div class="more">
12401240
<div class="recco">
1241-
<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>
1241+
<p>Internet Explorer (10+), and Opera support CSS Multi-column Layout without vendor prefixes, so you only need prefixed versions for <code>-webkit-</code> and <code>-moz-</code>.</p>
1242+
1243+
<p>We recommend you do not polyfill this and let it fall back to single column text.</p>
12421244
</div>
12431245
<div class="polyfills"></div>
12441246

12451247
<p class="links">
12461248

1247-
<a href="http://caniuse.com/multibackgrounds">
1249+
<a href="http://caniuse.com/multicolumn">
12481250
View browser share %
12491251
</a>
12501252

1251-
<a href="https://github.com/h5bp/html5please/blob/master/posts/multibackgrounds.md">Edit this info</a>
1253+
<a href="https://github.com/h5bp/html5please/blob/master/posts/multicolumn.md">Edit this info</a>
12521254
</p>
12531255
</div>
1254-
<footer class="tags">fallback gtie8</footer>
1256+
<footer class="tags">prefixes gtie9 columns</footer>
12551257
</article>
12561258

1257-
<article class="prefixes gtie9 columns">
1259+
<article class="fallback gtie8">
12581260
<header>
1259-
<h2 class="name">multicolumn </h2>
1260-
<h3 class="status use">use <i></i> </h3>
1261+
<h2 class="name">multiple backgrounds </h2>
1262+
<h3 class="status use">use <i>with <b class=fallback>fallback</b></i> </h3>
12611263
<h4 class="kind css">css</h4>
12621264
</header>
12631265
<div class="more">
12641266
<div class="recco">
1265-
<p>Internet Explorer (10+), and Opera support CSS Multi-column Layout without vendor prefixes, so you only need prefixed versions for <code>-webkit-</code> and <code>-moz-</code>.</p>
1266-
1267-
<p>We recommend you do not polyfill this and let it fall back to single column text.</p>
1267+
<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>
12681268
</div>
12691269
<div class="polyfills"></div>
12701270

12711271
<p class="links">
12721272

1273-
<a href="http://caniuse.com/multicolumn">
1273+
<a href="http://caniuse.com/multibackgrounds">
12741274
View browser share %
12751275
</a>
12761276

1277-
<a href="https://github.com/h5bp/html5please/blob/master/posts/multicolumn.md">Edit this info</a>
1277+
<a href="https://github.com/h5bp/html5please/blob/master/posts/multibackgrounds.md">Edit this info</a>
12781278
</p>
12791279
</div>
1280-
<footer class="tags">prefixes gtie9 columns</footer>
1280+
<footer class="tags">fallback gtie8</footer>
12811281
</article>
12821282

12831283
<article class="fallback gtie9">
@@ -1577,30 +1577,6 @@ <h4 class="kind html">html</h4>
15771577
<footer class="tags">fallback</footer>
15781578
</article>
15791579

1580-
<article class="">
1581-
<header>
1582-
<h2 class="name">style[scoped] </h2>
1583-
<h3 class="status avoid">avoid <i></i> </h3>
1584-
<h4 class="kind css">css</h4>
1585-
</header>
1586-
<div class="more">
1587-
<div class="recco">
1588-
<p>Scoped stylesheets are still in active development, the first implementation of which should be available in WebKit soon.</p>
1589-
</div>
1590-
<div class="polyfills"><b>Recommended polyfills: </b><p><a href="https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin">jQuery-Scoped-CSS-plugin</a></p></div>
1591-
1592-
<p class="links">
1593-
1594-
<a href="http://caniuse.com/scoped-css">
1595-
View browser share %
1596-
</a>
1597-
1598-
<a href="https://github.com/h5bp/html5please/blob/master/posts/scoped-css.md">Edit this info</a>
1599-
</p>
1600-
</div>
1601-
<footer class="tags"></footer>
1602-
</article>
1603-
16041580
<article class="fallback gtie6">
16051581
<header>
16061582
<h2 class="name">selectors </h2>
@@ -1667,6 +1643,30 @@ <h4>When you sunset IE8 support, you can use:</h4>
16671643
<footer class="tags">fallback gtie6</footer>
16681644
</article>
16691645

1646+
<article class="">
1647+
<header>
1648+
<h2 class="name">style[scoped] </h2>
1649+
<h3 class="status avoid">avoid <i></i> </h3>
1650+
<h4 class="kind css">css</h4>
1651+
</header>
1652+
<div class="more">
1653+
<div class="recco">
1654+
<p>Scoped stylesheets are still in active development, the first implementation of which should be available in WebKit soon.</p>
1655+
</div>
1656+
<div class="polyfills"><b>Recommended polyfills: </b><p><a href="https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin">jQuery-Scoped-CSS-plugin</a></p></div>
1657+
1658+
<p class="links">
1659+
1660+
<a href="http://caniuse.com/scoped-css">
1661+
View browser share %
1662+
</a>
1663+
1664+
<a href="https://github.com/h5bp/html5please/blob/master/posts/scoped-css.md">Edit this info</a>
1665+
</p>
1666+
</div>
1667+
<footer class="tags"></footer>
1668+
</article>
1669+
16701670
<article class="gtie8 polyfill">
16711671
<header>
16721672
<h2 class="name">&lt;svg> </h2>

‎lib/app.js

+4
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,10 @@ exports.Feature = Backbone.Model.extend({
108108
exports.Features = Backbone.Collection.extend({
109109
model: exports.Feature,
110110

111+
comparator : function(item){
112+
return item.get('feature').replace(/<|>|@|(&lt;)/g,'').toLowerCase();
113+
},
114+
111115
sync: function(method, model, options) {
112116
var data = [];
113117
var files = fs.readdirSync(paths.posts);

‎posts/input-typecolor.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
feature: &lt;input type=color>
1+
feature: <input type=color>
22
status: avoid
33
tags: polyfill gtie9
44
kind: html

‎posts/input-typedate.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
feature: &lt;input type=date>
1+
feature: <input type=date>
22
status: caution
33
tags: polyfill gtie9
44
kind: html

‎posts/input-typerange.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
feature: &lt;input type=range>
1+
feature: <input type=range>
22
status: caution
33
tags: polyfill gtie9
44
kind: html

0 commit comments

Comments
 (0)