¿Por qué CSS funciona con elementos falsos?

StackOverflow https://stackoverflow.com/questions/20353613

  •  25-08-2022
  •  | 
  •  

Pregunta

En mi clase, estaba jugando y descubrí que CSS funciona con elementos inventados.

Ejemplo:

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

Cuando mi profesor me vio por primera vez usando esto, estaba un poco sorprendido de que los elementos inventados funcionaran y recomendó que simplemente cambiara todos mis elementos inventados a los párrafos con identificadores.

¿Por qué mi profesor no quiere que use elementos inventados? Funcionan de manera efectiva.

Además, ¿por qué no sabía que los elementos inventados existen y funcionan con CSS? ¿Son poco comunes?

¿Fue útil?

Solución

¿Por qué CSS funciona con elementos falsos?

(La mayoría) los navegadores están diseñados para ser (hasta cierto punto) compatibles con adiciones futuras a HTML. Los elementos no reconocidos se analizan en el DOM, pero no tienen semántica o representación predeterminada especializada asociada con ellos.

Cuando se agrega un nuevo elemento a la especificación, a veces CSS, JavaScript y Aria se pueden usar para proporcionar la misma funcionalidad en los navegadores más antiguos (y los elementos tienen que aparecer en el DOM para que esos idiomas puedan manipularlos para agregar esa funcionalidad ).

(Hay una especificación para Elementos personalizados, pero tienen requisitos específicos de nombres y requieren registrarse con JavaScript).

¿Por qué mi profesor no quiere que use elementos inventados?

  • No están permitidos por la especificación HTML
  • Podrían entrar en conflicto con los elementos estándar futuros con el mismo nombre
  • Probablemente haya un elemento HTML existente que sea más adecuado para la tarea.

También; ¿Por qué no sabía que los elementos inventados existían y funcionaban con CSS? ¿Son poco comunes?

Sí. La gente no los usa porque tienen los problemas anteriores.

Otros consejos

Tl; Dr

  • Las etiquetas personalizadas no son válidas en HTML. Esto puede conducir a problemas de representación.
  • Hace que el desarrollo futuro sea más difícil ya que el código no es portátil.
  • HTML válido ofrece muchos beneficios como SEO, velocidad y profesionalismo.

Respuesta larga

Existen Algunos argumentos Ese código con etiquetas personalizadas es más utilizable.

Sin embargo, conduce a HTML inválido. Lo cual no es bueno para su sitio.

