Новая функция CSS image

Новая функция CSS image

От автора: копаясь в спецификациях w3c, можно выявить множество интересных функций. Хотя некоторые из них еще не поддерживают браузеры, мы, по крайней мере, можем узнать, какие новые функции можно ожидать в ближайшее время.

Одна из новых функций — новая функция image(). Она даст нам больше контроля над загрузкой изображений в CSS. Давайте рассмотрим возможности совершенно новой функции изображений.

Обрезка изображений

Первое, что позволяет нам сделать функция image, это загрузить только часть изображения. Это означает, что вы можете обрезать и загрузить часть изображения с помощью CSS.

Для этого функция image принимает URL-адрес изображения и 4 других параметра: начальную позицию X, начальную позицию Y, ширину и высоту.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Новая функция CSS image

Это изящная функция, имитирующая старый способ спрайтов для работы с изображениями, метод, который более опытные веб-разработчики знали и использовали в прошлом, когда он был более популярным.

Метод типов изображений

Второе, что позволяет нам делать функция — это загружать разные типы изображений в зависимости от поддержки браузером. Например: файлы .webp изображений работают в Edge / Firefox / Chrome, но не работают в Safari.

В этом случае функция image() принимает массив изображений разных типов. Браузер просматривает массив в том порядке, в котором в нем записаны типы изображений, и использует первый поддерживаемый им тип изображения.

К сожалению, на данный момент новая функция изображений имеет нулевую поддержку. Дополнительную информацию можно найти на странице функций изображений в Mozilla.

Автор: Elad Shechter

Источник: medium.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Верстка-Мастер. Полное руководство

Овладейте современной адаптивной версткой с нуля

Подробнее

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.