На webref.ru вышло новое руководство от Уилла Бойда, посвящённое псевдоэлементам ::before и ::after.

Рассказано, что это такое и как ими пользоваться и приведены примеры использования этих псевдоэлементов — создание декоративных заголовков, оформление цитат с помощью кавычек, изменение маркеров списка, анимация и другие темы.

htmlbook.ru перешёл на хостинг Beget. Переход был вызван наобходимостью снижения расходов и повышения надёжности и скорости работы сайта.

Сама смена хостинга должна была пройти незаметно и без всяких остановок работы, но если, тем не менее, возникнут какие-то проблемы с доступом к сайту или его работой, дайте знать. Пишите на ящик vlad@htmlbook.ru или в комментариях.

На webref.ru добавлен новый курс CSS-анимация для начинающих. Это перевод книги CSS Animation 101 от Донована Хатчинсона.

В книге рассмотрены следующие темы:

• переходы — теория, практика, множественные переходы для одного элемента, использование JavaScript;
• функции времени;
• анимация — теория, практика, ключевые кадры, несколько анимаций сразу;
• анимация элементов при прокрутке веб-страницы.

Всё сопровождается примерами с CodePen, так что можно не только посмотреть примеры в работе, но и внести в них какие-то изменения.

Без анимации сейчас ни один сайт не обходится, так что изучать эту тему надо обязательно.

Элемент <meter> применяется для визуального представления числа в заданном диапазоне. <meter> прекрасно стилизуется, хотя браузеры используют для этой цели свои специфические наборы псевдоэлементов. На мой взгляд, <meter> используют необоснованно редко, хотя это простой, наглядный и легко стилизуемый элемент.

На webref.ru вышел курс посвящённый стилизации <meter>. В нём рассматривается как его использовать, как стилизовать под Firefox, Chrome и другие браузеры. Чем хорош <meter>, так это тем, что на нём можно отработать практически все приёмы вёрстки. Поэтому рассмотрены следующие темы:

• градиенты;
• тени;
• трансформация;
• вывод атрибутов.

К каждому уроку приводятся задания на закрепление материала и задачи для самостоятельного решения. В конце курса можно пройти финальную викторину.

Для изменения вида маркеров в списке издавна используется приём с псевдоэлементом ::before. Для начала скрываем исходные маркеры через свойство list-style.

li { list-style: none; }

Затем добавляем свои маркеры с помощью комбинации ::before и свойства content.

li::before {
 content: '►';
}

Большой популярностью пользуется справочник HTML, поэтому обновил локальную версию, которая не требует подключения к Интернету и пользоваться ей можно даже в деревне. Был бы компьютер только.

Все примеры со всеми картинками теперь можно смотреть сразу в браузере!

Вот форма сразу для оплаты. Справочник стоит 59 рублей (с учётом комиссии обойдётся рублей в 65 примерно); как обычно, считайте это поддержкой сайта, чтобы в будущем были новые учебные курсы и руководства. Без вашей поддержки ничего этого не будет.

Кто уже приобретал, обновление должно прийти автоматом, лишний раз платить ничего не нужно.

Сделал небольшой видеоролик, посвящённый довольно редко используемому псевдоэлементу ::first-line. Как вам такой формат рассказа о CSS? Запланировано ещё несколько подобных видео.

На сайте webref.ru обновился справочник HTML. На самом деле изменения в справочник вносятся постоянно и в какой-то момент их количество становится столь велико, что об этом можно заявить отдельно.

Итак, что стало нового.

• Нет акцента на HTML5. Раньше такие элементы выделялись специальным значком, а в описании говорилось об их принадлежности к HTML5. Теперь все элементы между собой равны и каким-либо образом не разделяются.
• Появилась отдельная группа с устаревшими элементами HTML. Обязательно указывается что элемент устарел, использовать его не нужно и показана современная альтернатива в виде другого элемента или CSS.
• Обновилась таблица браузеров, где указана версия, начиная с которой идёт поддержка элемента или его атрибута.
• Дополнены некоторые описания элементов и их атрибутов.
• Обновлены ссылки на спецификацию HTML. W3C отказалась от поддержки HTML5 и передала эти полномочия WHATWG. Теперь у нас нет HTML 5.3, а есть просто живой стандарт.
• Примеры это отдельная тема. Результат примера сразу же отображается в браузере и видно как этот элемент HTML будет выглядеть в действительности. Каждый пример буквально одной кнопкой можно скопировать в буфер, а затем вставить код в свой любимый редактор. Также через кнопки можно переправить код примера в популярные песочницы JSFiddle и CodePen, где, опять же, доработать под свои нужды.

Выравнивание текста появилось в CSS ещё в первой версии и в каком-то смысле копировало возможности текстовых редакторов.

В текстовых абзацах выравнивание по умолчанию происходит по левому краю, а правый же край остаётся неровным, в виде «лесенки». Для большинства текстов это смотрится вполне естественно, да и читать вполне комфортно (рис. 1).

Рис. 1. Текст, выровненный по умолчанию

Сделал публичный канал Телеграма, куда уже некоторое время выкладываю всякие рецепты, советы и мысли по поводу HTML, CSS и вёрстке. Так что присоединяйтесь!