El punto de CSS/HTML válido | Desbordamiento de pila

  • Google lo prefiere para que sea bueno para SEO.
  • Hace que su página web sea más probable que funcione en los navegadores que no ha probado.
  • Te hace ver más profesional (al menos para algunos desarrolladores)
  • Los navegadores compatibles pueden renderizar [HTML válido más rápido
  • Señala un montón de errores oscuros que probablemente haya perdido que afecten las cosas que probablemente no haya probado, por ejemplo, la expresión de códigos o el conjunto de idiomas de la página.

Por qué validar | W3C

  • Validación como herramienta de depuración
  • Validación como un cheque de calidad a prueba de futuro
  • La validación facilita el mantenimiento
  • La validación ayuda a enseñar buenas prácticas
  • La validación es un signo de profesionalismo

Yada (otra respuesta (diferente))

Editar: consulte el comentario de BoltClock a continuación con respecto a Tipo VS TAG VS Elemento. Por lo general, no me preocupo por la semántica, pero su comentario es muy apropiado e informativo.

Aunque ya hay un montón de buenas respuestas, indicó que su profesor le pidió que publique esta pregunta para que parezca que es (formalmente) en el colegio. Pensé que expusiría un poco más en profundidad no solo sobre CSS sino también por el mecánica de navegadores web. De acuerdo a Wikipedia, "CSS es un lenguaje de hoja de estilo utilizado para describir ... un documento escrito en a Lenguaje de marcado ". (Agregué el énfasis en" A ") Observe que no dice" escrito en HTML "mucho menos una versión específica de HTML. CSS se puede usar en HTML, XHTML, XML, SGML, XAML, etc. . Por supuesto que necesitas algo que prestar Cada uno de estos tipos de documentos que también aplicará un estilo. Por definición, CSS no conocer / comprender / preocuparse por Etiquetas de lenguaje de marcado específicos. Por lo tanto, las etiquetas pueden ser "inválidas" en lo que respecta a HTML, pero no hay un concepto de una etiqueta/elemento/tipo "válida" en CSS.

Moderno Los navegadores visuales no son programas monolíticos. Son una amalgama de diferentes "motores" que tienen trabajos específicos que hacer. En un mínimo Puedo pensar en 3 motores, el motor de representación, el motor CSS y el motor/VM JavaScript. No estoy seguro de si el analizador es parte del motor de representación (o viceversa) o si es un motor separado, pero obtienes la idea.

Ya sea un visual navegador (Otros ya han abordado el hecho de que la pantalla lectores podría tener otros desafíos que se ocupan de etiquetas no válidas) aplica el formato depende de si el analizador deja la etiqueta "inválida" en el documento y luego si el motor de representación aplica estilos a esa etiqueta. Dado que haría que sea más difícil desarrollar/mantener, los motores CSS no están escritos para comprender que "este es un documento HTML, así que aquí está la lista de etiquetas / elementos / tipos válidos". Los motores CSS simplemente encuentran Etiquetas / elementos / tipos Y luego dígale al motor de representación: "Aquí están los estilos que debe aplicar". Si el motor de renderizado decide o no aplicar los estilos es.

Aquí hay una manera fácil de pensar en el básico Fluya del motor al motor: analizador -> CSS -> Renderización. En realidad, es mucho más complicado, pero esto es lo suficientemente bueno para empezar.

Esta respuesta ya es demasiado larga, así que terminaré allí.

Los elementos desconocidos se tratan como divS por los navegadores modernos. Por eso funcionan. Esto es parte del estándar HTML5 que se aproxima que introduce una estructura modular a la que se pueden agregar nuevos elementos.

En los navegadores más antiguos (creo que ie7-) puedes aplicar un javascript-trick después de lo cual también funcionarán.

Aquí hay un pregunta relacionada Encontré al buscar un ejemplo.

Aquí hay un Pregunta sobre la solución de JavaScript. Resulta que es IE7 el que no admite estos elementos fuera de la caja.

También; ¿Por qué no sabía que existían etiquetas inventadas y funcionaban con CSS? ¿Son poco comunes?

Sí, bastante. Pero especialmente: no tienen un propósito adicional. Y son nuevos en HTML5. En versiones anteriores de HTML, una etiqueta desconocida no era válida.

Además, los maestros parecen tener brechas en su conocimiento, a veces. Esto podría deberse al hecho de que necesitan enseñar a los estudiantes los conceptos básicos sobre una materia determinada, y realmente no vale la pena conocer todos los entresijos y estar realmente al día. Una vez tuve detención porque un maestro pensó que programaba un virus, solo porque podría hacer una computadora reproducir música usando el play Comando en GWBasic. (Historia real, y sí, hace mucho tiempo). Pero sea cual sea la razón, creo que el consejo de no usar elementos de custome es sólido.

En realidad, puedes usar elementos personalizados. Aquí está la especificación W3C en este tema:

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

Y aquí hay un tutorial que explica cómo usarlos:

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

Como lo señaló @Quentin: Esta es un borrador de especificación en los primeros días del desarrollo, y que impone restricciones sobre cuáles pueden ser los nombres de los elementos.

Hay algunas cosas sobre las otras respuestas que están mal redactadas o tal vez un poco incorrectas.

Falso (ish): los elementos HTML no estándar están "no permitidos", "ilegales" o "inválidos".

No necesariamente. Ellos son "No conformado". ¿Cual es la diferencia? Algo puede "no conformarse" y aún así ser "permitido". El W3C no va a enviar a la policía HTML a su hogar y alejarlo.

El W3C dejó las cosas de esta manera por una razón. La conformidad y las especificaciones son definidas por una comunidad. Si tiene una comunidad más pequeña que consume HTML para fines más específicos y todos están de acuerdo en algunos elementos nuevos que necesitan para facilitar las cosas, pueden tener lo que el W3C se refiere tanto a "Otras especificaciones aplicables". (Esto es una simplificación asquerosa, obviamente, pero se entiende la idea)

Dicho esto, los validadores estrictos declararán que sus elementos no estándar son "inválidos". Pero eso se debe a que el trabajo del validador es garantizar la conformidad con cualquier especificación para la que esté validando, no para garantizar la "legalidad" para el navegador o por usar.

Falso (ish): elementos HTML no estándar voluntad resultar en problemas de representación

Posiblemente, pero poco probable. (Reemplace "" con "podría") La única forma en que esto debería dar lugar a un problema de representación es si su elemento personalizado entra en conflicto con otra especificación, como un cambio a la especificación HTML u otra especificación que se honra dentro del mismo sistema (como Svg, matemáticas o algo personalizado).

En realidad, La razón por la que CSS puede diseñar etiquetas no estándar es porque la especificación HTML claramente establece que:

Los agentes de los usuarios deben tratar elementos y atributos que no entienden como semánticamente neutrales; Dejándolos en el DOM (para procesadores DOM), y diseñarlos de acuerdo con CSS (para procesadores CSS), pero no inferir ningún significado de ellos

Nota: Si desea usar una etiqueta personalizada, solo recuerde un cambio en la especificación HTML en un momento posterior podría volar su estilo, así que prepárese. Es realmente poco probable que el W3C implemente el <imsocool> Etiqueta, sin embargo.

Etiquetas no estándar y JavaScript (a través del DOM)

La razón por la que puede acceder y alterar elementos personalizados usando JavaScript es porque el La especificación incluso habla sobre cómo se deben manejar en el DOM, que es la API (realmente horrible) que te permite manipular los elementos de tu página.

La interfaz HTMLUNKNOWNELEMENT debe usarse para elementos HTML que no están definidos por esta especificación (u otras especificaciones aplicables).

Tl; dr: conforme a la especificación se realiza para fines de comunicación y seguridad. La falta de conformidad todavía está permitida por todo menos un validador, cuyo único propósito es hacer cumplir la conformidad, pero cuyo uso es opcional.

Por ejemplo:

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

(Estoy seguro de que esto dibujará llamas, pero hay mis 2 centavos)

Según las especificaciones:

CSS

A tipo selector es el nombre de un tipo de elemento de lenguaje de documento escrito utilizando la sintaxis de los nombres calificados de CSS

Pensé que esto se llamaba el elemento selector, pero aparentemente es en realidad el escribe selector. La especificación continúa hablando de CSS qualified names que no pusieron restricciones sobre cuáles son realmente los nombres. Es decir, mientras el selector de tipos coincida con la sintaxis de nombre calificado CSS, es técnicamente correcto CSS y coincidirá con el elemento en el documento. No hay restricción específica de CSS en elementos que no existan en una especificación particular: HTML o de otra manera.

Html

No existe una restricción oficial sobre la inclusión de ninguna etiqueta en el documento que desee. Sin embargo, la documentación dice

Los autores no deben usar elementos, atributos o valores de atributos para fines distintos a su propósito semántico previsto, ya que también evita que el software procese correctamente la página.

Y luego dice

Los autores no deben usar elementos, atributos o valores de atributos que no están permitidos por esta especificación u otras especificaciones aplicables, ya que hacerlo hace que sea significativamente más difícil que el lenguaje se extienda en el futuro.

No estoy seguro específicamente de dónde o si la especificación dice que los elementos desapercibidos están permitió, pero habla de la HtmlunknownElement interfaz para elementos no reconocidos. Es posible que algunos navegadores ni siquiera reconozcan elementos que están en la especificación actual (me viene a la mente).

Hay un Borrador de elementos personalizados, Sin embargo, pero dudo que se implemente en cualquier lugar todavía.

Esto es posible con HTML5, pero debe tener en cuenta los navegadores más antiguos.

Si decide usarlos, ¡asegúrese de comentar su HTML! Algunas personas pueden tener algunos problemas para descubrir qué es para que un comentario pueda ahorrarles un montón de tiempo.

Algo como esto,

<!-- Custom tags in use, refer to their CSS for aid -->

Cuando haga su propia etiqueta/elementos personalizados, los navegadores más antiguos no tendrán idea de lo que es como elementos HTML5 como nav/section.

Si está interesado en este concepto, le recomiendo que lo haga de la manera correcta.

Empezando

Los elementos personalizados permiten a los desarrolladores web definir nuevos tipos de elementos HTML. La especificación es una de varias nuevas primitivas API que aterrizan bajo el paraguas de los componentes web, pero es posiblemente el más importante. Los componentes web no existen sin las características desbloqueadas por elementos personalizados:

Definir nuevos elementos HTML/DOM Crear elementos que se extiendan desde otros elementos lógicamente agrupan la funcionalidad personalizada en una sola etiqueta extender la API de los elementos DOM existentes

Hay muchas cosas que puedes hacer con él y hace que tu guión sea hermoso, ya que a este artículo le gusta decirlo. Elementos personalizados que definen nuevos elementos en HTML.

Entonces, recapitulemos,

Pros

  • Muy elegante y fácil de leer.

  • Es bueno no ver tantos divs. :pags

  • Permite una sensación única en el código

Contras

  • El apoyo de navegador más antiguo es algo fuerte a considerar.

  • Otros desarrolladores pueden no tener idea de qué hacer si no saben sobre etiquetas personalizadas. (Explíqueles o agregue comentarios para informarles)

  • Por último, una cosa a tener en cuenta, pero no estoy seguro, son los elementos bloqueados y en línea. Al usar etiquetas personalizadas, terminará escribiendo más CSS debido a que la etiqueta personalizada no tendrá un lado predeterminado.

La elección depende completamente de usted y debe basarla en lo que el proyecto está pidiendo.

Actualización 1/2/2014

Aquí hay un artículo muy útil que encontré y pensé que compartiría, Elementos personalizados.

Aprende el tecnología ¿Por qué los elementos personalizados? Los elementos personalizados permiten que los autores definan sus propios elementos. Los autores asocian el código JavaScript con nombres de etiquetas personalizados, y luego usan esos nombres de etiquetas personalizados como lo harían con cualquier etiqueta estándar.

Por ejemplo, después de registrar un tipo especial de botón llamado Super-Button, use el súper botón como este:

Los elementos personalizados siguen siendo elementos. Podemos crear, usarlos, manipularlos y componerlos tan fácilmente como cualquier estándar o hoy.

Esto parece una muy buena biblioteca para usar, pero noté que no pasó el estado de construcción de Window. Esto también está en un prealfa, creo, así que vigilaría esto mientras se desarrolla.

¿Por qué no quiere que los uses? No son comunes ni parte del estándar HTML5. Técnicamente, no están permitidos. Son un truco.

Sin embargo, me gustan a mí mismo. Puede estar interesado en XHTML5. Le permite definir sus propias etiquetas y usarlas como parte del estándar.

Además, como otros han señalado, no son válidos y, por lo tanto, no son portátiles.

¿Por qué no sabía que existen? No lo sé, excepto que no son comunes. Posiblemente no era consciente de que podías.

Las etiquetas inventadas casi nunca se usan, porque es poco probable que funcionen de manera confiable en todos los navegadores actuales y en cada futuro navegador.

Un navegador tiene que analizar el código HTML en elementos que sabe, a las etiquetas inventadas se convertirán en otra cosa para que se ajuste en el modelo de objeto de documento (DOM). Como los estándares web no cubren cómo manejar todo lo que está fuera de los estándares, los navegadores web tienden a manejar el código no estandal de diferentes maneras.

El desarrollo web es lo suficientemente complicado con un grupo de navegadores diferentes que tienen sus propias peculiaridades, sin agregar otro elemento de incertidumbre. La mejor apuesta para seguir con las cosas que realmente están en los estándares, eso es lo que los proveedores de navegador intentan seguir, por lo que tiene la mejor oportunidad de trabajar.

Creo que las etiquetas inventadas son potencialmente más confusas o poco claras que las P con IDS (algún bloque de texto en general). Todos sabemos que AP con una identificación es un párrafo, pero ¿quién sabe para qué están destinados las etiquetas inventadas? Al menos ese es mi pensamiento. :) Por lo tanto, esto es más un problema de estilo / claridad que uno de funcionalidad.

