Follow

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.

· · Web · 2 · 0 · 0

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/

@emmanuelc Tiens j'aurais dit comme toi aussi, avec la mécanique de _fallback_ de CSS.

@accessiblestef @emmanuelc Il faudrait relire la spec mais ça m'étonnerait beaucoup. La rÚgle c'est que la dernier déclaration valide l'emporte, rien de plus. Et dans ton cas, les deux rÚgles sont valides

@aspyrine Oui, ça se défendrait assez oui.

Sauf que :
```
color:red;
color:blue;
```

Ă  la fin ça donne du bleu. D'oĂč ma perplexitĂ©.

@emmanuelc

@aspyrine C'est ce qu'il vient de dire, oui 🙂

J'ai tenté en utilisant une extension fictive inconnue, et ça n'y change rien non plus.
Donc pas d'affichage de fallback.
J'aurais pourtant juré qu'on arrivait à faire ça autrefois, avec des navigateurs ne supportant pas tel format mais tel autre.

@accessiblestef

@emmanuelc une extension n'a jamais définit le content-type d'un document. Je peux servir un .jpg avec content-type: text/html sans aucun problÚme. Donc je vois pas trop ce que pourrais faire un navigateur à part garder une pile des background-image définis et fallback sur le précédent si ça répond >=400 (ou un content-type invalide). Et là t'as une montagne de nouveaux problÚmes auxquels je pense :) @accessiblestef

@emmanuelc en conclusion, je pense que tu étais sous influence de substances diverses quand tu as cru que ça existait :D @accessiblestef

@aspyrine Vu que @accessiblestef pensais la mĂȘme chose, il se peut qu'on Ă©tait tous les deux attablĂ©s autour d'un verre
 ou deux, ou
 une bouteille. Me souviens pu !

@emmanuelc @aspyrine → [EDIT] @ffoodd me dit par ailleurs car il n'a pas ses accĂšs sur lui : la propriĂ©tĂ© est valide, il devrait aller jusqu'Ă  la derniĂšre.

Il dit comme nous, quoi.

@accessiblestef

M'en fait te ficher un vieux :

voice-family: "\"}\"";

ça va pas traßner !

@aspyrine

@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.