W łączu elementu brakuje wymaganej właściwości atrybutu

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

Dlaczego walidator ( http://validator.w3.org/ ) odrzuca to? Jaki atrybut jest „wymagany”, o czym nie wiem?

Błąd:

Błąd w wierszu 408, kolumna 142: W łączu elementu brakuje wymaganej właściwości atrybutu. … / Modules / 14ce1e21 / peadig-eucookie.css 'type =' text / css 'media =' all '/> Atrybuty elementu link: Atrybuty globalne href crossorigin rel media rozmiary typu hreflang Ponadto atrybut title ma specjalną semantykę w tym element.

html 
— no9
źródło
Nie mogę odtworzyć tego komunikatu o błędzie.
— Quentin
to dziwne ... ale walidator i tak zgłasza błąd.
— no9
Przypuszczalnie brakuje Ci kontekstu w Twoim pytaniu.
— Quentin
1
może jest to problem, ponieważ nie ma go w nagłówku?
— no9
@ No9: Jak Jukka wyjaśniono poniżej (i które odpowiedź powinna być wskazana jako na odpowiedź, w ten sposób można mieć <link> wewnątrz <body>, a także: <link rel='stylesheet' id='someId' href='folder/file.css' type='text/css' media='all' property='' />.. działa we wszystkich przeglądarkach, i potwierdza Chodzi o atrybucie property.
— Frank Conijn

Odpowiedzi:

82

Rada @stevelove jest najwyraźniej praktycznym rozwiązaniem, ale oto teoretyczna odpowiedź na pytanie „dlaczego”:

Chociaż linkelement jest bezwarunkowo nieprawidłowy w bodystarszych specyfikacjach HTML, HTML5 ma bardziej liberalne reguły. Zgodnie z HTML 5.1 Nightly (który jest mniej więcej tym, za czym walidator stara się nadążyć), linkelement jest dozwolony również w treści dokumentu (wszędzie tam, gdzie dozwolone jest sformułowanie treści), pod warunkiem, że ma itempropatrybut. Wydaje się, że komunikat o błędzie jest jeszcze bardziej zagadkowy. Częścią wyjaśnienia jest to, że walidator faktycznie sprawdza zgodność z HTML5 + RDFa, a RDFa definiuje propertyatrybut. Nadal pozostaje problem, z jaką konkretną definicją RDFa sprawdza walidator, ponieważ definicja musiałaby również przedefiniować reguły dla HTML.

W każdym razie informacje zawarte w komunikacie o błędzie są nieaktualne. Najwyraźniej komunikaty o błędach nie są aktualizowane tak szybko, jak podstawowa funkcjonalność walidatora.

— Jukka K. Korpela
źródło
5
Zobacz odpowiedź hawkeye126, jak to naprawić.
— Francuz
Ten komunikat o błędzie NIE jest już obecny od 2017 r.
— TheAmazingKnight
91

Dodaj 

property='stylesheet'

jeśli nie chcesz przenosić swojego łącza do <head>dokumentu.

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

Czy jesteś w <link>środku <body>? Jeśli tak, spróbuj umieścić go <head>u góry dokumentu.

— piec
źródło
4
Pomijając walidację, zawsze należy umieszczać arkusze stylów u góry dokumentu, aby uniknąć blokowania renderowania reszty strony, jak opisano tutaj: developer.yahoo.com/performance/rules.html#css_top
— stevelove
10
@stevelove (rok później / do wykorzystania w przyszłości) To nie jest często optymalizowane. W najlepszym ze wszystkich możliwych światów powinieneś umieścić krytyczny plik CSS w <style>części strony widocznej na ekranie u góry dokumentu, a resztę na dole. To najlepszy sposób na szybsze otwieranie strony. Możesz znaleźć w sieci dokumenty na ten temat, ALE nie zawsze jest to możliwe (i często wydajność kodu biznesowego> wydajność).
— Ludovic Guillaume
15

Opiekun walidatora W3C HTML5 tutaj. Jak wskazano w innej odpowiedzi, oprócz sprawdzania wymagań w samej specyfikacji HTML5, walidator sprawdza również wymagania specyfikacji HTML + RDFa 1.1:

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

I chociaż sama specyfikacja HTML mówi, że linknormalnie nie jest dozwolone w treści ＊, specyfikacja RDFa mówi, że jeśli linkelement ma propertyatrybut, jest on dozwolony w treści.

Tak więc ten komunikat walidatora zasadniczo mówi: 「linkElement jest tutaj dozwolony tylko wtedy, gdy ma propertyatrybut. Ale ten konkretny linkelement nie ma propertyatrybutu. 」

＊ Sama specyfikacja HTML również mówi, że linkelement jest dozwolony w treści, jeśli ma itempropatrybut - ale tylko wtedy, gdy linkelement nie ma relwartości. ( itempropto atrybut „Microdata”, którego cel jest zasadniczo taki sam jak propertyatrybutu RDFa ).

Mamy więc dwa różne atrybuty, które niezależnie wpływają na to, gdzie w dokumencie linkmoże pojawić się element, i to komplikuje logikę sprawdzania w walidatorze w sposób, który utrudnia emitowanie lepszego, bardziej pomocnego komunikatu o błędzie w tym przypadku.

— Sidehowbarker
źródło
1

Tylko dla przyszłych potrzeb, oto mój komentarz:

Na stronie w3c mamy następujący komentarz:

Jeśli używany jest atrybut rel, element jest ograniczony do elementu head. W połączeniu z atrybutem itemprop element może być używany zarówno w elemencie head, jak i w treści strony, z zastrzeżeniem ograniczeń modelu mikrodanych.

Więc błąd można rozwiązać, zmieniając relna itemprop, ponieważ relma być używany w głowie i itempropmoże być używany w ciele.

Mam nadzieję, że to komuś pomoże.

— h3nr1ke
źródło
2
Znalazłem inny sposób rozwiązania tego problemu, możesz połączyć rel i property w tym samym tagu, na przykład <link rel='stylesheet' property='stylesheet' href='custom.css' type='text/css' media='screen' />
— h3nr1ke
0

Chce, żeby to było w twojej głowie. Jeśli jednak css nie jest zbyt ważny, aby załadować się od razu, otrzymasz narzędzie Google Pagespeed z poleceniem umieszczenia go na dole treści.

Jako przykład używam jednego z motywów jQuery (redmond), aby stylizować moje autouzupełnianie. Nie ma potrzeby umieszczania tego na górze mojej strony, ponieważ spowolni to wszystko inne.

Więc nie martw się zbytnio o idealną walidację w3c.

— Randy Greencorn
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.