Otros han hecho excelentes puntos, pero vale la pena señalar que si observa un marco como Angularjs, hay un caso muy válido para elementos y atributos personalizados. Estos transmiten no solo un mejor significado semántico al XML, sino que también pueden proporcionar comportamiento, ver y sentir para la página web.

CSS es un lenguaje de hoja de estilo que se puede usar para presentar documentos XML, no solo (x) documentos HTML. Su fragmento con las etiquetas inventadas podría ser parte de un documento XML legal; Sería uno si lo encerras en un solo elemento raíz. Probablemente ya tengas un <html> ...</html> ¿alrededor? Cualquier navegador actual puede mostrar documentos XML.

Por supuesto, no es un muy buen documento XML, carece de una gramática y una declaración XML. Si usa un encabezado de declaración HTML en su lugar (y probablemente una configuración del servidor que envía el tipo de MIME correcto), en su lugar sería HTML ilegal.

(X) HTML tiene ventajas sobre XML simple, ya que los elementos tienen un significado semántico que es útil en el contexto de una presentación de la página web. Las herramientas pueden funcionar con esta semántica, otros desarrolladores saben el significado, es menos propenso a errores y es mejor leer.

Pero en otros contextos es mejor usar CSS con XML y/o XSLT para hacer la presentación. Esto es lo que hiciste. Como esta no era tu tarea, no sabías lo que estabas haciendo, y HTML/CSS es la mejor manera de ir la mayor parte del tiempo que debes seguir con él en tu escenario.

