6月iOS設備好評榜：第一蟬聯榜首近一年
作為安兔兔各種榜單里變化最小的那個，2023年6月的iOS好評榜和上個月相比沒有任何排名上的變化，僅僅是部分設備好評率的下降，長年累月的用戶評價和逐漸退出市場的老款機器讓這
幾年前，消失的作用域 CSS，如今它回來了，而且比以前的版本要好得多。
更好的是，W3C規范基本穩定，現在Chrome中已經有一個工作原型。我們只需要社區稍微關注一下，引誘其他瀏覽器構建它們的實現，并完成這項工作。
作用域為CSS帶來了兩個關鍵點：
局部樣式允許你在頁面上的單個組件內包含一組樣式。你可以使用.title選擇器，它只在Card組件內工作，并使用另一個.title選擇器，它只在 Accordion 中工作。你可以阻止一個組件的選擇器針對子組件中的元素，或者如果需要，也可以允許它們到達。
你不再需要BEM風格的類名。
此外，近度在級聯中變成了一等公民。如果兩個組件針對同一個元素（具有相同的特異性），內部組件的樣式將覆蓋外部組件的樣式。
一切都始于@scope規則和一個選擇器，如下：
@scope (.card) { /* 將以下樣式局限于`.card`內部 */ :scope { padding: 1rem; background-color: white; } .title { font-size: 1.2rem; font-family: Georgia, serif; }}這些樣式都限制在.card元素中。:scope是一個特殊的偽類，針對.card元素本身，.title針對標題內部的標題。
@scope規則本身不增加這些選擇器的特異性，所以它們都是(0, 1, 0)。是的，特異性仍然很重要，但這是好事??。稍后再說。
此時，你可以使用普通的后代選擇器來實現這一點。但當你在范圍內應用內部邊界或在頁面上重疊多個范圍時，新的、以前不可能的選項開始出現。讓我們看看它們是怎么做的...
假設你預計將其他組件放入你的Cards中，所以你不希望.title 選擇器針對除屬于Card的那個標題之外的任何東西。為此，你在范圍上設置了一個內部邊界，如下：
@scope (.card) to (.slot) { /* 限定的樣式只在`.card`內部，但不在`.slot`內部 */ :scope { padding: 1rem; background-color: white; } .title { font-size: 1.2rem; font-family: Georgia, serif; }}把這里的 to 關鍵字看作 直到：這個范圍是從.card到.slot定義的?，F在，沒有一個局限的選擇器會針對Card的.slot元素內部的任何東西。所以你可以這樣構建你的卡片：
<div class="card"> <h3 class="title">Moon lander</h3> <div class="slot"> <!-- 局部樣式不會針對這里的任何東西！ --> </div></div>范圍的影響受到了限制，使其不針對.slot內的任何東西。這樣，你可以嵌套兩個范圍，每個范圍都可以使用相同的通用標題類名，而不會發生沖突。實際上，你可能根本不再需要類名了：
@scope (.card) to (.slot) { h3 { font-size: 1.2rem; font-family: Georgia, serif; }}@scope (.accordion) to (.slot) { h3 { font-family: Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 0.01em; }}你可以在 Card 內部放一個 Accordion，或者在 Accordion 內部放一個Card，它們各自的樣式不會發生沖突。
這被俗稱為 甜甜圈范圍，因為范圍中有一個洞。（如果內部邊界選擇器針對多個元素，它也可以有多個洞。）
Miriam Suzanne 建議使用這種方式是持續使用data-*屬性和屬性選擇器作為你的范圍：
@scope ([data-scope='media']) to (:scope [data-scope]) { /* 限定的樣式在這里 */}另一個方面是近度的概念：來自內部范圍的樣式將覆蓋來自外部范圍的樣式。想象你有這樣兩個范圍：
@scope (.green) { p { color: green; }}@scope (.blue) { p { color: blue; }}將以下內容應用于HTML。這里沒有內部范圍約束，所以兩個p選擇器都針對這里的內部段落。在這種情況下，內部范圍總是優先：
<div class="green"> <p>我是綠色的</p> <div class="blue"> <p>我是藍色的</p> </div></div><div class="blue"> <p>我是藍色的</p> <div class="green"> <p>但我是綠色的</p> </div></div>注意這目前只在Chrome中有效，需要在chrome://flags中啟用實驗性Web平臺功能標志。
你可以在DevTools中檢查，看到每個范圍是如何根據其最近的接近性來覆蓋另一個的：
本文鏈接：http://www.www897cc.com/showinfo-26-11849-0.html作用域 CSS 回來了，你知道嗎？
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號