當前位置：首頁 > 科技 > 軟件

這些CSS特性，我知道, 但是 You don't

來源：責編：時間：2024-04-02 17:13:13 244觀看

導讀春花秋月何時了，CSS 新舊事知多少？CSS 對象模型CSS.escape確保字符串中的特殊字符在CSS選擇器中能正確解析，避免因特殊字符導致的選擇器匹配問題。比如，對<div id="#id"></div>使用 querySelector進行查詢。圖片引用官方

春花秋月何時了，CSS 新舊事知多少？

CSS 對象模型

CSS.escape

確保字符串中的特殊字符在CSS選擇器中能正確解析，避免因特殊字符導致的選擇器匹配問題。比如，對<div id="#id"></div>使用 querySelector進行查詢。

圖片

引用

官方文檔 [The CSS.escape() Method](https://www.w3.org/TR/cssom-1/#the-css.escape( "The CSS.escape() Method")-method)
MDN CSS: escape() static method[1]

CSS.support

如果想通過JS代碼知道瀏覽器是否支持某些css特性，那你找對人了。

圖片

在.css文件里面也是同樣支持的，殊途同歸，比如檢測瀏覽器是否支持 flex

@supports ( display: flex ) {    // 支持flex使用如下代碼  body, #navigation, #content { display: flex; }  #navigation { background: blue; color: white; }  #article { background: white; color: black; }}@supports not ( display: flex ) {  // 不支持使用如下代碼  body { width: 100%; height: 100%; background: white; color: black; }  #navigation { width: 25%; }  #article { width: 75%; }}

引用

Feature queries: the @supports rule[2]
CSS Conditional Rules Module Level 3 # ref-for-dom-css-supports[3]
CSS: supports() static method - Web APIs | MDN[4]

CSS 屬性

scroll-behavior[5]

當用戶手動導航或者 CSSOM scrolling API 觸發滾動操作時，CSS[6] 屬性 scroll-behavior 為一個滾動框指定滾動行為。

直接上療效：

圖片

當然你通過 Element: scrollIntoView 也能達到相同的效果

const element = document.getElementById("box");element.scrollIntoView();element.scrollIntoView(false);element.scrollIntoView({ block: "end" });element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });

那css有什么優勢嗎，不會報錯。曾幾何時，遇到過scrollIntoView不支持 behavior，就報錯異常。

引用

scroll-behavior | MDN[7]
CSS Overflow Module Level 3 # smooth-scrolling[8]

accent-color

為某些元素所生成的用戶界面控件設置了強調色[9], 比如原生的checkbox, radio, progress, range等選中時的顏色。

下面的實例就是原生checkbox<input type="checkbox" />設置不同的accent-color時，被選中的不同表現。

圖片

aspect-ratio

用于設置元素的縱橫比（寬度與高度的比例）。這個屬性允許你為元素定義一個固定的寬高比，即使元素的高度或寬度未顯式指定，也可以保持預期的形狀比例。

圖片

引用：aspect-ratio | MDN [10]

caret-color

來定義插入光標的顏色。這在需要凸顯鼠標聚焦的時候，就非常有用了。

圖片

如果再支持，設置一下尺寸就完美了。

此外，你也可以自定義光標圖片達到類似效果。

.custom-cursor {     cursor: url('path/to/my-custom-cursor.png'), auto; }

引用：caret-color[11]

mix-blend-mode

用于定義元素的內容（如圖像、文本、圖形等）與其底層背景或其他元素的內容混合的方式。這個屬性主要應用于疊加效果，允許元素的顏色數據與它所在堆疊上下文中的底層元素顏色數據進行數學運算，生成新的混合顏色結果。

經典的demo可以參見張鑫旭大佬的 mix-blend-mode濾色screen混合模式[12]

圖片

引用： mix-blend-mode[13]

resize

用于設置元素是否可調整尺寸，以及可調整的方向。

圖片

引用：resize | MDN[14]

object-position[15]

