Колись у мене був такий бос, який улюблене, улюблене, улюблене, улюблене наголошувати слова. Це було ще до того, як ми використовували редактори 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>
(Давайте не будемо вдаватися до кольорів, які він використовував для навіть МОАР наголос.)
Написання такої розмітки ніколи не було чудовим. Звісно, будь-яких зусиль. Але чи доцільно додавати перевантажений вміст подвійним — чи навіть більше! — акценти?
Різні теги передають різний акцент
Для початку, <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>
Візуалізація чудова! І неважливо, в якому порядку вони розташовані… принаймні в сучасних браузерах. Про це згадує Дженніфер Кірнін деякі браузери відображають лише найближчий до тексту тег, але я ніде не стикався з цим у своїх обмежених тестах. Але є на що звернути увагу!
Причина, чому я не вставляю одну форму наголосу в іншу, полягає в тому, що вона просто не потрібна. Немає жодного граматичного правила, яке б цього вимагало. Подібно до знаків оклику, достатньо однієї форми наголосу, і ви повинні використовувати ту, яка відповідає тому, що ви прагнете, чи то візуальне, вагоме чи оголошене наголос.
І навіть незважаючи на те, що деякі програми зчитування з екрана здатні повідомляти про виділений вміст, вони не читатимуть розмітку з будь-якою додатковою важливістю чи акцентом. Тож, наскільки я можу судити, жодних додаткових переваг доступності.
Але я дуже хочу, щоб всі акценти!
Якщо ви перебуваєте в такому положенні, коли ваш бос схожий на мене і хоче ALL акцент, я б знайшов правильний тег 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);
}
Тоді я, ймовірно, використав би той фрагмент із останнього розділу, який видаляє стиль курсиву за замовчуванням з елемента, коли він вкладений в інший елемент, виділений курсивом.
Ще щось?
Mayyyyybe:
- Розповсюдження контенту та PR на основі SEO. Отримайте посилення сьогодні.
- Платоблокчейн. Web3 Metaverse Intelligence. Розширені знання. Доступ тут.
- джерело: https://css-tricks.com/the-double-emphasis-thing/
- 1
- 11
- 7
- 9
- 98
- a
- доступність
- рахунки
- Додатковий
- адреса
- адреси
- впливати
- зачіпає
- після
- ВСІ
- тільки
- вже
- Америка
- та
- оголошений
- Оголошуючи
- Інший
- де-небудь
- Застосовувати
- аватар
- назад
- фон
- оскільки
- перед тим
- буття
- Краще
- Біт
- сміливий
- border
- Бос
- Box
- театральна каса
- браузер
- браузери
- бюджет
- Виклики
- здатний
- випадок
- випадків
- Зміни
- заміна
- classic
- color
- контакт
- містить
- зміст
- CSS
- дефолт
- оборони
- оборонний
- призначений
- різний
- Ні
- Не знаю
- подвійний
- зусилля
- або
- елементи
- акцент
- підкреслити
- підкреслив
- величезний
- досить
- Весь
- помилки
- Навіть
- приклад
- Приклади
- експрес
- додатково
- бої
- Рисунок
- Перший
- позначений прапором
- після
- форма
- від
- отримати
- дає
- дає
- Глобально
- Go
- буде
- добре
- великий
- обробляти
- допомога
- тут
- Виділіть
- виділивши
- HTML
- HTTPS
- ідея
- ідентифікувати
- значення
- важливо
- in
- інформація
- розуміння
- замість
- IT
- Дженніфер
- останній
- обмеженою
- Лінія
- трохи
- місць
- Довго
- подивитися
- made
- зробити
- РОБОТИ
- позначити
- Матерія
- сенс
- вимір
- згадує
- може бути
- мільйона
- сучасний
- Імпульс
- більше
- фільм
- кіно
- NAB
- Необхідність
- Гніздо
- нормальний
- На північ
- Північна Америка
- номера
- Пропозиції
- Office
- ONE
- відкриття
- порядок
- Інше
- частина
- продуктивність
- надбавки
- телефон
- фізичний
- місце
- plato
- Інформація про дані Платона
- PlatoData
- ігри
- Plenty
- точок
- положення
- ймовірно
- захищений
- суто
- досягати
- Читати
- читачі
- причина
- червоний
- запам'ятати
- надання
- REST
- утримує
- Правило
- то ж
- Екран
- програми зчитування з екрана
- розділ
- семантика
- сенс
- пропозиція
- комплект
- Повинен
- просто
- ситуація
- So
- деякі
- що в сім'ї щось
- Звучати
- Source
- Як і раніше
- стрес
- сильний
- стиль
- Запропонує
- Super
- передбачуваний
- TAG
- Тести
- Команда
- Джерело
- річ
- речі
- times
- назва
- до
- TONE
- занадто
- правда
- терміново
- використання
- попередження
- годинник
- уїк-енд
- важать
- вага
- Що
- Чи
- в той час як
- ВООЗ
- волі
- в
- без
- слова
- б
- лист
- Ти
- вашу
- зефірнет