Permalink
Browse files

Merge pull request #114 from alrra/improvements

Minor improvements
  • Loading branch information...
2 parents bd23af5 + eee1e6d commit 44bc31f07b8acb0b266a019e9fd4c4c03bbc3b53 @paulirish committed Jan 21, 2013
Showing with 38 additions and 40 deletions.
  1. +38 −40 index.html
View
@@ -44,11 +44,11 @@
<pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
<pre class="rule">
.box_round {
- -webkit-border-radius: <b g="0">12px</b>; <span class="comment">/* Safari 3-4, iOS 1-3.2, Android &le;1.6 <span class="endcomment">*/</span></span>
- border-radius: <b g="0">12px</b>; <span class="comment">/* Opera 10.5, IE9+, Safari 5, Chrome, Firefox 4+, iOS 4, Android 2.1+ <span class="endcomment">*/</span></span>
+ -webkit-border-radius: <b g="0">12px</b>; <span class="comment">/* Android &le; 1.6, iOS 1-3.2, Safari 3-4 <span class="endcomment">*/</span></span>
+ border-radius: <b g="0">12px</b>; <span class="comment">/* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ <span class="endcomment">*/</span></span>
<span class="comment">/* useful if you don't want a bg color from <a href="http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed">leaking outside</a> the border: */</span>
- -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
+ -webkit-background-clip: padding-box; background-clip: padding-box;
}</pre>
<pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
</div>
@@ -62,7 +62,7 @@
-webkit-border-top-right-radius: <b g="2" readonly>8px</b>;
-webkit-border-bottom-right-radius: <b g="3" readonly>0px</b>;
-webkit-border-bottom-left-radius: <b g="4" readonly>0px</b>;
- border-radius: <b g="0">8px 8px 0px 0px</b>; <span class="comment">/* Opera 10.5, IE9, Safari 5, Chrome <span class="endcomment">*/</span></span>
+ border-radius: <b g="0">8px 8px 0px 0px</b>; <span class="comment">/* Chrome, IE 9+, Opera 10.50+, Safari 5+ <span class="endcomment">*/</span></span>
}</pre>
<pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
</div>
@@ -72,8 +72,8 @@
<pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
<pre class="rule">
.box_shadow {
- -webkit-box-shadow: <b g="0">0px</b> <b g="1">0px</b> <b g="2">4px</b> <b g="3">0px</b> <b g="4" i="lHex" o="sHex">#ffffff</b>; <span class="comment">/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ <span class="endcomment">*/</span></span>
- box-shadow: <b g="0">0px</b> <b g="1">0px</b> <b g="2">4px</b> <b g="3">0px</b> <b g="4" i="lHex" o="sHex">#ffffff</b>; <span class="comment">/* Opera 10.5, IE9+, Firefox 4+, Chrome 6+, iOS 5 <span class="endcomment">*/</span></span>
+ -webkit-box-shadow: <b g="0">0px</b> <b g="1">0px</b> <b g="2">4px</b> <b g="3">0px</b> <b g="4" i="lHex" o="sHex">#ffffff</b>; <span class="comment">/* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 <span class="endcomment">*/</span></span>
+ box-shadow: <b g="0">0px</b> <b g="1">0px</b> <b g="2">4px</b> <b g="3">0px</b> <b g="4" i="lHex" o="sHex">#ffffff</b>; <span class="comment">/* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ <span class="endcomment">*/</span></span>
}</pre>
<pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
</div>
@@ -83,11 +83,11 @@
<pre class="rule">
.box_gradient {
background-color: <b g="0" i="lHex">#444444</b>;
- background-image: -webkit-gradient(linear, left top, left bottom, from(<b g="0" i="lHex">#444444</b>), to(<b g="1" i="lHex">#999999</b>)); <span class="comment">/* Safari 4+, Chrome <span class="endcomment">*/</span></span>
- background-image: -webkit-linear-gradient(top, <b g="0" i="lHex">#444444</b>, <b g="1" i="lHex">#999999</b>); <span class="comment">/* Chrome 10+, Safari 5.1+, iOS 5+ <span class="endcomment">*/</span></span>
+ background-image: -webkit-gradient(linear, left top, left bottom, from(<b g="0" i="lHex">#444444</b>), to(<b g="1" i="lHex">#999999</b>)); <span class="comment">/* Chrome, Safari 4+ <span class="endcomment">*/</span></span>
+ background-image: -webkit-linear-gradient(top, <b g="0" i="lHex">#444444</b>, <b g="1" i="lHex">#999999</b>); <span class="comment">/* Chrome 10+, iOS 5+, Safari 5.1+ <span class="endcomment">*/</span></span>
background-image: -moz-linear-gradient(top, <b g="0" i="lHex">#444444</b>, <b g="1" i="lHex">#999999</b>); <span class="comment">/* Firefox 3.6-15 <span class="endcomment">*/</span></span>
background-image: -o-linear-gradient(top, <b g="0" i="lHex">#444444</b>, <b g="1" i="lHex">#999999</b>); <span class="comment">/* Opera 11.10-12.00 <span class="endcomment">*/</span></span>
- background-image: linear-gradient(to bottom, <b g="0" i="lHex">#444444</b>, <b g="1" i="lHex">#999999</b>); <span class="comment">/* Firefox 16+, IE10, Opera 12.50+ <span class="endcomment">*/</span></span>
+ background-image: linear-gradient(to bottom, <b g="0" i="lHex">#444444</b>, <b g="1" i="lHex">#999999</b>); <span class="comment">/* Firefox 16+, IE 10+, Opera 12.50+ <span class="endcomment">*/</span></span>
}</pre>
<pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
</div>
@@ -99,7 +99,7 @@
<pre class="rule">
.box_rgba {
background-color: transparent;
- background-color: <b g="0" i="s2aHex" o="aCh">rgba(180, 180, 144, 0.6)</b>; <span class="comment">/* Firefox 3+, Safari 3+, Opera 10.10+, Chrome, IE9+ <span class="endcomment">*/</span></span>
+ background-color: <b g="0" i="s2aHex" o="aCh">rgba(180, 180, 144, 0.6)</b>; <span class="comment">/* Chrome, Firefox 3+, IE 9+, Opera 10.10+, Safari 3+ <span class="endcomment">*/</span></span>
}</pre>
<pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
</div>
@@ -108,11 +108,11 @@
<pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule on]</a> <span class="endcomment">*/</span></pre>
<pre class="rule">
.box_rotate {
- -webkit-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* Safari 3.1+, Chrome <span class="endcomment">*/</span></span>
+ -webkit-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* Chrome, Safari 3.1+ <span class="endcomment">*/</span></span>
-moz-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* Firefox 3.5-15 <span class="endcomment">*/</span></span>
- -ms-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* IE9+ <span class="endcomment">*/</span></span>
- -o-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* Opera 10.5-12.00 <span class="endcomment">*/</span></span>
- transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* Firefox 16+, Opera 12.50+ <span class="endcomment">*/</span></span>
+ -ms-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* IE 9 <span class="endcomment">*/</span></span>
+ -o-transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* Opera 10.50-12.00 <span class="endcomment">*/</span></span>
+ transform: rotate(<b g="0">7.5</b>deg); <span class="comment">/* Firefox 16+, IE 10+, Opera 12.50+ <span class="endcomment">*/</span></span>
}</pre>
<pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
</div>
@@ -121,11 +121,11 @@
<pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule on]</a> <span class="endcomment">*/</span></pre>
<pre class="rule">
.box_scale {
- -webkit-transform: scale(<b g="0">0.8</b>); <span class="comment">/* Safari 3.1+, Chrome <span class="endcomment">*/</span></span>
+ -webkit-transform: scale(<b g="0">0.8</b>); <span class="comment">/* Chrome, Safari 3.1+ <span class="endcomment">*/</span></span>
-moz-transform: scale(<b g="0">0.8</b>); <span class="comment">/* Firefox 3.5+ <span class="endcomment">*/</span></span>
- -ms-transform: scale(<b g="0">0.8</b>); <span class="comment">/* IE9+ <span class="endcomment">*/</span></span>
- -o-transform: scale(<b g="0">0.8</b>); <span class="comment">/* Opera 10.50+ <span class="endcomment">*/</span></span>
- transform: scale(<b g="0">0.8</b>);
+ -ms-transform: scale(<b g="0">0.8</b>); <span class="comment">/* IE 9 <span class="endcomment">*/</span></span>
+ -o-transform: scale(<b g="0">0.8</b>); <span class="comment">/* Opera 10.50-12.00 <span class="endcomment">*/</span></span>
+ transform: scale(<b g="0">0.8</b>); <span class="comment">/* Firefox 16+, IE 10+, Opera 12.50+ <span class="endcomment">*/</span></span>
}</pre>
<pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
</div>
@@ -134,9 +134,9 @@
<pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule on]</a> <span class="endcomment">*/</span></pre>
<pre class="rule">
.box_3dtransforms {
- -webkit-perspective: <b g="0">300</b>; <span class="comment">/* Safari 4+, Chrome 12+ <span class="endcomment">*/</span></span>
+ -webkit-perspective: <b g="0">300</b>; <span class="comment">/* Chrome 12+, Safari 4+ <span class="endcomment">*/</span></span>
-moz-perspective: <b g="0">300</b>; <span class="comment">/* Firefox 10+ <span class="endcomment">*/</span></span>
- -ms-perspective: <b g="0">300</b>; <span class="comment">/* IE10+ <span class="endcomment">*/</span></span>
+ -ms-perspective: <b g="0">300</b>; <span class="comment">/* IE 10 <span class="endcomment">*/</span></span>
perspective: <b g="0">300</b>;
-webkit-transform: rotateY(<b g="1">180</b>deg); -webkit-transform-style: preserve-3d;
-moz-transform: rotateY(<b g="1">180</b>deg); -moz-transform-style: preserve-3d;
@@ -151,10 +151,10 @@
<pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
<pre class="rule">
.box_transition {
- -webkit-transition: <b g="0">all</b> <b g="1">0.3s</b> <b g="2">ease-out</b>; <span class="comment">/* Safari 3.2+, Chrome <span class="endcomment">*/</span></span>
+ -webkit-transition: <b g="0">all</b> <b g="1">0.3s</b> <b g="2">ease-out</b>; <span class="comment">/* Chrome, Safari 3.2+ <span class="endcomment">*/</span></span>
-moz-transition: <b g="0">all</b> <b g="1">0.3s</b> <b g="2">ease-out</b>; <span class="comment">/* Firefox 4-15 <span class="endcomment">*/</span></span>
- -o-transition: <b g="0">all</b> <b g="1">0.3s</b> <b g="2">ease-out</b>; <span class="comment">/* Opera 10.5–12.00 <span class="endcomment">*/</span></span>
- transition: <b g="0">all</b> <b g="1">0.3s</b> <b g="2">ease-out</b>; <span class="comment">/* Firefox 16+, Opera 12.50+ <span class="endcomment">*/</span></span>
+ -o-transition: <b g="0">all</b> <b g="1">0.3s</b> <b g="2">ease-out</b>; <span class="comment">/* Opera 10.50–12.00 <span class="endcomment">*/</span></span>
+ transition: <b g="0">all</b> <b g="1">0.3s</b> <b g="2">ease-out</b>; <span class="comment">/* Firefox 16+, IE 10+, Opera 12.50+ <span class="endcomment">*/</span></span>
}</pre>
<pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
</div>
@@ -165,7 +165,7 @@
<pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
<pre class="rule">
.box_textshadow {
- text-shadow: <b g="0">1px</b> <b g="1">1px</b> <b g="2">3px</b> <b g="3" i="lHex" o="sHex">#888</b>; <span class="comment">/* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 <span class="endcomment">*/</span></span>
+ text-shadow: <b g="0">1px</b> <b g="1">1px</b> <b g="2">3px</b> <b g="3" i="lHex" o="sHex">#888</b>; <span class="comment">/* Chrome, Firefox 3.5+, IE 10+, Opera 9+, Safari 1+ <span class="endcomment">*/</span></span>
}</pre>
<pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
</div>
@@ -175,7 +175,7 @@
<pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
<pre class="rule">
.box_opacity {
- opacity: <b g="0">0.9</b>; <span class="comment">/* Chrome 4+, Firefox 2+, Safari 3.1+, Opera 9+, IE9+, iOS 3.2+, Android 2.1+ <span class="endcomment">*/</span></span>
+ opacity: <b g="0">0.9</b>; <span class="comment">/* Android 2.1+, Chrome 4+, Firefox 2+, IE 9+, iOS 3.2+, Opera 9+, Safari 3.1+ <span class="endcomment">*/</span></span>
}</pre>
<pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
</div>
@@ -186,9 +186,9 @@
<pre class="rule comment">/* <a class="cb">[to clipboard]</a> <span class="endcomment">*/</span></pre>
<pre class="rule">
* {
- -webkit-box-sizing: <b g="0">border-box</b>; <span class="comment">/* &lt;=iOS4, &lt;= Android 2.3 <span class="endcomment">*/</span></span>
+ -webkit-box-sizing: <b g="0">border-box</b>; <span class="comment">/* Android &le; 2.3, iOS &le; 4 <span class="endcomment">*/</span></span>
-moz-box-sizing: <b g="0">border-box</b>; <span class="comment">/* Firefox 1+ <span class="endcomment">*/</span></span>
- box-sizing: <b g="0">border-box</b>; <span class="comment">/* Chrome, IE8+, Opera, Safari 5.1<span class="endcomment">*/</span></span>
+ box-sizing: <b g="0">border-box</b>; <span class="comment">/* Chrome, IE 8+, Opera, Safari 5.1 <span class="endcomment">*/</span></span>
}</pre>
<pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
</div>
@@ -199,7 +199,7 @@
<pre class="rule">
.box_bgsize {
-webkit-background-size: <b g="0">100% 100%</b>; <span class="comment">/* Safari 3-4 <span class="endcomment">*/</span></span>
- background-size: <b g="0">100% 100%</b>; <span class="comment">/* Opera, IE9+, Safari 5, Chrome, Firefox 4+ <span class="endcomment">*/</span></span>
+ background-size: <b g="0">100% 100%</b>; <span class="comment">/* Chrome, Firefox 4+, IE 9+, Opera, Safari 5+ <span class="endcomment">*/</span></span>
}</pre>
<pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
</div>
@@ -208,9 +208,9 @@
<pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule on]</a> <span class="endcomment">*/</span></pre>
<pre class="rule">
.box_columns {
- -webkit-column-count: <b g="0">2</b>; -webkit-column-gap: <b g="1">15px</b>; <span class="comment">/* Safari 3, Chrome<span class="endcomment">*/</span></span>
+ -webkit-column-count: <b g="0">2</b>; -webkit-column-gap: <b g="1">15px</b>; <span class="comment">/* Chrome, Safari 3 <span class="endcomment">*/</span></span>
-moz-column-count: <b g="0">2</b>; -moz-column-gap: <b g="1">15px</b>; <span class="comment">/* Firefox 3.5+ <span class="endcomment">*/</span></span>
- column-count: <b g="0">2</b>; column-gap: <b g="1">15px</b>; <span class="comment">/* Opera 11+<span class="endcomment">*/</span></span>
+ column-count: <b g="0">2</b>; column-gap: <b g="1">15px</b>; <span class="comment">/* Opera 11+ <span class="endcomment">*/</span></span>
}</pre>
<pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
</div>
@@ -219,10 +219,10 @@
<pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
<pre class="rule">
.box_animation&#58;hover {
- -webkit-animation: <b g="0">myanim</b> <b g="8">5s</b> infinite; <span class="comment">/* Safari 5, Chrome <span class="endcomment">*/</span></span>
+ -webkit-animation: <b g="0">myanim</b> <b g="8">5s</b> infinite; <span class="comment">/* Chrome, Safari 5 <span class="endcomment">*/</span></span>
-moz-animation: <b g="0">myanim</b> <b g="8">5s</b> infinite; <span class="comment">/* Firefox 5-15 <span class="endcomment">*/</span></span>
-o-animation: <b g="0">myanim</b> <b g="8">5s</b> infinite; <span class="comment">/* Opera 12+ <span class="endcomment">*/</span></span>
- animation: <b g="0">myanim</b> <b g="8">5s</b> infinite; <span class="comment">/* Safari 5, Chrome, Firefox 16+ <span class="endcomment">*/</span></span>
+ animation: <b g="0">myanim</b> <b g="8">5s</b> infinite; <span class="comment">/* Chrome, Firefox 16+, IE 10+, Safari 5 <span class="endcomment">*/</span></span>
}
@-webkit-keyframes <b g="0">myanim</b> {
@@ -267,7 +267,6 @@
<span class="scale">scale</span>
<span class="skewx">skew</span>
<span class="skewy">skew</span>
-
<span class="move">move</span>
</span>
</div>
@@ -283,14 +282,12 @@
<div id="box_webfont" class="rule_wrapper">
<pre class="rule comment"><span class="comment">/* <a class="cb">[to clipboard]</a><!-- <a class="off">[toggle rule off]</a>--> <span class="endcomment">*/</span></span> </pre>
- <pre class="rule">
+ <pre class="rule">
@font-face {
font-family: '<b g="1">WebFont</b>';
- src: url('<b g="0">myfont</b>.woff') format('woff'), <span class="comment">/* Firefox 3.6+, IE9+, Chrome 6+, Safari 5.1+<span class="endcomment">*/</span></span>
- url('<b g="0">myfont</b>.ttf') format('truetype'); <span class="comment">/* Safari 3—5, Chrome4+, Firefox 3.5, Opera 10+ <span class="endcomment">*/</span></span>
-}
-
-</pre>
+ src: url('<b g="0">myfont</b>.woff') format('woff'), <span class="comment">/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ <span class="endcomment">*/</span></span>
+ url('<b g="0">myfont</b>.ttf') format('truetype'); <span class="comment">/* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 <span class="endcomment">*/</span></span>
+}</pre>
<!-- <pre class="rule comment commentclose"><span class="comment">/* */</span></pre> -->
</div>
@@ -324,7 +321,7 @@
&copy; 2012; a <a href="http://paulirish.com/">Paul Irish</a> and <a href="http://twitter.com/jon_neal">Jonathan Neal</a> joint, <small>in association w/ <a href="http://www.boazsender.com/">Boaz Sender</a> and <a href="http://www.useragentman.com/">Zoltan Hawryluk</a>.</small>
- if you like this, you'll probably also dig <a href="http://yayquery.com/">yayQuery</a> and <a href="//mothereffinghsl.com">mothereffinghsl.com</a>. <3
+ if you like this, you'll probably also dig <a href="http://yayquery.com/">yayQuery</a> and <a href="//mothereffinghsl.com">mothereffinghsl.com</a>. &lt;3
*/
@@ -335,6 +332,7 @@
<pre class="rule changelog">
/*
__Changelog__
+ 2012.12.31: Removed -moz-background-clip (thx <a href="https://github.com/Mottie">Mottie</a>)
2012.08.29: Removed IE6-8 support.
2012.06.06: Removed -ms prefixes from transition, animations and gradients.
2012.03.02: Added <a href="http://paulirish.com/2012/box-sizing-border-box-ftw/">box-sizing</a>. Woo!

0 comments on commit 44bc31f

Please sign in to comment.