規定了可替換元素[16]的內容在其內容框中的位置。哪些是常見的可替換元素呢？ `[17]， ``[18] ， ``[19]， ``[20]都是。

圖片

object-fit

屬性指定可替換元素[21]（例如：``[22] 或 ``[23]）的內容應該如何適應到其使用高度和寬度確定的框。和background-size有類似的作用。

圖片

ruby-position

來展示東亞文字注音或字符注釋。通常配合ruby標簽使用，用實例看療效。

下面的例子就是把注解從上面弄到了下面。

圖片

引用：

ruby-position[24]

CSS 函數

color-mix 函數

函數表示法接受兩個 color 值作為參數，并通過指定的數量，在特定的顏色空間中將它們混合，最后返回混合得到的新顏色結果。

再簡單點，兩個顏色經過一定規則混合到新的顏色。

圖片

再看一個高級的應用調色板[25]

圖片

參考引用

CSS 官方 Mixing Colors: the color-mix() Function[26]
color-mix() | MDN[27]

clamp 函數[28]

把一個值限制在一個上限和下限之間，當這個值超過最小值和最大值的范圍時，在最小值和最大值之間選擇一個值使用。它接收三個參數：最小值、首選值、最大值。 clamp() 被用在 ``[29]、``[30]、``[31]、``[32]、``[33]、``[34]、``[35] 中都是被允許的。

作為動態調節內容大小，是不是一種很好的手段呢？

圖片

功能特性

@scope

借助 @scope @ 規則，開發者可以將樣式規則的作用域限定為給定的范圍根，并根據該范圍根的鄰近度來設置元素的樣式。

借助 @scope，您可以根據鄰近度替換樣式，這與常見的 CSS 樣式不同，后者僅根據源代碼順序和特異性應用。

除了最基本的限定能力：

圖片

你還可以用style節點來達到類似的效果：樣式僅對該元素及其后代元素生效，不會影響到文檔的其他部分

<parent-element>  <style>    @scope {      rulesets    }  </style></parent-element>

此外還具備起始的限定能力，一圖勝千文。藍色區域就是查找的范圍。

圖片

參考引用

CSS 官方文檔 Scoping Styles: the @scope rule[36]
MDN CSS/@scope[37]
chome CSS @scope 規則[38]
Chrome 118：CSS @scope 規則來了！[39]

@layer

@layer 規則在 CSS 中用于聲明一個層疊層，并在存在多個層疊層的情況下定義它們的優先級順序

如下面的圖示，按照傳統， state層中的 ·alert 的css權重顯然是低于 layer層 .app .alert 的，但是不好意思， state的優先級比 layer 層高, 所以背景色是藍色。

只能說，給人無限遐想。

圖片

還可以將多個樣式塊分配給同一個層 (layer)。在下面的例子中，headings.css 和 links.css 文件中的內容與 audio[controls] 規則一起層疊在同一層內。

@import url(headings.css) layer(default);@import url(links.css) layer(default);@layer default {  audio[controls] {    display: block;  }}

引用：

CSS 官方 CSS Cascading and Inheritance Level 5 # Cascade Layers[40]
MDN CSS @layer[41]

參考資料

[1]CSS: escape() static method: https://developer.mozilla.org/en-US/docs/Web/API/CSS/escape_static

[2]Feature queries: the @supports rule: https://www.w3.org/TR/css-conditional-3/#at-supports

[3]CSS Conditional Rules Module Level 3 # ref-for-dom-css-supports: https://drafts.csswg.org/css-conditional-3/#ref-for-dom-css-supports

[4]CSS: supports() static method - Web APIs | MDN: https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports_static

[5]scroll-behavior: https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-behavior

[6]CSS: https://developer.mozilla.org/zh-CN/docs/Web/CSS

[7]scroll-behavior | MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-behavior

[8]CSS Overflow Module Level 3 # smooth-scrolling: https://drafts.csswg.org/css-overflow/#smooth-scrolling

[9]強調色: https://developer.mozilla.org/zh-CN/docs/Glossary/Accent

[10]aspect-ratio | MDN : https://developer.mozilla.org/zh-CN/docs/Web/CSS/aspect-ratio

[11]caret-color: https://developer.mozilla.org/zh-CN/docs/Web/CSS/caret-color

[12]mix-blend-mode濾色screen混合模式: https://www.zhangxinxu.com/wordpress/2019/05/css-mix-blend-mode-screen/

[13]mix-blend-mode: https://developer.mozilla.org/zh-CN/docs/Web/CSS/mix-blend-mode

[14]resize | MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/resize

[15]object-position: https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-position

[16]可替換元素: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Replaced_element

[17]<iframe>: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe

[18]<video>: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video

[19]<embed>: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/embed

[20]<img>: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img

[21]可替換元素: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Replaced_element

[22]<img>: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img

[23]<video>: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video

[24]ruby-position: https://developer.mozilla.org/en-US/docs/Web/CSS/ruby-position

[25]調色板: https://developer.mozilla.org/en-US/blog/color-palettes-css-color-mix

[26]Mixing Colors: the color-mix() Function: https://www.w3.org/TR/css-color-5/#color-mix

[27]color-mix() | MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix

[28]clamp 函數: https://developer.mozilla.org/en-US/docs/Web/CSS/clamp

[29]<length>: https://developer.mozilla.org/zh-CN/docs/Web/CSS/length

[30]<frequency>: https://developer.mozilla.org/zh-CN/docs/Web/CSS/frequency

[31]<angle>: https://developer.mozilla.org/zh-CN/docs/Web/CSS/angle

[32]<time>: https://developer.mozilla.org/zh-CN/docs/Web/CSS/time

[33]<percentage>: https://developer.mozilla.org/zh-CN/docs/Web/CSS/percentage

[34]<number>: https://developer.mozilla.org/zh-CN/docs/Web/CSS/number

[35]<integer>: https://developer.mozilla.org/zh-CN/docs/Web/CSS/integer

[36]Scoping Styles: the @scope rule: https://www.w3.org/TR/css-cascade-6/#scoped-styles

[37]MDN CSS/@scope: https://developer.mozilla.org/en-US/docs/Web/CSS/@scope

[38]CSS @scope 規則: https://developer.chrome.com/blog/new-in-chrome-118?hl=zh-cn#css-scope

[39]https://mp.weixin.qq.com/s?__biz=Mzk0MDMwMzQyOA==&mid=2247499238&idx=1&sn=a0512d49d3834d198ef7d517925b4057&chksm=c2e108cdf59681db5d038e53e6a8243945188537bc1e83da3f695dd531c09e1a24bb8a39bb37&=1638573446&=zh_CN#rd: https://link.juejin.cn/?target=https%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMzk0MDMwMzQyOA%3D%3D%26mid%3D2247499238%26idx%3D1%26sn%3Da0512d49d3834d198ef7d517925b4057%26chksm%3Dc2e108cdf59681db5d038e53e6a8243945188537bc1e83da3f695dd531c09e1a24bb8a39bb37%26%3D1638573446%26%3Dzh_CN%23rd

[40]CSS Cascading and Inheritance Level 5 # Cascade Layers: https://www.w3.org/TR/css-cascade-5/#layering

[41]MDN CSS @layer: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer

本文鏈接：http://m.www897cc.com/showinfo-26-80819-0.html這些CSS特性，我知道, 但是 You don't

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： Java并發：如何避免死鎖

下一篇：到2028年，AR和VR市場預計將達到2520億美元

標簽：

熱門焦點

7月安卓手機好評榜：三星S23Ultra好評率第一

性能榜和性價比榜之后，我們來看最后的安卓手機好評榜，數據來源安兔兔評測，收集時間2023年7月1日至7月31日，僅限國內市場。第一名：三星Galaxy S23 Ultra好評率：95.71%在即將迎來新
7月安卓手機性價比榜：努比亞+紅魔兩款新機入榜

7月登場的新機有努比亞Z50S Pro和紅魔8S Pro，除了三星之外目前唯二的兩款搭載超頻版驍龍8Gen2處理器的產品，而且努比亞和紅魔也一貫有著不錯的性價比，所以在本次的性價比榜單
Flowable工作流引擎的科普與實踐

一.引言當我們在日常工作和業務中需要進行各種審批流程時，可能會面臨一系列技術和業務上的挑戰。手動處理這些審批流程可能會導致開發成本的增加以及業務復雜度的上升。在這
量化指標是與非：挽救被量化指標扼殺的技術團隊

作者 | 劉新翠整理 | 徐杰承本文整理自快狗打車技術總監劉新翠在WOT2023大會上的主題分享，更多精彩內容及現場PPT，請關注51CTO技術棧公眾號，發消息【WOT2023PPT】即可直接領取
深度探索 Elasticsearch 8.X：function_score 參數解讀與實戰案例分析

在 Elasticsearch 中，function_score 可以讓我們在查詢的同時對搜索結果進行自定義評分。function_score 提供了一系列的參數和函數讓我們可以根據需求靈活地進行設置。近期
.NET 程序的 GDI 句柄泄露的再反思

一、背景1. 講故事上個月我寫過一篇如何洞察 C# 程序的 GDI 句柄泄露文章，當時用的是 GDIView + WinDbg 把問題搞定，前者用來定位泄露資源，后者用來定位泄露代碼，后面有朋友反
7月4日見！iQOO 11S官宣：“雞血版”驍龍8 Gen2+200W快充加持

上半年已接近尾聲，截至目前各大品牌旗下的頂級旗艦都已悉數亮相，而下半年即將推出的頂級旗艦已經成為了數碼圈爆料的主流，其中就包括全新的iQOO 11S系
最薄的14英寸游戲筆記本電腦 Alienware X14已可以購買

2022年1月份在國際消費電子展(CES2022)上首次亮相的Alienware新品——Alienware X14現在已經可以購買了，這款筆記本電腦被譽為世界上最薄的 14 英寸游戲筆
由于成本持續增加，筆記本產品價格預計將明顯上漲

根據知情人士透露，由于材料、物流等成本持續增加，筆記本產品價格預計將在2021年下半年有明顯上漲。進入6月下旬以來，全球半導體芯片缺貨情況加劇，顯卡、處理器

日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

這些CSS特性，我知道, 但是 You don't

CSS 對象模型

CSS.escape

CSS.support

CSS 屬性

scroll-behavior[5]

accent-color

aspect-ratio

caret-color

mix-blend-mode

resize

object-position[15]

object-fit

ruby-position

CSS 函數

color-mix 函數

clamp 函數[28]

功能特性

@scope

@layer

參考資料

7月安卓手機好評榜：三星S23Ultra好評率第一

7月安卓手機性價比榜：努比亞+紅魔兩款新機入榜

Flowable工作流引擎的科普與實踐

量化指標是與非：挽救被量化指標扼殺的技術團隊

深度探索 Elasticsearch 8.X：function_score 參數解讀與實戰案例分析

.NET 程序的 GDI 句柄泄露的再反思

7月4日見！iQOO 11S官宣：“雞血版”驍龍8 Gen2+200W快充加持

最薄的14英寸游戲筆記本電腦 Alienware X14已可以購買

由于成本持續增加，筆記本產品價格預計將明顯上漲

最新推薦

猜你喜歡

熱門推薦

相關資訊