Inne Funkcjonalności

Pod koniec dnia większość CSS składa się nie z seksownych, fantazyjnych funkcji, takich jak Grid czy animacje; ale z małych, często niszowych właściwości, które na pierwszy rzut oka mogą wydawać się bezużyteczne, ale potem pewnego dnia oszczędzają dziesiątki godzin pracy.

Zmienne CSS i kwerendy pomocnicze pasują do tej kategorii: będą rosły trochę dłużej, ale kiedy już w pełni wykorzystasz ich potencjał, będziesz się zastanawiać, jak sobie bez z nich radziłeś.

Rozmiar zewnętrznego okręgu okręgu odpowiada całkowitej liczbie użytkowników, którzy wiedzą o danej funkcji, podczas gdy wewnętrzna reprezentuje tych, którzy faktycznie z niej korzystali.

Najedź kursorem na każdy węzeł, aby wyświetlić szczegółowe dane wraz z nakładką reprezentującą całkowitą liczbę respondentów ankiety.

Kolumna „ogólna” pokazuje całkowite wykorzystanie dla każdej funkcji (respondenci, którzy wybrali „użyłem tego”), podczas gdy poniższe kolumny pokazują współczynnik wykorzystania dla każdego przedziału „lat doświadczenia”.

Jaśniejsze różowe tło wskazuje stosunek wyższy niż średnia dla danego nawiasu.

Lat Doświadczenia
ogólny
<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%
Różnica od ogólnego wykorzystania:
-20%-10%0+10%+20%

Variables

Procen ukończenia: 99.33% (11241)
Procen ukończenia: 99.33% (11241)
Procenty%IlośćΣ
Użyłem tego59.11%
Wiem co to jest ale tego nie używałem35.02%
nigdy o tym nie słyszałem/Nie jestem pewny co to jest5.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.

Dowiedz się więcej

@supports

Procen ukończenia: 99.38% (11247)
Procen ukończenia: 99.38% (11247)
Procenty%IlośćΣ
Użyłem tego36.63%
Wiem co to jest ale tego nie używałem35.97%
nigdy o tym nie słyszałem/Nie jestem pewny co to jest26.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.

Dowiedz się więcej

Contain

Procen ukończenia: 99.17% (11223)
Procen ukończenia: 99.17% (11223)
Procenty%IlośćΣ
Użyłem tego4.73%
Wiem co to jest ale tego nie używałem12.15%
nigdy o tym nie słyszałem/Nie jestem pewny co to jest82.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.

Dowiedz się więcej

will-change

Procen ukończenia: 99.24% (11231)
Procen ukończenia: 99.24% (11231)
Procenty%IlośćΣ
Użyłem tego23.59%
Wiem co to jest ale tego nie używałem17.84%
nigdy o tym nie słyszałem/Nie jestem pewny co to jest57.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.

Dowiedz się więcej

calc()

Procen ukończenia: 99.44% (11254)
Procen ukończenia: 99.44% (11254)
Procenty%IlośćΣ
Użyłem tego85.62%
Wiem co to jest ale tego nie używałem9.22%
nigdy o tym nie słyszałem/Nie jestem pewny co to jest4.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.

Dowiedz się więcej

70 hours of content for CSS, Javascript

Design+Code video courses to learn UI design, CSS, SwiftUI, React, React Native, Vue
Dziękujemy naszym partnerom za wsparcie! Dowiedz się więcej.