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

如何在CSS中使用3位数的颜色代码而不是6位数的颜色代码?,css,colors,hex,web-optimization,Css,Colors,Hex,Web Optimization,我最近浏览了我的CSS文件,将我所有的六位十六进制代码切换为简单的三位代码(例如,我的#FDFEFF被缩短为#FFF) 它呈现的颜色与以前几乎完全相同,在我看来,中间部分是相当无用的,删除它们在CSS文件中为我节省了整整300个字节 你用哪个版本重要吗?我很少遇到只使用三位数代码的网站(或者我想我从来没有遇到过使用三位数代码的网站)。使用三位数代码而不是六位数代码仍然完全有效,还是我们应该使用完整的六位数代码?如果“三位数”版本产生您需要的颜色,那么您可以随心所欲地使用它。这当然没有错。无论您使

我最近浏览了我的CSS文件,将我所有的六位十六进制代码切换为简单的三位代码(例如,我的
#FDFEFF
被缩短为
#FFF

它呈现的颜色与以前几乎完全相同,在我看来,中间部分是相当无用的,删除它们在CSS文件中为我节省了整整300个字节


你用哪个版本重要吗?我很少遇到只使用三位数代码的网站(或者我想我从来没有遇到过使用三位数代码的网站)。使用三位数代码而不是六位数代码仍然完全有效,还是我们应该使用完整的六位数代码?

如果“三位数”版本产生您需要的颜色,那么您可以随心所欲地使用它。这当然没有错。

无论您使用的是速记还是普通十六进制颜色,都没有关系,所以如果您愿意,请继续转换它们

删除它们为我的CSS文件节省了整整300个字节

哇,整整300个字节D、 对胜利的讽刺


问题是,除非你打算缩小、压缩和合并所有CSS、JavaScript等内容,否则300字节几乎不值得费心,特别是在平均互联网速度不断提高的情况下。

三位数代码是一种速记,
\123
\112233
相同。在您给出的示例中,您(有效地)将
#FDFEFF
替换为
#FFFFFF
,这接近原始颜色,但显然不精确


你使用哪个版本并不重要,但三位数的颜色代码意味着你在色调上的选择少了一点。如果你觉得节省300字节是值得的,那么就继续使用三位数的代码,但是除非你是为低带宽的情况而设计的,否则这300字节不会真正为你节省那么多。

速记很糟糕!不要用它。它更难维护并造成不必要的变化,例如在搜索和替换颜色值时(“哦,现在我必须考虑
#FFFFFF
白色
#FFF
”)


你在尺寸上节省的东西永远不值得你在可维护性上损失的东西。使用缩小和压缩来节省带宽。

确实如此,但这种转换不是通用的:

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

因此,它将每个十六进制数字“加倍”。所以它的颜色不一样。然而,它可能看起来是一样的,因为差异很小。在这种情况下,校准的颜色工作流可能会有所帮助。

如果您想节省字节,那么最好使用CSS缩小技术


如果您在Internet Explorer 7、8或9的表格中使用此选项(不幸的是,此选项与此响应日期相关)

六位数代码工作正常,但三位数代码呈现为黑色:

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

我总是使用速记。最大的优点是我可以很容易地记住代码

您仍然有163=4096种颜色可供选择,这应该足够了

但是,如果您在速记颜色代码中保存300字节,则意味着您在CSS中声明了100种颜色。除非你的页面非常多样化,或者所有的彩虹和花朵看起来都很多。您可能擅长系统化CSS,但我经常看到不必要的CSS规则


示例:如果您正在为多个子元素设置相同的规则,而这些子元素可能已被替换为在祖辈元素和一个异常元素中设置规则。

这是不可能的。请详细说明十六进制颜色代码的工作原理。对于一些颜色代码,我们可以将其减少到三位数,但是对于许多十六进制颜色代码,我们不能将其减少到三位数。请查看以下链接以了解进一步的说明


在CSS中保存几个字节(甚至kb)并没有多大意义,因为它是一种只请求一次然后缓存的东西。许多设计师都会说FDFEFF与FFF不同。我倾向于同意。作为一种颜色,它没有多大区别,但在许多颜色的组合中它确实有。我也是一个优化狂人,但你是否考虑过这样一个事实,300字节很可能比单个页面请求的HTTP头都少?此外,您可能还想在其他地方进行尺寸优化。例如图像精灵,但也有一些不太需要人工操作的东西,如CSS/JS压缩器、图像优化器等。re:在CSS中保存一些字节并没有多大意义。在某些应用程序中,在诸如Atmel/ESPIt之类的嵌入式系统上工作时会发生这种情况。。。如果它是通过电子邮件服务器发送的html,或者是在旧浏览器中查看的html,那么它可以呈现为不同于您预期的颜色。例如,对#fff(白色)的两种解释是#0f0f0f(黑色)或#ffffff(白色)。实际上,我正试图将我的外部CSS大小控制在8K以下,我已经考虑过这样做,所以我想,为什么不呢?我确实觉得节省额外的300字节比拥有更精确的颜色更重要,因为你几乎无法分辨颜色的不同。你这么说是因为你的例子是#FDFEFF,它非常接近#FFFFFF,当你用速记的方式轻推它时,几乎看不到它。但如果你看看#f0和#FFF,这是显而易见的。或者看看#E0F040,然后将其缩短为#EF4-巨大的差异。如果你试图告诉平面设计师这些颜色“足够近”,他们会大发雷霆。如果你把#f0f0缩短为#EEE(#EEEEEE),那不是仍然非常接近相同的颜色吗?压缩(默认值)不会将其减少到300字节以下吗?这个问题是特定于HTML中的颜色属性的。这不是CSS本身的问题。您甚至不应该以任何方式使用
bgcolor
属性。“黑色”实际上是“带黑色的”。。速记
#ff0