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

发布于 2024-09-07 08:36:15 字数 260 浏览 13 评论 0原文

我最近检查了我的 CSS 文件,并将所有六位十六进制代码转换为简单的三位代码(例如,我的 #FDFEFF 缩短为 #FFF)。

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

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

I recently went through my CSS file and switched all my six-digit hexadecimal codes to simple three-digit codes (for example, my #FDFEFF got shortened to #FFF).

It renders pretty much the exact same color as before, and it seems to me that the in-between parts are fairly useless and removing them saved me an entire 300 bytes in my CSS file.

Does it matter which version you use? I rarely ever run across websites that use only the three-digit codes (or I guess I just never run across ones that do). Is it still perfectly valid to use three-digit codes over six-digit codes, or are we supposed to use the full six-digit codes?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(9

高冷爸爸 2024-09-14 08:36:19

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

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

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

That is true, but this transformation is not general:

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

So 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.

も星光 2024-09-14 08:36:19

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

It is not possible. Please go through how the hexadecimal color code works. For a few color codes, we can reduce it to three digits, however, for the many hexadecimal color codes we cannot turn that down to three digits. Please check the below links for the further clarification.

唠甜嗑 2024-09-14 08:36:18

如果您在 Internet Explorer 7、8 或 9 的表格中使用此内容(不幸的是,截至本回复日期,这是相关的)

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

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

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

If you use this in a table in Internet Explorer 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

Six-digit codes work fine, but three-digit codes render as black:

<table border="1" bgcolor="#ff0000">  vs.    <table border="1" bgcolor="#ff0">
以歌曲疗慰 2024-09-14 08:36:18

如果“3 位”版本产生您需要的颜色,那么您可以随意使用它。这当然没有错。

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.

雪化雨蝶 2024-09-14 08:36:18

我总是使用速记。最大的好处是我可以轻松记住代码。

您还有 163 = 4,096 种颜色可供选择,这应该足够了。

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

示例:如果您要为许多子元素设置相同的规则,则这些子元素可能已被替换为在祖父母和一个例外元素中设置规则。

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, and it should be enough.

However, if you save 300 bytes in shorthand color codes it means you have 100 colors declared 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 unnecessary CSS rules.

Example: 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.

木森分化 2024-09-14 08:36:18

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

删除它们可以在我的 CSS 文件中节省整整 300 个字节

哇,整整 300 个字节! :D,讽刺取胜

事实是,除非您要缩小、压缩和组合所有 CSS、JavaScript 等内容,否则 300 字节几乎不值得烦恼,尤其是随着平均互联网速度的不断提高。

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 for the win

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

内心荒芜 2024-09-14 08:36:17

三位数代码是简写,#123#112233 相同。在您给出的示例中,您(有效地)将 #FDFEFF 替换为 #FFFFFF,它接近原始颜色,但显然不准确。

因此,您使用哪个版本并不“重要”,但三位数的颜色代码意味着您在色调方面的选择要少一些。如果您认为节省 300 字节是值得的,那么请继续使用三位数代码,但除非您是针对低带宽情况进行设计,否则这 300 字节并不会真正为您节省那么多。

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.

执着的年纪 2024-09-14 08:36:17

速记太烂了!不要使用它。它更难维护并产生不必要的变化,例如在搜索和替换颜色值时(“哦,现在我必须考虑 #FFFFFFwhite# FFF”)。

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

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文