Debe agregar un encabezado HTML (x) a su documento para que las herramientas puedan darle mensajes de error significativos.

... Simplemente cambio todas mis etiquetas inventadas a párrafos con identificadores.

De hecho, estoy en desacuerdo con su sugerencia de cómo hacerlo correctamente.

  1. A <p> La etiqueta es para párrafos. Veo personas que lo usan todo el tiempo en lugar de un DIV, simplemente para fines de espacio o porque parece más suave. Si no es un párrafo, no lo use.

  2. No necesita ni desea colocar identificaciones en todo a menos que necesite apuntarlo específicamente (por ejemplo, con JavaScript). Use clases o simplemente un div.

Desde sus primeros días, CSS se diseñó para ser un marcado agnóstico, por lo que se puede usar con cualquier lenguaje productor de marcado. Cualquier etiqueta que cumpla con name token La producción es perfectamente válida en CSS. Entonces su pregunta es más bien sobre HTML que CSS en sí.

Los elementos con etiquetas personalizadas son compatibles con la especificación HTML5. HTML5 estandariza la forma en que se deben analizar los elementos desconocidos en el DOM. Entonces, HTML5 es la primera especificación HTML que permite que los elementos personalizados hablen estrictamente. Solo necesitas usar HTML5 DOCTYPE <!DOCTYPE html> en tu documento.

