On ne trouve pas beaucoup d’information en ligne sur les éléments remplacés HTML. Je n’ai rien trouvé à leur sujet dans les livres sur le développement web que je connais. C’est bien dommage... car si j’avais connu plus tôt les limites des éléments remplacés je me serais épargné bien du stress lorsque j’ai commencé mes expériences de CSS avancé.

Pour l’essentiel, les éléments remplacés sont des éléments HTML ayant une largeur et une hauteur prédéterminées en l’absence de CSS précis. Une autre façon de voir les choses est de penser aux éléments remplacés comme à des balises ayant leur contenu remplacé par une source extérieure. <img> et <video> en sont deux exemples évidents, mais on peut y ajouter de nombreux éléments de formulaires tels que <input>. Par exemple, lorsque vous insérez le code suivant dans une page :

<input type=“text”>

...l’input apparaît, sans que vous n’ayez rien à faire, aux dimensions qui conviennent à la saisie d’une ligne unique. Cela ne signifie pas que vous n’avez pas besoin d’ajouter des attributs et valeurs supplémentaires à l’élément, ou que vous ne pouvez pas lui appliquer de CSS, mais simplement que le navigateur remplace cette balise par un objet ayant des dimensions prédéterminées par défaut. La même chose se produit avec <img> :

<img src=“bison.jpg” alt=“Plains bison”>

Sans autre information, bison.jpg sera chargé dans la page et la balise <img> remplacée par le contenu de ce fichier, aux dimensions originales de l’image.

<br>, <hr> et <object> sont des éléments remplacés, de même que <input>, <button> et <textarea>. En HTML5, <video> et <iframe> sont également des éléments remplacés, ainsi que (dans certaines circonstances) <audio> et <canvas>.

Mais puisque l’apparence de ces éléments peut être modifiée via CSS, en quoi le fait que ce soit des éléments remplacés pose-t-il problème ? En raison d’une règle essentielle :

👉🏿  On ne peut pas appliquer de contenu généré aux éléments remplacés. Autrement dit on ne peut pas leur appliquer les pseudo-éléments :before et :after.

Pensons-y un instant. Est-ce que ce ne serait pas génial de pouvoir auto-générer des légendes pour nos images en CSS ? On a l’information disponible, on a les attributs alt et title, tout est là et il nous suffirait de faire :

img:after { content: attr(alt); }

Ce serait parfait ! On pourrait afficher la valeur title de l’image directement dans la page et on n’aurait pas à se soucier de <figcaption> ou des listes de définitions (en XHTML)... Mais non, on ne peut pas. La balise <img> est déjà un contenu remplacé : on ne peut pas générer plus de contenu.

Un résultat utile en tout cas : si vous n’obtenez rien en appliquant :before ou :after à un élément, il y a des chances que ce soit parce qu’il s’agit d’un élément remplacé !