整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
年快樂
每當我們在元旦，年會的時刻，總是無法避免地出現抽獎環節。身為專業程序員的我們自然應當負起這份責任，確保這場抽獎活動能夠順利流暢地進行下去。然而，面對眾多待完成的工作任務，我們恐怕又需要進一步延長加班時間來應對。請別擔憂，在此，為您提供了一款卓越出色的現成抽獎網頁，可用于此次年度盛典的抽獎環節中。首先，讓我們共同欣賞一下實際應用表現吧！
抽獎效果
此頁面所有實現均采用最基本的JavaScript、html和jQuery技術完成，無需使用任何框架，開箱即用。
參與抽獎的數據需要提前設定好，在 js 目錄中，data.js 里，文件和結構如下：
人員數據
personArray.push({
id: 546,
image :"img/tx.png",
thumb_image :"img/tx.png",
name: "張三"
});每個數據都按此標準結構構建即可。img 可以使用默認的， 也可以自行提供照片，id 需要隨機指定一個數字，保證不與列表內的其他數據相同即可。設置新數據后刷新后就能使用。
現有的功能里沒有作弊選項（不能設置必中項），而且一個人可以重復多次中獎，因此需要添加以下內容來擴展。
# 編輯lucy.js
# 在Obj 對象下定義兩個變量
Obj.writeList = [0] # 用于存放白名單列表
Obj.hasLuck = [] # 用于記錄已中獎下標
# 新增去重函數
function doRepeatResult(num){
console.log(Obj.hasLuck.length, personArray.length)
if(Obj.hasLuck.includes(num)){
console.log('存在重復中獎, 重新抽獎', num )
num = num - 1
if(num < 0){
num = num + personArray.length
}
if(Obj.hasLuck.length >= personArray.length){
return 0
}
return doRepeatResult(num)
}
return num
}
# 重寫中獎隨機函數
function randomLuckyArr() {
Obj.luckyResult = [];
for (var i = 0; i < Obj.luckyNum; i++) {
var random = Math.floor(Math.random() * personArray.length);
if (Obj.luckyResult.indexOf(random) == -1) {
if(Obj.writeList.length > 0 && Obj.hasLuck.length > 2){
random = Obj.writeList[0]
random = doRepeatResult(random)
Obj.luckyResult.push(random)
Obj.writeList.shift()
} else {
random = doRepeatResult(random)
Obj.luckyResult.push(random)
}
Obj.hasLuck.push(random)
} else {
i--;
}
console.log("已中獎下標", Obj.hasLuck)
}
}在上述代碼中， 提供一個去重函數，并使用遞歸調用，保證每次數據都做去重校驗。如果數據有重復，則使用當前下標減一，如果小于 0 則，直接將下標調到最大，如果所有人都中獎了， 則始終返回第一個人的結果。
在randomLuckyArr 中， 則調用去重函數，并將每次中獎的數據都保存到 hasLuck 中。
對于需要暗箱的內容的內容則在luckyResult.push 之前，寫好相應的邏輯即可，如上代碼中，就是抽 3 回后保證第 4 回，中獎的人為writeList 中的（暗箱雖好，可不要貪杯[靈光一閃]）。
有需要的朋友請來個三連獲取。
#文章首發挑戰賽#
#頭條創作挑戰賽#
#挑戰30天在頭條寫日記#
#我的2023年終總結#
我們的日常應用中，尤其是在移動端的應用上，HTML5早已無孔不入，甚至你現在就有可能在一個HTML5環境下閱覽這篇文章。
近日，W3C HTML工作組在TPAC（W3C年會）上正式發布了HTML5的正式推薦標準（W3C Recommendation），距離該標準2007年被采納已經過去了七年時間。HTML5標準在這段漫長的時間中不斷完善和演進，全生態都在不斷貢獻力量。然而在過去很長一段時間中，中國在國際Web標準的制定上，幾乎是旁觀者的角色，現在一切已經改變。我們非常欣喜的看到，中國的互聯網企業正在生態中扮演著越來越重要的角色，他們不再滿足于僅僅是“使用”標準，更希望能夠參與“制定”標準，更強有力的推動互聯網的發展。
在HTML5的發布歷程上，中國元素也第一次在Web標準化制定過程中亮相在國際舞臺上。你想知道這其中的各種故事嗎？跟著筆者一起來看看吧。
中國互聯網企業的努力
早些時候，國內互聯網企業似乎很少會想到去和W3C這樣的國際標準機構打交道，但如果我們不參與到這樣的標準制定中，就很難在相關領域獲得足夠的話語權。
百度的覺醒比較早，也許這和他們濃郁的技術氣息有關。早在2011年9月，百度就成為了中國首個受邀加入W3C的互聯網企業，第二年8月，百度就向W3C HTML工作組提交了測試用例，并且獲得通過，成為中國第一家向該工作組提交測試用例的公司。
到2013年，百度在互聯網標準制定的進程上更進一步，與W3C聯手舉辦了Test The Web Forward（簡稱TTWF）2013上海站活動，吸引了大量開發者加入。該活動是由百度、Adobe、 Google、Mozilla、微軟、Opera等W3C成員在世界各地組織的系列現場極限編程活動，自2012年6月在美國舊金山舉辦之后，已經在北京、巴黎、悉尼、西雅圖、東京等城市舉辦過，吸引了大量開發者為HTML5各項規范撰寫測試用例。這次的活動上，總計向W3C提交了1003個Web標準測試用例，找到35個Bug，大幅度刷新了TTWF全球系列活動中提交測試用例和Bug的數量。百度還設計開發了能夠評測各種瀏覽器對HTML5支持能力的測試框架以及WebApp的一站式評測系統，可以對不同類型的WebApp進行有針對性的性能評測，覆蓋各種性能指標，并給出詳細分析和相關優化建議。
從這些活動上，也可以看到中國對于Web標準化上的巨大熱情。在此之后，騰訊、360等國內公司也快速展開與W3C的相關合作了。也就是說，目前被正式發布的HTML5中，來自于中國的力量不可小覷。
持續推動的Web標準
今年，中國互聯網標準化的進程再次被改寫。在HTML5的標準建議中，有了一條來自于中國的建議。又是百度，他們又一次在Web標準化上的工作走到國內前列，其制定的首屏渲染優化會員提案已經被 W3C正式接受，這是中國第一次，也是目前唯一的一次。
首屏渲染優化規范主要應用在移動端，加速移動端Web頁面對于用戶的呈現速度。對于普通手機頁面，由于代碼規模較小，很少的代碼就可以填充整個頁面， Web開發者通過該規范，可以指示瀏覽器進行合適的首屏內容提前繪制，從而加快首屏展現速度，顯著縮短用戶首次看見非白屏頁面時間。該提案的接受，也獲得了W3C的高度好評。這表明了，百度在Web標準工作上，確實不是一時之舉，而是長期以來支持不懈的努力和工作。
百度的工作很快不但獲得了國內其它互聯網企業的響應，騰訊、UC Web加入到首屏渲染優化提案的陣營中，而且也獲得了工業和信息化部電信研究院的支持，中國企業在Web標準制定上，站在了一條戰線上，共同努力。我們也相信，未來這樣的標準化工作會越來越多。
與國際生態產業進行持續交流也必不可少，據了解，仍然以百度為例，他們每年都會參加W3C TPAC會議，與該領域內的專家們一套討論規范制定的合理性、高效性，與國際知名企業一起，共同探討、商定開放Web平臺未來的技術方向，。
中國互聯網創造未來
中國互聯網企業在Web標準化上的不懈努力，也贏得了W3C的高度好評。W3C中國區總經理李安琪表示，“此次TPAC會議上，百度工程師向W3C HTML工作組和 Web Performance工作組詳細介紹了首屏渲染優化會員提案，這是首份來自中國的會員提案，對于中國行業參與Web標準化工作，爭取Web國際標準話語權，具有里程碑式的意義。此次百度與騰訊、UCWEB、電信研究院等機構聯合提案，整個過程對于更多中國企業參與Web國際標準工作有非常好的借鑒作用。W3C希望能夠收到更多來自中國的提案，以保證W3C標準滿足中國行業的訴求。“
HTML5帶來了一組新的用戶體驗，如Web的音頻和視頻不再需要插件，通過Canvas更靈活的完成圖像繪制，而不必考慮屏幕的分辨率，瀏覽器對可擴展矢量圖和數學標記語言的本地支持，通過引入新的注釋信息以增強對東亞文字呈現的支持，對富Web應用信息無障礙新特性的支持，等等。這些領域很多代表了未來Web應用發展的方向。
我們也希望能夠看到，未來能夠有更多像百度這樣的國內互聯網企業，不斷參與到國際標準化工作中，未來我們使用的各種相關標準中，能夠有中國人的聲音與力量。
于2022年的CSS新特性，自己之前也有篇原創，CSS 的未來：Cascade Layers (CSS @layer)，專門是在介紹@layer（級聯層）的文章，而新的一年會有更多的CSS的新特性會出現在瀏覽器中。
今天分享一篇大漠老師的文章，主要內容是2022年哪些CSS特性將在瀏覽器中出現，以下是正文。
原文: https://www.w3cplus.com/css/what-is-new-css-in-2022.html
作者：大漠老師，請聯系作者獲得授權,非商業轉載請注明出處。
雖然近些年 CSS 變化很快，但我認為 2021 年是 CSS 的元年。在即將過去的 2021 年，CSS 變化非常地大，其中新增了很多特性，比如 CSS 容器查詢、CSS 父選擇器、CSS 層疊控制規則、CSS 子網格等等。而且這些特性已經在個別，甚至是在大部分主流瀏覽器已經可以看到了。幾大主流瀏覽器（Chrome、Firefox、Safari和Edge）還專注于修復瀏覽器兼容性痛點，讓 Web 開發者的工作變得更輕松。
瀏覽器兼容性方面的修復，在 Web.dev 上發布了 2021 年的年中和年終報告，報告雖然簡單，但我們可以看到瀏覽器廠商都在致于力磨平 CSS 特性在瀏覽器上的兼容性。為此，我們應該感謝他們的付出！
隨著 2021 年的結束，讓我們一起來看看 2022 年，我們可以期待哪些 CSS 特性將會在瀏覽器中出現。這了是我連續第三年整理有關于 CSS 新特性方面的文章了，另外兩篇是（可自行搜索）：
你即將看到是 2022 年的，你會發現這三篇文章提到的 CSS 特性有相同的，但他們也是有變化的。
@Bramus 前兩天在Twitter 上發了一條信息，他整理了一份 2022 年的將會出現在瀏覽器的 CSS 清單：
有關于清單中列出的 CSS 相關介紹，可以閱讀他的文章：《CSS In 2022》
這份清單中列出的 CSS 特性和 @Adam Argyle 分別在 2020 年 和 2021 年分享的 CSS 新特性列的出的清單差不多，不同的是，在2021年，有些CSS特性已經得到了瀏覽器的支持，有些已經進入了瀏覽器的實驗屬性列表清單，說不定2022年，你就能看到了！
有關于 @Adam Argyle 在 2020 和 2021 分享的 CSS 新特性，我也曾整理過一份，清單有些類似，但內容還是有差異，主要涵蓋了一些我自己在 CSS 方面的認識和嘗試，分別記錄在《2020年CSS有哪些新特性》和《2021年你可能不知道的 CSS 特性》以及《應用于下一代Web的樣式》
當然，如果你也是 CSS 的忠實愛好者，不斷的在關注和推進 CSS 向前發展，那么你可能已經知道了，自 2019 年開始，每年年低都會有一份關于 CSS 發展狀態相關的報告（2019、2020 和 2021）呈現給你。在每年的報告中，我們都可以看到一項關于”開發者期待的CSS特性“的統計：
在第一份報告出來的時候，我特意還花了一點時間去理解這份有關于 CSS的報告：《從9102年的CSS狀態報告中看CSS特性的使用》，另外有幸運在 2020年年底和一些大學生一起聊了一個關于CSS狀態和學習的話題！如果你對該話題感興趣的話，可以閱讀《CSS現狀和如何學習》，文章中附有分享時錄制的視頻！
除此之外，W3C 的 CSS 工作小組，這兩年也都出了 CSS 規范的重點報告，最新的是 2020年 和 2021年的。注意，W3C 關于 CSS 規范的重點報告并不是每年都有的！接下來，我將按著 @Bramus 的 《CSS In 2022》大綱往下梳理，其中會加入一些我自己對這方面的認識和見解。
我需要額外提出的是，接下來內容中提到的 CSS 特性只會涉及到那些全新的或仍然沒有得到瀏覽器支持的（哪怕是實驗性方面的）特性。但這并不代表著它們不值得期待，說不定在2022年你就能使用了！如果你對這方面感興趣的話，請繼續往下閱讀！
在這節中提到的 CSS 特性是近些年來，Web 開發者一直期待的特性（或者說 CSS 中遺失的特性）。這些特性將在 2022 年的某個時候就得到了主流瀏覽器的支持。慶幸的是，有些特性已經在一個或多個主流瀏覽器中得到了支持，其他特性也將隨著時間的推移也會隨之而來。在 2022 年，學習或了解這些 CSS 特性，我想你會獲得收益的！
有意思的是，CSSWG一直還維護著一份關于 CSS 設計中不完整的錯語列表。感興趣的可以點擊這里閱讀！
CSS 容器查詢的特性一直以來都是 Web 設計師和開發者所期待的功能之一，從這幾年的 CSS 發展狀態的報告就可以看得出來。在沒有容器查詢之前，Web 開發者大多是依賴于 JavaScript 腳本來做判斷，從而改變 UI 網格。雖然 CSS 容器查詢存在于 CSS Containment Module 中有些年頭，但一直未得到瀏覽器的支持。慶幸的是，在 2021 年，該特性得到了飛速的發展，時至今日，能在主流瀏覽器中看到 CSS 容器查詢功能。這一切，都離不開 @TerribleMia ，是她為我們帶來了這么好的 CSS 特性，并且一直在推進該特性向前發展。
@TerribleMia 除了設計 CSS 容器查詢特性之外，還設計了 CSS 另外兩個非常優秀的特性，那就是 CSS 的 @layer 和 @scoped 兩個 @ （At rule）規則。詳細的可以閱讀《Miriam's CSS Sandbox》。
CSS 容器查詢 @container 有點類似于 CSS 的媒體查詢 @media ，只是它將根據元素的父容器（或祖先元素）的尺寸（size）或樣式（style）來調整自己或自己后代元素的樣式規則。在沒有 CSS 容器查詢，Web 開發者為了能在不同容器下調整 UI，大多都是依賴于媒體查詢來做。也就是說，有了該特性之后，不需要再依賴視窗大小加添加類名的方式來調整UI了：
上圖演示了，基于視窗的設計和基于容器的尺寸設計。可以說， CSS 容器查詢的出現，除了改變 Web 開發者的開發方式之外，也將給 Web 設計帶來變革命。這個論點在 2021 年的 GDS 大會上，@Una Kravets 在分享的 《The New Responsive: Web design in a compoent-driven world》主題（該主題視頻可以在 YouTube上訪問）中就提出這樣的觀點：
CSS 容器查詢將會成為下一代響應式 Web 設計必不可少的特性之一。
有了 CSS 容器查詢之后，我們就可以基于同一個組件，在不同尺寸下調整其UI，比如我們手淘 APP 頂部的搜索框效果：
上面效果的關鍵性代碼如下：
.form__container {
container: inline-size;
}
.form {
display: grid;
align-items: center;
}
@container (min-width: 480px) {
.form {
grid-template-columns: min-content 1fr 200px;
grid-template-areas: "searchIcon searchInput button";
grid-template-rows: 88px;
gap: 10px;
}
}
@container (min-width: 768px) {
.form {
grid-template-columns: min-content 1fr min-content 200px;
grid-template-areas: "searchIcon searchInput cameraIcon button";
grid-template-rows: 88px;
gap: 10px;
}
}
詳細代碼可以點擊這里閱讀或獲取。
CSS 容器查詢在主流瀏覽器都能體驗效果了，但需要開啟其相關標記。如果你要運用于生產環境，可以考慮其相應的 Polyfill：
CSS容器查詢特性絕對是眾望所歸的一個特性，在2022年更會全速向前！
有關于 CSS 容器查詢更多的介紹可以移步閱讀下面這些文章：
CSS 選擇器是 CSS 中最基礎的知識，也是必不可少的一部分，如果你沒掌握好 CSS 選擇器的話，那么你將會在 CSS 的世界中有那種”眾里尋她千百度，驀然回首，那人卻在燈火闌珊處“的感覺！也正因此，CSS 選擇器模塊的迭代非常的快，現在已經進入 Level 4 版本了。在 Level 4 版本中，添加了多個偽類選擇器，比如 :is() 、:where() 、:not() 和 :has() 等，而其中 :has() 選擇器也是我們期待已久的一個選擇器。@SaraSoueidan 在 Twitter 上引用 @Jen Simmons 的話說：
:has()選擇器本質上就是CSS中期待已久的父選擇器！
CSS 的 :has() 偽類選擇器和 :not() 有點相似，也被稱為結構性偽類選擇器，在 CSS 的函數中也稱之為 動態偽類函數。它允許你更精細地匹配元素：
:has() 偽類代表一個元素，如果作為參數傳遞的任何選擇器至少與一個元素相匹配！
簡單地說，元素只有在傳遞到 :has() 中的選擇器至少匹配一個元素時才會被選中。這樣理解起來似乎有點暈，我們來看個簡單地示例：
figure img {
aspect-ratio: 21 / 9;
border: 5px solid #3f51b5;
}
figure:has(figcaption) img {
border: 5px solid #9c27b0;
}
上面示例中的 figure img 選擇器大家應該都明白，表示選中 <figure> 元素中的所有 <img> 元素；而 figure:has(figcaption) img 選擇器表示的是選中 包含了<figcaption> 元素的 <figure> 元素中的所有 <img> 元素。注意，這里:has() 中傳了個 figcaption 選擇器作為其參數。
<!-- 未匹配，因為 figure 沒有包含 figcaption 元素 -->
<figure>
<img alt="" src="" />
</figure>
<!-- 會匹配，因為 figure 包含了 figcaption 元素 -->
<figure>
<figcaption></figcaption>
<img alt="" src="" />
</figure>
在支持的瀏覽器中你將看到的效果如下：
注意，Safari TP 137 是目前唯一一個默認支持 :has() 選擇器的瀏覽器。
雖然說 :has() 被稱為 CSS 的父選擇器，但它的作用遠不止于此。我們可以使用 :has() 和 :not() 等選擇器相互結合，實現一些更復雜的效果。
就上面示例而言，當你在 <input type="email"> 輸入的值是否有效時，表單不同狀態下有不同的 UI 效果：
是不是很有意思。如果對 CSS 的 :has() 選擇器感興趣的話，還可以閱讀《CSS 選擇器:is() 和 :where() 與 :has() 有什么功能》一文。
更多關于選擇器的內容：
CSS的級聯順序一直以來令眾多開發者（特別是不熟悉CSS的開發者）感到困惑和頭痛。CSS 新的 @ 規則 @layer 將可以讓 CSS 的級聯順序按照你的意圖來進行控制。簡單地說，@layer 可以通過分層的方式，讓你適當控制同源規則的級聯排序。
比如下面這個示例：
/* 預設級聯層的順序，并且相鄰級聯層之間有逗號分隔 */
@layer setting, tool, generic, element, object, component, utilities;
@layer setting {
/* 附加到級聯層 setting 中的 CSS */
}
@layer tool {
/* 附加到級聯層 tool 中的 CSS */
}
@layer generic {
/* 附加到級聯層 generic 中的 CSS */
}
@layer element {
/* 附加到級聯層 element 中的 CSS */
}
@layer object {
/* 附加到級聯層 object 中的 CSS */
}
@layer component {
/* 附加到級聯層 component 中的 CSS */
}
@layer utilities {
/* 附加到級聯層 utilities 中的 CSS */
}
上面只是演示了 @layer 規則的一個基本使用，而與 @layer 相關的知識和細節很多，這里就不深入展開了。要是你對該特性感興趣的話，可以閱讀《初探 CSS 的級聯層（@layer）》一文。到目前為止，你們可以在 Chromium 99、Firefox 97 和 Safari TP 133 中查閱。注意，Safari 是最早支持該特性的瀏覽器。
有關于 CSS 中層疊更多的話題還可以閱讀：
在 CSS Color Module Level 5 中新增了兩個處理顏色的新函數，即 color-mix() 和 color-contrast() ，除此之外，還擴展了以前的顏色函數（比如 rgb() 、hsl() 、hwb() 、lab() 和 lch() 等）功能，可以在一個顏色的基礎上改變某一個或某幾個參數的值，從而得到一個新的顏色。比如上圖部的 hsl() 函數，我們可以基于 --theme-primary 顏色（假設它的值為 hsl(274, 61%, 50%)）改變其飽和度（從 50% 調整到 30% ）從而得到一個新的顏色 hsl(274, 61%, 30%) 。這個特性，可以讓我們在很容易的在 CSS 控制品牌色的色盤：
說個題外話，我最近的主要工作內容之一是將 Design Token 運用于前端生產的工程鏈路中，并且根據組件可變參數來自動生成不同風格的 UI 組件。那么，在未來的某一天，我就可以使用這種特性來為品牌色構建色盤。
新增的 color-mix() 和 color-contrast() 函數相對來說要更復雜一些。其中 color-mix() 函數有點類似于設計師調色一樣：允許你在一個給定的顏色空間中混合兩種顏色。
比如：
:root {
--theme-color: #ff0000;
}
.text-primary-dark {
color: color-mix(var(--theme-primary), black 10%);
}
.text-primary-darker {
color: color-mix(var(--theme-primary), black 20%);
}
color-contrast() 函數比較有意思，特別是在用于構建可訪問性 Web 的時候特別有用。因為它可以幫助我們提高 Web 可訪問性方面的能力（更好的控制文本色和背景色的對比度）。其主要作用是獲取一個顏色值，并將其與其他顏色的列表進行比較，從列表中選擇對比度最高的一個。
比如color-contrast(white vs red, white, green) ，分別會拿red 、white 和 green 與 white 進行對比，其中 green 和 white 對比度最高，最終會取 green 顏色：
你也還可以像這樣使用：color-contrast(wheat vs tan, sienna, #d2691e to AA-large) 。它會將 wheat 與 tan 、sienna 和 #d2691e 進行對比，最終 sienna 顏色獲勝，因為它與 wheat 顏色的對比度為 4.273 ，超過了 AA-large 的閾值。
Safari TP 124 已將 hwb()、lch() 、lab() 、color-mix() 和 color-contrast() 置為默認功能！
額外提一下，其中 hwb() 、lch() 和 lab() 所表達的顏色空間和 rgb() 還是有差異的，它們能將顏色表達的更細膩。就拿 hwb() 函數來說：
基于同一色相 0deg 描述的顏色：
有關于 CSS 顏色更多介紹，可以閱讀：
”視窗單位“對于大家來說應該不會感到陌生了，特別是針對移動端開發的同學來說。因為移動端現在主流的適配方案之一就是采用視窗單位來處理的。但很多同學所知道的視窗單位應該只是 vw 、vh 、vmin 和 vmax ：
視窗單位給移動端開發的適配是帶來了極大的優勢，但我想你在使用視窗單位的時候，應該也碰到了iOS上 Safari 的兼容性問題。因為，在iOS上的 Safari 有一個長期存在的，極其惱人的Bug，它不能與 vh 單位很好的配合。如果你將一個容器的高度設置為 100vh 時，會導致這個元素有點太高（會出現滾動條）。造成這種現象的主要原因是移動端上的 Safari 在計算 100vh 時忽略了它的部分用戶界面。
如果你對 iOS 的 Safari上 100vh 的相關問題以及解決方案感興趣的話，還可以移步閱讀：
如果你不想花過多時間搞清楚這個問題的話，只是想快速解決這個問題，那可以將下面這段代碼放到你的代碼片段中：
body {
height: 100vh;
}
@supports (-webkit-touch-callout: none) {
body {
height: -webkit-fill-available;
}
}
雖然上面的代碼可以解決 100vh 在 iOS Safari 引起的問題，但終究也只能說是一種 Hack 手段（事實上，CSS 中有很多黑魔法，這里不是主要聊這個的，顠過）。慶幸的是，CSS Values and Units Module Level 4 新增了幾個與視窗有關系的新單位：
也有相應的單位用于 CSS 的邏輯屬性中，比如 svi/svb 。有關于 這幾個新增的視窗單位更詳細的介紹，可以閱讀 @Bramus 的 《The large, Small, and Dynamic Viewports》一文和@Arek Nawo 的 《Investigating the new CSS viewport relative units》一文。既然聊起了 CSS 的單位，那就再多花點篇幅和大家再多聊幾個新增的 CSS 單位，也是蠻有意思的。先說 CSS Values and Units Module Level 4 新增的 lh 和 rlh 吧。
簡單地回憶一下 CSS 中另一對單位：em 和 rem 。稍微了解 CSS 的同學都知道：- em 是相對于元素自已的 font-size 值計算（除元素自身的 font-size 取值為em時，元素自身的 font-size 值單位為 em時，其相對于其父元素的font-size值計算） - rem 是相對于HTML文檔的根元素的 font-size 值計算，文檔的根元素一般是指 <html> 元素
這兩個新增的 lh 和 rlh 與 em 和 rem 非常的相似，只不過他們相對的是 line-height 的值計算:- lh 相對于元素自己的 line-height 計算 - rlh 相對于文檔根元素（<html> ）的 line-height 計算
你肯定會問，這樣的單位有何用處呢？我想大家在還原 UI 設計稿的時候，肯定碰到了因為字體不同以及 line-height 值不同，讓元素在視覺上看上去總是對不齊。那么，有了 lh 和 rlh 之后，事情會變得好一點。比如下圖這樣的場景：
以前上圖這樣的標記，常把寬高設置為 1em ，那么現在可以設置 1lh ：
::marker {
width: 1lh;
height: 1lh;
}
到目前為止，僅 Safari TP 105 聲稱支持這兩個相對單位 lh 和 rlh 。前面提到 CSS 容器查詢特性一直以來是 Web 設計師和開發者一直期待的特性，并且在 2021 年得到快速發展。同時，和 CSS 容器查詢特性一起出現的 ”*容器查詢單位“ 也是很有意義和作用的。只不過，CSS 容器查詢單位與 CSS 容器查詢模塊放在一起，并未和其他的 CSS 單位納入一起。CSS 容器查詢單位和視窗單位有點類似，不同的是 視窗單位相對于瀏覽器視窗尺寸計算，而容器查詢單位相對于查詢容器計算。使用容器查詢長度單位的樣式表可以更容易將一個組件從一個查詢容器中移到另一個查詢容器。CSS容器查詢的單位主要有：
早其容器查詢的單位定義的是 c*（比如，cw 、ch 、cmin 和 cmax ）之類的，但其中有些單位會和 ch 單位產生沖突，因此，最終確定的容器查詢單位是以 cq* 開始的。也就是上面所列的幾個！
正如 @Miriam Suzanne（最初提出建議的人，也是規范的編輯）所分享的，這些 CSS 單位是Chromium中實驗性容器查詢支持的一部分。
更為有趣的是，@Ahmad Shadeed 在他的文章《CSS Container Query Units》一文中提出 qw 、qh 、qmin 和 qmax 以及他們對應的邏輯屬性的單位qi 、qb 。
@Ahmad Shadeed 使用這些新的CSS單位運用在 font-size 上。可以用于容器查詢的一坨 CSS 代碼，在clamp() 比較函數中使用cqw 單位來取代。
早在2018年和大家聊改變滾動體驗的時候就介紹過 overscroll-behavior 屬性，我們可以通過該屬性覆蓋 overscroll 容器（指的是內容寬或高大于容器的寬或高，出現滾動條）時的默認行為。拿一個具體的實例來說，比如我們在構建彈框的時候，彈框內容過高也會出現滾動條，這個時候就會有兩個滾動條出現，一個是彈框的，一個是body 的，其默認行為會像下面錄屏的效果：
彈框無法滾動時，其底部的內容可以繼續滾動。說實話，這樣的默認滾動行為給用戶的體驗是極差的。更多的時候，我們希望彈框無法滾動時，其底部的滾動條也不能滾動。如下所示：
要實現上面視頻的效果，我們就需要使用 overscroll-behavior 屬性，并且將其值設置為 contain :
.modal {
overscroll-behavior-y: contain;
overflow-y: auto;
}
這個特性早在 Firefox 36 和 Chrome 63 就開始得到支持了，只不過Safari還未得到支持，不過 Safari 也在迎頭趕上。
有關于 overscroll-behavior 的相關介紹，可以閱讀 @Ahmad Shadeed 的《Prevent Scroll Chaining With Overscroll Behavior》一文。
在 CSS 中改善滾動體驗，除了overscroll-behavior 屬性之外，還有其他的一些屬性，比如滾動捕捉 scroll-snap （Scroll Snap模塊中的屬性）、pull-to-refresh 等。CSS 除了要以控制滾動行為之外，也可以控制滾動條的樣式。在今年以前，CSS 控制滾動條樣式是使用瀏覽器的一些私有屬性來搞定：
就在 2021 年 12 月 09日，W3C 發布了的 CSS Scrollbars Styling Module Level 1 規范，該規范提供了 scrollbar-color 和 scrollbar-width 兩個屬性，用來給滾動條設置樣式。以后，我們要以使用它們來輕易完成滾動條樣式的定制：
.section { scrollbar-color: #6969dd #e0e0e0; scrollbar-width: thin;}
我想大家都知道，使用 CSS 來美化滾動條樣式主要原因之一是因為滾動條在不同的系統平臺上顯示有差異，外觀不統一。除此之外，還有另一個問題。在 Web 上顯示滾動條有一個副作用，那就是 內容的布局可能會根據滾動條的類型而改變。如果我們想防止由滾動條引起的一些不必要的布局變化，希望有相應的 CSS 屬性來處理。以前沒有，但現在有了。CSS Overflow Module Level 4 新增了一個 scrollbar-gutter 屬性，有了這個屬性，開發者就可以更好的控制滾動條，或者說解決因滾動條類型不同引起布局的差異變化。下圖中展示了 scrollbar-gutter 的取值不同時的效果：
如果你對美化滾動條以及 scrollbar-gutter相關的知識感興趣的話，可以閱讀：
就 Web 布局 而言，雖然 Flexbox 很優秀了，但在二維布局中 Flexbox 還是有很大的局限性。在整個 Web 布局的技術體系中，只有 CSS Grid 才是唯一的二維布局。CSS Grd 布局在這幾年中一直在不斷的向前推進，已經得到了主流瀏覽器的支持。CSS Grid 能這么快向前推進，除了要感謝瀏覽器廠商的開發者團隊之外，我個人認為還必須要感謝 @Jen Simmons 和 @Rachel Andrew。
@Jen Simmons 和 @Rachel Andrew 除了是 CSS Grid 規范的締造者，還是 CSS Grid 布道者，她一直在社區努力推進 Grid 向前發展。
CSS Grid 已經有很多年了，該模塊中的很多特性在主流瀏覽器中都得到了支持。在 2021 年，我自已陸續花了近半年的時間，對 CSS Grid 技術進行了系統的學習，并且整理了二十多篇有關于 CSS Grid 方面的系列教程，在這個系列中除了 CSS Grid 的理論知識之外，還有一些實戰案例。要是你對這方面感興趣的話，可以從《2022年不能再錯過 CSS 網格布局了》一文中索引。這里著重把 CSS 網格中的子網格 subgrid 單獨拿出來是原因的。子網格從定義到今天，經歷了很多個版本的演變，而且在 CSS 社區也引起來很大的爭議。在 CSS Grid 出現之后，就有人提出：
在 CSS 網格布局系統中應該要有一個子網格，即 subgrid
為此，最早定義的 subgrid 像 grid 和 inline-grid 一樣，它只是 display 屬性的一個值：
.subgrid {
display: subgrid;
}
不過沒過多年，subgrid 就從 display 屬性中移除了。使用嵌套網格來模擬子網格：.grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.grid__item { display: grid; grid-template-columns: repeat(4, 1fr);}
簡單地說，在需要嵌套網格的網格項目上再次使用 display: grid 以及 grid 相關的屬性重新定義一個網格。只不過，這種方式也問題存在：很難將嵌套網格項目與父網格對齊。換句話說，父網格和嵌套網格是兩個獨立的網格，他們有著自己獨立的網格參數。為了讓子網格能繼續父網格的相關參數，才又將 subgrid 再次引入到 CSS Grid 系統中，只不過，subgrid 不再是 display 的值，而是網格屬性 grid-template-columns 或 grid-template-rows 屬性的值。
.grid__container { display: grid; grid-template-columns: 1fr 2fr 3fr 2fr 1fr; grid-template-rows: 1fr 2fr 2fr 1fr; gap: 1rem; } .grid__container--subgrid { grid-column: 2 / 5; grid-row: 2 / 4; } .grid__container--subgrid { display: inherit; grid-template-columns: subgrid; grid-template-rows: subgrid; }
正如上圖所示，這就是subgrid的作用：通過設置grid-template-columns或grid-template-rows為subgrid，它將與父網格對齊。真正的子網格可以使用父網格的相關參數。簡單地說，使用該特性，可以輕易實現像下圖這樣的卡片布局：
還有一段時間，也有另一種建議，那就是使用 display: contents 來替代 subgrid 。而到今天為止，在網格布局系統中，嵌套網格、子網格和 display: contents 模擬的子網格都同時存在。他們都有著自己的特性。這里就不花過多時間闡述了。subgrid已成為 CSS Grid 模塊中不可或缺的一個特性，直到今天為止（2012年的最后一天），也僅 Firefox 瀏覽器支持。不過，Chrome 已進入 WIP 階段，我想 2022 年上半年，你就能在 Chrome 瀏覽器體驗 subgrid 的效果。
既然提到 CSS Grid，那就順嘴說一下 CSS 的 gap 屬性吧。該屬性不只是 Grid 布局獨有的，在 CSS Flexbox 、Grid 和多列布局中都有 gap 屬性。在布局中，在某些場景中，給相鄰元素之間設置間距要比 margin 容易地多。
從 @Jen Simmons 發的推特消息中可以獲知，Safari 14.1 開始也支持 Flexbox 中的 gap 屬性。我自測了一下，Grid中的 gap 也得到支持了。也不是說，現在主流瀏覽器都已支持 gap 屬性了：
Web 中有很多控件的 UI 效果是跟隨系統走的。比如表單中的一些控件，比如常用的輸入框（<input>）、單選按鈕，復選框，進度條等。
以往，為了在 UI 的風格上能滿足設計師的需求，即 所以平臺上使用風格一致的UI效果。為此，Web 開發者需要增加額外的開發工作量，采用自定義表單控件的方式來讓 UI 網格統一。為了讓開發者能更好的滿足設計師的需求，并且快速讓各種平臺統一 UI 網格， CSS Basic User Interface Module Level 4 新增了 accent-color 屬性，可以很輕易的控制 Web 控件 （Widget Accent） UI：
:root { accent-color: deeppink; } @media (prefers-color-scheme: dark) { :root { accent-color: hsl(328 100% 65%); }}
既然提到 Web 表單中的控件，那就給大家提兩個有關于 `` 元素的屬性。因為這兩個屬性能給你的用戶帶來更好的體驗，特別是在操作表單的時候。除了給 <input> 元素的 type 指定不同值時，可以提供不同鍵盤類型之外，還可以使用 inputmode 屬性：
inputmode 可以喚起不同類型的軟鍵盤，另一個改善用戶體驗的是給 <input> 元素的 enterkeyhint 屬性設置不同的值，可以改變軟鍵中的 Enter 鍵的類型的操作行為：
上面提到的，不管是 CSS 還是 HTML 的屬性，都是用來改變用戶體驗的。再提一個和 HTML相關的屬性。
自Safari 15 開始，我們在 HTML 的 <meta> 標簽為 theme-color 設置顏色，讓瀏覽器自身的 UI 顏色有讓開發者來控制：
特別聲明，這里的 theme-color 不是 CSS 屬性，他是 HTML 的 <meta> 元素的 name 的一個值，結合 content 和 media 能輕易控制系統級的顏色。
似乎跑題了！我們要聊的是 2022 年的 CSS ！嗯！那我們繼續回到 CSS 的世界中來。
CSS 媒體查詢 @media 已不是什么新特性了（除了新增的一些用戶偏好的條件設置）。但今天要提出的是他的語法規則的寫法。先上一張圖吧：
以往在 @media 或者在 @container 規則中寫判斷條件時使用 min-width 和 max-width 較多，不知道大家是否和我一樣有這樣的感覺，使用 min-width 和 max-width 很多時候傻傻分不清楚他們的范圍。為此，我總是喜歡使用下圖來做判斷：
自 CSS Media Queries Level 4 開始，我們可以使用較為熟悉的數學表達式了，在媒體條件中使用 > 、>= 、< 或 <= 等數學表達式：
上圖中使用 @media 語法表達的話，像下面這樣：
/* Old Way */
@media (max-width: 768px) {
…
}
@media (min-width: 375px) {
…
}
@media (min-width: 375px) and (max-width: 768px) {
...
}
/* New Way */
@media (width <= 768px) {
…
}
@media (width >= 375px) {
…
}
@media (375px <= width <= 768px) {
...
}
同樣的，數學比較運算符表達式也同樣可以運用于 @container 容器查詢的條件判斷中。
如果你對媒體查詢方面的知識感興趣的話，還可以閱讀：
F-mods 是 Font Metrics Override Descriptors（字體度量覆蓋描述符）的簡稱。它對應著 CSS Fonts Module Level 4 規范中的 @font-face 部分的第十一小節，即 默認的字體度量覆蓋。簡單地說，在 @font-face 規則中新增了 ascent-override、descent-override、line-gap-override 和 advance-override 等屬性：
@font-face { font-family: 'Arial' src: local('Arial'); --unitsPerEm: 1000; --lineGap: 10; --descender: -237; --ascender: 1041; --advanceWidthMax: 815; ascent-override: calc(var(--ascender) / var(--unitsPerEm) * 100%); descent-override: calc(var(--descender) / var(--unitsPerEm) * 100%); line-gap-override: calc(var(--lineGap) / var(--unitsPerEm) * 100%); advance-override: calc(var(--advanceWidthMax) / var(--unitsPerEm)); }
其中 advance-override 還未進入 W3C 規范，目前還僅處于提案中；而 ascent-override、descent-override 和 line-gap-override 屬性目前已在 Chromium 87+ 和 Firefox 89+ 中實現！
這四個描述符的組合可以讓我們告訴瀏覽器在下載 Web Fonts 之前字符占用多少空間，來覆蓋回退字體（系統字體）的布局，使其與 Web Fonts 相匹配。簡單地說：這四個描述符可以讓你的系統字體更接近 Web Fonts!其中 ascent-override、descent-override 和 line-gap-override 描述符使我們 能夠完全消除垂直布局的偏移，因為這三個描述符都會影響行高。在 CSS Fonts Module Level 5 規范中又為 @font-face 規則添加了幾個新屬性。比如，用來覆蓋字體上標（sup）和下標（sub）的 superscript-position-override、subscript-position-override、superscript-size-override 和 subscript-size-override 描述符。雖然這幾個屬性還沒有得到任何瀏覽器的支持，但對于 Web 開發者而言，這是希望。
除此之外，還新增了 size-adjust 描述符，它允許我們調整字形的比例系數（百分比)。該描述符取代了前面提到的 advance-override描述符。正如 @Addy Osmani在他自己推特上，是這樣描述 size-adjust：
size-adjust 已經得到了 Chromium 92+ 和 Firefox 89+ 的支持。
說到 @font-face 那就有必要提到大家也一直期待的另一個 CSS 特性，那就是 leading-trim：
leading-trim 其主要作用就是用來改變文本布局。
在鉛印刷術中，為了讓鉛字塊(排成行)之間有一定的間距，排字工人會在行與行之間墊一些鉛條，讓閱讀變得更舒服一些。在那個時代，鍋條一般都放置在鉛塊下方。同樣的，在Web排版上也有鉛條的身影，只不過他分面上下兩個部分。在CSS中引入該特性，它的工作原理就像一個文本框剪切刀。去掉文本框上下之間多余的空間（這個空間其實就是鉛條高度的一半）：
h1 { text-edge: cap alphabetic; leading-trim: both; }
示例中用到了text-edge 屬性，簡單地用下圖來描述其作用：
開發 Web 時，對于排版方面是較為復雜的，涉及到的CSS知識也較多，如果你感興趣的話，可以閱讀下面這些文章：
這個和前面提到的 CSS 媒體查詢有點類似。不是 CSS 的新特性，在 CSS Transform Level 2 規范中把以前用到 transform 屬性的 rotate() 、scale() 、translate() 函數變成獨立的 CSS 屬性。而且它們都已經成為主流瀏覽器的實驗屬性，能在瀏覽器中體驗他們。
element {
scale: 2;
rotate: 30deg;
translate: -50% -50%;
}
平移（translate）、旋轉（rotate）和縮放（scale）屬性允許開發者獨立地指定簡單的變換，其方式與典型的用戶界面使用方式一致，而不必記住變換中的順序，使transform()、rotate()和scale()的動作保持獨立并在屏幕坐標中發揮作用。它們被應用的順序是，首先是平移，然后是旋轉，然后是縮放，而不是你定義它們的順序。有了獨立的變換屬性，這也意味著我們可以對它們分別進行動畫和過渡。
@keyframes individual {
50% {
translate: 0 50%;
}
75% {
scale: 1;
}
}
element {
transition: rotate 200ms ease-in-out, scale 500ms linear;
}
element:hover {
scale: 2;
rotate: -3deg;
}
有關于這方面更詳細的介紹可以閱讀：
接下來提到的 CSS 特性只是部分瀏覽器的實驗性功能，不會得到大多數瀏覽器的支持，或者可能只有在相應的瀏覽器中開啟了實驗性功能標記才能看到效果。這些特性在 2022 年，甚至是再往后一兩年都有可能得不到所有主流瀏覽器的支持。除了不會得到瀏覽器支持，而且規范都有可能會變更。說不定還會從 CSS 中移除！
上圖看上去很熟，對吧！但它不是 SCSS 中的嵌套，是原生 CSS 中的嵌套。在 CSS 方面這算是一個突破性的補充，也算是繼續 CSS 自定義屬性（CSS 變量）的又補充。以往這樣的規則，只能在 CSS 的處理器中運行。在 CSS 的嵌套模塊中，我們可以使用 & 和 @nest 規則在一個樣式規則塊中嵌套另一個樣式規則塊：
table.colortable { & td { text-align: center; &.c { text-transform: uppercase } &:first-child, &:first-child + td { border: 1px solid black } } & th { text-align: center; background: black; color: white; } @nest footer & { font-size: 0.8em; }}
有關于 CSS 的原生嵌套更多的介紹，可以閱讀《圖解CSS：CSS的嵌套》一文。
CSS Cascading and Inheritance Level 5 中引入了 @layer 規則，將在 Level 6 中會引入另一個規則 @scope 。這是一種將樣式范圍擴大到DOM樹的一種用法。
<!-- HTML -->
<div class="dark-theme">
<a href="#">plum</a>
<div class="light-theme">
<a href="#">also plum???</a>
</div>
</div>
/* 當.light-theme和.dark-theme被嵌套時，你可能不會得到預期的結果 */
.light-theme a {
color: purple;
}
.dark-theme a {
color: plum;
}
/* 通過范圍劃分，我們可以解決這個問題，因為a元素的樣式將由其最近的范圍來確定 */
@scope (.light-scheme) {
a {
color: darkmagenta;
}
}
@scope (.dark-scheme) {
a {
color: plum;
}
}
@when ... @else 是 CSS Conditional Rules Module Level 5 新增的特性，他們可以分開來單獨使用，也可以組合在一起使用。
@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) {
/* A */
} @else supports(caret-color: pink) and supports(background: double-rainbow()) {
/* B */
} @else {
/* C */
}
@Stefan Judis 將這個CSS 特性（@when ... @else）有前面提到的 CSS特性，即 CSS 容器查詢 和 媒體查詢的數學運算表達式組合在一起，重新設計了 @Ahmad Shadeed 的 《Conditional Border Radius In CSS》文章中提到的有條件設置圓角：
@Stefan Judis 重新設計的方案：
有關于有條件設置圓角半徑除了這里提到的方案，其實還有其他的方案，你要是想一探究竟的話，可以閱讀前幾天剛整理的《CSS 中的條件圓角技巧》一文。
這里所說的滾動與動畫指 Scroll-linked Animations 模塊中提供的 @scroll-timeline規則和 animation-timeline 屬性。你可以將 CSS 動畫與一個滾動容器的滾動偏移量關聯起來。當你向上或向下滾動一個容器時，鏈接的動畫將相應的前進或后退。
使用 @scroll-timeline 規則和 animation-timeline 構建類似上面的效果，要以按下面三步來走：
/* (1) Define Keyframes */
@keyframes adjust-progressbar {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
/* (2) Define a ScrollTimeline */
@scroll-timeline scroll-in-document {
source: auto;
orientation: block;
scroll-offsets: 0, 100%;
}
/* (3) Attach the Animation + set the ScrollTimeline as the driver for the Animation */
#progressbar {
animation: 1s linear forwards adjust-progressbar;
animation-timeline: scroll-in-document;
}
有關于這方面更詳細的介紹，可以閱讀 @Bramus 提供的系列教程：
@property 是用來注冊一個變量的，該變量是一個 CSS Houdini 中的變量，但它的使用和 CSS 中的自定義屬性（CSS變量）是一樣的，不同的是注冊方式：
// Chrome 78+
// 需要在 JavaScript腳本中注冊
CSS.registerProperty({
'name': '--custom-property-name',
'syntax': '<color>',
'initialValue': 'black',
'inherits': false
})
// Chrome 85+
// 在CSS文件中注冊
@property --custom-property-name {
'syntax': '<color>',
'initialValue': 'black',
'inherits': false
}
他的最大特色之一就是可以指定已注冊的 CSS 變量的類型、初始值，是否可繼承：
雖然它的使用方式和 CSS 的自定義屬性相似，但它要更強大，特別是在動效方面的使用，能增強 CSS 的動效能力，甚至實現一些以前 CSS 無法實現的動效。比如
@property --milliseconds {
syntax: '<integer>';
initial-value: 0;
inherits: false;
}
.counter {
counter-reset: ms var(--milliseconds);
animation: count 1s steps(100) infinite;
}
@keyframes count {
to {
--milliseconds: 100;
}
}
把它和 CSS Houdini 的 Paint API 結合起來，可做的事情更多：
更多這方向的效果可以在 houdini.how 網站上查閱：
CSS Houdini 中的 @property 和 Paint API 是對現在 CSS 能力的擴展，如果你對這方面感興趣的話，可以閱讀：
瀑布流是 Web 中經典布局之一。到目前為止依舊是 JavaScript 實現的瀑布流布局為主要技術方案，雖然使用 CSS 技術在一定條件之下可以完成瀑布流布局，但其局限性也較大。在 CSS Grid 最新模塊中提供了原生的 CSS 瀑布流布局方案：
.masonry {
display: grid; gap: 20px;
grid: masonry / repeat(auto-fill, minmax(250px, 1fr));
}
但一直以來他還只是 Firefox 中的一個實驗屬性，還沒有看到其他瀏覽器有支持，但我期望在 2022 年的某一天能在主流瀏覽器上都能看到 CSS Grid 實現瀑布流的布局的效果。
上面列出的一些 CSS 新特性（也有新語法），具體有哪些新特性能在 2022 年中出現在瀏覽器中，還不得而知。上面的提到的一些特性其實已經在一個或多個瀏覽器中能體驗了。感興趣的可以自己嘗試一下。另外要特別提出的是，上面列的 CSS 屬性清單來自于社區有同行業專家以及我自己的一些積累和見解，如果有不對之處，歡迎一起探討。如果所列清單有遺漏，也歡迎大家分享出來。最后，希望上面的內容能幫助大家了解 CSS 的一些新東西，打開一些未知領域！謝謝！（^_^）
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
