Html5 2018: 5 новых возможностей HTML5 и CSS3, которые можно начать использовать в 2018 | XoZblog

27.04.2023 alexxlab

Содержание

5 новых возможностей HTML5 и CSS3, которые можно начать использовать в 2018 | XoZblog

Здравствуйте, уважаемые читатели XoZbloga! HTML и CSS непрерывно развиваются, предлагая разработчикам и веб-дизайнерам множество новых возможностей. Давайте посмотрим на 5 действительно интересных новых возможностей HTML и CSS для создания веб-сайтов в 2018 году.

1. Элемент <dialog>

Выпущенный вместе с новой спецификацией HTML 5.2 в декабре 2017 года, элемент <dialog> дает возможность разработчику создавать собственные диалоги на чистом HTML. А возможность использовать его вместе с элементом <form> с помощью указания атрибута method=’dialog’. Более подробно можно почитать здесь.

По состоянию на январь 2018 года <dialog> работает только в Chrome / Chrome mobile. А вот и пример использования:

See the Pen VQyJxd by Dmitry (@xozblog) on CodePen.

2. Умная прокрутка CSS scroll snap points

С помощью свойств CSS scroll snap можно настроить умную прокрутку содержимого блока. Допустим вы делаете горизонтальную галерею изображений в контейнере определенной ширины, то при прокрутке не будет учитываться в какой позиции находится содержимое и изображения будут обрезаны, новая возможность позволяет решить эту проблему.

К сожалению на данный момент такая возможность работает не во всех браузерах, следующий пример будет работать только в Firefox и Safari.

See the Pen CSS Scroll-snap DEMO by Dmitry (@xozblog) on CodePen.

3. Встроенный в <body> CSS

В новой спецификации HTML 5.2 встроенный в тело документа стиль CSS — нормальная практика. Не самая крутая новая возможности html на сегодня, но в некоторых случаях это может быть реальным облегчением.

1
2
3
4
5
6
7

<body>
<p>Здесь у нас какой-то рандомный текст для примера.</p>
<style>
p { color: #069; }
</style>
<p>А тут завершение этого текста.</p>
</body>

4. Переменные CSS

Препроцессоры CSS (LESS, SASS и пр.) давали возможность использовать переменные. Теперь такая возможность есть и в спецификации CSS.

Переменные CSS довольно хорошо реализованы и отлично работают в большинстве браузеров. Более подробную информацию можно найти на странице W3C.

Итак, вот простейший пример использования встроенных переменных CSS:

See the Pen Переменные CSS by Dmitry (@xozblog) on CodePen.

5. Проверка поддержки

Как видно из предыдущего примера, поддержка браузеров новых возможностей CSS по-прежнему остается большой проблемой. Относительно новая директива @supports позволяет разработчикам выполнять проверку поддержки браузерами конкретных свойств CSS. @supports в настоящее время поддерживается всеми браузерами, кроме Internet Explorer 11.

Пользоваться ей очень просто, пишем директиву @supports в скобках проверяемое свойство со значением и далее фигурные скобки с применяемым стилем. Также можно комбинировать проверку условием с использованием операторов or, and, not.

1
2
3
4
5
6

@supports (mix-blend-mode: overlay) and (scroll-snap-type: mandatory) {
.example {
mix-blend-mode: overlay;
scroll-snap-type: mandatory;
}
}

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

Источник статьи/урока: https://xozblog.ru

По материалам: https://www.catswhocode.com/blog/5-exciting-new-html-and-css-features-to-look-forward-to-in-2018

Правила перепечатки

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

Видео курс HTML5&CSS3 Starter — видео уроки по HTML5&CSS3 для начинающих на сайте ITVDN

О курсе

HTML5 и CSS3 — это фундаментальные технологии, без знания которых не обойтись любому верстальщику и веб-разработчику. С помощью языка гипертекстовой разметки HTML создается разметка (каркас) каждой интернет-страницы. Затем язык стилей CSS преображает сайт и придает ему привлекательный и эффектный внешний вид. Данный курс откроет для вас увлекательный мир верстки и предоставит базовые знания по созданию интернет-страниц.

Этот курс входит в специальности:

Frontend Developer Верстальщик сайтов React Developer UI/UX Designer Python Developer ASP. NET Core Developer ASP.NET MVC Developer PHP Developer Ruby Developer

Предварительные Требования

Курс подойдет любому новичку, который до этого ни разу не программировал и не был связан с IT.

Вы научитесь

Создавать простые HTML-страницы
Задавать различные стили элементам разметки
Верстать интернет-страницы, используя различные техники
Применять фреймворк Bootstrap 4 для верстки веб-страниц
Создавать формы с различными элементами
Публиковать созданные интернет-страницы на сервере

Скачать материалы курса Для получения материалов курса нужно авторизоваться

Получить сертификат Для получения сертификата нужно авторизоваться

Владимир Виноградов

Тренер-консультант, опытный front-end и back-end разработчик

Другие курсы автора

Длительность: 8 ч 0 м
Курс создан: 27. 02.2018
Уроков: 8
Обновлен: 11.04.2019
Язык: русский

Что входит в курс

8 видео уроков
Домашние задания
Тестирование
Сертификат
Консультация с тренером
Проверка ДЗ

СМОТРЕТЬ

Для прохождения теста нужно авторизироваться

Войти Регистрация

Вы открыли доступ к тесту! Пройти тест

Войдите или зарегестрируйтесь для того чтоб продолжить просмотр бесплатного видео

Войти Регистрация

№1

Введение в HTML5