How can I use 3-digit color codes rather than 6-digit color codes in CSS?
Shorthand sucks! Don't use it. It's harder to maintain and creates unnecessary variation e.g. when searching and replacing a colour value ("oh, now I have to take into consideration #FFFFFF
and white
and #FFF
").
What you save in size is never worth what you lose in maintainability. Use minifaction and compression to save bandwidth.
The three-digit codes are a shorthand, and #123
is the same as #112233
. In the example you give, you've (effectively) swapped #FDFEFF
for #FFFFFF
, which is close to the original colour, but obviously not exact.
It doesn't "matter" which version you use, as such, but three-digit colour codes mean you have a little less choice in shades. If you feel that saving 300 bytes is worth that, then go ahead and use the three-digit codes, but unless you're designing for a low-bandwidth situation those 300 bytes won't really save you all that much.