Falta la propiedad de atributo requerida en el enlace del elemento

79 
<!DOCTYPE html>
...
<link rel='stylesheet' id='basecss-css' href='http://www.someurl.com/modules/14ce1e21/peadig-eucookie.css' type='text/css' media='all' />

¿Por qué el validador ( http://validator.w3.org/ ) rechaza esto? ¿Qué atributo es "obligatorio" del que no tenga conocimiento?

El error:

Línea de error 408, columna 142: Falta la propiedad de atributo requerida en el enlace del elemento. … / Modules / 14ce1e21 / peadig-eucookie.css 'type =' text / css 'media =' all '/> Atributos para el enlace del elemento: atributos globales href crossorigin rel media hreflang tamaños de tipo Además, el atributo title tiene una semántica especial en este elemento.

html 
— no9
fuente
No puedo reproducir ese mensaje de error.
— Quentin
es extraño ... pero el validador está lanzando el error de todos modos.
— no9
Es de suponer que hay algo de contexto que le falta a su pregunta.
— Quentin
1
tal vez sea el problema porque no está en el encabezado?
— no9
@ no9: Como Jukka explicó a continuación (y qué respuesta debe indicarse como la respuesta, de esta manera también puede tener un <link> dentro del <body>:. <link rel='stylesheet' id='someId' href='folder/file.css' type='text/css' media='all' property='' />Funciona en todos los navegadores y valida. Se trata del atributo property.
— Frank Conijn

Respuestas:

82

El consejo de @stevelove es aparentemente la solución práctica, pero aquí hay una respuesta teórica a la pregunta del "por qué":

Aunque un linkelemento es incondicionalmente inválido en bodyespecificaciones HTML anteriores, HTML5 tiene reglas más permisivas. De acuerdo con HTML 5.1 Nightly (que es más o menos lo que el validador intenta mantenerse al día), el linkelemento también está permitido en el cuerpo del documento (siempre que se permita el contenido de redacción), siempre que tenga un itempropatributo. Esto parece hacer que el mensaje de error sea aún más desconcertante. Parte de la explicación es que el validador en realidad está validando contra HTML5 + RDFa, y RDFa define el propertyatributo. El problema sigue siendo qué definición específica de RDFa está comprobando el validador, ya que la definición también necesitaría redefinir las reglas para HTML.

De todos modos, la información del mensaje de error está desactualizada. Aparentemente, los mensajes de error no se actualizan tan rápido como la funcionalidad básica del validador.

— Jukka K. Korpela
fuente
5
Vea la respuesta de hawkeye126 sobre cómo solucionar este problema.
— frenchie
Este mensaje de error ya no está presente a partir de 2017.
— TheAmazingKnight
91

Añadir 

property='stylesheet'

si no desea mover su enlace al <head>del documento.

<link rel='stylesheet' property='stylesheet' id='basecss-css'  href='http://www.someurl.com/modules/14ce1e21/peadig-eucookie.css' type='text/css' media='all' />
— 9ete
fuente
43

¿Estás <link>dentro del <body>? Si es así, intente ponerlo <head>en la parte superior del documento.

— stevelove
fuente
4
Dejando a un lado la validación, siempre debe colocar las hojas de estilo en la parte superior del documento para evitar bloquear el procesamiento del resto de la página, como se describe aquí: developer.yahoo.com/performance/rules.html#css_top
— stevelove
10
@stevelove (un año después / para referencia futura) Eso no suele optimizarse. En el mejor de los mundos posibles, debe colocar css crítico <style>en la parte superior del documento en la parte superior del documento y colocar el resto en la parte inferior. Esta es la mejor forma de abrir una página más rápido. Puede encontrar documentos en la web sobre esto, PERO no siempre es posible hacerlo (y, a menudo, la eficiencia del código empresarial> rendimiento).
— Ludovic Guillaume
15

Responsable del validador W3C HTML5 aquí. Como se señaló en otra respuesta, además de verificar los requisitos en la especificación HTML5 en sí, el validador también verifica los requisitos en la especificación HTML + RDFa 1.1:

http://www.w3.org/TR/html-rdfa/

Y aunque la especificación HTML en sí dice linkque normalmente no está permitido en el cuerpo ＊, la especificación RDFa dice que si un linkelemento tiene un propertyatributo, está permitido en el cuerpo.

Entonces, el mensaje del validador básicamente dice: 「El linkelemento solo se permite aquí si tiene un propertyatributo. Pero este linkelemento en particular no tiene ningún propertyatributo. 」

＊ La especificación HTML en sí misma también dice que el linkelemento está permitido en el cuerpo si tiene un itempropatributo, pero solo si el linkelemento no tiene un relvalor. ( itempropes el atributo “Microdata” cuyo propósito es básicamente el mismo que el propertyatributo RDFa ).

Entonces, tenemos dos atributos diferentes que afectan de forma independiente en qué lugar de un documento linkse permite que aparezca el elemento, y eso complica la lógica de verificación en el validador de una manera que dificulta la emisión de un mensaje de error mejor y más útil para este caso.

— ladrón
fuente
1

Solo para necesidades futuras, aquí está mi comentario:

En la página de w3c tenemos el siguiente comentario:

Si se usa el atributo rel, el elemento está restringido al elemento head. Cuando se usa con el atributo itemprop, el elemento se puede usar tanto en el elemento principal como en el cuerpo de la página, sujeto a las restricciones del modelo de microdatos.

Entonces, el error se puede resolver cambiando relpor itemprop, porque relse usará en la cabeza yitemprop se puede usar en el cuerpo.

Espero que ayude a alguien.

— h3nr1ke
fuente
2
Encontré otra forma de resolverlo, puede combinar rel y property en la misma etiqueta, por ejemplo <link rel='stylesheet' property='stylesheet' href='custom.css' type='text/css' media='screen' />
— h3nr1ke
0

Quiere que esté en tu cabeza. Sin embargo, si el CSS no es demasiado importante para cargarlo de inmediato, obtendrá la herramienta de velocidad de página de Google que le indicará que lo coloque en la parte inferior del cuerpo.

Como ejemplo, uso uno de los temas de jquery (redmond) para diseñar mi autocompletar. No es necesario poner esto en la parte superior de mi página, ya que ralentizará todo lo demás.

Por lo tanto, no se preocupe demasiado por la validación perfecta de w3c.

— Randy maíz verde
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.