如何在CSS中使用3位颜色代码而不是6位颜色代码？

Question

我最近浏览了我的CSS文件并将所有6位十六进制代码切换为简单的3位代码(例如,我#FDFEFF缩短为#FFF).它渲染的颜色几乎与以前完全相同,在我看来,部件之间相当无用,删除它们在我的CSS文件中保存了整整300个字节.

你使用哪个版本是否重要？我很少遇到只使用3位代码的网站(或者我想我从来没有碰过那些代码的网站).在6位代码上使用3位代码仍然完全有效,或者我们是否应该使用完整的6位代码？

Answer 1

3位代码是速记,与之#123相同#112233.在你给出的例子中,你(有效地)交换#FDFEFF了#FFFFFF,它接近原始颜色,但显然不准确.

因此,使用哪个版本并不重要,但3位颜色代码意味着您在阴影中的选择少一些.如果您认为节省300字节是值得的,那么继续使用3位代码,但除非您正在设计低带宽情况,否则这300字节将无法真正为您节省太多.

你这么说是因为你的例子是#FDFEFF,它非常接近#FFFFFF,当你通过使用速记那样轻推它时几乎不会引人注意.但是如果你看#F0F0F0和#FFF,那*是明显的.或者看看#E0F040,然后缩短到#EF4 - 巨大的差异.如果你试图告诉他们这些颜色"足够接近",平面设计师会抛出合适的东西. (20认同)
如果您将#F0F0F0缩短为#EEE(#EEEEEE),那么它是否仍然非常接近相同的颜色？ (17认同)
我觉得保存额外的300字节比拥有更多*exact*颜色更重要,你几乎无法区分它们. (3认同)

Answer 2

速记糟透了!不要使用它.这是很难维持和查找和替换颜色值时产生不必要的变化,如("哦,我现在必须考虑到#FFFFFF和white和#FFF").

您节省的大小永远不值得您在可维护性方面的损失.使用minifaction和compression来节省带宽.

我经常使用短片,但是今天我们发现当你在身体标签上放置bgcolor ="#fff"时它在IE10中不起作用(丑陋的html4用于通讯电子邮件),它只显示黑色,bgcolor =# ffffff"当你在邮件中使用短信时,Gmail也会出现问题. (7认同)

Answer 3

如果你想保存字节,那么你最好使用CSS缩小技术

Answer 4

如果您在IE 7 8或9的表中使用它(不幸的是,这与此响应日期相关)

6位代码工作正常但3位代码呈现为黑色

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