Здравствуйте, уважаемые читатели 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