438 votes

Pourquoi le CSS fonctionne-t-il avec de faux éléments?

Dans ma classe, je jouais autour et a trouvé que la CSS fonctionne avec faites-les éléments.

Exemple:

<style>
imsocool {
    color:blue;
}
</style>

<body>
    <imsocool>HELLO</imsocool>
</body>

Lors de mon premier professeur m'a vu à l'aide de cela, il était un peu surpris de voir que faites-éléments travaillé et a recommandé, j'ai simplement changer tous mes composé des éléments des paragraphes avec des ID.

Pourquoi ne pas mon professeur me voulez à l'utilisation faite des éléments? Ils travaillent efficacement.

Aussi, pourquoi ne savait-il pas que fait-éléments existent et travaillent avec les CSS. Sont-ils rares?

470voto

Quentin Points 325526

Pourquoi CSS fonctionne avec de faux éléments?

La plupart des navigateurs sont conçus pour être (à un certain degré) compatible avec les futurs ajouts de code HTML. Méconnu éléments sont analysés dans le DOM, mais n'ont pas de sémantique ou spécialisés de rendu par défaut associé avec eux.

Lorsqu'un nouvel élément est ajouté à la spécification, parfois, CSS, JavaScript et ARIA peut être utilisé pour fournir la même fonctionnalité dans les navigateurs plus anciens (et les éléments doivent apparaître dans les DOM pour les langues pour être en mesure de les manipuler pour ajouter cette fonctionnalité).

(Même s'il convient de noter que le travail est en cours afin de définir un moyen de prolonger HTML avec des éléments personnalisés, mais ce travail est dans les premiers stades de développement à l'heure actuelle donc il devrait probablement être évitée jusqu'à ce qu'il a mûri.)

Pourquoi ne pas mon professeur me voulez à l'utilisation faite des éléments?

  • Ils ne sont pas autorisés par la spécification HTML
  • Elles pourraient entrer en conflit avec les futurs standards d'éléments avec le même nom
  • Il y a probablement un existant élément HTML qui est mieux adapté à la tâche

Aussi, pourquoi ne savait-il pas que fait-éléments existé et a travaillé avec les CSS. Sont-ils rares?

Oui. Les gens ne les utilisent pas parce qu'ils ont des problèmes ci-dessus.

98voto

screenmutt Points 4068

TL;DR

  • Les balises personnalisées ne sont pas valides dans le HTML. Cela peut conduire à des problèmes de rendu.
  • Rend le développement futur plus difficile parce que le code n'est pas portable.
  • Code HTML valide offre beaucoup d'avantages, tels que le RÉFÉRENCEMENT, la vitesse, et de professionnalisme.

Réponse Longue

Il y a quelques arguments qui code avec les balises personnalisées est plus utilisable.

Cependant, elle conduit à un code HTML non valide. Ce qui n'est pas bon pour votre site.

Le Point de Valide CSS/HTML | StackOverflow

  • Google préfère de sorte qu'il est bon pour le RÉFÉRENCEMENT.
  • Il rend votre page web plus susceptibles de travailler dans des navigateurs, vous n'avez pas encore testé.
  • Il vous fait paraître plus professionnel (certains développeurs au moins)
  • Compatible navigateurs peuvent rendre [valide en HTML rapide]
  • Il rappelle un tas de bogues obscures, vous avez probablement raté qui influent sur les choses que vous n'avez probablement pas testé par exemple, la page de codes ou de langue de la page.

Pourquoi Valider | W3C

  • La Validation d'un outil de débogage
  • La Validation à l'avenir un contrôle de la qualité
  • Validation facilite l'entretien
  • La Validation permet d'enseigner les bonnes pratiques
  • La Validation est un signe de professionnalisme

68voto

Andrew Steitz Points 1060

YADA (encore un autre (différent) de réponse)

Edit: Veuillez voir le commentaire de BoltClock ci-dessous sur le type vs tag vs élément. J'ai l'habitude de ne pas s'inquiéter de la sémantique, mais son commentaire est très pertinent et instructif.

