Homogénéiser span et img

Je suis heureux de découvrir dans le document Comprendre la structure HTML et le rendu CSS des balises l'affirmation suivante :

a écrit :

Chaque élément (balise HTML) se caractérise par une double identité :
* Une structure HTML qui n'a "intrinsèquement" aucun rapport avec l'affichage de l'élément.
* Son rendu sur les navigateurs (affichage, positionnement, comportement). Il est défini par défaut selon le bon vouloir de chaque navigateur, et peut être modifiable à l'aide des styles CSS (en utilisant la propriété CSS "display"). Suivant la valeur de cette propriété (les plus fréquentes sont "block" et "inline"), l'élément s'affiche différemment sur le navigateur.

Ma question est la suivante : si le code HTML n'a aucun rapport avec l'affichage, je dois pouvoir prendre un élément (par exemple span) et lui donner les caractéristiques d'affichages par défaut d'un autre élément (par exemple image).

Pouvez-vous me donner le détail du style CSS que je dois appliquer à une balise span (in-line non remplacée) pour lui donner le même rendu qu'une balise img (in-line remplacé).

J'ai un petit doigt qui me dit que ce n'est pas possible, mais il me semble contraire au principe de CSS/HTML (séparation de la forme et du contenu) que si je choisis un contenu (un span plutôt qu'une image) cela aura sur l'affichage un impact que le CSS ne pourra pas corriger.

Archeboc.

PS - question corrélée : pourquoi, sur les recommandations W3C des propriétés CSS par défaut, la balise img n'apparaît-elle pas ? IMG aurait-elle subi une déprécation ;-?
Modifié par archeboc (10 May 2009 - 15:07)

Bonjour,

archeboc a écrit :
si le code HTML n'a aucun rapport avec l'affichage

Ce n'est pas vraiment ce qui est écrit.

archeboc a écrit :
je dois pouvoir prendre un élément (par exemple span) et lui donner les caractéristiques d'affichages par défaut d'un autre élément (par exemple image)

Tu peux, dans l'absolu, jouer sur les propriétés CSS, y compris la propriété display et ses différentes valeurs. Ça ne va pas jusqu'à transformer un SPAN en IMG, INPUT, SELECT, ou autre élément arbitraire.

La partie «j'affiche une image» du rendu d'un élément IMG (avec toutes les subtilités sur l'affichage de la valeur de l'attribut alt dans certaines conditions) ne relève pas de CSS. Logiquement, tu ne peux donc pas utiliser CSS pour obtenir la même chose. Tout ce qui relève de CSS, par contre, est dans l'absolu modifiable.

archeboc a écrit :
PS - question corrélée : pourquoi, sur les recommandations W3C des propriétés CSS par défaut, la balise img n'apparaît-elle pas ? IMG aurait-elle subi une déprécation ;-?

Tu parles de http://www.w3.org/TR/CSS21/sample.html ?

Auquel cas:
- d'autres éléments sont absents de cette feuille de styles recommandée, notamment SPAN;
- pour savoir ce qu'il en est de la dépréciation ou non d'un élément, cf. la spécification HTML qui va bien (HTML 4), voire le brouillon de la suivante (HTML 5);
- ce document dit d'ailleurs: «The full presentation of some HTML elements cannot be expressed in CSS 2.1, including replaced elements ("img", "object"), scripting elements ("script", "applet"), form control elements, and frame elements.»

a écrit :
La partie «j'affiche une image» du rendu d'un élément IMG (avec toutes les subtilités sur l'affichage de la valeur de l'attribut alt dans certaines conditions) ne relève pas de CSS. Logiquement, tu ne peux donc pas utiliser CSS pour obtenir la même chose. Tout ce qui relève de CSS, par contre, est dans l'absolu modifiable.

Je suis 100% d'accord. Reprenons. Si j'écris :

<style>
img, span { height:30 ; width:400;background-color:green }
</style>

<span> t </span>
<img alt=truc src=bidule />

Je ne vais pas obtenir des éléments de même dimension.

Je ne proteste pas là contre. Je voudrais juste savoir ce que je mets dans le code suivant, à la place de XXX, pour que tous mes éléments span aient la même dimension que mes images :

<style>
img  { height:40 ; width:400 }
span { XXXXXXXX }
</style>

Bon, je repose ma question : il est entendu que ce qui se passe à l'intérieur d'une image, la façon dont elle peut porter des liens avec le usemap, dont elle peut porter un tooltip, ce qui s'affiche si l'image ne se charge pas, etc. OUI, bien sûr, on ne peut pas obtenir cela si on passe par un span.

Mais moi, ce que je veux, c'est considérer les éléments comme des entités interchangeables quant à leur mise en page : si je décide de mettre span, il se mettra au même endroit que l'image.

Archeboc.

Salut,

pour reprendre ton exemple : ce qui différencie IMG et SPAN est que le premier, en tant qu'élément remplacé, possède les attributs width et height et pas le second. Pour pouvoir affecter ces attributs à un élément 'en-ligne' il y a plusieurs moyens qui vont dépendre du contexte :

* display: inline-block; > c'est à priori la solution la plus logique mais elle ne fonctionne pas nativement dans les versions de Firefox < 3 (cf. cet article de Florent pour des correctifs).

* float: left | right; > permet de dimensionner mais sort l'élément du flux.

* display: block; > permet de dimensionner mais donne un rendu de type 'bloc'.

* ...

Je rajouterais bien display:table et display:table-cell, pour la route.

Florent V. a écrit :
Je rajouterais bien display:table et display:table-cell, pour la route.

Et bien non. grosse catastrophe avec display:table. Avec display:table-cell, pas de catastrophe, mais pas le même comportement entre une image et un élément non remplacé.

Par contre, display:inline-block marche très bien pour le petit exemple donné ici. Mais cela ne veut pas dire grand chose, car display:block fonctionne aussi.

Enfin, je tombe sur un truc intéressant : la balise div en mode autofermant (<div/>) ne ferme pas correctement. Sur IE, c'est carrément la bérésina, mais FF refuse de fermer lui aussi (regarder le bouton en bas : normalement, il n'est pas dans le div externe). Je suppose que c'est un comportement connu.

