<STYLE> có phải nằm trong <ĐẦU> của tài liệu HTML không?

Nói đúng ra, stylecác thẻ có cần phải nằm trong headtài liệu HTML không? Tiêu chuẩn 4.01 ngụ ý rằng, nhưng nó không được nêu rõ ràng:

Phần tử STYLE cho phép các tác giả đặt các quy tắc biểu định kiểu vào phần đầu của tài liệu. HTML cho phép bất kỳ số lượng phần tử STYLE nào trong phần CHÍNH của tài liệu.

Tôi nói "nói đúng" bởi vì tôi có một ứng dụng đặt các yếu tố phong cách bên trong cơ thể và tất cả các trình duyệt tôi đã thử nghiệm dường như sử dụng các yếu tố phong cách. Tôi chỉ tự hỏi nếu điều đó thực sự hợp pháp.

styleđược cho là chỉ được đưa vào headtài liệu.

Bên cạnh điểm xác nhận, một cảnh báo có thể khiến bạn quan tâm khi sử dụng styletrên đó bodylà đèn flash của nội dung chưa được chỉnh sửa . Trình duyệt sẽ nhận được các yếu tố sẽ được tạo kiểu sau khi chúng được hiển thị, làm cho chúng thay đổi về kích thước / hình dạng / phông chữ và / hoặc nhấp nháy. Nó thường là một dấu hiệu của nghề thủ công xấu. Nói chung, bạn có thể tránh xa việc đặt stylebất cứ nơi nào bạn muốn, nhưng cố gắng tránh nó bất cứ khi nào có thể.

HTML 5 đã giới thiệu một scopedthuộc tính cho phép stylecác thẻ được đưa vào mọi nơi trong cơ thể, nhưng sau đó họ lại xóa nó.

Câu trả lời ngắn

• Theo thông số kỹ thuật hiện tại, có, stylecác yếu tố phải luôn ở trong head. Không có ngoại lệ (ngoại trừ một styleyếu tố bên trong một templateyếu tố , nếu bạn muốn tính điều đó).

• Điều này không phải luôn luôn là trường hợp trong lịch sử. Nếu bạn quan tâm đến các chi tiết của thông số kỹ thuật và lịch sử của nó, hãy tiếp tục đọc.

• Bất kể thông số kỹ thuật nói gì, sử dụng stylecác yếu tố trong body hoạt động nhiều hơn hoặc ít hơn trong tất cả các trình duyệt chính. Tuy nhiên, nó được coi là một thực tiễn xấu cả vì nó vi phạm thông số kỹ thuật và bởi vì nó có thể gây ra hậu quả không mong muốn như hiệu suất kết xuất kém hơn hoặc "flash nội dung không được chỉnh sửa".

Lịch sử Spec

stylecác phần tử không tồn tại trong HTML 2 . Chúng được giới thiệu trong HTML 3.0, trong đó chúng được đưa vào danh sách các yếu tố có thể được đưa vào Phần tử đầu , nhưng không được đưa vào danh sách các yếu tố có thể có trong Yếu tố cơ thể . Vì vậy, tại thời điểm phần tử được suy đoán đầu tiên, nó chỉ có thể được bao gồm trong head.

Đây vẫn là trường hợp (mặc dù được thể hiện bằng cách sử dụng từ ngữ khác nhau) cho đến khi HTML 5, giới thiệu thuộc tính (kể từ khi xóa) scopedcho stylecác phần tử. Thuộc tính này, khi có mặt, có nghĩa là cho phép một stylephần tử được đặt trong một phần tử trong cơ thể để tạo kiểu chỉ cho hậu duệ của phần tử đó. Tuy nhiên, tính năng đó không bao giờ xuất hiện trên bất kỳ trình duyệt thực nào (ít nhất là không cần phải bật thông qua cờ nhà phát triển) và đã bị xóa khỏi cả thông số kỹ thuật của W3C và WhatWG "do thiếu sự quan tâm của người triển khai" . Sau đó, stylecác yếu tố chỉ được cho phép trong bối cảnh cho phép nội dung siêu dữ liệu, chỉ là phần đầu. Do đó, chúng tôi đã trở lại các quy tắc như trước HTML 5.

Tuy nhiên, do một lỗi do cả hai tổ chức đặc tả gây ra, một chỉ số các yếu tố không theo quy tắc bao gồm như một phụ lục trong cả hai thông số kỹ thuật đã không được cập nhật đúng để phản ánh việc loại bỏ scoped, khiến nó không phù hợp với thông số quy phạm. Tôi đã chỉ ra điều này cho cả WhatWG và W3C , và khi vô tình đặt ra các sự kiện chuyển động khiến hai thông số kỹ thuật phân kỳ.

Giải pháp của WhatWG cho sự không nhất quán giữa thông số quy chuẩn và chỉ số không quy tắc là chấp nhận bản vá của tôi sửa chữa chỉ số không quy tắc.

Mặt khác, W3C đã từ chối bản vá tương đương của tôi thay vì cập nhật thông số quy chuẩn để cho phép sử dụng các styleyếu tố trong body, trong khi lưu ý điều này với một lưu ý rằng nó có thể gây ra sự cố và nên được thực hiện "cẩn thận". Lý do đằng sau sự thay đổi này là để làm cho thông số kỹ thuật phù hợp với hành vi trình duyệt thực tế.

