DevGang
Авторизоваться

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

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

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

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

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

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

background-image: image('myimage.webp#xywh=338,324,360,390');

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

Метод Image Types

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

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

.help::before {
  content: image("try.avif", "try.webp", "try.jpg");
}

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

Источник:

#CSS
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

Поделитесь своим опытом, расскажите о новом инструменте, библиотеке или фреймворке. Для этого не обязательно становится постоянным автором.

Попробовать

Оплатив хостинг 25$ в подарок вы получите 100$ на счет

Получить