快30岁的 CSS 为自己设计了一个全新的官方标志

点击按钮总结全文核心内容，让你的阅读更高效率。

​CSS（层叠样式表）首次发布于1996年12月17日，是一种用来为结构化文档添加样式的计算机语言，由万维网联盟（W3C）定义和更新维护。CSS并非独立使用的工具，而是需要与HTML或XML等标记语言结合，共同实现网页内容的美化。无论是您正在浏览的网页中的字体样式、色彩搭配还是布局设计，都离不开CSS的代码支持。

CSS3 标识

值得注意的是，自CSS问世之初，它并未拥有正式的官方识别标识。直到CSS3标准发布之后，CSS才获得了其首个官方盾牌标识。十多年来，这个盾牌成为了CSS语言的标志性符号。

随着CSS功能的持续丰富和扩展（如已经能够执行过去仅能通过JavaScript实现的任务，支持数学函数，可以转换和设置对象动画等等），原本带有数字「3」的盾牌图案已显得不足以全面展现现代CSS的强大能力。为了庆祝CSS所取得的辉煌成就，并进一步提高公众对CSS最新进展的认识，CSS-Next社区不仅积极探寻新级别的CSS规范，同时也开始着手设计一款更加通用的标识来取代现有的盾牌符号。

CSS新旧标识

今年8月初，谷歌Chrome团队的CSS开发者Adam Argyle发起了一项设计新 Logo 的征集活动，活动吸引了来自世界各地设计师和开发者热情参与。经过数月的公众意见收集和设计迭代，11月12日，CSS 团队经过投票选出了最终的CSS官方标识设计方案。

设计师们为新官方 CSS 标识提交的众多创意方案

选定的标识方案由 Javi Aguilar 提交，该设计是一个配有白色 CSS 文字的紫色底「类圆角矩形」图标，并且提供深色和浅色两种变体，以便在任何场景中使用。根据CSS 通过的徽标使用指南，任何人都可以根据 MIT 许可随意使用该标识，但在使用过程中需要遵循一定的使用规范。

CSS新的官方标志

标识中的文字部分选择使用 DINish 字体。这是一款开源的无衬线字体，其灵感来自德国高速公路路标的字体。该字体由 Bert Driehuis 设计并于2017年10月16日首次公开发布，任何人都可以免费使用，包括商用。

开源字体Dinish Condensed Bold

我们注意到，在Javi Aguilar最初提交的设计方案中，并没有采用最终选定的紫色，而是选择了粉红色。Javi Aguilar解释说，他选择粉红色的原因有两个：一方面，这个颜色来源于JavaScript徽标四色色阶中中的一个色调；另一方面，粉红色常常让人联想到化妆，而CSS正如同网络世界的化妆师，负责给网页增添色彩和风格。

Javi Aguilar提交的设计方案解释了颜色的灵感来源

CSS 团队选定该方案后决定将颜色更改为紫色。这个「紫色底」的配色还有一个专属的名字「rebeccapurple」，色值为 #663399。据官方介绍，这个名字是为了纪念 CSS 标准创立以来的重要贡献者 Eric A. Meyer 的女儿 Rebecca。

Rebecca 在六岁时因脑瘤去世，她生前最喜欢的颜色就是紫色。

Javi Aguilar 对官方最终确定的紫色也表示认同，他觉得这个「rebeccapurple」的背后有一个更加美丽而有意义的故事。

目前，新版 CSS Logo 已公开上传至 GitHub。用户可以下载多种格式的图片文件，包括AVIF、SVG、WebP、PNG和JPEG等格式。官方鼓励所有人在提及CSS时使用这一新识别标识。

