Другое

Интересные функции и возможности CSS и CSS3: полезные советы и секреты

Lorem ipsum dolor

Каждые новые 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, просто необходимо досконально изучить применение таблицы стилей, и будет вам счастье.

Схожие статьи

Как правильно общаться с людьми на работе: основные ошибки и советы
Другое

Как правильно общаться с людьми на работе: основные ошибки и советы

Программа распознавания лиц: специфика технологии, сервисы и примеры
Другое

Программа распознавания лиц: специфика технологии, сервисы и примеры

Что такое StackOverflow ошибка: раскрываем тайну
Другое

Что такое StackOverflow ошибка: раскрываем тайну

Типы данных в С — bool, boolean и enum: сравнение и их возможности
Другое

Типы данных в С — bool, boolean и enum: сравнение и их возможности