vivo TWS Air開箱體驗：真輕 臻好聽
在vivo S15系列新機的發(fā)布會上，vivo的最新款真無線藍牙耳機vivo TWS Air也一同發(fā)布，本次就這款耳機新品給大家?guī)硪粋€簡單的分享。外包裝盒上，vivo TWS Air保持了vivo自家產(chǎn)
幾年前，消失的作用域 CSS，如今它回來了，而且比以前的版本要好得多。
更好的是，W3C規(guī)范基本穩(wěn)定，現(xiàn)在Chrome中已經(jīng)有一個工作原型。我們只需要社區(qū)稍微關(guān)注一下，引誘其他瀏覽器構(gòu)建它們的實現(xiàn)，并完成這項工作。
作用域為CSS帶來了兩個關(guān)鍵點：
局部樣式允許你在頁面上的單個組件內(nèi)包含一組樣式。你可以使用.title選擇器，它只在Card組件內(nèi)工作，并使用另一個.title選擇器，它只在 Accordion 中工作。你可以阻止一個組件的選擇器針對子組件中的元素，或者如果需要，也可以允許它們到達。
你不再需要BEM風(fēng)格的類名。
此外，近度在級聯(lián)中變成了一等公民。如果兩個組件針對同一個元素（具有相同的特異性），內(nèi)部組件的樣式將覆蓋外部組件的樣式。
一切都始于@scope規(guī)則和一個選擇器，如下：
@scope (.card) { /* 將以下樣式局限于`.card`內(nèi)部 */ :scope { padding: 1rem; background-color: white; } .title { font-size: 1.2rem; font-family: Georgia, serif; }}這些樣式都限制在.card元素中。:scope是一個特殊的偽類，針對.card元素本身，.title針對標(biāo)題內(nèi)部的標(biāo)題。
@scope規(guī)則本身不增加這些選擇器的特異性，所以它們都是(0, 1, 0)。是的，特異性仍然很重要，但這是好事??。稍后再說。
此時，你可以使用普通的后代選擇器來實現(xiàn)這一點。但當(dāng)你在范圍內(nèi)應(yīng)用內(nèi)部邊界或在頁面上重疊多個范圍時，新的、以前不可能的選項開始出現(xiàn)。讓我們看看它們是怎么做的...
假設(shè)你預(yù)計將其他組件放入你的Cards中，所以你不希望.title 選擇器針對除屬于Card的那個標(biāo)題之外的任何東西。為此，你在范圍上設(shè)置了一個內(nèi)部邊界，如下：
@scope (.card) to (.slot) { /* 限定的樣式只在`.card`內(nèi)部，但不在`.slot`內(nèi)部 */ :scope { padding: 1rem; background-color: white; } .title { font-size: 1.2rem; font-family: Georgia, serif; }}把這里的 to 關(guān)鍵字看作 直到：這個范圍是從.card到.slot定義的?，F(xiàn)在，沒有一個局限的選擇器會針對Card的.slot元素內(nèi)部的任何東西。所以你可以這樣構(gòu)建你的卡片：
<div class="card"> <h3 class="title">Moon lander</h3> <div class="slot"> <!-- 局部樣式不會針對這里的任何東西！ --> </div></div>范圍的影響受到了限制，使其不針對.slot內(nèi)的任何東西。這樣，你可以嵌套兩個范圍，每個范圍都可以使用相同的通用標(biāo)題類名，而不會發(fā)生沖突。實際上，你可能根本不再需要類名了：
@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 內(nèi)部放一個 Accordion，或者在 Accordion 內(nèi)部放一個Card，它們各自的樣式不會發(fā)生沖突。
這被俗稱為 甜甜圈范圍，因為范圍中有一個洞。（如果內(nèi)部邊界選擇器針對多個元素，它也可以有多個洞。）
Miriam Suzanne 建議使用這種方式是持續(xù)使用data-*屬性和屬性選擇器作為你的范圍：
@scope ([data-scope='media']) to (:scope [data-scope]) { /* 限定的樣式在這里 */}另一個方面是近度的概念：來自內(nèi)部范圍的樣式將覆蓋來自外部范圍的樣式。想象你有這樣兩個范圍：
@scope (.green) { p { color: green; }}@scope (.blue) { p { color: blue; }}將以下內(nèi)容應(yīng)用于HTML。這里沒有內(nèi)部范圍約束，所以兩個p選擇器都針對這里的內(nèi)部段落。在這種情況下，內(nèi)部范圍總是優(yōu)先：
<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平臺功能標(biāo)志。
你可以在DevTools中檢查，看到每個范圍是如何根據(jù)其最近的接近性來覆蓋另一個的：
本文鏈接：http://www.www897cc.com/showinfo-26-11849-0.html作用域 CSS 回來了，你知道嗎？
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號