todas lista las funciones etiquetas elementos definicion body basicos atributos html css

html - lista - ¿Por qué CSS funciona con elementos falsos?



title html definicion (18)

¿Por qué CSS funciona con elementos falsos?

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

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

(Aunque se debe tener en cuenta que se está trabajando para definir un medio para extender HTML con elementos personalizados , pero este trabajo se encuentra en las primeras etapas de desarrollo en la actualidad, por lo que probablemente debería evitarse hasta que haya madurado).

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

  • No están permitidos por la especificación HTML.
  • Pueden entrar en conflicto con elementos estándar futuros con el mismo nombre
  • Probablemente exista un elemento HTML que se adapte mejor a la tarea

También; por qué no sabía que los elementos inventados existían y funcionaban con CSS. ¿Son infrecuentes?

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

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, se sorprendió un poco de que los elementos inventados funcionaran y me recomendaron que simplemente cambiara todos mis elementos inventados a párrafos con ID.

¿Por qué mi profesor no quiere que use elementos inventados? Ellos trabajan efectivamente.

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

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

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

  1. Una etiqueta <p> es para párrafos. Veo que la gente lo usa todo el tiempo en lugar de un div, simplemente por motivos de espaciado o porque parece más suave. Si no es un párrafo, no lo uses.

  2. No es necesario o desea pegar identificaciones en todo a menos que necesite apuntar específicamente (por ejemplo, con Javascript). Usa clases o solo un div directo.

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

Aunque a mí me gustan. Usted 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, son inválidos y por lo tanto no son portátiles.

¿Por qué no sabía que existen? No lo sé, salvo que no son comunes. Posiblemente él simplemente no era consciente de que tú pudieras.

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

Por supuesto, no es un documento XML muy bueno, carece de una gramática y una declaración XML. Si utiliza un encabezado de declaración HTML en su lugar (y probablemente una configuración de servidor que envíe el tipo de mime correcto), en su lugar sería un 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 página web. Las herramientas pueden funcionar con esta semántica, otros desarrolladores saben el significado, es menos propenso a errores y 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 forma de hacerlo la mayor parte del tiempo que deberías cumplir en tu escenario.

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

Creo que las etiquetas inventadas son potencialmente más confusas o poco claras que las p con ID (en general, un bloque de texto). Todos sabemos que ap con una ID es un párrafo, pero ¿quién sabe para qué están diseñadas 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.

Desde sus inicios, CSS fue diseñado para ser agnóstico al marcado, por lo que se puede utilizar con cualquier lenguaje de marcado que produzca estructuras DOM de árbol (SVG, por ejemplo). Cualquier etiqueta que cumpla con la producción de name token es perfectamente válida en CSS. Entonces tu pregunta es más sobre HTML que sobre CSS en sí.

Los elementos con etiquetas personalizadas son compatibles con la especificación HTML5. HTML5 estandariza la forma en que los elementos desconocidos deben analizarse en el DOM.Así que HTML5 es la primera especificación HTML que habilita elementos personalizados en sentido estricto. Solo necesitas usar el doctype HTML5 <!DOCTYPE html>en tu documento.

A partir de nombres de etiquetas personalizadas ...

Este documento http://www.w3.org/TR/custom-elements/ recomienda etiquetas personalizadas que elija para contener al menos un símbolo ''-'' (guión). De esta manera no entrarán en conflicto con futuros elementos HTML. Por lo tanto, es mejor que cambies tu documento por algo como esto:

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

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

Si decides usarlos, asegúrate de COMENTAR tu html. Algunas personas pueden tener algunos problemas para descubrir qué es, por lo que un comentario podría ahorrarles un montón de tiempo.

Algo como esto,

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

Cuando hagas tu propia etiqueta / elementos personalizados, los navegadores antiguos no tendrán ni idea de lo que son elementos html5 como nav / section .

Si estás interesado en este concepto, te recomiendo hacerlo 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 primitivas de API nuevas que se ubican bajo el paraguas de Componentes Web, pero posiblemente sea la más importante. Los componentes web no existen sin las funciones desbloqueadas por elementos personalizados:

