Тип - CSS-хитрощі

Anonim

Селектор типу (іноді його називають Селектором типу елемента) відповідає елементам із відповідним іменем вузла елемента, наприклад

, та теги. Зазвичай селектори типу використовуються для внесення змін до стилю веб-сайту.

p ( /* "p" is the type selector */ margin: 0 0 1em 0; )

Загальне використання

Часто селектори типів встановлюються за замовчуванням, наприклад, при скиданні CSS, де наміром є замінити за замовчуванням браузер. Приклад із першого рядка normalize.css, популярного скидання CSS:

article, aside, details, figcaption, figure, footer, header, main, nav, section, summary ( display: block; )

Селектори типів встановлюють властивість відображення цих тегів для блокування, так що будь-коли будь-який із цих тегів буде використовуватися на всьому сайті, вони відображатимуться як блоки, якщо не буде перезаписано більш конкретним стилем.

Кращі практики

Зазвичай вважається поганою практикою застосовувати зміни дрібних деталей лише за допомогою селектора типів. Наприклад, застосовувати властивість «колір: білий» просто до всіх тегів рідко було б чимось корисним на будь-якому веб-сайті. Це пояснюється тим, що теги є загальними і використовуються на всіх сайтах для різних цілей.

Однак, із вибором типу, наприклад body ( ), встановлення за замовчуванням font-size і line-heightє загальним. Це частково пов’язано з тим, що на будь-якій даній сторінці може бути лише один тег, тому можливостей для конфліктів менше.

Специфікація та продуктивність селектора типів

Селектори типів знаходяться на найнижчому рівні каскаду специфічності (зазвичай записується як 0, 0, 0, 1), що означає, що майже будь-що замінить стиль, застосований лише за допомогою селектора типів, і додає селектор типу до класу або ідентифікатора в ваш CSS забезпечує мінімальну додаткову специфічність.

Селектори типу також мають нижчий рейтинг за шкалою ефективності CSS, ніж класи та ідентифікатори. Тому технічно кращим вибором продуктивності є використання класу або ідентифікатора, а не більш загального селектора типів (хоча реальна різниця швидкості, як правило, незначна).

Підтримка браузера

Chrome Сафарі Firefox Опера IE Android iOS
Будь-який Будь-який Будь-який Будь-який Будь-який Будь-який Будь-який