Como los nombres de etiquetas personalizados en sí mismos ...

Este documento http://www.w3.org/tr/custom-elements/ Recomienda etiquetas personalizadas que elija contener al menos un símbolo '-' (Dash). De esta manera, no entrarán en conflicto con futuros elementos HTML. Por lo tanto, será mejor que cambie su médico a algo como esto:

<style>
so-cool {
    color:blue;
}
</style>

<body>
    <so-cool>HELLO</so-cool>
</body>

Sorprendentemente, nadie (incluido mi yo pasado) mencionó la accesibilidad. Otra razón por la que usar etiquetas válidas en lugar de personalizadas es para compatibilidad con la mayor cantidad de software, incluidos los lectores de pantalla y otras herramientas que las personas necesitan para fines de accesibilidad. Además, las leyes de accesibilidad como Wai requerir Hacer sitios web accesibles, lo que generalmente significa requerirles que usen un marcado válido.

Aparentemente, nadie lo mencionó, así que lo haré.

Este es un subproducto de Guerras del navegador.

En la década de 1990, cuando Internet comenzó a comenzar a la corriente principal, la competencia se incrementó en el mercado del navegador. Para mantenerse competitivos y dibujar usuarios, algunos navegadores (especialmente Internet Explorer) intentaron ser útiles y "fáciles de usar" al intentar descubrir qué diseñadores de páginas quiso decir y así permitido el marcado que sean incorrectos (por ejemplo, <b><i>foobar</b></i> haría correctamente como bold-italics).

Esto tenía sentido hasta cierto punto porque si un navegador seguía quejándose de los errores de sintaxis mientras que otro comió algo que le arrojó y escupió un resultado correcto (más o menos), entonces las personas se aclararían naturalmente a este último.

