Permalink
Browse files

inline the background clip stuff on one line. bgsize can be bunched i…

…n case you want cover/contain. changelog.
  • Loading branch information...
1 parent 326b1a2 commit 0176961bddf0281877881295a7e309837231ebc0 @paulirish committed Apr 12, 2011
Showing with 10 additions and 9 deletions.
  1. +1 −1 css/stylesheet.css
  2. +9 −8 index.html
View
@@ -293,7 +293,7 @@ body {
color: rgba(0,136,255,.9);
}
.rule.comment { display:block;}
-.comment a { color:inherit; text-decoration:none;
+.comment a { color:inherit;
}
.commentedout .endcomment { display:none;}
View
@@ -51,9 +51,9 @@
-moz-border-radius: <b g="0">12px</b>; <span class="comment">/* FF1+ <span class="endcomment">*/</span></span>
-webkit-border-radius: <b g="0">12px</b>; <span class="comment">/* Saf3-4, iOS 1+, Android 1.5+ <span class="endcomment">*/</span></span>
border-radius: <b g="0">12px</b>; <span class="comment">/* Opera 10.5, IE9, Saf5, Chrome, FF4 <span class="endcomment">*/</span></span>
- -moz-background-clip: <b g="1">padding</b>; <span class="comment">/* FF1-3.6 <span class="endcomment">*/</span></span>
- -webkit-background-clip: <b g="1">padding</b>-box; <span class="comment">/* Saf3+ <span class="endcomment">*/</span></span>
- background-clip: <b g="1">padding</b>-box; <span class="comment">/* FF4, Chrome, Opera 10.5, IE9 <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-box; -webkit-background-clip: padding-box; background-clip: padding-box;
@matthewlein
matthewlein Apr 12, 2011

pull out -box for the -moz one. Like I had in my commit :)

FF didn't use -box until recently:
https://developer.mozilla.org/en/CSS/background-clip

@paulirish
paulirish Apr 12, 2011 owner

roger that! thank you.

}</pre>
<pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
</div>
@@ -172,9 +172,9 @@
<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_bgsize {
- -moz-background-size: <b g="0">100%</b> <b g="1">100%</b>; <span class="comment">/* FF3.6 <span class="endcomment">*/</span></span>
- -webkit-background-size: <b g="0">100%</b> <b g="1">100%</b>; <span class="comment">/* Saf3-4 <span class="endcomment">*/</span></span>
- background-size: <b g="0">100%</b> <b g="1">100%</b>; <span class="comment">/* Opera, IE9, Saf5, Chrome, FF4 <span class="endcomment">*/</span></span>
+ -moz-background-size: <b g="0">100% 100%</b>; <span class="comment">/* FF3.6 <span class="endcomment">*/</span></span>
+ -webkit-background-size: <b g="0">100% 100%</b>; <span class="comment">/* Saf3-4 <span class="endcomment">*/</span></span>
+ background-size: <b g="0">100% 100%</b>; <span class="comment">/* Opera, IE9, Saf5, Chrome, FF4 <span class="endcomment">*/</span></span>
}</pre>
<pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
</div>
@@ -199,7 +199,7 @@
&copy; 2010; 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>. <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>. <3
*/
@@ -229,7 +229,8 @@
2011.03.15: Added linear gradients for Opera 11.10. (Thanks, <a href="http://miketaylr.com/">Mike</a>!)
2011.03.26: Added Ceaser link.
2011.04.07: Added <a href="https://developer.mozilla.org/en/CSS/background-size">background-size</a> (thx codler!).
- 2011.04.11: Added <a href="https://developer.mozilla.org/en/CSS/background-clip">background-clip</a>.
+ 2011.04.11: Added <a href="https://developer.mozilla.org/en/CSS/background-clip">background-clip</a> for the border-radius rule (thx <a href="//twitter.com/matthewlein">matthewlein</a>!).
+ 2011.04.12: Added gradient for IE10! (thx <a href="https://github.com/Calvein">calvein</a>!)
*/

0 comments on commit 0176961

Please sign in to comment.