Definir nuevos elementos HTML / DOM Crear elementos que se extiendan desde otros elementos Lógicamente, agrupar funcionalidad personalizada en una sola etiqueta Extender la API de elementos DOM existentes

Hay mucho que puedes hacer con él y hace que tu script sea hermoso, ya que a este artículo le gusta ponerlo. Elementos personalizados definiendo nuevos elementos en HTML .

Así que vamos a recapitular,

Pros

  • Muy elegante y fácil de leer.

  • Es bueno no ver tantos divs . :pag

  • Permite una sensación única al código.

Contras

  • La compatibilidad con navegadores antiguos es algo importante a tener en cuenta.

  • Es posible que otros desarrolladores no tengan idea de qué hacer si no conocen las etiquetas personalizadas. (Explícales o agrega comentarios para informarles)

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

La elección depende totalmente de usted y debe basarse en lo que solicita el proyecto.

Actualización 1/2/2014

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

Aprende la tecnología ¿Por qué elementos personalizados? Los elementos personalizados permiten a los autores definir 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 súper botón, use el botón súper así:

Los elementos personalizados son todavía elementos. Podemos crear, usar, manipular y componer tan fácilmente como cualquier estándar o hoy.

Parece una biblioteca muy buena para usar, pero me di cuenta de que no pasó el estado de compilación de Windows. Esto también está en un pre-alfa, creo, así que mantendría un ojo en esto mientras se desarrolla.

Hay algunas cosas acerca de las otras respuestas que están mal redactadas o quizás un poco incorrectas.

FALSO (ish): los elementos HTML no estándar son "no permitidos", "ilegales" o "no válidos".

No necesariamente. Son "no conformes" . ¿Cual es la diferencia? Algo puede "no conformarse" y aún ser "permitido". El W3C no enviará a la policía de HTML a su casa y lo arrastrará.

El W3C dejó las cosas de esta manera por una razón. La conformidad y las especificaciones están definidas por una comunidad. Si tiene una comunidad más pequeña que consume HTML para propósitos más específicos y todos están de acuerdo con algunos Elementos nuevos que necesitan para facilitar las cosas, pueden tener lo que el W3C denomina "otras especificaciones aplicables" . (esto es una burda simplificación, obviamente, pero entiendes 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 las especificaciones para las que se está validando, no garantizar la "legalidad" para el navegador o para su uso .

FALSO (ish): los elementos HTML no estándar darán como resultado problemas de representación

Posiblemente, pero poco probable. (reemplace "will" con "might") La única manera de que esto resulte en un problema de representación es si su elemento personalizado entra en conflicto con otra especificación, como un cambio en la especificación HTML u otra especificación que se respeta dentro del mismo sistema (como SVG, Matemáticas, o algo personalizado).

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

Los agentes de usuario deben tratar los elementos y atributos que no entienden como semánticamente neutros; dejándolos en el DOM (para procesadores DOM), y diseñándolos según CSS (para procesadores CSS), pero sin inferir ningún significado de ellos

Nota: si desea utilizar una etiqueta personalizada, solo recuerde que un cambio en la especificación HTML en un momento posterior podría hacer estallar su estilo, así que esté preparado. Sin embargo, es realmente improbable que el W3C implemente la etiqueta <imsocool> .

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

La razón por la que puede acceder y alterar elementos personalizados utilizando JavaScript es porque la especificación incluso habla sobre cómo deben manejarse en el DOM , que es la API (realmente horrible) que le permite manipular los elementos en su 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: La conformidad con la especificación se realiza con fines de comunicación y seguridad. La no 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 atraerá las llamas, pero hay mis 2 centavos)

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

Un navegador tiene que analizar el código HTML en elementos que conoce, para que las etiquetas inventadas se conviertan en otra cosa que se ajuste al modelo de objetos 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 estándar de diferentes maneras.

El desarrollo web es bastante complicado con un montón de navegadores diferentes que tienen sus propias peculiaridades, sin agregar otro elemento de incertidumbre. La mejor opción es seguir con las cosas que realmente están en los estándares, eso es lo que los proveedores de navegadores intentan seguir, para que tenga la mejor oportunidad de funcionar.

