Skip to content
Browse files

improved documentation + typos

  • Loading branch information...
1 parent 2157203 commit e6676947f234aba151eb2358129f81c0e65b5d9a @aFarkas committed Apr 10, 2011
View
2 demos/demos/canvas.html
@@ -29,7 +29,7 @@
<header>
<hgroup>
<h1>Webshims Lib</h1>
- <h2>Polyfill only the uncapable browsers</h2>
+ <h2>Polyfill only the incapable browsers</h2>
</hgroup>
<nav>
<ul>
View
2 demos/demos/details.html
@@ -29,7 +29,7 @@
<header>
<hgroup>
<h1>Webshims Lib</h1>
- <h2>Polyfill only the uncapable browsers</h2>
+ <h2>Polyfill only the incapable browsers</h2>
</hgroup>
<nav>
<ul>
View
2 demos/demos/es5.html
@@ -23,7 +23,7 @@
<header>
<hgroup>
<h1>Webshims Lib</h1>
- <h2>Polyfill only the uncapable browsers</h2>
+ <h2>Polyfill only the incapable browsers</h2>
</hgroup>
<nav>
<ul>
View
2 demos/demos/geolocation.html
@@ -26,7 +26,7 @@
<header>
<hgroup>
<h1>Webshims Lib</h1>
- <h2>Polyfill only the uncapable browsers</h2>
+ <h2>Polyfill only the incapable browsers</h2>
</hgroup>
<nav>
<ul>
View
2 demos/demos/json-storage.html
@@ -23,7 +23,7 @@
<header>
<hgroup>
<h1>Webshims Lib</h1>
- <h2>Polyfill only the uncapable browsers</h2>
+ <h2>Polyfill only the incapable browsers</h2>
</hgroup>
<nav>
<ul>
View
2 demos/demos/shiv.html
@@ -23,7 +23,7 @@
<header>
<hgroup>
<h1>Webshims Lib</h1>
- <h2>Polyfill only the uncapable browsers</h2>
+ <h2>Polyfill only the incapable browsers</h2>
</hgroup>
<nav>
<ul>
View
11 demos/demos/webforms.html
@@ -48,7 +48,8 @@
</script>
-->
<script class="example">
- $.webshims.setOptions('forms', { customMessages: true, textareaPlaceholder: true});
+
+ $.webshims.setOptions('forms', { customMessages: true});
//load all defined
//or load only a specific feature with $.webshims.polyfill('feature-name');
$.webshims.polyfill();
@@ -73,7 +74,7 @@
<header>
<hgroup>
<h1>Webshims Lib</h1>
- <h2>Polyfill only the uncapable browsers</h2>
+ <h2>Polyfill only the incapable browsers</h2>
</hgroup>
<nav>
<ul>
@@ -124,7 +125,6 @@
<li><strong>overrideMessages</strong> (boolean): <code>false</code> (default) || <code>true</code>. Overrides the native messages with the customMessages - using the <code>setCustomValidity</code>-method. This is usefull, if you want to use customMessages with native validation UI. If you want to use custom messages with custom styleable UI. Use the <code>customMessages</code>-option instead.</li>
<li><strong>replaceValidationUI</strong> (boolean): <code>false</code> (default) || <code>true</code>. Replaces the browser validation UI with a custom styleable UI.</li>
<li><strong>placeholderType</strong> (string): <code>"value"</code> (default) || <code>"over"</code>. If placeholderType is set to "over", the polyfill uses the overLabel technique to create a placeholder and doesn't "polute" the value property.</li>
- <li><strong>textareaPlaceholder</strong> (boolean): <code>false</code> (default) || <code>true</code>. If textareaPlaceholder is set to true, browser, which do support input[placeholder] and constraint validation, but no textarea[placeholder], will be polyfilled (only Opera 11).</li>
</ul>
@@ -236,7 +236,7 @@
<fieldset>
<legend> date +oninput+ range</legend>
<input type="date" id="dateControlledByRange" value="2011-01-01" min="2011-01-01" max="2011-12-31" oninput="$.attr( rangeControlledByDate, 'valueAsNumber', $.attr(this, 'valueAsNumber') )" />
- <input type="range" id="rangeControlledByDate" value="1293840000000" min="1293840000000" max="1325289600000" step="86400000" oninput="$.attr( dateControlledByRange, 'valueAsNumber', $.attr(this, 'valueAsNumber') )" />
+ <input type="range" id="rangeControlledByDate" value="1293840000000" min="1293840000000" max="1325289600000" step="86400000" oninput="$.attr( dateControlledByRange, 'valueAsNumber', $.attr(this, 'valueAsNumber') )" style="margin-left: 5px; width: 400px;" />
</fieldset>
</div>
@@ -371,8 +371,9 @@ <h3 id="custom-widget" class="button">... create custom validation rules</h3>
</div>
</aside>
<aside>
- <h3>Known Issues/Constraints (<code>forms-ext</code> only)</h3>
+ <h3>Known Issues/Constraints (most <code>forms-ext</code> only)</h3>
<ul>
+ <li>placeholder polyfill is only active in browsers, which do not support constraint validation. This means, that older versions of Opera are not polyfilled.</li>
<li>Spinbuttons for type=time and type=number don't show up in Safari 5 on Windows <a href="https://bugs.webkit.org/show_bug.cgi?id=38381">webkit bug</a>, <a href="https://github.com/aFarkas/webshim/issues#issue/23">webshims bug</a></li>
<li>Spinbuttons for type=number on Safari 5 Mac has some issue: They have bad usability, if the input starts with an empty value or if you are using step=any.</li>
<li>Webshims lib considers a polyfill only as "extreme stable/futureproof", if at least three different browser engines do support the polyfilled features, while this is true for the <code>forms</code>-feature, it isn't for the <code>forms-ext</code>-feature.</li>
View
2 demos/demos/webforms/1-webforms-lang-custom-bubble.html
@@ -46,7 +46,7 @@
<header>
<hgroup>
<h1>Webshims Lib</h1>
- <h2>Polyfill only the uncapable browsers</h2>
+ <h2>Polyfill only the incapable browsers</h2>
</hgroup>
<nav>
<ul>
View
2 demos/demos/webforms/3-webforms-widgets.html
@@ -82,7 +82,7 @@
<header>
<hgroup>
<h1>Webshims Lib</h1>
- <h2>Polyfill only the uncapable browsers</h2>
+ <h2>Polyfill only the incapable browsers</h2>
</hgroup>
<nav>
<ul>
View
2 demos/demos/webforms/4-webforms-custom-validity.html
@@ -37,7 +37,7 @@
<header>
<hgroup>
<h1>Webshims Lib</h1>
- <h2>Polyfill only the uncapable browsers</h2>
+ <h2>Polyfill only the incapable browsers</h2>
</hgroup>
<nav>
<ul>
View
18 demos/index.html
@@ -82,8 +82,8 @@
<li>Firefox 3.5+</li>
<li>Safari 4+</li>
<li>Safari for iOS 4.3</li>
- <li>Chrome 9.0+</li>
- <li>Opera 10.54+</li>
+ <li>Chrome 10.0+</li>
+ <li>Opera 11+</li>
</ul>
</div>
@@ -239,11 +239,11 @@ <h3 id="embed-polyfill" class="button">Embedding and configuring the script</h3>
});
-->
<h4>Some information about "Make fewer HTTP requests"</h4>
- <p>There is a very bad myth, saying that you should combine all your JS into one file is good for performance. In fact this rule can dramatically slow down loading your page. The <a href="http://calendar.perfplanet.com/2010/thoughts-on-performance/">truth is a little bit more complex</a>.</p>
- <p>Thsi rule was written in 2004 and the reason beyond this rule is that loading JS in old browser like IE6/IE7/FF3.0 do block downloading other resources, do block HTML parsing and do block UI rendering.</p>
- <p>In newer browsers like IE8+/FF3.5 JS loading do neither block downloading other resources nor block HTML parsing. And in case of using a script loader (and webshims lib is using a script loader) loading plyfill-scripts won't block anything even in IE6/IE7/FF3.0.</p>
- <p>This said, loading all features with webshims lib without a combohandler service isn't good for network-performance in old browsers, but it's not that bad how yslow says it is.</p>
- <p>And, If you are using a combohandler service you should make sure, that all browsers load minimum between 3-8 JS files (depends on browser and webpage / use the maxFiles configuration to achieve this).</p>
+ <p>There is a very bad myth, saying that combining all your JS into one file is good for performance. In fact this rule can dramatically slow down loading your page. The <a href="http://calendar.perfplanet.com/2010/thoughts-on-performance/">truth is a little bit more complex</a>.</p>
+ <p>This rule was written in 2004 and the reason beyond this rule is that loading JS in old browser like IE6/IE7/FF3.0 do block downloading other resources, do block HTML parsing and do block UI rendering.</p>
+ <p>In newer browsers like IE8+/FF3.5+ JS loading do neither block downloading other resources nor block HTML [pre-]parsing. And in case of using a script loader (and webshims lib is using a script loader) loading scripts won't block anything even in IE6/IE7/FF3.0.</p>
+ <p>This said, if you are using a combohandler service you should make sure, that all browsers load between 4-8 JS files (depends on browser and webpage / use the maxFiles configuration to achieve this).</p>
+ <p>And if you only want to use some polyfills and not all, you should not use a combohandler, because all polyfill downloads are parallelized.</p>
</div>
<h3 id="polyfill-ready" class="button">Fire when ready</h3>
<div class="panel">
@@ -483,10 +483,10 @@ <h3 id="polyfill-foucs" class="button">Dealing with FOUCs</h3>
<p><small>Note: The added classes are bulletproof. In case of an error or window's load event the loading-classes will be removed, even if not all features seem to be implemented.</small></p>
<h4>Why you should put your webshims inside of your documents head</h4>
- <p>There is a lot of misunderstanding about the yslow rule "Put your JavaScript at th bottom". Put your JavaScript at the bottom does not decrease total page load time. The only effect is psychologic. The user sooner sees how the page is loading, because JS blocks the UI rendering.</p>
+ <p>There is a lot of misunderstanding about the yslow rule "Put your JavaScript at th bottom". Put your JavaScript at the bottom does not decrease total page load time. The effect is psychologic. The user sooner sees how the page is loading, because JS blocks the UI rendering.</p>
<p>This also means that a FOUC is not a side effect of "Put your JavaScript at the bottom". It is the intended effect of this technique.</p>
<p>Using a script loader (and webshims lib uses a script loader) has a very similiar effect and combining both techniques will increase FOUCs.</p>
- <p>If you use a script loader and put your JS at top you have done everything right about performance. Some versions of yslow recognize that you have used this technique and won't subtract points for this rule. The nice thing about script loaders is, that loading JS-files dynamically will addiotionally decrease page load time, because all browsers can parallelize script loading.</p>
+ <p>If you use a script loader and put your JS at top you have done everything right about performance. Some versions of yslow recognize that you have used this technique and won't subtract points for this rule. The nice thing about script loaders is, that loading JS-files dynamically will additionally decrease page load time, because all browsers can parallelize script loading.</p>
</div>
<h3 id="polyfill-philosophy" class="button">Webshims polyfilling philosophy</h3>

0 comments on commit e667694

Please sign in to comment.
Something went wrong with that request. Please try again.