7月安卓手機好評榜：三星S23Ultra好評率第一
性能榜和性價比榜之后，我們來看最后的安卓手機好評榜，數據來源安兔兔評測，收集時間2023年7月1日至7月31日，僅限國內市場。第一名：三星Galaxy S23 Ultra好評率：95.71%在即將迎來新
幾年前，消失的作用域 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定義的。現在，沒有一個局限的選擇器會針對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中檢查，看到每個范圍是如何根據其最近的接近性來覆蓋另一個的：
這里的問題是，選擇器的特異性仍然是優先的，所以如果外部范圍以比內部更高的特異性針對一個元素，外部范圍的樣式將會應用。
這樣，當兩個范圍針對同一個元素時，你可以控制哪一個優先。而不是總是讓內部范圍贏，你可以調整選擇器的特異性，使得更高特異性的選擇器優先，不管它屬于哪個范圍。
當你不希望這種行為時，你有幾種方法可以防止它。你可以使用級聯層來使一個組件——或者一個組件的某些部分——優先于另一個。或者，你可以應用一個內部范圍約束到外部范圍，以防止它發生。在嘗試了一段時間的范圍后，我覺得這是一個正確的平衡。它給了你最大的控制權，而不是讓你受制于級聯的一套嚴格的規則。
如果你開發過大型應用，并且不得不依賴 CSS-in-JS 庫來防止類名沖突，作用域 CSS是個很好的選擇。如果你使用了復雜的BEM類名系統，并努力使所有的選擇器特異性保持一致，想想這可以帶來的自由。如果你曾經使用過shadow DOM來隔離樣式，但覺得它過于重手，這是一個更好的方法（當然，shadow DOM仍然有它的用途）。
以下只是我會嘗試的一些想法：
到目前為止，Chrome 似乎已經支持了—他們已經有了第一個工作原型幾個月了。它可能稍微落后于規范的最新變化，所以如果你玩一下，要留意一些即將到來的小變化。
本文鏈接：http://www.tebozhan.com/showinfo-26-11849-0.html作用域 CSS 回來了，你知道嗎？
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號