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


Dans ma classe, je jouais autour et j'ai découvert que CSS fonctionne avec des éléments maquillés.

Exemple:

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

Lorsque mon professeur m'a vu utiliser cette fonction pour la première fois, il était un peu surpris que les éléments confectionnés aient fonctionné et recommandé. Je modifie simplement tous mes éléments constitués en paragraphes avec des identifiants.

Pourquoi mon professeur ne veut-il pas que j'utilise des éléments confectionnés? Ils travaillent efficacement.

Aussi, pourquoi n’a-t-il pas su que des éléments inventés existent et fonctionnent avec CSS. Sont-ils rares?


427
2017-12-03 14:19


origine


Réponses:


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

Les navigateurs (la plupart) sont conçus pour être (dans une certaine mesure) compatibles avec les futurs ajouts au code HTML. Les éléments non reconnus sont analysés dans le DOM, mais n'ont pas de sémantique ou de rendu par défaut spécialisé.

Lorsqu'un nouvel élément est ajouté à la spécification, parfois CSS, JavaScript et ARIA peuvent être utilisés pour fournir la même fonctionnalité dans les navigateurs plus anciens (et les éléments doivent apparaître dans le DOM pour que ces langages puissent les manipuler pour ajouter cette fonctionnalité). ).

(Bien qu'il faille noter que des travaux sont en cours pour définir un moyen de étendre 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é jusqu'à ce qu'il ait mûri.)

Pourquoi mon professeur ne veut-il pas que j'utilise des éléments confectionnés?

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

Aussi; pourquoi ne savait-il pas que des éléments confectionnés existaient et travaillaient avec CSS? Sont-ils rares?

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


467
2017-12-03 14:24



TL; DR

  • Les balises personnalisées ne sont pas valides en HTML. Cela peut entraîner des problèmes de rendu.
  • Rend le développement futur plus difficile puisque le code n'est pas portable.
  • Un code HTML valide offre de nombreux avantages tels que le référencement, la rapidité et le professionnalisme.

Longue réponse

Il y a quelques arguments ce code avec des balises personnalisées est plus utilisable.

Cependant, cela conduit à un code HTML invalide. Ce qui n'est pas bon pour votre site.

Le point de validité CSS / HTML | StackOverflow

  • Google le préfère donc c'est bon pour le référencement.
  • Cela rend votre page Web plus susceptible de fonctionner dans les navigateurs que vous n'avez pas testés.
  • Cela vous donne l'air plus professionnel (pour certains développeurs au moins)
  • Les navigateurs compatibles peuvent rendre [HTML valide plus rapidement]
  • Il signale un tas de bogues obscurs que vous avez probablement ratés et qui affectent des choses que vous n'avez probablement pas testées, par exemple la page de code ou la langue de la page.

Pourquoi valider | W3C

  • Validation comme outil de débogage
  • Validation en tant que contrôle de qualité à l'épreuve du futur
  • La validation facilite la maintenance
  • La validation aide à enseigner les bonnes pratiques
  • La validation est un signe de professionnalisme

99
2017-12-03 14:22



YADA (encore une autre réponse)

Edit: S'il vous plaît voir le commentaire de BoltClock ci-dessous concernant le type vs tag vs élément. Je ne m'inquiète généralement pas de la sémantique, mais son commentaire est très approprié et informatif.

Bien qu'il y ait déjà un tas de bonnes réponses, vous avez indiqué que votre professeur vous a incité à poster cette question afin qu'il apparaisse que vous êtes (formellement) à l'école. Je pensais que j'expliquerais un peu plus en profondeur non seulement CSS mais aussi mécanique des navigateurs Web. Selon Wikipédia, "CSS est un langage de feuille de style utilisé pour décrire ... un document écrit en une "(J'ai ajouté l'accent sur" a ") Notez qu'il ne dit pas" écrit en HTML "encore moins une version spécifique de HTML.CS 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 appliquera également le style. Par définition, le CSS ne savoir / comprendre / se soucier de balises de langage de balisage spécifiques. Ainsi, les balises peuvent être "invalides" en ce qui concerne HTML, mais il n'y a pas de concept de balise / élément / type "valide" en CSS.

Moderne les navigateurs visuels ne sont pas des programmes monolithiques. Ils sont un amalgame de différents "moteurs" qui ont des tâches spécifiques à faire. À le strict minimum Je peux penser à 3 moteurs, le moteur de rendu, le moteur CSS et le moteur javascript / VM. Je ne sais pas si l'analyseur fait partie du moteur de rendu (ou vice versa) ou s'il s'agit d'un moteur distinct, mais vous avez l'idée.

Si oui ou non visuel navigateur (d'autres ont déjà abordé le fait que l'écran lecteurs pourrait avoir d'autres défis face à des balises invalides) applique le formatage selon que l'analyseur laisse la balise "invalide" dans le document et ensuite si le moteur de rendu applique des styles à cette balise. Comme il serait plus difficile à développer / maintenir, les moteurs CSS ne sont pas écrits dans comprendre que "Ceci est un document HTML, voici donc la liste des tags / éléments / types valides." Les moteurs CSS trouvent simplement tags / éléments / types puis dites au moteur de rendu "Voici les styles à appliquer". Si le moteur de rendu décide d'appliquer réellement les styles, c'est bien lui.

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

Cette réponse est déjà trop longue donc je vais y mettre fin.


69
2017-12-03 16:38



Les éléments inconnus sont traités comme divs par les navigateurs modernes. C'est pourquoi ils travaillent. Cela fait partie de la norme HTML5 à venir qui introduit une structure modulaire à laquelle de nouveaux éléments peuvent être ajoutés.

Dans les anciens navigateurs (je pense IE7-), vous pouvez appliquer un astuce Javascript après quoi ils fonctionneront aussi.

Voici une question connexe J'ai trouvé en cherchant un exemple.

Voici une question sur le correctif Javascript. Il s'avère que c'est en effet IE7 qui ne supporte pas ces éléments hors de la boîte.

Aussi; pourquoi n'a-t-il pas su que des tags inventés existaient et fonctionnaient avec CSS. Sont-ils rares?

Oui, tout à fait. Mais surtout: ils ne servent pas de but supplémentaire. Et ils sont nouveaux pour html5. Dans les versions antérieures de HTML, une balise inconnue était invalide.

De plus, les enseignants semblent parfois avoir des lacunes dans leurs connaissances. Cela pourrait être dû au fait qu'ils ont besoin d'enseigner aux étudiants les bases sur un sujet donné, et il n'est pas vraiment payant de connaître tous les tenants et aboutissants et être vraiment à jour. J'ai eu une fois la détention parce qu'un enseignant pensait que je programmais un virus, simplement parce que je pouvais faire jouer de la musique à un ordinateur en utilisant le play commande dans GWBasic. (Histoire vraie, et oui, il y a longtemps). Mais quelle que soit la raison, je pense que le conseil de ne pas utiliser d'éléments custome est un son.


54
2017-12-03 14:23



En fait, vous pouvez utiliser des éléments personnalisés. Voici la spécification du 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: il s'agit d'un projet de spécification dans les premiers jours de développement, et il impose des restrictions sur ce que les noms des éléments peuvent être.


27
2017-12-03 14:24



Il y a quelques petites choses sur les autres réponses qui sont simplement mal formulées ou peut-être un peu incorrectes.

FALSE (ish): les éléments HTML non standard sont "non autorisés", "illégaux" ou "non valides".

Pas nécessairement. Ils sont "non conforme". Quelle est la différence? Quelque chose ne peut pas "se conformer" et être toujours "autorisé". Le W3C ne va pas envoyer la police HTML à votre domicile et vous transporter loin.

Le W3C a laissé les choses de cette façon pour une raison. La conformité et les spécifications sont définies par une communauté. S'il vous arrive d'avoir une communauté plus petite consommant du HTML à des fins plus spécifiques et qu'ils sont tous d'accord sur de nouveaux éléments dont ils ont besoin pour faciliter les choses, ils peuvent avoir ce que le W3C appelle "autres spécifications applicables". (c'est une simplification flagrante, évidemment, mais vous avez l'idée)

Cela dit, les validateurs stricts déclareront que vos éléments non standard sont "invalides". mais c’est parce que le travail du validateur est d’assurer la conformité à toute spécification validée, et non de garantir la «légalité» pour le navigateur ou pour utilisation.

FALSE (ish): éléments HTML non standard volonté entraîner des problèmes de rendu

Peut-être, mais peu probable. (remplacez "will" par "might") La seule façon de provoquer un problème de rendu est que votre élément personnalisé soit en conflit avec une autre spécification, comme une modification de la spécification HTML ou une autre spécification honorée dans le même système (comme SVG, Math, ou quelque chose de personnalisé).

En réalité, la raison pour laquelle CSS peut styler des tags non standard est parce que la spécification HTML déclare clairement cette:

Les agents utilisateurs doivent traiter les éléments et attributs qu’ils ne comprennent pas comme neutres sur le plan sémantique; en les laissant dans le DOM (pour les processeurs DOM), et en les stylisant selon CSS (pour les processeurs CSS), sans en déduire aucune signification

Remarque: Si vous souhaitez utiliser une balise personnalisée, rappelez-vous simplement qu'une modification apportée à la spécification HTML à un moment ultérieur pourrait faire exploser votre style, alors préparez-vous. Il est vraiment peu probable que le W3C mettra en œuvre le <imsocool> tag, cependant.

Balises non-standard et JavaScript (via le DOM)

La raison pour laquelle vous pouvez accéder et modifier des éléments personnalisés à l'aide de JavaScript est que le spécification parle même de la façon dont ils devraient être traités dans le DOM, qui est l'API (vraiment horrible) qui vous permet de manipuler les éléments sur votre page.

L'interface HTMLUnknownElement doit être utilisée pour les éléments HTML non définis par cette spécification (ou d'autres spécifications applicables).

TL; DR: Conforme à la spécification est faite à des fins de communication et de sécurité. La non-conformité est toujours autorisée par tout sauf un validateur, dont le seul but est de faire respecter la conformité, mais dont l'utilisation est facultative.

Par exemple:

var wee = document.createElement('wee');
console.log(wee.toString()); //[object HTMLUnknownElement]

(Je suis sûr que cela attirera les flammes, mais il y a mes 2 cents)


22
2017-12-04 15:16



Selon les spécifications:

CSS

UNE sélecteur de type est le nom d'un type d'élément de langage de document écrit en utilisant la syntaxe des noms qualifiés CSS

Je pensais que cela s'appelait le élément sélecteur, mais apparemment, il est en fait le type sélecteur. La spécification continue à parler de CSS qualified names qui n'a mis aucune restriction sur ce que sont réellement les noms. C'est-à-dire que tant que le sélecteur de type correspond à la syntaxe du nom qualifié CSS, il est techniquement correct CSS et correspond à l'élément dans le document. Il n'y a pas de restriction spécifique à CSS sur les éléments qui n'existent pas dans une spécification particulière - HTML ou autre.

HTML

Il n'y a aucune restriction officielle sur l'inclusion de balises dans le document que vous souhaitez. Cependant, la documentation dit

Les auteurs ne doivent pas utiliser d'éléments, d'attributs ou de valeurs d'attribut à d'autres fins que leur objectif sémantique prévu, car cela empêche le logiciel de traiter correctement la page.

Et il dit plus tard

Les auteurs ne doivent pas utiliser d'éléments, d'attributs ou de valeurs d'attributs qui ne sont pas autorisés par cette spécification ou d'autres spécifications applicables, ce qui rend la langue plus difficile à étendre à l'avenir.

Je ne suis pas sûr spécifiquement où ou si la spécification dit que les éléments inconnus sont permis, mais il parle de la HTMLUnknownElement interface pour les éléments non reconnus. Certains navigateurs peuvent même ne pas reconnaître les éléments qui sont dans la spécification actuelle (IE8 vient à l'esprit).

Il y a un brouillon pour les éléments personnalisés, cependant, mais je doute qu'il soit implémenté n'importe où pour le moment.


18
2017-12-03 14:42