Одиниці виміру та селектори

Ми готові посперечатися, що в цьому розділі ви знайдете щось нове для себе!

Одиниці виміру
Відсоток заповнення: 82.8% (9513)
Відсоток заповнення: 82.8% (9513)

Експорт
Відсотки%
КількістьΣ

Які з цих одиниць виміру CSS ви використовували?

0.02.0k4.0k6.0k8.0k10k0.02.0k4.0k6.0k8.0k10kКількість користувачівexexininmmmmcmcmchchptptvmin, vmaxvmin, vmaxremremememvh, vwvh, vw%%pxpx71283697618613623375487118713900791399432

Псевдоелементи
Відсоток заповнення: 81.9% (9408)
Відсоток заповнення: 81.9% (9408)

Експорт
Відсотки%
КількістьΣ

Які з цих CSS-псевдоелементів ви використовували?

0.02.0k4.0k6.0k8.0k10k0.02.0k4.0k6.0k8.0k10kКількість користувачів::backdrop::backdrop::marker::marker::first-line::first-line::first-letter::first-lette…::selection::selection::placeholder::placeholder::after::after::before::before1242293739164048669692959314

Комбінатори
Відсоток заповнення: 81.8% (9398)
Відсоток заповнення: 81.8% (9398)

Експорт
Відсотки%
КількістьΣ

Які з цих CSS-комбінаторів ви використовували?

0.02.0k4.0k6.0k8.0k10k0.02.0k4.0k6.0k8.0k10kКількість користувачівdiv ~ div (комбінатор сусідства)div ~ div (ко…div + div (комбінатор безпосереднього сусідства)div + div (ко…div > span (комбінатор безпосереднього потомка)div > span (к…div span (комбінатор нащадка)div span (ком…6404769891579190

Структура дерева/документа
Відсоток заповнення: 81.8% (9396)
Відсоток заповнення: 81.8% (9396)

Експорт
Відсотки%
КількістьΣ

Які з цих CSS-селекторів, пов'язаних зі структурою документа, ви використовували?

0.02.0k4.0k6.0k8.0k10k0.02.0k4.0k6.0k8.0k10kКількість користувачів:is():is():only-child:only-child:empty:empty:nth-last-of-type():nth-last-of-…:last-of-type:last-of-type:first-of-type:first-of-typ…:root:root:nth-of-type():nth-of-type(…:nth-last-child():nth-last-chi…:not():not():last-child:last-child:nth-child():nth-child():first-child:first-child1995311939644656547357725985689269817861886590249067
Ми попросили учасників CSS-спільноти поділитися своїм "вибором року".

Мій вибір у 2020 році:Content-Visibility

Властивість content-visibility вже зараз істотно підвищує продуктивність моїх веб-додатків, однак разом з цим я вважаю, що такою оптимізацією повинні займатися браузери, а не розробниками.

Ми попросили учасників CSS-спільноти поділитися своїм "вибором року".

Kilian Valkhof

Веб-розробник і творець Polypane

Атрибути
Відсоток заповнення: 74.9% (8608)
Відсоток заповнення: 74.9% (8608)

Експорт
Відсотки%
КількістьΣ

Які з цих CSS-селекторів атрибутів ви використовували?

0.02.0k4.0k6.0k8.0k0.02.0k4.0k6.0k8.0kКількість користувачівdiv[foo$="bar"] (закінчується на)div[foo$="bar…div[foo~="bar"] (містить певний набір слів)div[foo~="bar…div[foo*="bar"] (містить певний підрядок)div[foo*="bar…div[foo^="bar"] (починається з)div[foo^="bar…div[foo] (має певний атрибут)div[foo] (має…div[foo="bar"] (має певний атрибут зі значенням)div[foo="bar"…379141584544551676118197

Посилання/URL-адреси
Відсоток заповнення: 65.8% (7557)
Відсоток заповнення: 65.8% (7557)

Експорт
Відсотки%
КількістьΣ

Які з цих CSS-селекторів псевдокласів, пов'язаних з посиланнями, ви використовували?

0.01.0k2.0k3.0k4.0k5.0k6.0k7.0k0.01.0k2.0k3.0k4.0k5.0k6.0k7.0kКількість користувачів:local-link:local-link:any-link:any-link:target:target:link и :visited:link и :visi…56738086922

Взаємодія
Відсоток заповнення: 82.6% (9489)
Відсоток заповнення: 82.6% (9489)

Експорт
Відсотки%
КількістьΣ

Які з цих CSS-селекторів взаємодії ви використовували?

0.02.0k4.0k6.0k8.0k10k0.02.0k4.0k6.0k8.0k10kКількість користувачів:focus-visible:focus-visibl…:focus-within:focus-within:active:active:focus:focus:hover:hover20812919897892189460

Управління полями форми
Відсоток заповнення: 74.5% (8559)
Відсоток заповнення: 74.5% (8559)

Експорт
Відсотки%
КількістьΣ

Які з цих CSS-селекторів форми ви використовували?

0.02.0k4.0k6.0k8.0k0.02.0k4.0k6.0k8.0kКількість користувачів:user-invalid:user-invalid:in-range и :out-of-range:in-range и :…:indeterminate:indeterminat…:placeholder-shown:placeholder-…:default:default:read-only и :read-write:read-only и …:valid и :invalid:valid и :inv…:required и :optional:required и :…:enabled и :disabled:enabled и :d…:checked:checked4559461587201926083791397966647903
« Назад: Інші можливостіВперед: Технології »
Візуалізація даних зроблена за допомогою Nivo. Сайт розміщено на Netlify.
Є питання? Знайшли помилку? Створіть ішью. Заходьте до нас в Discord-чат.
Натисніть option/alt, щоб активувати режим перекладача.