Чувствительность CSS к регистру: классы и селекторы

Быстрый ответ

Имена классов в CSS-селекторах чувствительны к регистру. Например, .menuItem и .menuitem — это два разных селектора.

Пример:

<div class="menuItem">Элегантный</div>
<div class="menuitem">Обнаженный</div>

.menuItem {
  color: red;
  /* Нет, .menuItem, вы не покраснели. Это просто стили CSS.*/
}

Анализ чувствительности к регистру в CSS

HTML и CSS: разное взаимодействие с регистром

Хотя классы в HTML не чувствительны к регистру, в CSS селекторы классов, наоборот, регистрозависимы. Этот момент может вызвать путаницу, поэтому давайте подробнее рассмотрим эту особенность.

Подробнее об этом расскажет наш спикер на видео

Свойства CSS и их взаимодействие с регистром

С CSS-свойствами, их значениями, псевдоклассами и тегами элементов регистр не учитывается. Так, DISPLAY: BLOCK; и display: block; воспринимаются как одно и то же.

.block {
  DISPLAY: BLOCK;
  /* CSS: 'Понял, понял, услышал тебя с первого раза!' */
}

DOM и строгий режим

Браузеры в DOM могут менять поведение CSS. В стандартном режиме они рассматривают селекторы как регистрозависимые. В строгом же режиме все селекторы воспринимаются как регистронезависимые.

Будущие изменения CSS и игнорирование регистра

Технологический стандарт Selectors Level 4 вносит изменения: отыскание атрибутов становится возможным без учета регистра. Это показано ниже с применением флага "i".

/* Множество вариантов выбора — всегда здорово. */
input[value="BACON" i] { background-color: yellow; } /* CSS4 */
[class~="breakfast" i] { background-color: yellow; } /* CSS4 */

Визуализация — в стиле эмодзи!

Вообразим классы как двух различных людей:

## CSS-классы с учетом регистра:
💂‍♀️ Maggie: Реагирует только на "Maggie".
👱‍♀️ maggie: Это совершенно другой персонаж, откликается только на "maggie".

## Нечувствительность к регистру:
👮‍♀️Charlie: Отзывается как на "Charlie", так и на "charlie".

Руководство для разработчиков: навигация по чувствительности к регистру

Последовательность в наименовании

Несоответствие имен классов может вызвать проблемы с поддержкой кода. Очень важно придерживаться одинакового стиля наименования в HTML и CSS.

Использование современных doctype

В HTML следует использовать современный doctype, чтобы обеспечить стабильное поведение в различных браузерах.

Особенности работы с разными языками

Если вы работаете с XML или другими регистрозависимыми языками, учтите эту особенность.

Готовность к будущему

Ознакомьтесь с возможностями Selectors Level 4, чтобы быть в курсе предстоящих обновлений стандартов.

Потенциальные проблемы и пути их решения

Множество браузеров

Проверяйте ваши стили в различных браузерах, чтобы быть уверенным в их корректном отображении.

Согласованность в команде

Следуйте едним правилам наименования классов, чтобы избежать конфликтов и недопонимания в команде.

Управление динамическими классами

Проверяйте, что динамически создаваемые классы соответствуют регистру ваших стилей CSS.

Полезные материалы

1. Selectors Level 3 от W3C — официальное пособие по регистрозависимости селекторов.
2. Селекторы атрибутов на MDN — руководство по работе с селекторами атрибутов и их регистрозависимости.
3. Обсуждение регистрозависимости селекторов на Stack Overflow — мнения и опыт профессионального сообщества.
4. Использование классов и идентификаторов на HTML Dog — статья о безопасном использовании селекторов классов с учетом регистрозависимости.
5. Основы синтаксиса CSS на w3schools.com — понимание базовых правил CSS.
6. Can I use... — инструмент для проверки поддержки селекторов атрибутов без учета регистра в браузерах.
7. Доступный CSS на WebAIM — лучшие практики, включая использование селекторов с учетом регистрозависимости.