Archeboc.

<style>
div#idBoiteLoupe div { border: 1px solid red; left: 30px; width:200; }
div#idBoiteLoupe div div { border: 3px solid #09b; overflow: hidden; width: 150px; height: 120px; text-align:center}

img, span, div#idBoiteLoupe div div.manche { 
  display:inline-block; height:30 ; width:140 ; background-color:green;
  position:relative; left:40px; height:40px ; width:10px ; border:3px solid blue; }
</style>

<div id="idBoiteLoupe" style="border: 2px solid black; left: 30px;">
	<div >
		<div > avec un span </div>
		<span/> 
	</div>
<br/>
	<div >
		<div > avec une img </div>
		<img />
	</div>
<br/>
	<div >
		<div > avec un div </div>
		<div class=manche />
	</div>
</div>
<br/>

<input type=button onClick=test() value=test>

archeboc a écrit :
mais pas le même comportement entre une image et un élément non remplacé

Ce n'était pas mon propos.

archeboc a écrit :
Par contre, display:inline-block marche très bien pour le petit exemple donné ici.

Le rendu de type «bloc en ligne» est effectivement le plus proche de celui d'un élément remplacé comme IMG.

archeboc a écrit :
Enfin, je tombe sur un truc intéressant : la balise div en mode autofermant (<div/>) ne ferme pas correctement. Sur IE, c'est carrément la bérésina, mais FF refuse de fermer lui aussi (regarder le bouton en bas : normalement, il n'est pas dans le div externe). Je suppose que c'est un comportement connu.

C'est un comportement connu et ça motive certaines des compatibility guidelines de XHTML 1.0. Lire notamment C.1 et C.2:
http://www.w3.org/TR/xhtml1/#guidelines

On notera que dans l'absolu on pourrait écrire <br></br> d'une part, et <p /> ou <p/> d'autre part. Ces deux (trois) syntaxes sont déconseillées pour des raisons de compatibilité avec les parseurs HTML des navigateurs.

J'ose espérer, par contre, qu'en application/xhtml+xml (pour les navigateurs qui le comprennent, soit tous sauf IE) les navigateurs sont un peu plus capables, vu qu'ils utilisent alors un parseur XML.