Раньше у меня был этот босс, который любимый, любимый, любимый, любимый чтобы подчеркнуть слова. Это было задолго до того, как мы использовали редакторы WYSIWYG, и мне приходилось вручную кодировать это дерьмо.
<p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>
(Не будем вдаваться в цвета, которые он использовал даже для МОАР акцент.)
Писать всю эту разметку никогда не было здорово. Усилия для этого потребовались, конечно, какие угодно. Но стоит ли добавлять перегруженный контент с помощью double — или more! — акценты?
Разные теги передают разные акценты
Для начала, <strong>
и <em>
теги предназначены для различных целей. Мы вернули их в HTML5, где:
Итак, <strong>
придает содержанию больший вес в том смысле, что предполагает, что содержание в нем является важным или срочным. Подумайте о предупреждении:
Внимание! Следующий контент был помечен как отличный.
Может возникнуть соблазн достичь <em>
делать то же самое. В конце концов, выделенный курсивом текст может привлечь внимание. Но на самом деле это намек на то, чтобы сделать больший акцент при чтении содержания в нем. Например, вот две версии одного и того же предложения с ударением в разных местах:
<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>
Оба примера подчеркивают ударение, но на разных словах. И они звучали бы по-другому, если бы вы читали их вслух. Что делает <em>
отличный способ выразить тон в вашем письме. Это меняет смысл предложения таким образом, что <strong>
не.
Визуальный акцент против семантического акцента
Это две вещи, которые вы должны учитывать при подчеркивании содержания. Например, есть много случаев, когда вам может понадобиться выделить контент курсивом, не затрагивая смысла предложения. Но их можно обработать с помощью других тегов, отображающих курсив:
<i>
: Это классический! До HTML5 это использовалось для выделения курсивом повсюду. Теперь он используется исключительно для визуального выделения содержимого курсивом без изменения семантического значения.<cite>
: Указание источника факта или цифры. ("Источник: CSS-хитрости»)<address>
: используется для разметки контактной информации, не только физических адресов, но и таких вещей, как адреса электронной почты и номера телефонов. (
)
То же самое будет и с <strong>
. Вместо того, чтобы использовать его для стилизации текста, который вы хотите сделать более тяжелым, лучше использовать классический <b>
тег для выделения полужирным шрифтом, чтобы не придавать дополнительного значения контенту, который в нем не нуждается. И помните, некоторые элементы, такие как заголовки, уже выделены жирным шрифтом благодаря стилям браузера по умолчанию. Нет необходимости добавлять еще более сильный акцент.
Использование курсива в выделенном тексте (и наоборот)
Есть законные случаи, когда вам может понадобиться выделить курсивом часть строки, которая уже выделена. Или, может быть, добавить акцент к тексту, который уже выделен курсивом.
Цитата может быть хорошим примером. Я видел много раз, когда они выделены курсивом для стиля, хотя стили браузера по умолчанию этого не делают:
blockquote { font-style: italic;
}
Что, если нам нужно упомянуть название фильма в этой цитате? Это следует выделить курсивом. Акцент на ударении не нужен, поэтому <i>
тег подойдет. Но по-прежнему странно выделять что-то курсивом, когда оно уже отображено таким образом:
<blockquote> This movie’s opening weekend performance offers some insight in to its box office momentum as it fights to justify its enormous budget. In its first weekend, <i>Avatar: The Way of Water</i> made $134 million in North America alone and $435 million globally.
</blockquote>
В ситуации, когда мы выделяем курсивом что-то в выделенном курсивом контенте, подобном этому, мы должны убрать курсив из вложенного элемента… <i>
в этом случае.
blockquote i { font-style: normal;
}
Запросы в стиле контейнера будет очень полезно получить все эти экземпляры, если мы их получим:
blockquote { container-name: quote; font-style: italic;
} @container quote (font-style: italic) { em, i, cite, address { font-style: normal; }
}
Этот небольшой фрагмент кода оценивает цитату, чтобы определить, font-style
на italic
. Если это так, то он будет убедиться, что <em>
, <i>
, <cite>
и <address>
элементы отображаются как обычный текст, сохраняя при этом семантическое значение, если таковое имеется.
Но вернемся к акценту внутри акцента
я бы не стал гнездиться <strong>
внутри <em>
как это:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
…или гнездо <em>
внутри <strong>
вместо:
<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>
Рендеринг в порядке! И неважно, в каком порядке они расположены… по крайней мере, в современных браузерах. Дженнифер Кирнин упоминает, что некоторые браузеры отображают только ближайший к тексту тег, но я нигде не сталкивался с этим в своих ограниченных тестах. Но есть на что посмотреть!
Причина, по которой я не стал бы вкладывать одну форму ударения в другую, заключается в том, что она просто не нужна. Нет грамматического правила, которое требует этого. Как и в случае с восклицательными знаками, достаточно одной формы акцента, и вы должны использовать тот, который соответствует тому, что вам нужно, будь то визуальный эффект, вес или объявленный акцент.
И даже несмотря на то, что некоторые программы чтения с экрана способны объявлять выделенный контент, они не будут читать разметку с какой-либо дополнительной важностью или выделением. Так что никаких дополнительных привилегий доступа, насколько я могу судить, тоже нет.
Но очень хочется всем акцент!
Если вы находитесь в положении, когда ваш босс похож на меня и хочет BCE домен акцент, я бы выбрал правильный HTML-тег для типа акцента, а затем применил остальные стили с набором тегов, которые не влияют на семантику с помощью CSS, чтобы помочь учесть все, что стили браузера не обработают.
<style> /* If `em` contains `b` or `u` tags */ em:has(b, u) { color: #f8a100; }
</style> <p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>
Я мог бы даже сделать это с помощью <strong>
тег тоже в качестве защитной меры:
/* If `em` contains `b` or `u` tags */
em:has(b, u),
/* If `strong` contains `em` or `u` tags */
strong:has(i, u) { color: #f8a100;
}
Пока мы играем в защите, мы можем определить ошибки, в которых акценты вложены в акценты, выделив их красным цветом или чем-то еще:
/* Highlight semantic emphases within semantic emphases */
em:has(strong),
strong:has(em) { background: hsl(0deg 50% 50% / .25); border: 1px dashed hsl(0deg 50% 50% / .25);
}
Тогда я, вероятно, использовал бы тот фрагмент из последнего раздела, который удаляет стиль курсива по умолчанию из элемента, когда он вложен в другой элемент, выделенный курсивом.
Что-нибудь еще?
Может быть:
- SEO-контент и PR-распределение. Получите усиление сегодня.
- Платоблокчейн. Интеллект метавселенной Web3. Расширение знаний. Доступ здесь.
- Источник: https://css-tricks.com/the-double-emphasis-thing/
- 1
- 11
- 7
- 9
- 98
- a
- доступность
- Учетная запись
- дополнительный
- адрес
- адреса
- влиять на
- затрагивающий
- После
- Все
- в одиночестве
- уже
- Америка
- и
- объявило
- объявляющий
- Другой
- откуда угодно
- Применить
- аватар
- назад
- фон
- , так как:
- до
- не являетесь
- Лучшая
- Немного
- булавка
- граница
- Босс
- Коробка
- Театральная касса
- браузер
- браузеры
- бюджет
- Объявления
- способный
- случаев
- случаев
- изменения
- изменения
- классический
- цвет
- обращайтесь
- содержит
- содержание
- CSS
- По умолчанию
- Защита
- оборонительный
- предназначенный
- различный
- не
- Dont
- двойной
- усилие
- или
- элементы
- акцент
- подчеркивать
- подчеркнул
- огромный
- достаточно
- Весь
- ошибки
- Даже
- пример
- Примеры
- экспресс
- дополнительно
- бои
- фигура
- Во-первых,
- Помеченные
- после
- форма
- от
- получить
- дает
- Отдаете
- ГЛОБАЛЬНО
- Go
- будет
- хорошо
- большой
- обрабатывать
- помощь
- здесь
- Выделите
- выделив
- HTML
- HTTPS
- идея
- определения
- значение
- важную
- in
- информация
- понимание
- вместо
- IT
- Дженнифер
- Фамилия
- Ограниченный
- линия
- мало
- места
- Длинное
- посмотреть
- сделанный
- сделать
- ДЕЛАЕТ
- отметка
- Вопрос
- смысл
- проводить измерение
- упоминает
- может быть
- миллиона
- Модерн
- Импульс
- БОЛЕЕ
- кино
- Кино
- NAB
- Необходимость
- Nest
- "обычные"
- север
- Северная Америка
- номера
- Предложения
- Офис
- ONE
- открытие
- заказ
- Другое
- часть
- производительность
- надбавки
- Телефон
- физический
- Часть
- Платон
- Платон Интеллектуальные данные
- ПлатонДанные
- игры
- Много
- пунктов
- должность
- вероятно
- защищенный
- чисто
- достигать
- Читать
- читатели
- причина
- Red
- помнить
- оказание
- ОТДЫХ
- удерживающий
- Правило
- то же
- экран
- для чтения с экрана
- Раздел
- семантика
- смысл
- предложение
- набор
- должен
- просто
- ситуация
- So
- некоторые
- удалось
- Звук
- Источник
- По-прежнему
- стресс
- сильный
- стиль
- Предлагает
- супер
- предполагаемый
- TAG
- тестов
- Ассоциация
- Источник
- задача
- вещи
- раз
- Название
- в
- TONE
- слишком
- правда
- срочный
- использование
- предупреждение
- Смотреть
- уик-энд
- взвешивать
- вес
- Что
- будь то
- в то время как
- КТО
- будете
- в
- без
- слова
- бы
- письмо
- Ты
- ВАШЕ
- зефирнет