自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

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

作者：成長(zhǎng)的程序世界
開發(fā) 前端
用于定義元素的內(nèi)容（如圖像、文本、圖形等）與其底層背景或其他元素的內(nèi)容混合的方式。這個(gè)屬性主要應(yīng)用于疊加效果，允許元素的顏色數(shù)據(jù)與它所在堆疊上下文中的底層元素顏色數(shù)據(jù)進(jìn)行數(shù)學(xué)運(yùn)算，生成新的混合顏色結(jié)果。

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

CSS 對(duì)象模型

CSS.escape

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

圖片圖片

引用

  • 官方文檔 [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特性，那你找對(duì)人了。

圖片圖片

在.css文件里面也是同樣支持的，殊途同歸， 比如 檢測(cè)瀏覽器是否支持 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]

當(dāng)用戶手動(dòng)導(dǎo)航或者 CSSOM scrolling API 觸發(fā)滾動(dòng)操作時(shí)，CSS[6] 屬性 scroll-behavior 為一個(gè)滾動(dòng)框指定滾動(dòng)行為。

直接上療效：

圖片圖片

當(dāng)然你通過 Element: scrollIntoView 也能達(dá)到相同的效果

const element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({ block: "end" });
element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });

那css有什么優(yōu)勢(shì)嗎， 不會(huì)報(bào)錯(cuò)。曾幾何時(shí)，遇到過scrollIntoView不支持 behavior，就報(bào)錯(cuò)異常。

引用

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

accent-color

為某些元素所生成的用戶界面控件設(shè)置了強(qiáng)調(diào)色[9], 比如 原生的checkbox, radio, progress, range等 選中時(shí)的顏色。

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

圖片圖片

aspect-ratio

用于設(shè)置元素的縱橫比（寬度與高度的比例）。這個(gè)屬性允許你為元素定義一個(gè)固定的寬高比，即使元素的高度或?qū)挾任达@式指定，也可以保持預(yù)期的形狀比例。

圖片圖片

引用：aspect-ratio | MDN [10]

caret-color

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

圖片圖片

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

此外，你也可以自定義光標(biāo)圖片達(dá)到類似效果。

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

引用：caret-color[11]

mix-blend-mode

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

經(jīng)典的demo可以參見 張?chǎng)涡?大佬的 mix-blend-mode濾色screen混合模式[12]

圖片圖片

引用： mix-blend-mode[13]

resize

用于設(shè)置元素是否可調(diào)整尺寸，以及可調(diào)整的方向。

圖片圖片

引用：resize | MDN[14]

object-position[15]

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

圖片圖片

object-fit

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

圖片圖片

ruby-position

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

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

圖片圖片

引用：

  • ruby-position[24]

CSS 函數(shù)

color-mix 函數(shù)

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

再簡(jiǎn)單點(diǎn)， 兩個(gè)顏色經(jīng)過一定規(guī)則混合到新的顏色。

圖片圖片

再看一個(gè)高級(jí)的應(yīng)用 調(diào)色板[25]

圖片圖片

參考引用

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

clamp 函數(shù)[28]

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

作為動(dòng)態(tài)調(diào)節(jié)內(nèi)容大小，是不是一種很好的手段呢？

圖片圖片

功能特性

@scope

借助 @scope @ 規(guī)則，開發(fā)者可以將樣式規(guī)則的作用域限定為給定的范圍根，并根據(jù)該范圍根的鄰近度來設(shè)置元素的樣式。

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

除了最基本的限定能力：

圖片圖片

你還可以用style節(jié)點(diǎn)來達(dá)到類似的效果：樣式僅對(duì)該元素及其后代元素生效，不會(huì)影響到文檔的其他部分

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

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

圖片圖片

參考引用

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

@layer

@layer 規(guī)則在 CSS 中用于聲明一個(gè)層疊層，并在存在多個(gè)層疊層的情況下定義它們的優(yōu)先級(jí)順序

如下面的圖示， 按照傳統(tǒng)， state層中的 ·alert 的css權(quán)重顯然是低于 layer層 .app .alert 的，但是不好意思， state的優(yōu)先級(jí)比 layer 層高, 所以背景色是藍(lán)色。

只能說，給人無限遐想。

圖片圖片

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

@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]強(qiáng)調(diào)色: 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]調(diào)色板: 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 函數(shù): 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 規(guī)則: 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

責(zé)任編輯：武曉燕 來源： 成長(zhǎng)的程序世界
CSS選擇器字符
相關(guān)推薦

2014-06-17 09:37:33

極限編程XP

2021-07-14 11:25:12

CSSPosition定位

2022-04-28 12:17:26

瀏覽器連字符hyphens

2020-09-08 08:27:25

JavaScript模塊ECMAScript

2009-02-16 19:33:09

2021-10-19 14:49:49

CSS前端

2023-05-12 14:49:47

CSS框架前端

2017-06-02 10:01:53

2024-11-08 08:34:59

RocketMQ5.Remoting通信

2021-03-05 18:38:45

ESvue項(xiàng)目

2021-04-27 07:52:18

跳槽數(shù)據(jù)分析

2020-01-03 10:11:01

數(shù)據(jù)庫安全SQL

2020-06-03 08:53:40

CSS偽類 JS

2021-10-25 14:55:38

Linux技巧命令

2021-07-20 05:37:17

項(xiàng)目面試簡(jiǎn)歷

2015-10-26 09:19:28

PHP經(jīng)驗(yàn)

2021-05-17 05:36:02

CSS 文字動(dòng)畫技巧

2021-03-29 09:37:17

SpringBoot常用注解Spring Boot

2017-10-13 15:06:18

數(shù)據(jù)庫PostgreSQL特性

2010-08-24 10:32:00

點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)