CSS Logo SVG代码：

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000" role="img" aria-labelledby="css-logo-title css-logo-description">
  <title id="css-logo-title">CSS Logo</title>
  <desc id="css-logo-description">A purple square with rounded corners and the letters CSS inside in white</desc>
  <path fill="#639" d="M0 0H840A160 160 0 0 1 1000 160V840A160 160 0 0 1 840 1000H160A160 160 0 0 1 0 840V0Z"></path>
  <path fill="#fff" d="M816.54 919.9c-32.39 0-57.16-9.42-74.5-28.35-17.15-19.03-26.08-46.18-26.88-81.64h69.8c.4 31.36 11.42 47.08 33.08 47.08 11.04 0 18.86-3.5 23.37-10.42 4.41-6.9 6.72-17.93 6.72-33.05 0-12.02-3.01-22.04-8.83-29.95a73.2 73.2 0 0 0-29.48-21.14L783.95 750c-23.06-11.02-39.81-24.04-50.14-39.27-10.03-15.13-15.04-36.36-15.04-63.5 0-30.36 8.83-55 26.37-73.94 18.05-18.93 42.62-28.34 74-28.34 30.3 0 53.76 9.31 70.3 27.84 16.85 18.64 25.67 45.28 26.38 80.14h-67.19c.4-11.4-1.9-22.72-6.72-33.06-3.8-7.6-11.23-11.41-22.26-11.41-19.65 0-29.48 11.71-29.48 35.05 0 11.83 2.4 21.04 7.22 28.05A65.18 65.18 0 0 0 822.76 689l24.77 10.92c25.57 11.72 44.02 26.05 55.35 43.38 11.43 17.23 17.05 40.27 17.05 69.12 0 34.56-9.03 61.1-27.38 79.63-18.25 18.53-43.62 27.85-76 27.85Zm-225.42 0c-32.4 0-57.16-9.42-74.51-28.35-17.15-19.03-26.07-46.18-26.87-81.64h69.79c.4 31.36 11.43 47.08 33.1 47.08 11.02 0 18.84-3.5 23.25-10.42 4.52-6.9 6.72-17.93 6.72-33.05 0-12.02-2.9-22.04-8.72-29.95a73.2 73.2 0 0 0-29.48-21.14L558.53 750c-23.07-11.02-39.81-24.04-50.14-39.27-10.03-15.13-15.04-36.36-15.04-63.5 0-30.36 8.82-55 26.37-73.94 18.05-18.93 42.62-28.34 74-28.34 30.29 0 53.75 9.31 70.2 27.84 17.05 18.64 25.77 45.28 26.47 80.14h-67.18c.4-11.4-1.9-22.72-6.72-33.06-3.81-7.6-11.23-11.41-22.26-11.41-19.66 0-29.49 11.71-29.49 35.05 0 11.83 2.41 21.04 7.22 28.05A65.18 65.18 0 0 0 597.33 689l24.77 10.92c25.57 11.72 44.02 26.05 55.36 43.38 11.33 17.23 17.04 40.27 17.04 69.12 0 34.56-9.12 61.1-27.37 79.63-18.25 18.53-43.62 27.85-76.01 27.85Zm-234.75 0c-31.7 0-56.86-8.62-75.51-25.85-18.65-17.12-27.88-42.87-27.88-76.93V648.83c0-33.85 9.83-59.5 29.48-77.13 19.96-17.43 46.13-26.24 78.52-26.24 31.39 0 56.15 9.01 74.5 26.84 18.56 17.93 27.88 44.58 27.88 80.14v13.32h-73.9v-12.92c0-13.72-3.01-23.84-8.83-30.45a26.46 26.46 0 0 0-21.66-10.32c-12.03 0-20.55 4.1-25.37 12.42a79.04 79.04 0 0 0-6.72 36.66v146.26c0 30.55 10.74 46.08 32.1 46.38 10.02 0 17.54-3.61 22.76-10.82a51.74 51.74 0 0 0 7.72-30.46V801.6h73.9v11.42c0 23.74-4.61 43.57-13.94 59.4a88.8 88.8 0 0 1-38.2 35.66 121.46 121.46 0 0 1-54.85 11.82Z"></path>
</svg>

除了制定和维护 CSS，万维网联盟（W3C）还制定了其他标准规范，包括文档对象模型DOM、超文本标记语言HTML、资源描述框架RDF、同步多媒体集成语言SMIL、可缩放矢量图形SVG、可扩展超文本标记语言XHTML、可扩展标记语言XML和网络内容筛选平台PICS等规范。

上图中展示的HTML5 的标志于2011年1月18日公布，该标志由Ocupop公司设计。W3C描述称，HTML的盾牌标志和你编写的标记语言一样坚固、真实、有弹性和通用。它就像那些有远见、专注的web开发人员一样明亮、大胆。这是标准中的标准，是进步的旗帜。

HTML5 的标志造型上和CSS3以及JavaScript（JS）的标志几乎一样，唯一的不同是盾牌的颜色以及内部的文字。需要注意的是，JS本身不是 W3C 的规范，但它与 W3C 的标准有着非常密切的联系。这三种技术都是前端开发的核心组成部分，紧密相连，共同构建了现代网页。因此，在视觉上有一定程度的统一性，可以加强它们之间的关联性。