Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Minor improvements #114

Merged
merged 2 commits into from

2 participants

@alrra
Collaborator

Changes:

  • removed -moz-background-clip (solves #113)
  • added IE 10+ to the list of supported browsers for animation, transform and transition
alrra added some commits
@alrra alrra Remove `-moz-background-clip`
 The `background-clip` property has been unprefixed since Firefox 3.6:
    - http://caniuse.com/background-img-opts
    - https://developer.mozilla.org/en-US/docs/CSS/background-clip

 Thanks @Mottie for noticing
d88f450
@alrra alrra Minor improvements
 * add `IE 10+` to `animation`, `transform` and `transition`:
   http://blogs.msdn.com/b/ie/archive/2012/06/06/moving-the-stable-web-forward-in-ie10-release-preview.aspx
 * arrange browsers names alphabetically
 * correct indentation
 * improve consistency
eee1e6d
@paulirish
Owner

sgtm!

@paulirish paulirish merged commit 44bc31f into from
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Dec 31, 2012
  1. @alrra

    Remove `-moz-background-clip`

    alrra authored
     The `background-clip` property has been unprefixed since Firefox 3.6:
        - http://caniuse.com/background-img-opts
        - https://developer.mozilla.org/en-US/docs/CSS/background-clip
    
     Thanks @Mottie for noticing
  2. @alrra

    Minor improvements

    alrra authored
     * add `IE 10+` to `animation`, `transform` and `transition`:
       http://blogs.msdn.com/b/ie/archive/2012/06/06/moving-the-stable-web-forward-in-ie10-release-preview.aspx
     * arrange browsers names alphabetically
     * correct indentation
     * improve consistency
This page is out of date. Refresh to see the latest.
Showing with 38 additions and 40 deletions.
  1. +38 −40 index.html
View
78 index.html
@@ -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!
Something went wrong with that request. Please try again.