Как использовать веб-изображения и поддерживать сафари - PullRequest
Новая
       20

Как использовать веб-изображения и поддерживать сафари

0 голосов
/ 29 марта 2020

Я пытаюсь использовать изображения webp по всему сайту из-за лучшего сжатия. Однако я знаю, что сафари не поддерживает webp. Изображения загружаются с использованием background-image: url("img/img.webp). Затем я применяю другие background свойства.

Я понимаю, что тег <picture> можно использовать для отображения разных изображений в зависимости от поддержки браузера. Вот так. 

<picture>
    <source srcset="some_img.webp" type="image/webp">
    <img src="some_img.jpg"alt="">
</picture>

Однако было бы гораздо удобнее, если бы был способ сделать это, используя css, чтобы избавить меня от необходимости писать новый html и стилизацию для всех изображений.

Например, что-то вроде этого 

#image-id {
    background-image: url("../img/img.webp", "../img/img.jpeg"); // show jpeg if webp not supported 
}

Или, если это невозможно, возможно, что-то вроде этого 

@media only screen and (safari-specific-property:) {
    background-image: url("../img/img.jpeg"); // show jpeg for safari
}

Какое наилучшее решение для использования веб-изображений при поддержка поддержки браузера, которая в идеале использует css?

1 Ответ

1 голос
/ 29 марта 2020

интересных квестов здесь. Насколько я знаю, вы можете использовать либо каскад, либо @ support.

Давайте посмотрим, что произойдет, когда мы используем каскад: 

.bg {
 /*fallback */
 background-image: url("https://www.gstatic.com/webp/gallery/2.jpg")
 background-image: url("https://www.gstatic.com/webp/gallery/1.webp");
}

Это будет работать нормально, но браузеры, которые понимают JPG и WebP (которые составляют большинство) сделают два запроса, и это не оптимально.

Теперь давайте посмотрим на правило @supports at. 

@supports not (background-image: url("https://www.gstatic.com/webp/gallery/1.webp")) {
    .bg {
        background-image: url("https://www.gstatic.com/webp/gallery/2.jpg")
    }
}
.bg {
    background-image: url("https://www.gstatic.com/webp/gallery/1.webp");
}

Поскольку большинство браузеров поддерживает WebP Я думаю, что это решение идеально.

Браузеры, которые не поддерживают WebP, попадут в правило получения JPG. Затем они будут читать следующий стиль, который вызывает WebP, и, поскольку они не поддерживают эту функцию, они просто придерживаются JPG. Я хотел бы знать, можете ли вы попробовать это в браузере Safari.

Интересные ссылки:

https://css-tricks.com/how-supports-works/

https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/

...