How to use 3-digit color codes rather than 6-digit color codes in CSS?

和自甴很熟 提交于 2019-11-27 11:45:37
Chris

The 3-digit codes are shorthand, #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 3-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 3-digit codes, but unless you're designing for a low-bandwidth situation those 300 bytes won't really save you all that much.

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.

If you use this in a table in IE 7 8 or 9 (unfortunately this is relevant as of the date of this response)

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables

6 digit codes work fine but 3 digit codes render as black

<table border="1" bgcolor="#ff0000">  vs.    <table border="1" bgcolor="#ff0">

If the "3 digit" versions produces the colour you need then you can use it as much as you like. It's certainly not wrong.

agiopnl

I always use the shorthand. The best advantage is that I can easily remember the codes.

You still have 163 = 4,096 colors to choose from, should be enough.

However if you save 300 bytes in shorthand color codes it means you have 100 colors decleared in your CSS. Unless your page is very diverse, or all rainbows and flowers it seems like a lot. You might be good at systematic CSS, but I often see unneccesary css rules. EX: if you're setting the same rule to many child elements that could have been replaced with setting the rule on the grandparent and in one exception element instead.

That is true, but this transformation is not general:

#FFF == #FFFFFF
#CCC == #CCCCCC

So what it does is it "doubles" each hexadecimal digit. So it is not the same color. It is however possible that it looks the same because the differences are minute. A calibrated color workflow could help in this case.

Ben Everard

It does not matter whether you use shorthand or normal hex colours, so go ahead and convert them if you desire.

removing them saved me an entire 300 bytes in my CSS file

Wow, a full 300 bytes! :D, sarcasm ftw

The thing is unless you're going to minify, compress and combine all of your css, javascript etc 300 bytes is barely worth bothering with, especially as the average internet speed is increasing.

Have fun!

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!