其他功能

概觀來看,CSS 的本體不是由誘人的、夢幻般的 Grid 或動畫所組成,到頭來還是渺小的、常常在第一眼看起來沒啥用處的偏門小眾屬性,可以節省下好幾個小時的工作。

CSS 變數和支援度查詢 (support queries) 就屬於此:它們得花些時間進入你的世界,不過,只要把握住全部潛力,反而會懷疑沒有它們時該怎麼辦。

外圍圓圈的大小代表知道某功能的使用者總數,而內圈代表實際在使用的人數。 將滑鼠移到節點上,就可以看到詳細資料,還有代表此問卷答題者總數的區塊

「全體」這欄顯示每一項技術的整體使用情況(也就是答題者選取了「會再使用」或「不會再使用」), 而接下來的幾欄是依照「資歷年數」分組的使用比例。

比較亮的粉紅色背景,代表該分組比全體平均比例還要高。

資歷年數
全體
<1
1~2
2~5
5~10
10~20
>20
calc()
79.83%
56.83%
75.76%
85.87%
89.09%
88.15%
83.29%
Variables
58.83%
51.98%
62.49%
60.03%
59.86%
57.41%
61.18%
@supports
33.93%
21.59%
23.72%
31.86%
38.78%
43.15%
44.47%
will-change
18.6%
5.29%
11.18%
19.23%
28.64%
27.74%
19.53%
Contain
4.4%
2.2%
3.66%
3.8%
5.01%
5.61%
6.12%
與全體使用情況的差距:
-20%-10%0+10%+20%

Variables

完成答題百分比 99.33% (11241)
完成答題百分比 99.33% (11241)
百分比%數量Σ
已經在用59.11%
知道是什麼,但沒用過35.02%
沒聽過/不確定那是什麼5.2%

CSS Custom Properties for Cascading Variables is a CSS module that allows for the creation of custom properties that can be used over and over.

@supports

完成答題百分比 99.38% (11247)
完成答題百分比 99.38% (11247)
百分比%數量Σ
已經在用36.63%
知道是什麼,但沒用過35.97%
沒聽過/不確定那是什麼26.78%

The @supports CSS at-rule lets you specify declarations that depend on a browser's support for one or more specific CSS features. This is called a feature query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule.

Contain

完成答題百分比 99.17% (11223)
完成答題百分比 99.17% (11223)
百分比%數量Σ
已經在用4.73%
知道是什麼,但沒用過12.15%
沒聽過/不確定那是什麼82.29%

The contain CSS property allows an author to indicate that an element and its contents are, as much as possible, independent of the rest of the document tree. This allows the browser to recalculate layout, style, paint, size, or any combination of them for a limited area of the DOM and not the entire page, leading to obvious performance benefits.

深入詳情

will-change

完成答題百分比 99.24% (11231)
完成答題百分比 99.24% (11231)
百分比%數量Σ
已經在用23.59%
知道是什麼,但沒用過17.84%
沒聽過/不確定那是什麼57.81%

The will-change CSS property hints to browsers how an element is expected to change. Browsers may set up optimizations before an element is actually changed.

calc()

完成答題百分比 99.44% (11254)
完成答題百分比 99.44% (11254)
百分比%數量Σ
已經在用85.62%
知道是什麼,但沒用過9.22%
沒聽過/不確定那是什麼4.6%

The calc() CSS function lets you perform calculations when specifying CSS property values. It can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.

70 hours of content for CSS, Javascript

Design+Code video courses to learn UI design, CSS, SwiftUI, React, React Native, Vue
感謝贊助我們的合作夥伴! 深入詳情。