@Alexander9229

Webp — как подставлять через псевдоэлементы ::after / ::before и при необходимости заменять на jpg / png?

Всем известно, что данный формат не кроссбраузерный, но сейчас он очень сильно нужен.

Нашел статью как его можно выводить с помощью background-image css - кому будет интересно

Мне в проекте некоторые изображения приходиться выводить через before или after, НО есть браузер НЕ поддерживает webp, то соответственно оно пропадает.

Как можно сделать, что если webp не выводиться, то подставить другой актуальный формат?
Есть ли статья на данную тему или решение?
  • Вопрос задан
  • 161 просмотр
Решения вопроса 1
UnluckySerivelha
@UnluckySerivelha
Определяем, поддерживает ли браузер webp

https://stackoverflow.com/questions/5573096/detect...

Если не поддерживает, добавляем body класс, например "no-webp".

В CSS по умолчанию ставим webp изображение, при отсутствии поддержки заменяем на png/jpg

.block {
  background-image: url('img.webp');
}

body.no-webp .block {
  background-image: url('img.png');
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
29 мар. 2024, в 17:14
4000 руб./за проект
29 мар. 2024, в 17:04
5000 руб./за проект
29 мар. 2024, в 17:03
3000 руб./за проект