Est-ce faux de changer un élément de bloc en ligne avec CSS s’il contient un autre élément de bloc?

Je sais que c’est faux de mettre un élément de bloc dans un élément en ligne, mais qu’en est-il de ce qui suit?

Imaginez ce balisage valide:

This is a paragraph

Maintenant, ajoutez ce CSS:

 div { display:inline; } 

Cela crée une situation où un élément en ligne contient un élément de bloc (le div devient en ligne et le p est bloqué par défaut)

Les éléments de la page sont-ils toujours valides?

Comment et quand jugeons-nous si le code HTML est valide – avant ou après l’application des règles CSS?

MISE À JOUR: J’ai depuis appris qu’en HTML5, il est parfaitement valide de mettre des éléments de niveau bloc dans les balises de liens, par exemple:

  

Heading

Paragraph.

Ceci est vraiment utile si vous voulez qu’un grand bloc de HTML soit un lien.

À partir du CSS 2.1 Spec :

Lorsqu’une boîte en ligne contient une boîte de niveau bloc in-flow, la boîte en ligne (et ses ancêtres intégrés dans la même boîte de ligne) est brisée autour de la boîte de niveau bloc (et tous les autres blocs consécutifs ou séparés uniquement par des espaces réductibles et / ou des éléments hors-stream), divisant la boîte en ligne en deux cases (même si l’un des côtés est vide), une de chaque côté de la ou des zones de niveau bloc. Les zones de ligne avant la rupture et après la rupture sont placées dans des zones de bloc anonymes et la zone de niveau bloc devient un frère de ces zones anonymes. Lorsqu’une telle boîte en ligne est affectée par le positionnement relatif, toute traduction résultante affecte également la boîte au niveau du bloc contenue dans la boîte en ligne.

Ce modèle s’appliquerait dans l’exemple suivant si les règles suivantes:

 p { display: inline } span { display: block } 

ont été utilisés avec ce document HTML:

   Anonymous text interrupted by a block   

This is anonymous text before the SPAN. This is the content of SPAN. This is anonymous text after the SPAN.

L’élément P contient un bloc (C1) de texte anonyme suivi d’un élément de niveau bloc suivi d’un autre bloc (C2) de texte anonyme. Les boîtes résultantes seraient un bloc représentant le corps, contenant un bloc de bloc anonyme autour de C1, le bloc de bloc SPAN et un autre bloc de bloc anonyme autour de C2.

Les propriétés des zones anonymes sont héritées de la zone non anonyme englobante (par exemple, dans l’exemple situé juste en dessous de la sous-section intitulée “Blocs de blocs anonymes”, celui de DIV). Les propriétés non héritées ont leur valeur initiale. Par exemple, la police de la boîte anonyme est héritée du DIV, mais les marges seront 0.

Les propriétés définies sur les éléments à l’origine des blocs de blocs anonymes s’appliquent toujours aux zones et au contenu de cet élément. Par exemple, si une bordure avait été définie sur l’élément P dans l’exemple ci-dessus, la bordure serait dessinée autour de C1 (ouvert à la fin de la ligne) et C2 (ouvert au début de la ligne).

Certains agents utilisateurs ont mis en place des bordures sur des lignes contenant des blocs d’autres manières, par exemple en enveloppant ces blocs nesteds dans des “boîtes de lignes anonymes” et en dessinant ainsi des bordures en ligne autour de ces boîtes. Comme CSS1 et CSS2 n’ont pas défini ce comportement, les agents utilisateurs de CSS1 uniquement et de CSS2 uniquement peuvent implémenter ce modèle alternatif tout en continuant à revendiquer la conformité à cette partie de CSS 2.1. Cela ne s’applique pas aux agents utilisateur développés après la publication de cette spécification.

Fais-en ce que tu veux. Clairement, le comportement est spécifié dans CSS, même si le fait qu’il couvre tous les cas ou qu’il soit implémenté de manière cohérente dans les navigateurs actuels n’est pas clair.