Si bien muchos pensaron que las guerras del navegador habían terminado, una nueva guerra entre los vendedores del navegador ha reavivado en los últimos años desde que se lanzó Chrome, Apple comenzó a crecer nuevamente y empujando a Safari, e IE perdió su dominio. (Podría llamarlo una "Guerra Fría" debido a la cooperación percibida y el apoyo de los estándares de los proveedores de navegadores). Por lo tanto, no es una sorpresa que incluso los navegadores contemporáneos que según cabe suponer Conformarse estrictamente con los estándares web en realidad intenta ser "inteligente" y permitir un comportamiento que rompa estándar como este para tratar de obtener una ventaja como antes.

Desafortunadamente, este comportamiento permisivo condujo a un enorme (alguno incluso podría decir cáncer) crecimiento de páginas web mal marcadas. Debido a que IE era el navegador más indulgente y popular, y debido a la continua incumplimiento de los estándares de Microsoft, IE se volvió infame por alentar y promover un mal diseño y propagación y perpetuación de páginas rotas.

Es posible que pueda salirse con la suya con las peculiaridades y hazañas como esa en algunos navegadores por ahora, pero aparte del rompecabezas o el juego ocasional o algo así, siempre debe seguir estándares web Al crear páginas web y sitios para asegurarse de que se muestren correctamente y evitar que se rompan (posiblemente se ignoren por completo) con una actualización del navegador.

Si bien los navegadores generalmente relacionarán a CSS con etiquetas HTML, independientemente de si son válidos o no, no debe hacerlo absolutamente.

Técnicamente, no hay nada de malo en esto desde una perspectiva CSS. Sin embargo, usar etiquetas inventadas es algo que nunca debes hacer en HTML.

HTML es un lenguaje de marcado, lo que significa que cada etiqueta corresponde a un tipo específico de información.

Sus etiquetas inventadas no corresponden a ningún tipo de información. Esto creará problemas de los rastreadores web, como Google.

Lea más información sobre el Importancia del marcado correcto.

Editar

Los DIV se refieren a grupos de múltiples elementos relacionados, destinados a mostrarse en forma de bloque y pueden manipularse como tales.

Los tramos se refieren a elementos que deben diseñarse de manera diferente que el contexto en el que se encuentran actualmente y están destinados a mostrarse en línea, no como un bloque. Un ejemplo es si algunas palabras en una oración deben ser todos los límites.

Las etiquetas personalizadas no se correlacionan con ningún estándar y, por lo tanto, SPAN/DIV debe usarse con propiedades de clase/ID.

Existen muy exenciones específicas a esto, como JS angular

Aunque CSS tiene una cosa llamada "selector de etiquetas", en realidad no sabe qué es una etiqueta. Eso queda para que el idioma del documento defina. CSS fue diseñado para usarse no solo con HTML, sino también con XML, donde (suponiendo que no está utilizando un DTD u otro esquema de validación) las etiquetas pueden ser casi cualquier cosa. También podría usarlo con otros idiomas, aunque necesitaría encontrar su propia semántica para qué se corresponden exactamente cosas como "etiquetas" y "atributos".

Los navegadores generalmente aplican CSS a etiquetas desconocidas en HTML, porque esto se considera mejor que romper por completo: al menos pueden mostrar algo. Pero es muy mala práctica para usar etiquetas "falsas" deliberadamente. Una razón para esto es que las nuevas etiquetas se definen de vez en cuando, y si uno está definido, se parece a su etiqueta falsa pero no funciona de la misma manera, eso puede causar problemas con su sitio en nuevos navegadores.

¿Por qué CSS funciona con elementos falsos? Porque no hace daño a nadie porque se supone que no debes usarlos de todos modos.

¿Por qué mi profesor no quiere que use elementos inventados? Porque si ese elemento se define mediante una especificación en el futuro, su elemento tendrá un comportamiento impredecible.

Además, ¿por qué no sabía que los elementos inventados existen y funcionan con CSS? ¿Son poco comunes? Debido a que él, como la mayoría de los otros desarrolladores web, entiende que no debemos usar cosas que podrían romper al azar en el futuro.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top