Школа
Веб-разработка

Когда в вёрстке неуместен КАПС?

9 мар 2023
👁 3961   🗩2
Веб-разработка

Когда в вёрстке неуместен КАПС?

9 мар 2023
👁 3961   🗩2
Игорь Петров
Разработчик, преподаватель Школы бюро
Полезно
 14
14
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Если в дизайне страницы что‑то написано КАПСОМ, то есть в верхнем регистре, не спешите писать так же в ХТМЛ‑разметке.

Когда что‑то по смыслу надо писать в верхнем регистре — пишите на здоровье: КПСС, ХТМЛ, ОАО, НФТ.

Но если верхний регистр используется как декоративный приём, то лучше в разметке написать нормально и изменить регистр ЦСС‑правилом text-transform: uppercase;

<h1>Электролюкс. Бентли в мире кондиционеров</h1>
h1 {
  text-transform: uppercase;
}

Электролюкс. Бентли в мире кондиционеров

Преимущества подхода:

  1. В поисковики и соцсети не протечёт неуместный «кричащий» текст. Текст из разметки попадает в выдачу поисковиков и иногда на превью страниц для соцсетей. Верхний регистр в этих местах обычно выглядит неуместным и неряшливым.

  2. Копирование текста со страницы станет удобнее. При выделении и копировании, копируется исходный текст из ХТМЛ‑разметки, без стилей. При вставке не придётся исправлять регистр и приводить текст к нормальному и читаемому виду.

  3. Вёрстка станет более гибкой. Верхний регистр можно будет быстро отключить по всему сайту, без необходимости переписывать кучу текста.

  4. Программы чтения с экрана адекватно прочитают текст. Текст в верхнем регистре программы прочитают как аббревиатуры: медленно и по буквам. Прослушивать и понимать, например, длинные заголовки в верхнем регистре будет крайне мучительно.

  5. Код станет чище и аккуратнее. Как и в сплошном тексте, капс в коде «кричит» и ворует внимание.

P. S. Лайфхак для мака: выделите текст и выберите в меню Edit → Transformations, чтобы быстро поменять регистр. Работает в большинстве мест, где можно вводить текст.

P. P. S.


P. P. P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
 14
14
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Евгений Арутюнов

А главное, так сохраняется информация о том, какие буквы заглавные, — и потом можно откатиться обратно без потерь. Повышение регистра в исходнике — это билет в один конец, нет способа автоматически вернуть любое предложение в sentence case без ошибок.

> При выделении и копировании, копируется исходный текст из ХТМЛ‑разметки, без стилей. При вставке не придётся исправлять регистр и приводить текст к нормальному и читаемому виду.

К сожалению, это работает только в Фаерфоксе, хоть спека и просит не копировать стили:
https://w3c.github.io/…‑text/#text‑transform‑property

Хром и Сафари копируют то, что видишь. Это баг Вебкита с начала времён (https://bugs.webkit.org/show_bug.cgi?id=43202), который заботливо скопировали в Хромиум (https://bugs.chromium.org/…/issues/detail?id=325231)

Вебкит там что‑то нарешал в 2018, но как это принято в мире рабочих групп, что там на самом деле никому непонятно: https://github.com/w3c/csswg-drafts/issues/627. Ждём фикса когда‑нибудь :)

P. S. В багтрекере Хромиума последнее обновление 3 дня назад от мейнтейнера (https://bugs.chromium.org/…/issues/detail?id=325231). Так что 🤞

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы