Skip to content
This repository

Update index.html #108

Closed
wants to merge 1 commit into from

4 participants

Simon Owen Paul Irish Curtis Blackwell Cătălin Mariș
Simon Owen

Updated css values where possible e.g. 0px to 0, #ffffff to #fff.

Simon Owen

Am I missing something? Just noticed on the site, sometimes the hex values as #000, but sometimes as #000000. Shouldn't they always be 3 digit where possible? Cheers.

Paul Irish
Owner

I prefer the six digit always. if you're gonna do hex, do 6 digit and deal with your greyscale having repetition.

but i'd rather author in hsl anyway..

Simon Owen

Ok, cheers, saw your http://mothereffinghsl.com/ (nice source code btw!) and http://www.useragentman.com/blog/2010/08/28/coding-colors-easily-using-css3-hsl-notation/

It's just:
hsl(0, 100%, 50%)

Seems so long in comparison to:
#f00

Tried searching re 'greyscale having repetition' but couldn't find anything, what's the issue please?

Curtis Blackwell
Collaborator

the repetition is in there being two of each of the three digits in the hex.

#f00 → #f**f**0**0**0**0**

my guess is Paul prefers consistency to the nominal difference in time-saved/smaller file-size argument that supports the switch to three-digit hex when possible.

Simon Owen

Gotcha, cool cheers.

Paul Irish
Owner
Cătălin Mariș alrra closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 1 unique commit by 1 author.

Aug 30, 2012
Simon Owen s10wen Update index.html c5eb9dd
This page is out of date. Refresh to see the latest.

Showing 1 changed file with 14 additions and 13 deletions. Show diff stats Hide diff stats

  1. +14 13 index.html
27 index.html
@@ -57,12 +57,12 @@
57 57 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
58 58 <pre class="rule">
59 59 .box_round {
60   - -moz-border-radius: <b g="0">8px 8px 0px 0px</b>; <span class="comment">/* Firefox 1+ <span class="endcomment">*/</span></span>
  60 + -moz-border-radius: <b g="0">8px 8px 0 0</b>; <span class="comment">/* Firefox 1+ <span class="endcomment">*/</span></span>
61 61 -webkit-border-top-left-radius: <b g="1" readonly>8px</b>; <span class="comment">/* Safari 3-4 <span class="endcomment">*/</span></span>
62 62 -webkit-border-top-right-radius: <b g="2" readonly>8px</b>;
63   - -webkit-border-bottom-right-radius: <b g="3" readonly>0px</b>;
64   - -webkit-border-bottom-left-radius: <b g="4" readonly>0px</b>;
65   - 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>
  63 + -webkit-border-bottom-right-radius: <b g="3" readonly>0</b>;
  64 + -webkit-border-bottom-left-radius: <b g="4" readonly>0</b>;
  65 + border-radius: <b g="0">8px 8px 0 0</b>; <span class="comment">/* Opera 10.5, IE9, Safari 5, Chrome <span class="endcomment">*/</span></span>
66 66 }</pre>
67 67 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
68 68 </div>
@@ -72,8 +72,8 @@
72 72 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
73 73 <pre class="rule">
74 74 .box_shadow {
75   - -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>
76   - 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>
  75 + -webkit-box-shadow: <b g="0">0</b> <b g="1">0</b> <b g="2">4px</b> <b g="3">0</b> <b g="4" i="lHex" o="sHex">#fff</b>; <span class="comment">/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ <span class="endcomment">*/</span></span>
  76 + box-shadow: <b g="0">0</b> <b g="1">0</b> <b g="2">4px</b> <b g="3">0</b> <b g="4" i="lHex" o="sHex">#fff</b>; <span class="comment">/* Opera 10.5, IE9+, Firefox 4+, Chrome 6+, iOS 5 <span class="endcomment">*/</span></span>
77 77 }</pre>
78 78 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
79 79 </div>
@@ -82,12 +82,12 @@
82 82 <pre class="rule comment">/* <a class="cb">[to clipboard]</a> <a class="off">[toggle rule off]</a> <span class="endcomment">*/</span></pre>
83 83 <pre class="rule">
84 84 .box_gradient {
85   - background-color: <b g="0" i="lHex">#444444</b>;
86   - 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>
87   - 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>
88   - 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>
89   - 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>
90   - 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>
  85 + background-color: <b g="0" i="lHex">#444</b>;
  86 + background-image: -webkit-gradient(linear, left top, left bottom, from(<b g="0" i="lHex">#444</b>), to(<b g="1" i="lHex">#999</b>)); <span class="comment">/* Safari 4+, Chrome <span class="endcomment">*/</span></span>
  87 + background-image: -webkit-linear-gradient(top, <b g="0" i="lHex">#444</b>, <b g="1" i="lHex">#999</b>); <span class="comment">/* Chrome 10+, Safari 5.1+, iOS 5+ <span class="endcomment">*/</span></span>
  88 + background-image: -moz-linear-gradient(top, <b g="0" i="lHex">#444</b>, <b g="1" i="lHex">#999</b>); <span class="comment">/* Firefox 3.6-15 <span class="endcomment">*/</span></span>
  89 + background-image: -o-linear-gradient(top, <b g="0" i="lHex">#444</b>, <b g="1" i="lHex">#999</b>); <span class="comment">/* Opera 11.10-12.00 <span class="endcomment">*/</span></span>
  90 + background-image: linear-gradient(to bottom, <b g="0" i="lHex">#444</b>, <b g="1" i="lHex">#999</b>); <span class="comment">/* Firefox 16+, IE10, Opera 12.50+ <span class="endcomment">*/</span></span>
91 91 }</pre>
92 92 <pre class="rule comment commentclose"><span class="comment">/* */</span></pre>
93 93 </div>
@@ -335,6 +335,7 @@
335 335 <pre class="rule changelog">
336 336 /*
337 337 __Changelog__
  338 + 2012.08.30: Updated css values where possible e.g. 0px to 0, #ffffff to #fff.
338 339 2012.08.29: Removed IE6-8 support.
339 340 2012.06.06: Removed -ms prefixes from transition, animations and gradients.
340 341 2012.03.02: Added <a href="http://paulirish.com/2012/box-sizing-border-box-ftw/">box-sizing</a>. Woo!
@@ -374,4 +375,4 @@
374 375 </pre>
375 376
376 377 </body>
377   -</html>
  378 +</html>

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.