Тестируем верстку статей webislife вместе с вами
Сегодня в рамках обновления сайта webislife.ru рассмотрим возможности верстки статей на сайте и что доступно авторам публикующим статьи, рассмотрим HTML5 теги и как они оформляются в статьях и где применяются. Данный пост можно считать как пользовательское руководство по оформлению статей на этом сайте
Гарнитуры шрифтов
Для заголовков используется шрифт с засечками Georgia , для текста используется без засечек Arial
Arial (sans-serif)
Arial — наиболее широко используемый шрифт как для онлайн, так и для печатных СМИ. Arial также является шрифтом по умолчанию в документах Google. Arial — один из самых безопасных веб-шрифтов, и он доступен во всех основных операционных системах.
Georgia (serif)
Georgia — элегантный шрифт с засечками. Он хорошо читается при разных размерах шрифта, поэтому он является хорошим кандидатом на дизайн, адаптированный для мобильных устройств.
Текстовое форматирование
Текстовое базовое форматирование основано на HTML5 тегах, в место CSS стилей
Строчные элементы
b
— жирныйu
— подчеркнутыйs
—зачеркнутыйi
— курсивныйq
—цитата
small
— маленький текстsup
— надстрочныйsub
— подстрочныйmark
— выделенный текстstrong
— важный текстsamp
— вывод компьютерной программыkbd
— ПРОБЕЛ обозначение кнопкиdel
—удаленный текстиз документаins
— добавленный текст в документcode
— Внутритекстовыйкод
dfn
— определениеabbr
— аббриватура
Блочные элементы
В блочные элементы входят все заголовки h1-h6
, а также:
details
— спойлер
Заголовок спойлера
текст под спойлером
pre
— блок кодаtypeof CustomElementRegistry;
blockquote
— блок цитаты
БлокЦитаты будет хорошо выглядеть
только если он имеет достаточно большую цитату на несколько строк, для коротких цитат есть тегq
Списки
Все просто есть нумерованные
- Нумерованный
- Список
Стандартные маркированные
- Маркированный
- Список
И с поддержкой emoji через атрибут data-listStyle
- Emoji тоже можно!
- Вот так)
- А что с вложенностью?
- с вложенностью
- все отлично
А на других площадках так можно? Простейшая поддержка при помощи CSS3
Спойлер
Для спойлеров используется тег details
Нажми, чтобы увидеть спойлер
Ура, спойлерить в статьях можно! Но скрыть одно/пару слов можно и abbr
илиdfn
тегами.
Можно спрятать код в спойлер, если его чтение опционально или затрудняет статью
CSS стили для dfn
под спойлером
/* Пример оформления dfn */ dfn { color: var(--color-blue-900); position: relative; } dfn:after { content: "*"; color: var(--color-blue-900); } dfn:after { content: "*"; color: var(--color-blue-900); } dfn::before { transition: all 0.2s ease; display: inline-block; position: absolute; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90vw; min-width: 50px; padding: 3px 6px; background-color: var(--color-blue-50); top:0; font-size: 0.9em; line-height: 0.9em; left: 50%; transform: translate(0, 0); } dfn:hover::before { content: attr(title); transform: translate(-50%, -110%); }
А вы знали?
Использование content: attr(title);
для псевдо-элемента dfn:hover::before
позволяет лучше поддерживать всплывающие подсказки, css всплывает быстрее и на мобильных платформах показывается в отличии от нативного title
Поддерживается подсветка синтаксиса для популярных языков программирования
<?php $foo_bar = array(["foo"] => "bar")
Блочные вставки кода блока подсвечиваются синтаксисом через веб-компонент и библиотеку highlight, пока пользователь не прокрутит экран до блока кода, ему даже не будет подгружен js необходимый для подсветки синтакиса! Модный ныне lazy hydration на фронтенде.
Конечно же вставка картинок как img
или с описанием картинки как figure>img+figcaption
Изображение сгенерированное нейросетью Midjourney
по запросу abstract dancing painting
Цитаты
Используем тег q
для коротких inline цитат
Есть такая фраза Я не слишком богат, чтобы покупать вещи дважды
— вы слышали?
Используем тег blockquote
для блока цитаты
БлокЦитаты — лучше использовать отдельно
Он лучше подходит для цитат и выдержек на несколько строк
Стили для браузеров
Добавлено 1 февраля 2023 Полезно при перечислении и упоминании браузеров и их поддержки
span.-browser.-chrome
Пример: актуальные версии браузеров на момент обновления статьи 109109 109 16.1 еще примеры в статьях смотрите тут.
Это еще не все
Скоро мы внедрим еще много интересных функциональностей и расскажем о нативных web-компонентах и технологиях на сайте, откроем API для продвинутых пользователей, добавим интерактивные элементы и еще много чего, но будем поддерживать итеративность процесса и обсуждать вместе с вами достоинства и недостатки решений. О всех замечаниях и дополнениях к верстке статей предлагаю обсуждать в комментариях.
p.s поддержку темной темы уже завозим и можно потестировать переключив настройки в ОС\Браузере
Последняя редакция 1 февраля, 2023 в 05:02