¿Cuál es la diferencia entre html y html: lang (en) en CSS?

La pseudo-clase de lenguaje CSS para permitirnos especificar diferentes estilos para diferentes idiomas, de esta manera:

html:lang(en) .foo { ... } 

Sin embargo, esto no funciona en IE7, así que he estado usando un selector de atributos:

 html[lang="en"] .foo { ... } 

Parecen hacer lo mismo, pero ¿hay diferencias sutiles? Y si no, ¿por qué CSS incluso tiene una pseudoclase de lenguaje, cuando el selector de atributos hace exactamente lo mismo?

En HTML, tanto la :lang() como el selector de atributos coincidirán con un elemento con el atributo lang correspondiente.

La diferencia es que un navegador puede tener otras formas de determinar el idioma de un elemento determinado cuando se prueba contra la :lang() que puede definirse por el lenguaje del documento y / o la implementación, mientras que un selector de atributos solo comprobará un elemento para ese atributo dado , sin ninguna semántica basada en documentos que lo acompañe.

Por ejemplo, en HTML, la pseudo-clase también coincidirá con cualquiera de los descendientes del elemento para el que no haya un lang diferente, según cómo un navegador determine el idioma para esos descendientes. Por lo general, los descendientes heredarán el atributo de idioma de su antecesor si no está establecido explícitamente.

De la especificación :

La diferencia entre :lang(C) y el operador ‘| =’ es que el operador ‘| =’ solo realiza una comparación contra un atributo dado en el elemento, mientras que la :lang(C) usa el conocimiento de los UAs de la semántica del documento para realizar la comparación.

En este ejemplo HTML, solo el CUERPO coincide con [lang|=fr] (porque tiene un atributo LANG) pero tanto el CUERPO como el P coinciden :lang(fr) (porque ambos están en francés). La P no coincide con [lang|=fr] porque no tiene un atributo LANG.

  

Je suis français.

En su ejemplo, el siguiente selector también coincidirá con su elemento .foo :

 .foo:lang(en) 

Pero los siguientes selectores no lo harán, si no tiene su propio conjunto de atributos lang :

 .foo[lang="en"] .foo[lang|="en"] 

En cuanto al soporte del navegador, la :lang() se admite a partir de IE8, por lo que IE7 es realmente el único navegador que no podrá admitir utilizando la pseudoclase sobre el selector de atributos.


Selectores 4 introduce la :dir() para elementos coincidentes en función de su direccionalidad. Como la direccionalidad es una propiedad relacionada con el lenguaje, los atributos dir y lang funcionan de manera similar en HTML, y la diferencia entre :dir() y su correspondiente selector de atributos es análoga a la que existe entre :lang() y su correspondiente selector de atributos: al punto donde la primera oración de la siguiente cita es, de hecho, una copia palabra por palabra del mismo párrafo en la sección que describe :lang() :

La diferencia entre: dir (C) y ” [dir = C] ” es que ” [dir = C] ” solo realiza una comparación con un atributo dado en el elemento, mientras que el: dir (C) pseudo- class usa el conocimiento de los UA de la semántica del documento para realizar la comparación. Por ejemplo, en HTML, la direccionalidad de un elemento hereda para que un elemento secundario sin un atributo dir tenga la misma direccionalidad que su antecesor más cercano con un atributo dir válido. Como otro ejemplo, en HTML, un elemento que coincida con ” [dir = auto] ” coincidirá con: dir (ltr) o: dir (rtl) dependiendo de la direccionalidad resuelta de los elementos según lo determinado por su contenido. [HTML5]

Una cosa más que no fue mencionada por nadie más :lang() pseudoclass no está interesado en cómo se establece el idioma del elemento. En el documento XHTML (verdadero XHTML con tipo XML MIME), puede usar xml:lang="en" y el elemento coincidirá :lang(en) pero no [lang="en"] .

De acuerdo con la especificación ,

Si el idioma del documento especifica cómo se determina el lenguaje humano de un elemento, es posible escribir selectores en CSS que coincidan con un elemento en función de su idioma. Por ejemplo, en HTML [HTML4], el idioma está determinado por una combinación del atributo “lang”, el elemento META, y posiblemente por información del protocolo (como encabezados HTTP). XML utiliza un atributo llamado xml: lang, y puede haber otros métodos específicos del idioma del documento para determinar el idioma.

La pseudo-clase ‘: lang (C)’ coincide si el elemento está en el lenguaje C. Si existe una coincidencia se basa únicamente en que el identificador C sea igual a, o una subcadena separada por guión del, valor del lenguaje del elemento, de la misma manera que si lo realizara el operador ‘| =’. La coincidencia de C con el valor del idioma del elemento se realiza sin distinción de mayúsculas y minúsculas para los caracteres dentro del rango ASCII. El identificador C no tiene que ser un nombre de idioma válido.

Es decir:

  1. Funciona para muchas otras formas de especificar un idioma además del atributo simple lang .
    • Lo más importante, como se detalla en la respuesta de @BoltClock, utilizará el idioma especificado (de cualquier manera) en un elemento contenedor, no solo en el elemento en sí, ya que el lenguaje es heredado por elementos secundarios.
  2. Utiliza |= semántica, es decir :lang(en) y :lang(us) coincidirán span[lang=en-us] .
  3. Se garantiza que no distingue entre mayúsculas y minúsculas, mientras que

La distinción entre mayúsculas y minúsculas de los nombres y valores de los atributos en los selectores depende del idioma del documento.

Css admite selectores attribtue para todos los elementos, no solo para el atributo lang html tags. Por ejemplo html como bar podría seleccionarse como a[title=Jeeha] { ... } en css.

Consulte este enlace para obtener más detalles sobre coincidencias parciales y variantes.

    Intereting Posts