Indépendamment de sa validité ou non, la structure de l’élément est incorrecte. La raison pour laquelle vous ne mettez pas d’éléments de bloc dans les éléments en ligne est que le navigateur peut rendre les éléments de manière facilement prévisible.

Même si cela ne rompt aucune règle pour HTML ou CSS, cela crée quand même des éléments qui ne peuvent pas être rendus comme prévu. Le navigateur doit gérer les éléments comme si le code HTML n’était pas valide.

Le HTML et le CSS seront toujours valables. Idéalement, vous ne devriez pas faire quelque chose comme ça, mais ce bit particulier de CSS est en fait un moyen pratique (et syntaxiquement valide mais non sémantiquement valide) pour obtenir le double bug de la marge d’Internet Explorer sans avoir recours à des feuilles de style conditionnelles votre CSS. Le (X) HTML a plus de valeur sémantique que le CSS, il est donc moins important que le CSS soit sémantiquement valide. Dans mon esprit, c’est acceptable car il résout un problème de navigateur ennuyeux sans invalider votre code.

Le HTML est validé indépendamment du CSS, donc la page serait toujours valide. Je suis à peu près sûr que les spécifications CSS n’en disent rien non plus, mais ne me citez pas là-dessus. Cependant, je serais très prudent en utilisant une technique comme celle-ci, car même si cela peut se passer comme prévu dans certains navigateurs, vous devrez les tester tous – je ne vois pas beaucoup de garanties.

Les éléments de la page sont-ils toujours valides?

«Valide» au sens HTML, oui; HTML ne sait rien sur CSS.

Le rendu que vous obtenez dans le navigateur, cependant, est “indéfini” par la spécification CSS, de sorte qu’il pourrait ressembler à n’importe quoi. Bien que vous puissiez inclure une telle règle dans les hacks CSS destinés à un navigateur particulier (où vous savez comment ce navigateur rend ce cas), il ne devrait pas être diffusé aux navigateurs en général.

Je ne sais pas si cela valide des règles, mais je recommande d’utiliser le validateur HTML du W3C et le validateur CSS du W3C pour le déterminer. J’espère que c’est utile!

Je pense que (x) html est valide, css est valide. Le résultat est-il valide? Oui, s’il regarde dans le navigateur comme vous le souhaitez.

Non, ce n’est pas un mauvais choix. Nous pouvons utiliser selon les exigences.

S’il y a une logique que vous suivez et que vous finissez par l’implémenter comme ça, ce n’est pas faux. Les choses ne fonctionnent pas simplement parce qu’elles sont étranges. Oui, c’est assez inhabituel mais cela aide et ce n’est pas une erreur. C’est intentionnel. HTML et CSS devraient vous servir, pas l’inverse, donc n’écoutez jamais les commentaires vous disant de ne pas le faire simplement parce que c’est moche.

Il est courant d’appeler une solution «invalide» et de suggérer un long chemin autour du bloc. Parfois, vous pouvez repenser ce que vous avez fait. Mais il peut y avoir plusieurs raisons à ce que vous avez fait et elles ne les considèrent pas.

J’utilise régulièrement des blocs à l’intérieur des lignes. C’est valable et ça marche – ce n’est pas nécessaire dans la plupart des cas. Et alors. Rappelez-vous que lorsque XHTML nous a dit de toujours placer des citations autour des propriétés (et que tout le monde vous criait dessus si vous ne le faisiez pas!), Maintenant HTML5 permet de les omettre s’il n’y a pas d’espace à l’intérieur. Qu’est-il arrivé à cette dernière barre oblique après les étiquettes singulières? “
“? Allons. Les normes changent. Mais les navigateurs continuent également à prendre en charge des fonctionnalités non standard. CENTRE est obsolète; nous sums en 2013 et cela fonctionne toujours. TABLEAU pour le centrage vertical? Parfois, c’est le seul moyen. DIV à l’intérieur de A pour le faire planer comme tu l’avais prévu? Vas-y.

Concentrez-vous sur des choses importantes.