La conversion d'éléments de bloc en éléments de bloc via CSS, lorsqu'ils contiennent d'autres éléments de bloc, est-elle valide en HTML ?

Est-il inapproprié de convertir des éléments de bloc en éléments en ligne via CSS lorsqu'ils contiennent d'autres éléments de bloc ?

Introduction

Il Il est communément admis que placer un élément de bloc dans un élément en ligne est incorrect. Mais que se passe-t-il lorsque l’inverse se produit ? Plus précisément, si un div contenant un paragraphe est transformé en inline par CSS, adhère-t-il toujours aux règles de validation HTML ?

Spécification CSS

Selon la spécification CSS 2.1 , une boîte en ligne contenant une boîte de niveau bloc sera divisée en deux boîtes de bloc anonymes, une avant et une après la boîte de niveau bloc. Ces boîtes deviennent frères et sœurs de la boîte de niveau bloc. Ce comportement s'applique même si l'une des zones de blocage anonyme est vide.

Validation HTML

L'état de validation HTML dépend du fait qu'il soit évalué avant ou après l'application CSS. Avant que CSS ne soit appliqué, le HTML est valide. Cependant, après la transformation CSS, le document peut ne plus être valide selon la spécification HTML.

Mise en œuvre et prise en charge des navigateurs

La spécification CSS fournit des lignes directrices sur la manière dont les navigateurs doivent gérer ce scénario. Toutefois, les implémentations des navigateurs peuvent varier. Certains navigateurs ont implémenté des bordures sur les éléments en ligne contenant des blocs en créant des « zones de ligne anonymes » autour des blocs imbriqués. Ce comportement n'est pas explicitement défini dans CSS1 ou CSS2 et peut ne pas être cohérent dans tous les navigateurs.

Considérations HTML5

En HTML5, il est permis de placer des éléments à l’intérieur d’éléments en ligne, tels que des liens. Cela peut être utile lors de la création de gros blocs de contenu HTML cliquable.

Conclusion

Alors que le comportement des éléments de bloc contenus dans les éléments en ligne après la transformation CSS est spécifié dans le CSS spécification, l’interprétation et la mise en œuvre de cette règle peuvent varier selon les navigateurs. L'impact sur la validation HTML dépend du moment où la validation est effectuée, avant ou après l'application CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!