作者 | CSS 社區
譯者 | 核子可樂
策劃 | 丁曉昀
變 化
我從 2000 年初那會開始用 CSS 了。在那之前，我們一直用表格加 GIF 圖來設計網頁布局，CSS 出現之後我們終於走進了「文明社會」。從此 CSS 成了我最喜歡的程式語言，而回顧它這麼多年來的發展，有一件事是肯定的：CSS 不再是當初的樣子了。我們在 2003 年編寫的 CSS 跟 2013 年總有很大區別，而如今又一個十年過去，我們如今編寫的 CSS 比之前更強大、但也更加複雜。
當然，CSS 的進化絕非一蹴而就。就如同 Web 一樣，CSS 也是逐步演進，最終成了今天的樣子。大家還記得第一次用上 box-shadow、background-size 還有 border-radius 時的興奮之情嗎？對，這就是 CSS 前進路上的一個個腳印。
不知道大家有沒有關注今年在阿姆斯特丹舉辦的 CSS Day 大會，我看了現場直播，而且明顯感覺這次跟以往不同。CSS 此番迎來了一系列根本層面的變化，甚至有種到了技術奇點的意思。也就是說，CSS 由此分成了 2020 年代前與 2020 年代後兩大階段。想要選定某個元素的父元素，但瀏覽器本身又不支持解析 CSS？沒關係，現在可以直接用:has()。想根據容器大小調整元素，又擔心可能造成無限循環？別擔心，現在可以用容器查詢和隨附的新長度單位。這些功能都對 CSS 乃至整個 Web 平台做出了有益且大家睽違已久的補充。與其他現代功能（例如自定義屬性、min（）、max（）、clamp（））以及關鍵字大小調整（例如 min-content、max-content 和 fit-content）相結合，我們就能打造出前所未有的靈活組件和強大布局。總而言之，我們如今理解和編寫 CSS 的基本方式已經發生了根本性轉變。
根本性變革
除此之外，標誌 CSS 進入新時代的其實是另一個更大、更加根本性的轉變：
CSS 現已成為最強大的 Web 設計工具。
多年以來，設計師必須經歷一場艱難卓絕的鬥爭，才能打造出高質量的網站成果、把自己的想法真正在瀏覽器當中呈現出來。與此同時，諸如「我真的很抱歉，但您的設計無法用 CSS 實現」每天都被前端開發者們無奈地說出。設計師設想中的漂亮構圖雖然備受好評，但對於 CSS 這種仍在發展的語言來說顯得太過先進。誰能理解並克服 CSS 中的種種局限甚至說「怪癖」，誰才有望開發出殺手級的出色網站。
於是乎，設計師們吸取一教訓，開始創建兼容性更強的布局，比如幾乎全部使用 12 列平均網格。這明顯就是開發平台本身的不足所導致。
但如今，情況已經大為不同。
想在 Figma、Adobe XD 或者 Sketch 等主流設計工具中模擬並設計出一個能充分發揮 CSS 網格潛力的布局？做不到。想通過取色器等工具在 OKLCH 等廣色域色彩空間中定義某種顏色，從而在現代螢幕上呈現出更加鮮艷自然的色彩？不可能。想要模擬流體排版，根據窗口或容器大小動態縮放字體，並像在 CSS 中使用 clamp() 那樣定義最小值和最大值？不可能。或者說定義一種備用字體，在默認網絡字體無法加載時立刻頂上？還是不可能。是的，目前市面上任何一種設計工具都已經跟不上 CSS 的發展。在這個新時代，CSS 上只需幾行就能輕鬆實現的功能，反而在設計端找不到對應的選項。設計工具成了前端開發中的新瓶頸。
在去年的一場演講中，我曾提到應該解決設計工具和 CSS 間差距越拉越大的問題。從自身出發，我們能做的也只有密切協作、推出更多原型設計，讓更多人能在網頁設計和開發的交叉點上工作。但這一切並不容易，而且都需要時間。有些團隊已經展開了探索，並以新的、協同度更高的方式荼。但對大多數人而言，打破舊習慣顯然不是易事。
工具的變化
總體而言，我希望看到人們對於 CSS 在設計過程中的認知和作用得到扭轉，將瀑布式流程末尾的樣式演示工具變成早期設計決策中的核心工具。如此一來，熟悉使用 CSS 進行原型設計和 Web 組件構建的設計師將更具價值。作為設計工程領域的自由職業者，我對這一點充滿信心。
在 CSS Day 的演講上，曾有人問現在的設計師到底要不要學 CSS。而專家 Heyton 給出的答案是：CSS 已經成為一種設計工具、一種達成目的的手段，一種可供探索和使用的素材。更重要的是，它成為一種可供思考和決策的工具，開始步入設計舞台的最中央。
「我是按設計工具來學習 CSS 的，這就是我對設計的理想。設計代表著一種思維過程……它非常抽象，反映的是我們嘗試成就某事的路徑。在路徑當中，我們需要藉助各種各樣的工具。這種工具可能是 Figma，可能是 Photoshop，也可能是 CSS。」
這就是新 CSS，有史以來最強大的 Web 設計工具。只有用好 CSS，我們才能發揮平台上的現代功能；只有將 CSS 引入設計，我們才能建立起能靈活適應不同環境、不同內容類型的設計方案；也只有使用新 CSS，我們才能真正打造出優雅高效、簡潔有力的真 Web 成果。正如 Heyton 所言：「我不知道到底該不該用 CSS，但它肯定值得一用。」
原文連結：
https://matthiasott.com/notes/the-new-css?utm_source=CSS-Weekly&utm_campaign=Issue-554&utm_medium=web
相關閱讀：
一文吃透 CSS 樣式中顏色與顏色值的應用 (https://xie.infoq.cn/article/ff08f11ef5199eac739bcd96d)
CSS 樣式中顏色與顏色值的應用 (https://xie.infoq.cn/article/b43f7080697e3b13f8f1de01a)
CSS 選擇器的一場革命，:has() 高級使用指南 (https://www.infoq.cn/article/9cUfR6WbcwTyXJzsFxMY)
css 過去及未來展望—分析 css 演進及排版布局的考量 (https://xie.infoq.cn/article/329a83f021eebaf46f1ffccf2)
聲明：本文為 InfoQ 翻譯，未經許可禁止轉載。
點擊底部閱讀原文訪問 InfoQ 官網，獲取更多精彩內容！
今日好文推薦
C# 和 Type 之父親自帶隊開源 TypeChat，又一 AI 技術瓶頸被攻破？
終於找到 ChatGPT 「智商」下降的原因了！OpenAI 側面回應，GPT 可能真被你們玩壞了？
微信取消秋招；谷歌軟體工程師基本年薪超 500 萬；通報批評員工到點下班？比亞迪回應 | Q資訊
十年磨礪，持續闖入「無人區」，這家公司如何做好金融科技？