Los elementos desconocidos son tratados como div s por los navegadores modernos. Por eso trabajan. Esto forma parte del estándar HTML5 que se aproxima y que introduce una estructura modular a la que se pueden agregar nuevos elementos.

En navegadores más antiguos (creo que IE7-) puedes aplicar un truco de Javascript, después de lo cual también funcionarán.

Aquí hay una pregunta relacionada que encontré al buscar un ejemplo.

Aquí hay una pregunta sobre la corrección de Javascript . Resulta que, de hecho, es IE7 que no soporta estos elementos fuera de la caja.

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

Sí, bastante. Pero sobre todo: no sirven 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 lagunas en su conocimiento, a veces. Esto puede deberse al hecho de que necesitan enseñar a los estudiantes los conceptos básicos sobre un tema determinado, y realmente no vale la pena conocer todos los detalles y estar al día. Una vez obtuve la detención porque un maestro pensó que programé un virus, solo porque podía hacer que una computadora reprodujera música usando el comando de play en GWBasic. (Verdadera historia, y sí, hace mucho tiempo). Pero sea cual sea la razón, creo que el consejo de no usar elementos de custome es acertado.

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

Según las especificaciones:

CSS

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

Pensé que esto se llamaba el selector de elementos , pero aparentemente es el selector de tipo . La especificación continúa hablando sobre CSS qualified names que no ponen ninguna restricción en lo que realmente son los nombres. Es decir, siempre que el selector de tipo coincida con la sintaxis del nombre calificado de CSS, es CSS técnicamente correcto y coincidirá con el elemento en el documento. No existe una restricción específica de CSS sobre los elementos que no existen en una especificación particular, HTML o de otro tipo.

HTML

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

Los autores no deben usar elementos, atributos o valores de atributos para otros fines que no sean su finalidad semántica adecuada, ya que esto impide 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 mucho más difícil que el idioma se extienda en el futuro.

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

Sin embargo, hay un borrador para los elementos personalizados , pero dudo que esté implementado en cualquier parte todavía.

YADA (otra respuesta (diferente))

Edición: consulte el comentario de BoltClock a continuación con respecto al tipo vs etiqueta vs elemento. Normalmente no me preocupo por la semántica, pero su comentario es muy apropiado e informativo.

Aunque ya hay un montón de buenas respuestas, usted indicó que su profesor le pidió que publique esta pregunta para que parezca que está (formalmente) en la escuela . Pensé que expondría un poco más en profundidad no solo sobre CSS, sino también sobre la mecánica de los navegadores web. Según Wikipedia , "CSS es un lenguaje de hojas de estilo que se usa para describir ... un documento escrito en un lenguaje de marcas". (Agregué el énfasis en "a") Observe que no dice "escrito en HTML" ni mucho menos una versión específica de HTML. CSS se puede utilizar en HTML, XHTML, XML, SGML, XAML, etc. Por supuesto, necesita algo que represente cada uno de estos tipos de documentos que también apliquen estilo. Por definición, CSS no sabe / entiende / importa sobre etiquetas específicas de lenguaje de marcado. Por lo tanto, las etiquetas pueden ser "inválidas" en lo que respecta a HTML, pero no hay un concepto de etiqueta / elemento / tipo "válido" en CSS.

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

Si un navegador visual ( otros ya han abordado el hecho de que los lectores de pantalla pueden tener otros desafíos relacionados con las etiquetas no válidas ) aplica el formato depende de si el analizador deja la etiqueta "no válida" en el documento y luego si el motor de renderizado aplica estilos a esa etiqueta. Debido a que dificultaría el desarrollo / mantenimiento, los motores de CSS no se escriben para comprender que "este es un documento HTML, por lo que aquí está la lista de etiquetas / elementos / tipos válidos". Los motores CSS simplemente encuentran etiquetas / elementos / tipos y luego le dicen al motor de renderización, "Estos son los estilos que debe aplicar". Ya sea que el motor de renderizado decida o no aplicar los estilos, depende de ello.

Aquí hay una manera fácil de pensar en el flujo básico de motor a motor: analizador -> CSS -> renderizado. En realidad, es mucho más complicado, pero esto es suficiente para empezar.

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

TL; DR

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

Respuesta larga