Bien qu'il existe déjà un tas de bonnes réponses, vous avez indiqué que votre professeur vous a poussé à poster cette question donc il semble que vous êtes (officiellement) à l'école. J'ai pensé que je voudrais expliquer un peu plus en profondeur sur non seulement le CSS mais aussi la mécanique de navigateurs web. Selon Wikipédia, "le CSS est un langage de feuilles de style utilisées pour décrire ... un document écrit dans un langage de balisage." (J'ai ajouté l'accent sur le "a") Remarquez qu'il ne dit pas "écrit en HTML" et encore moins une version spécifique de HTML. CSS peut être utilisé sur HTML, XHTML, XML, SGML, XAML, etc. Bien sûr, vous avez besoin de quelque chose qui va rendre chacun de ces types de document qui sera également appliquer un style. Par définition, les CSS ne pas savoir / comprendre / soins sur les balises les balises de langue. Ainsi, les étiquettes peuvent être "non valide" dans la mesure du HTML, mais il n'y a pas de concept de "valide" tag/élément/type CSS.

Moderne les navigateurs visuels ne sont pas monolithiques programmes. Ils sont un amalgame de différents "moteurs" qui ont des travaux à faire. À un strict minimum , je pense, de 3 moteurs, le moteur de rendu, le moteur CSS, et le moteur javascript/VM. Vous ne savez pas si l'analyseur est une partie du moteur de rendu (ou vice versa) ou si c'est un moteur séparé, mais vous obtenez l'idée.

Si oui ou non un visuel navigateur (d'autres l'ont déjà abordé le fait que l'écran lecteurs pourraient avoir d'autres défis de traiter avec des balises non valides) applique la mise en forme dépend de l'analyseur de quitter le "non valide" balise dans le document et puis si le moteur de rendu s'applique styles de cette balise. Car il serait plus difficile de développer, de maintenir, CSS moteurs ne sont pas écrits pour comprendre que "C'est un document HTML voici donc la liste des étiquettes valides / elements / types." CSS moteurs de simplement trouver des balises / elements / types et puis de dire au moteur de rendu, "Ici sont les styles que vous devez appliquer." Si le moteur de rendu décide d'appliquer effectivement les styles.

Voici un moyen facile de penser à la base de flux de moteur de moteur: parser -> CSS -> rendu. En réalité, elle est beaucoup plus compliquée, mais c'est assez bon pour les débutants.

Cette réponse est déjà trop long donc je vais arrêter là.

53voto

GolezTrol Points 54531

Inconnu éléments sont traités en tant que divs par les navigateurs modernes. C'est pourquoi ils travaillent. C'est en partie le sens inverse du standard HTML5 qui présente une structure modulaire pour lequel de nouveaux éléments peuvent être ajoutés.

Dans les navigateurs plus anciens (je pense que IE7-) vous pouvez appliquer un Javascript-tour après qui ils vont travailler.

Voici une question connexe j'ai trouvé lors de la recherche d'un exemple.

Voici une question à propos de Javascript fixer. Il s'avère que c'est en effet IE7 qui ne prend pas en charge ces éléments hors de la boîte.

Aussi, pourquoi ne savait-il pas que fait-à-tags existé et a travaillé avec les CSS. Sont-ils rares?

Oui, tout à fait. Mais surtout: ils ne servent pas d'autres fins. Et ils sont de nouveau à html5. Dans les versions précédentes de HTML un inconnu de la balise n'est pas valide.

Aussi, les enseignants semblent avoir des lacunes dans leurs connaissances, parfois. Cela pourrait être dû au fait qu'ils ont besoin pour enseigner aux élèves les notions de base sur un sujet donné, et il n'a pas vraiment la peine de connaître tous les tenants et les aboutissants et d'être vraiment à jour. Une fois, j'ai détention parce qu'un enseignant de la pensée, j'ai programmé un virus, juste parce que j'ai pu faire un ordinateur de jouer de la musique à l'aide de l' play commande en GWBasic. (Histoire vraie, et oui, il y a longtemps). Mais quelle que soit la raison, je pense que le conseil de ne pas utiliser custome éléments est solide.

27voto

osi Points 2938

En fait, vous pouvez utiliser des éléments personnalisés. Voici les spec W3C sur ce sujet:

http://w3c.github.io/webcomponents/spec/custom/

Et voici un tutoriel expliquant comment les utiliser:

http://www.html5rocks.com/en/tutorials/webcomponents/customelements/

Comme l'a souligné @Quentin: c'est un projet de norme dans les premiers jours de son développement, et qu'il impose des restrictions sur ce que les noms d'élément peut être.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X