Liên kết phần tử thiếu thuộc tính thuộc tính bắt buộc

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

Tại sao trình xác thực ( http://validator.w3.org/ ) lại từ chối điều này? Thuộc tính nào là "bắt buộc" mà tôi không biết?

Lỗi:

Dòng Lỗi 408, Cột 142: Liên kết phần tử thiếu thuộc tính thuộc tính bắt buộc. … / Modules / 14ce1e21 / peadig-eucookie.css 'type =' text / css 'media =' all '/> Các thuộc tính cho liên kết phần tử: Thuộc tính toàn cục href crossorigin rel media hreflang kích thước kiểu Ngoài ra, thuộc tính title có ngữ nghĩa đặc biệt về điều này thành phần.

html 
— no9
nguồn
Tôi không thể tạo lại thông báo lỗi đó.
— Quentin,
nó thật kỳ lạ ... nhưng trình xác thực vẫn đang gặp lỗi.
— No9
Có lẽ bạn đang thiếu ngữ cảnh nào đó trong câu hỏi của mình.
— Quentin,
1
có lẽ đó là vấn đề bởi vì nó không có trong tiêu đề?
— No9
@ No9: Như Jukka giải thích dưới đây (và câu trả lời nên được chỉ ra như những câu trả lời, bằng cách này bạn có thể có một <link> bên trong thẻ <body> cũng như: <link rel='stylesheet' id='someId' href='folder/file.css' type='text/css' media='all' property='' />.. Hoạt động trong tất cả các trình duyệt, và xác nhận Đó là tất cả về thuộc tính property.
— Frank Conijn

Câu trả lời:

82

Lời khuyên từ @stevelove rõ ràng là giải pháp thực tế, nhưng đây là câu trả lời lý thuyết cho câu hỏi "tại sao":

Mặc dù một linkphần tử không hợp lệ vô điều kiện bodytrong các đặc tả HTML cũ hơn, nhưng HTML5 có nhiều quy tắc dễ dãi hơn. Theo HTML 5.1 Nightly (ít nhiều là thứ mà trình xác thực cố gắng theo kịp), linkphần tử cũng được phép trong phần nội dung tài liệu (bất cứ nơi nào cho phép nội dung theo cụm từ), miễn là nó có một itempropthuộc tính. Điều này dường như làm cho thông báo lỗi thậm chí còn khó hiểu hơn. Một phần của lời giải thích là trình xác thực thực sự đang xác thực dựa trên HTML5 + RDFa và RDFa xác định propertythuộc tính. Vấn đề vẫn còn là định nghĩa RDFa cụ thể mà trình xác thực đang kiểm tra, vì định nghĩa này cũng cần xác định lại các quy tắc cho HTML.

Dù sao thì thông tin trong thông báo lỗi cũng đã lỗi thời. Các thông báo lỗi dường như không được cập nhật nhanh như chức năng cơ bản của trình xác thực.

— Jukka K. Korpela
nguồn
5
Xem câu trả lời của hawkeye126 về cách khắc phục điều này.
— frenchie
Thông báo lỗi này KHÔNG còn xuất hiện kể từ năm 2017.
— TheAmazingKnight
91

Thêm vào 

property='stylesheet'

nếu bạn không muốn di chuyển liên kết của mình đến <head>tài liệu.

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

Là <link>bên trong của bạn <body>? Nếu vậy, hãy thử đặt nó ở <head>đầu tài liệu.

— stevelove
nguồn
4
Validation sang một bên, bạn nên luôn luôn đưa stylesheets ở phía trên cùng của tài liệu để tránh chặn các phần còn lại của trang từ rendering, như mô tả ở đây: developer.yahoo.com/performance/rules.html#css_top
— stevelove
10
@stevelove (một năm sau / để tham khảo trong tương lai) Điều đó thường không được tối ưu hóa. Trong tất cả các cách tốt nhất có thể, bạn nên đặt css quan trọng trong màn hình <style>đầu tiên ở đầu tài liệu và đặt phần còn lại ở dưới cùng. Đây là cách tốt nhất để mở trang nhanh hơn. Bạn có thể tìm thấy tài liệu trên web về điều này NHƯNG không phải lúc nào bạn cũng có thể làm được (và thường là hiệu quả của mã kinh doanh> hiệu suất).
— Ludovic Guillaume
15

Người bảo trì trình xác thực W3C HTML5 tại đây. Như đã chỉ ra trong một câu trả lời khác, ngoài việc kiểm tra các yêu cầu trong chính thông số HTML5, trình xác thực cũng kiểm tra các yêu cầu trong thông số HTML + RDFa 1.1:

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

Và trong khi bản thân thông số HTML nói rằng linkthường không được phép trong phần thân ＊, thì phần tử RDFa nói rằng nếu một linkphần tử có một propertythuộc tính, thì nó được phép trong phần thân.

Vì vậy, thông báo xác thực đó về cơ bản nói, 「Phần linktử chỉ được phép ở đây nếu nó có một propertythuộc tính. Nhưng linkphần tử cụ thể này không có propertythuộc tính. 」

＊ Bản thân thông số HTML cũng nói rằng linkphần tử được phép trong phần nội dung nếu nó có một itempropthuộc tính — nhưng chỉ khi linkphần tử không có relgiá trị. ( itemproplà thuộc tính “Vi dữ liệu” có mục đích về cơ bản giống với propertythuộc tính RDFa ).

Vì vậy, chúng ta có hai thuộc tính khác nhau, cả hai đều ảnh hưởng độc lập đến vị trí mà linkphần tử được phép xuất hiện trong tài liệu và điều đó làm phức tạp lôgic kiểm tra trong trình xác thực theo cách gây khó khăn cho việc đưa ra thông báo lỗi tốt hơn, hữu ích hơn cho trường hợp này.

— sidehowbarker
nguồn
1

Chỉ cho nhu cầu trong tương lai, đây là nhận xét của tôi:

Trong trang w3c, chúng tôi có bình luận sau:

Nếu thuộc tính rel được sử dụng, phần tử bị hạn chế đối với phần tử head. Khi được sử dụng với thuộc tính itemprop, phần tử có thể được sử dụng cả trong phần tử head và phần thân của trang, tùy thuộc vào các ràng buộc của mô hình vi dữ liệu.

Vì vậy, lỗi có thể được giải quyết bằng cách thay đổi relfor itemprop, bởi vì relđược sử dụng trong đầu và itempropcó thể được sử dụng trong cơ thể.

Hy vọng nó sẽ giúp ai đó.

— h3nr1ke
nguồn
2
Tôi đã tìm thấy một cách khác để giải quyết nó, bạn có thể kết hợp rel và tài sản trong thẻ cùng, ví dụ <link rel='stylesheet' property='stylesheet' href='custom.css' type='text/css' media='screen' />
— h3nr1ke
0

Nó muốn nó ở trong đầu bạn. Tuy nhiên, nếu css không quá quan trọng để tải ngay lập tức, bạn sẽ nhận được công cụ tốc độ trang của google yêu cầu bạn đặt nó ở cuối nội dung.

Ví dụ: tôi sử dụng một trong các chủ đề jquery (redmond) để tạo kiểu tự động hoàn thành của mình. Không cần đặt cái này ở đầu trang của tôi vì nó sẽ chỉ làm chậm mọi thứ khác.

Vì vậy, đừng lo lắng quá nhiều về việc xác thực w3c hoàn hảo.

— Randy Greencorn
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.