Каждые новые CSS-функции делают таблицу стилей более функциональной, но в то же время более сложной. Нельзя не отметить тот факт, что глубокие знания CSS позволяют в некоторых случаях исключать из разработки JavaScript функции. Сегодня мы расскажем об этих случаях, когда новые возможности CSS3 позволяют использовать меньше кода JS. ОТ этого выигрывают все:
разработчикам, не владеющим JavaScript, становится легче разрабатывать различные крутые визуальные эффекты;
сайты работают быстрее.
Новые функции CSS сравнивают с JavaScript-возможностями в плане визуальных эффектов. Такие сравнения вызывают новые споры, ведь новые возможности HTML + CSS поднимают вопрос о признании этих технологий полноценными языками программирования. До сих пор кто-то считает эти технологии языками программирования, а кто-то продолжает настаивать, что это не языки программирования. Мы не участвуем в этом споре, но приведем новые функции CSS, которые заставляют сравнивать таблицу стилей с JavaScript.
Новые функции CSS
HTML, CSS и JavaScript уже давно тесно взаимодействует в веб-программировании. Никто эту связку нарушать не собирается. Однако новые функции и возможности CSS немного «потеснили» JavaScript. Большинство веб-разработчиков видят в таком «вытеснении» только плюсы, потому что CSS как технология для визуальных эффектов считается надежнее, чем JS. Вот почему:
с CSS реже возникают проблемы, например, если вы напишите неправильный CSS-код, тогда он просто «игнорируется», а ваше веб-приложение продолжает работать;
с JavaScript совсем все по-другому, например, если вы напишите скрипт с ошибкой, то это может привести к отказу всего веб-приложения;
CSS-эффекты реализовать проще, чем JS.
Получается, что неаккуратное использование JS для стилизации веб-сайтов может привести к критическим ситуациям — это самый главный «плюс» в пользу использования CSS. Чуть ниже мы приведем некоторые наиболее интересные возможности и функции CSS.
Плавная прокрутка
Плавная прокрутка веб-страницы всегда смотрится приятно и необычно, по сравнению со стандартной. Раньше для ее реализации требовалось исключительно знание JavaScript. Теперь если нужна плавная прокрутка, тогда можно воспользоваться CSS-свойством «scroll-behavior».
Как это выглядит в коде:
html {
scroll-behavior: smooth;
}
Нужно учесть, что это свойство поддерживается только последними версиями популярных браузеров и вообще не поддерживается браузерами IE, Opera Mini, Baidu Browser, KaiOS Browser и мобильной версией Safari. Эта информация актуальна на момент написания статьи.
Закрепление элементов
Под закреплением элементов понимается свойство, когда элемент «крепится» на экране и не исчезает при прокрутке страницы. Раньше это достигалось только при помощи JS-скриптов и нескольких строк кода, а теперь при помощи CSS-свойства «position:sticky».
Как это выглядит в коде, если вы хотите закрепить «header» сайта вверху экрана:
header {
position: sticky;
top: 0;
}
Данное свойство поддерживается всеми последними версиями браузеров, кроме IE. При использовании этого свойства важно учитывать две его особенности:
оно «закрепляет» только тот элемент, к которому применяется,
«закрепленный» элемент будет «крепиться» только в пределах своего родительского блока.
Переменные в CSS
До определенного времени термины «переменные» и «CSS» были несовместимыми. Поэтому многие использовали препроцессоры типа Sass или Less, которые расширяют возможности стандартного CSS. Одним из таких «расширений» было внедрение переменных.
Внедрение переменных в стандартный CSS принесло много преимуществ, например:
для создания переменных больше не нужны препроцессоры;
код стал понятнее и «чище»;
разрабатывать таблицу стилей стало легче;
и др.
Для объявления переменной в CSS применяется сочетание 2-х тире (- -), а вызов переменной делается при помощи функции «var()». Как это выглядит в коде:
:root {
- - base: #000000
- -spacing: 20px;
- -blur: 20px;
}
.example {
margin: var(- -spacing);
color: var( - -base);
filter: blur(var(- -blur));
}
Анимация в CSS
Анимация в CSS поддерживается практически всеми современными браузерами. Раньше анимация была исключительно уделом JavaScript. Теперь анимировать блоки можно при помощи «чистого» CSS и декларации «transition». Анимацию можно запускать, основываясь на действиях пользователей, например:
при наведении курсора;
при клике;
через определенное время;
после того как курсор был перемещен с элемента;
и др.
Можно также запускать «зацикленную» анимацию при помощи правила «@keyframe». В этом случае анимация будет работать самостоятельно и не зависеть от действия пользователя. Подробно о внедрении анимации при помощи CSS мы напишем в следующих статьях.
Расчет значений
В возможности CSS внедрена интересная функция «calc()». С ее помощью можно производить простые математические расчеты CSS-свойств. Причем в расчетах можно смешивать разные величины, например: проценты и пиксели.
Допустим, у вас есть некий HTML-блок с классом «example» и вам нужно рассчитать его ширину и отступы с двух сторон по 25px. Тогда код будет таким:
.example {
width: calc(100% - 50px)
}
Улучшенные селекторы
Функции CSS пополнились улучшенными селекторами. Раньше были только основные селекторы, например:
сам элемент;
идентификатор элемента;
класс элемента.
Сейчас разнообразие селекторов увеличилось, например:
селектор первой буквы элемента «р» — «p::first-letter»;
селектор первой строки абзаца — «p::first-line»;
селекторы первого и последнего элемента — «elem:first-child» и «elem:last-child»;
селектор по порядковому номеру элемента, например, нам нужен 5-й элемент — «elem:nth-child(5)»;
селектор элемента по атрибуту — «elem[атрибут]»;
и др.
Применение расширенной вариации селекторов поддерживается всеми современными браузерами.
Заключение
На этом новые и интересные функции и возможности CSS не заканчиваются. Их очень много, ведь при помощи CSS можно взять под контроль практически все, что расположено на сайте, например:
счетчики и таймеры;
градиенты и изображения;
шрифты;
фон;
размеры блоков;
и многое-многое другое.
CSS-таблицы давно перестали быть просто таблицами стилей. У CSS уже есть собственные фреймворки для разработки сайтов, а при помощи «чистого» CSS создают очень сложные анимации. В общем, для тех, кто хочет стать крутым веб-разработчиком, но не тяготеет получить знания по JavaScript, просто необходимо досконально изучить применение таблицы стилей, и будет вам счастье.
Другое
