Dites, question CSS :

Perderais-je la boule ?

Je croyais que si une image n'Ă©tait pas disponible, CSS basculait sur la derniĂšre image disponible.

Exemple :

.toto {
background-image: url("titi.png");
background-image: url("tutu.png");
}

LĂ  mon navigateur n'affiche pas titi.png alors que tutu.png n'existe pas.

Follow

Vous souvenez-vous de ma question CSS sur les background-image ? (voir ce présent fil.)

Eh bien je viens d'utiliser tout bĂȘtement la syntaxe :

.toto {
background-image: url("titi.png"), url("toto.png");
}

Si le positionnement et la rĂ©pĂ©tition sont uniques, les images vont toutes se placer au mĂȘme endroit en s'empilant (titi au-dessus, toto en-dessous).

De fait, dans mon cas, si titi est en 404, c'est toto que je verrais, en « pseudo » fallback.

Essayez sur developer.mozilla.org/fr/docs/

· · Web · 1 · 0 · 1

@emmanuelc Je n'osais pas proposer ça l'autre jour, je n'étais pas trop sûr qu'on puisse le faire.

(Disclaimer : je ne fais presque plus de CSS depuis des années.)

Super !

@accessiblestef Bon, la contrepartie est que si les deux images sont présentes, j'en charge deux pour le prix d'une.
Et il ne faut pas que celle du dessus soit transparente sinon on verra la superposition.

@emmanuelc Oui c'est ce que je regardais Ă  l'instant sur MDN.
Amusant.

@accessiblestef Et c'est aussi mon cas de figure :-) Un SVG avec transparence et un PNG en-dessous.

@emmanuelc Oui donc en fait ça ne résout pas ton problÚme finalement ?

@accessiblestef ça l'aurait rĂ©solu la semaine derniĂšre mais il n'a plus lieu d'ĂȘtre aujourd'hui 🙂

@emmanuelc Tiens tu savais que « _ » dans un nom de classe fait planter Netscape 4 ?
đŸ€Ą

@accessiblestef Je n'ai plus souvenir de ça (j'ai commencé à l'époque de Netscape 3.2).

@emmanuelc Je te le laisse, des fois que tu en aies besoin dans moins 21 ans.

Sign in to participate in the conversation
La Quadrature du Net - Mastodon - Media Fédéré

Mamot.fr est une serveur Mastodon francophone, géré par La Quadrature du Net.