Upper- or lowercase hex codes in CSS?
When you write your CSS code, do you use upper- or lowercase hexadecimal codes? I.e., does it look like this: #F2F2F2 or this: #f2f2f2? Personally, I used to go the uppercase route but has now officially switched to lowercase.
What’s your preference?
I use either, really. When typing shorthand, I use lowercase. If it is mixed with numbers, (or copied from a program) it tends to be uppercase, and I just leave it…
Yes: #fff;
No: #FFFFFF;
Always lowercase. Not sure why, it just feels good 🙂
Does it matter?
i use #fff; anyway.
There are rare cases where it DOES matter.
First of all Internet Explorer ignores the case and defaults to lowercase. All other major browsers will respect it the way you wrote it in your code.
And now for why it does matter:
Say you have a
element with astrokeattribute set to'#FF0000'and another one with#ff0000. If you try to target them with, say jQuery doing$('path[stroke="FF0000"]').hide();well, only the first one will hide and the second one will still be visible in all browsers except Internet Explorer.If your goal is to hide both under all browser, you’ll have to change colors to lowercase in your code and use
$('path[stroke="ff0000"]').hide();.I meant to say a
pathelement.That is really interesting! Thanks for sharing!
I absolutely prefer lowercase! Can't explain 🙂
Lowerase, purely because I'm too lazy to press "shift".
Personally I like uppercase. When you are using CSS shorthand it helps the colour stand out:
background: #FF0000 url(/images/backgrounds/tickets.jpg) 5px 5px no-repeat;
I wouldn't mind going lowercase though – I don't think it really matters does it?
I try to use lowercase just to be consistent in my coding. Since I use XHTML and it requires elements, attributes and so on written in lowercase I try to apply it to other front end coding too.
However, the hex codes in Photoshop are in uppercase and I just copy and paste them sometimes when time is a very important factor.
And when possible, I use shorthand hex. 🙂
Robert: why are you now writing your hex codes in lowercase?
Always lowercase.
I use lowercase everywhere, so I can shave a few bytes when your CSS is gzipped
I think it is fashion!
Always lowercase, because B looks a lot like 8. Not so with b.
As an aside, this saves me from pressing shift, for what that's worth.
Glad you asked ! 🙂
When I type it's always lowercase and short form if I can, but when pasting from photoshop it uses all caps – sometimes I leave them alone, but usually end up hand editing 'cos they get on my nerves… How anal am I ? 🙂
Lowercase. As Goulven pointed out it increases readibility (to me anyway).
And Steve: you're not the only one 😉
Uppercase all the way … and shorthand when I can 🙂
Always lowercase (even if I have to hand edit from Photoshop) – for no other reason than that it looks appropriate (from using XHTML code probably)…
Always lowercase. Not sure why, it just feels good 🙂
All lower, all the time. I even end up editing the uppercase letter my colleagues’ Dreamweavers add, which thinking about it is probably quite sad.
always uppercase since hexadecimal codes where always written in uppercase when I first learned about them (before I got into webdesign), haven't seen them used in lowercase outside weddesign much. Makes them easier to recognize as hexadecimal codes.
Uppercase does make one think too much of the time when we used FONT TAGS.
We thought the Web was big and now we are happy with lowercase and highband-width!
When I type them I always use lowercase. Must be because I had programmed in C for so long. However, when pasting from Photoshop or Eric Meyer's Color Blender most of the time I leave them as they are which is uppercase.
Uppercase. Why? partially habit, and partially because it helps it stand out better when I glance through the code.
shorthand: lowercase, else uppercase.
UPPERCASE; because I just prefer how it looks. Also because Photoshop and Colorzilla product uppercase hex codes.
I also try to go shorthand e.g. #FFF instead of #FFFFFF where possible.
Lowercase. And I find it very annoying that Photoshop uses uppercase since that prevents me from copying colour codes from it.
I do uppercase because of the aesthetics. I like it to be all the same size. #eb120f looks messy but #EB120F looks hot. 🙂
Lowercase, while having the same issue with Photoshop as the other commenters.
Lowercase. I like the aesthetics. And, something to do with well-formedness written in all lowercase, I got into a habit. And, Yes; I'll rewrite Photoshop Hex.
uppercase, most of the times, it helps differencing colors from css code (i think :))
I use lowercase… and I think it's because almost everything else in the css is written in lowercase, except maybe some camelCased id's or something.
Thanks for sharing, everyone! Interesting to hear about your woes with Photoshop. The reason I actually started with lowercase is that in Photoshop CS 2, the hex codes are in lowercase! 🙂
Once started, I liked the readability of it; I also agree with Martin's motivation above that everything else in the CSS is (usually) lowercase so it feels more consistent.
Shorthand and lowercase, all the way. woot.
Robert, you are right – CS2 is lower case and no need for editing! I hadn´t even noticed that och was ranting about passed sins…
Definitely lowercase. Using uppercase reminds me of the old days when HTML tags were written in uppercase to help distinguish them.
Lowercase just has the "modern" edge to it.
Lowercase, purely because it's one less key stroke (shift). I have set ColorZilla up to match when picking colours but there's no science to my choice.
OMG! I'm very surprised to see so many people prefer lowercase! And I can't believe some of you use either and have them mixed throughout your code. What on earth is wrong with you? You're all crazy!
Uppercase is more asthetically pleasing and it's how hexadecimal is supposed to be written. I use uppercase for all hex for colours (<code>#FFF</code>) and escape sequences (<code>A0 </code>) in CSS, character references in HTML (<code> </code>), and also Unicode code points (<code>U+00A0</code>). I never ever use lowercase and I don't like Photoshop CS2 because it does lowercase and I have to change it when I copy and paste.
I use lower-case throughout my CSS and id/name attributes in HTML. I can understand Lachlan's point on hexadecimal though, and being consistent is important. One or the other, got to be neat.
Lachlan: Why the upper-case for named character entities? They're not hexadecimal 🙂
Kanashii, I didn't say "named character entities", I said character references. They are different things.
<code> </code> is an entity reference, <code> </code> is a numeric character reference and <code> </code> is a hexadecimal character reference. Besides, entity references are case sensitive, so you can't choose upper or lower case when you use them, and most (not all) are defined using lowercase.
Lachlan: Sorry, I misunderstood. Brain not working to well for me today..
Lowercase. And I never use six digits if three will do; i.e., #369, not #336699.
Hi,
i'm neither using upper- nor lower case. I'm only using decimal notation in css. And luckily in decimal digits there is no such question.
Again, thanks for sharing. I forgot to say that I also, of course, use shorthand (three characters instead of six) when possible. I've even heard of people using only colors that can be shortened to three characters, but that's stretching it a bit far, if you ask me… 🙂
lowercase as I think it goes quicker to type it. It also looks soo much nicer *smile *. I usually mix when coding css and copying and pasting from PS or FW, when done I use the "Convert to lowercase" in DW.
I have long since harboured the belief that most developers are obsessive and to some extent their behaviour traits can be assigned to be somewhere in the autistic spectrum. Not really as scary as it sounds, but food for thought. The comments here certainly don't persuade me otherwise. Think about the ritualistic behaviour and the need to order (i.e. make consistent) when it has no real effect on the outcome.
P.S. lowercase :0)
Roger: "And I find it very annoying that Photoshop uses uppercase since that prevents me from copying colour codes from it."
I find this with DigitalColor Meter as well, but the solution is easy: Highlight in TextMate, right-click, convert > lowercase.
When it comes to programming, web development, file/folder naming and so on I always tend to go with lowercase all the way.
Comment bonanza here! Thanks for your comments.
Rob,
It is definitely food for thought, and I know exactly what you mean. 🙂
Lowercase, for a few months now, and tied in all new coding guidelines I can put my hands on (except the one just referenced… ;)).
By the way, you'll certainly forgive me when I diplomatically note the fresh "World's Highest Website" here, which basically shows up "some CSS challenges".
Lowercase because its easier to distinguish between lowercase letters and numbers than it is uppercase letters. However, I'm sure this is the 100th time someone has said as such!
Oh, forgot to say, I never use the shortened three digit colour code because I often tweak with colours its easier to just INS + new character rather than have to fill out all the missing three 🙂
Jens,
Thanks for the link.
Rowan,
Yeah, I see what you mean with tweaking and designing and choosing colors directly in the CSS.
I also decided to go lowercase on CSS a few years back even though it's not necessary and unconventional for hex.
Lowercase, short (where possible)
Uppercase with all 6 letters:
#FFFFFF, not #FFF or #fff or #ffffff, just #FFFFFF
Robert W, Michał, Billytheradponi,
Thanks for sharing!
I use lowercase and shorthand when possible.
I first read this post yesterday. While I was reading the comments I began to wonder which one is most correct. My first thought was that the shorthand notation is illogic, since A isn't the same value as AA. The value of A should be 0A if it's hexadecimal. Now I just had to find a standard telling me whether upper- or lowercase representation of A-F should be used and my quest would be over. But I couldn't find any.
Today another thought came to my mind. What's best for the page visitor? I began to calculate the cpu cost of the conversion from the string value read by the browser, to a rgb datatype value used to for the actual output on the screen. I figure the shorthand conversion cost more than converting from a six character hexadecimal value. Using the rgb functional notation should be the fastest color value to convert.
Anyway – I guess no one use enough colors to make a notable difference and using the rgb functional notation would make the style sheet a few extra bytes per color… I'll stick to lowercase and shorthand for a while.
Much ado about nothing – sorry for wasting your time 😉
Fredrik,
Interesting thoughts! Like you say, not sure anyone notices a difference, but I like your thinking! 🙂
Pat,
Maybe… 🙂
When I'm writing colors for CSS I use uppercase letters: #FF0000.
But when it comes to black, white, gray, or other colors that have the same letter, I just use 3 uppercase letter: #FFF, #CCC. Oh yes, and numbers too: #000, #666.
neojp, Azad,
Thanks for your comments.
Always UPPERCASE. So that the hex is easily distinguishable from the rest of the CSS mess.
For the sake of diplomacy I always change UPPER/lower every other:
#FfFfFf 🙂
I'm with you. I used to exclusively do upper case, and now have officially switched to lower.
Probably made sense at the time to not have to hit Shift or Caps-Lock!
-cb
Müfit,
Ha ha! 🙂
Chad,
Welcome to the lowercase crowd. 🙂
And I thought I was the only one thinking about stuff like this…
Recently switched to lowercase!
I use the lowercase because simply it makes the flow of typing the css to be easier then making changes to the way that I type everything else. I type all of the selectors and others in lowercase so I stick with the same thing when it comes to the hex colors.
Niklas. Bel-Air,
Thanks for sharing!
Uppercase:
– shorthand always
– stands out for some reason in css files
– habit
Lowercase
– shorthand always
– habit from writing for xhtml
I have been caught doing both … would not spend too much time thinking about it either way until someone tells it actually matters … css4 maybe? 😉
Content Heavy Web Development
Rudy,
Thanks for sharing.
What's css in the first place???
Ah ah j/k.
Same as Rudy btw.
Microsoft again… the filters for IE are not able to read something like #fff, nor are they able to read #ffffff… you have to write it #FFFFFF for their interface to understand what color you want.
When everyone is on Win6.X (Windows Vista, Windows 7, Windows 8) and got IE9 installed you can use #fff everywhere.
Sebastian,
Yes, that’s an annoyance.
I use uppercase, because I used to write my css code in firebug and copy from it. Firebug covering up almost all standers in CSS coding. If firebug is happy with uppercase me too 😀
Some people think lowercase might save some bits well its years back. Now we are with super high speed internet lines. But it’s ok if u wants to use shorthand or lowercase but you are out of firebug standers: D
Info : firebug user count : 3119717 😮