Do đó, từ tháng 3 năm 2017, đó là trường hợp câu trả lời chính thức cho câu hỏi này phụ thuộc vào tổ chức tiêu chuẩn nào bạn chọn nghe. Nếu bạn đã liệt kê vào thông số WhatWG (thường được tôn trọng hơn), thì một stylephần tử không được phép trong body. Nếu bạn đã liệt kê vào thông số W3C, thì nó đã được cho phép, nhưng không được khuyến nghị.

Tình trạng ngớ ngẩn này đã chấm dứt (có lẽ giống như nhiều mâu thuẫn khác) với hiệp ước hòa bình tháng 4 năm 2019 giữa W3C và WhatWG , đã đồng ý rằng thông số WhatWG sẽ trở thành một tiêu chuẩn HTML sống thực sự, với W3C chỉ phát hành các ảnh chụp nhanh từ nó như được đánh số Thông số kỹ thuật HTML thay vì phát triển một thông số cạnh tranh song song. Do đó, việc thay đổi từ năm 2017 sang ngã ba W3C cho phép stylecác yếu tố trong bodykhông còn là một phần của bất kỳ thông số hiện tại nào; nó chỉ đơn thuần là một sự tò mò của lịch sử.

Vì vậy, ngày nay, chúng ta chỉ cần nhìn vào thông số WhatWG để xác định những gì được phép chính thức. Nó có điều này để nói:

4.2.6. các styleyếu tố

Thể loại :

Nội dung siêu dữ liệu .

Các bối cảnh trong đó phần tử này có thể được sử dụng :

Nơi dự kiến nội dung siêu dữ liệu .
Trong một <noscript>yếu tố đó là con của một <head>yếu tố.

CTRL-Finger thông qua thông số trang đơn cho thấy phần tử duy nhất có mô hình nội dung bao gồm nội dung siêu dữ liệu là headphần tử.

Chỉ số không quy tắc của các yếu tố tôi đã đề cập sửa chữa trước đó cũng xác nhận rằng cha mẹ duy nhất được phép cho một styleyếu tố là một headhoặc một noscriptyếu tố.

Trong khi câu trả lời khác là chính xác, tôi ngạc nhiên không ai đã giải thích nơi các tiêu chuẩn không cho phép phong cách bên ngoài head.

Nó thực sự nằm trong phần trên The headElement (và trong DTD ):

<!-- %head.misc; defined earlier on as "SCRIPT|STYLE|META|LINK|OBJECT" -->
<!ENTITY % head.content "TITLE & BASE?">

<!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- document head -->

^{Vâng tôi biết. DTD rất khó đọc.}

Đây là nơi duy nhất STYLExảy ra yếu tố này, do đó, nó hoàn toàn không hợp lệ ở nơi khác.

Họ không nên ra khỏi đầu, nhưng dù sao họ cũng làm việc; mặc dù bạn có thể nhận thấy một nhấp nháy nhanh chóng. Trang web không nên xác thực với thẻ kiểu bên ngoài đầu, nhưng điều đó có thực sự quan trọng không? Ngoài ra, các thẻ liên kết cũng hoạt động bên ngoài đầu, mặc dù chúng không được phép.

Giống như các câu trả lời khác đã tuyên bố rằng nó không thực sự cần phải ở đó. Tuy nhiên, nó sẽ không xác nhận. Điều này có thể hoặc không quan trọng trong trường hợp này, nhưng xin lưu ý rằng việc hiển thị html hoàn toàn phụ thuộc vào trình duyệt. Từ những gì tôi biết, tất cả các trình duyệt được sử dụng ngày nay sẽ hỗ trợ đặt nó bên ngoài đầu, nhưng bạn không thể đảm bảo rằng các trình duyệt trong tương lai và các bản phát hành trình duyệt trong tương lai.

Gắn bó với tiêu chuẩn và bạn an toàn hơn. Làm thế nào an toàn hơn là lên cho rất nhiều cuộc tranh luận.

Các khuyến nghị HTML5.2 W3C, 14 tháng 12 năm 2017 (không phải là dự thảo trước đó nêu ở trên) bây giờ nói rằng bạn có thể bao gồm <style>.

"Trong cơ thể, nơi dự kiến ​​nội dung dòng chảy." (mục 4.2.6)

Thẻ kiểu ở bất cứ đâu nhưng bên trong <head>sẽ không xác thực với các quy tắc W3C.

Theo trang web này, HTML5.1 (trong bản nháp) và WHATWG cho phép <style>thẻ được đặt trong phần thân:

http://www.html.am/tags/html-style-tag.cfm

Nó dường như cũng đã được các trình duyệt hỗ trợ khá lâu. Theo câu trả lời StackOverflow này, Firefox 3+, IE6 +, Safari 2+ và Chrome 12+ hỗ trợ nó:

https://stackoverflow.com/a/10989663/297793

Theo đặc tả HTML 5.2 (trong bản nháp), thẻ kiểu chỉ được phép trong phần đầu của tài liệu.

Bản nháp HTML 5.2 trên Thẻ kiểu (ngày 18 tháng 8 năm 2016)

Một yếu tố phong cách bị hạn chế xuất hiện trong phần đầu của tài liệu.

Bạn cũng có thể sử dụng thẻ kiểu bên trong phần đầu hoặc phần thân hoặc ngoài thẻ html (không nên sử dụng html bên ngoài). Trong các dự án thời gian thực nhiều lần bạn có thể thấy họ sử dụng thẻ kiểu bên ngoài thẻ html