Hay algunos argumentos que el código con etiquetas personalizadas es más utilizable.

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

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

  • Google lo prefiere así que es bueno para SEO.
  • Hace que su página web funcione más en navegadores que no haya probado.
  • Te hace parecer más profesional (al menos para algunos desarrolladores)
  • Los navegadores compatibles pueden procesar [HTML válido más rápido]
  • Señala una serie de errores desconocidos que probablemente no haya detectado y que afecten a cosas que probablemente no haya probado, por ejemplo, la página de códigos o el conjunto de idiomas de la página.

¿Por qué validar | W3C

  • Validación como herramienta de depuración.
  • La validación como un control 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 profesionalidad.

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

Este es un subproducto de las guerras del navegador .

En la década de los 90, cuando Internet comenzó a convertirse en la corriente principal, la competencia se incrustó en el mercado de los navegadores. Para mantener la competitividad y atraer a los usuarios, algunos navegadores (sobre todo Internet Explorer) dispuesto a ayudar y “fácil de usar”, tratando de averiguar lo que los diseñadores de páginas significaban y por lo tanto marcado permitido que son incorrectas (por ejemplo, <b><i>foobar</b></i>haría correctamente como osada cursiva).

Hasta cierto punto, esto tenía sentido porque si un navegador seguía quejándose de los errores de sintaxis, mientras que otro comía cualquier cosa que arrojara y escupía un resultado correcto (más o menos), entonces la gente acudiría naturalmente a este último.

Si bien muchos pensaron que la guerra de navegadores había terminado, una nueva guerra entre los proveedores de navegadores se ha reiniciado en los últimos años desde que se lanzó Chrome, Apple comenzó a crecer nuevamente y empujó a Safari, e IE perdió su dominio. (Podría llamarlo una "guerra fría" debido a la cooperación y el apoyo percibidos de las normas por parte de los proveedores de navegadores). Por lo tanto, no es una sorpresa que incluso los navegadores contemporáneos que supuestamente se ajustan estrictamente a los estándares web intenten ser "inteligentes" Permita un comportamiento estándar como este para intentar obtener una ventaja como antes.

Desafortunadamente, este comportamiento permisivo condujo a un crecimiento masivo ( some incluso podrían decir canceroso) de páginas web mal marcadas. Debido a que IE era el navegador más indulgente y popular, y debido a las continuas burlas de los estándares de Microsoft, IE se hizo famoso por alentar y promover el mal diseño y propagar y perpetuar las páginas rotas.

Es posible que pueda evitar el uso de peculiaridades y vulnerabilidades como esta en algunos navegadores por ahora, pero aparte de los ocasionales rompecabezas o juegos o algo así, siempre debe atenerse a los estándares web al crear páginas web y sitios para asegurarse de que se muestren correctamente y Evita que se rompan (posiblemente se ignoren por completo) con una actualización del navegador.

Mientras que los navegadores generalmente relacionarán CSS con HTML, independientemente de si son o no válidas, usted NO debería hacer esto.

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 confeccionadas no corresponden a ningún tipo de información. Esto creará problemas de los rastreadores web, como Google.

Lea más información sobre la importancia del marcado correcto .

Editar

Los divs se refieren a grupos de múltiples elementos relacionados, destinados a ser mostrados en forma de bloques y pueden ser manipulados como tales.

Los tramos se refieren a elementos que deben tener un estilo diferente al contexto en el que se encuentran actualmente y se deben mostrar en línea, no como un bloque. Un ejemplo es si unas pocas palabras en una oración necesitan ser mayúsculas.

Las etiquetas personalizadas no se correlacionan con ningún estándar y, por lo tanto, se debe usar span / div con las propiedades de clase / ID en su lugar.

Existen excepciones muy específicas a esto, como Angular JS.

Aunque CSS tiene una cosa llamada "selector de etiquetas", en realidad no sabe qué es una etiqueta. Eso queda por definir el lenguaje del documento. CSS fue diseñado para ser usado 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 de casi cualquier cosa. También podría usarlo en otros idiomas, aunque tendría que crear su propia semántica para exactamente a qué cosas corresponden las "etiquetas" y los "atributos".

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