[Résolu] <picture><source srcset="" media=""> mais avec @s

Bonjour

Existe-t-il un équivalent à

<source srcset="" media="">

mais avec "supports" ?
Genre

<source srcset="" supports="">

, afin de cibler un navigateur.
Et sinon comment faire pour changer l'image en fonction du navigateur ?

Thx

Bonjour,

Avec picture et source, il y a déjà les mécanismes en place pour se passer de @supports :

- le navigateur qui ne comprend pas picture (donc pas source non plus) va prendre en compte l'élément img
- le navigateur qui comprend les 2 s'arrête au 1er élément source qui remplit les conditions (de media et de type d'image). S'il n'en comprend aucune, idem que précédemment il prendra en compte l'élément img

Seul écueil : lorsqu'il s'arrête au 1er source qui lui convient ; il ne vérifie pas si l'image existe ou pas. Il va la charger et si c'est 404 (l'image n'existe pas) bah tant pis, il n'ira pas chercher un autre source ou tenter la voie de l'img. C'est 404 point barre (je te laisse tester pour vérifier mes dires). EDIT: il faut donc bien s'assurer que les images existent ; ce n'est pas différent d'un élément img tout seul.

Pour revenir à source : tu as des Media Queries sur la résolution (largeur, pourquoi pas hauteur), sur la densité de pixels (Retina et cie). Tu as également le type de l'image pour par exemple préférer le format AVIF sinon WebP sinon JPEG. type="image/webp"
Modifié par Felipe (10 Dec 2021 - 16:11)

Ca ne suffit pas pour ce que souhaite faire.

Mon but est "esthétique".
Depuis Safari 15 la barre d'url et de titre s'adapte à la couleur de fond du site (noir pour moi). Aussi ai-je dans cette condition passé ma barre de menu dans cette même couleur noire (@supports dans CSS).
Mais j'aimerais que le fond de mon logo (qui est dans la barre de menu) passe aussi dans cette couleur noire (image différente du coup). Et je ne vois pas comment faire.

Bonjour,

kerlutinoec a écrit :
Ca ne suffit pas pour ce que souhaite faire.

Mon but est "esthétique".
Depuis Safari 15 la barre d'url et de titre s'adapte à la couleur de fond du site (noir pour moi). Aussi ai-je dans cette condition passé ma barre de menu dans cette même couleur noire (@supports dans CSS).
Mais j'aimerais que le fond de mon logo (qui est dans la barre de menu) passe aussi dans cette couleur noire (image différente du coup). Et je ne vois pas comment faire.

Si safari supporte bien mix-blend-mode, tu peut tenter d'injecter via un @supports sur une règle spécifique à safari un style du genre :

img#logo {mix-blend-mode:darken; }

Ou un autre des 15 modes dispo qui conviendront à ton fond noir et les couleurs du logo, cela peut-être un color-dodge, un screen, etc. ... mais probablement pas un multiply.
Pour un seul navigateur et une image spécifique sur un fond de couleur connu, cela me parait jouable.

Cdt

Merci pour l'idée mais je n'ai trouvé aucun effet satisfaisant

Oups je n'ai pas donné la solution finalement adoptée !
J'ai fini par faire un truc pas très propre où les deux logos (le clair et le noir) sont tous les deux insérés l'un sur l'autre. Et l'un ou l'autre est masqué avec un @supports...
Heureusement ces deux logos sont légers et n'apparaissent pas en mode mobile.

Au fait, ça a un intérêt de marquer comme résolu ou pas ?