Sẽ là một ý tưởng sai lầm khi có <style> trong <body>?

12

Trong đoạn mã dưới đây tôi đã đặt biểu định kiểu nội bộ bằng thẻ cơ thể, thay vì có trong đầu. Đối với Ứng dụng một trang, tôi đang xem xét thực hiện điều này cho các kiểu chỉ áp dụng cho trang đó, thay vì có tệp pagepecific.css riêng biệt.

Có một kịch bản mà điều này có nhược điểm vì tôi không đặt điều tương tự trong phần đầu?

<!-- myPartial.html starts here --> 
<!-- Like to keep styles unique to this html right here in this file --> 
<div>
  <style>
    body { background-color: red; }
    #myText { color: white; }
  </style>

  <span id='myText'>Hello</span>
</div>
<!-- myPartial.html ends here -->

html css

— Saran
nguồn

17

Một stylephần tử bên trong bodyphần tử vi phạm quy tắc cú pháp HTML. (Ngoại trừ theo dự thảo HTML5, nó được phép trong một số điều kiện, nếu có scopedthuộc tính; thuộc tính này được một số trình duyệt hỗ trợ.) Mặt khác, trình duyệt không quan tâm. Sự phân chia thành headvà bodycác yếu tố là lý thuyết.

Tuy nhiên, bạn không đạt được gì khi sử dụng cú pháp không hợp lệ, ngược lại với việc đặt stylebên trong head. Lý do duy nhất sẽ là những hạn chế kỹ thuật, trong một số môi trường tác giả, điều đó có thể ngăn bạn đưa bất cứ điều gì vào headphần này.

Vấn đề sử dụng một styleyếu tố so với biểu định kiểu bên ngoài thông qua linkhoàn toàn trực giao với câu hỏi này.

— Jukka K. Korpela
nguồn

1

Phần đầu tiên của câu trả lời của bạn không nhất thiết phải đúng .

— patricksweeney

1

@patricksweeney, tôi nghĩ nó hơi lý thuyết trong bối cảnh này, nhưng là một quan sát chính xác; Trả lời cập nhật.

— Jukka K. Korpela

Tôi coi "trình duyệt không quan tâm" là một cách tích cực cho cách tiếp cận của tôi. Vì các trang của tôi là các phần (Ứng dụng một trang), tôi không thể có phần <head>, lý do tại sao tôi đang cố gắng đặt bên trong <body> hoặc bên trong các phần tử trong cơ thể.

— Saran

2

@Gal Wax, tôi không thấy lý do tại sao một ứng dụng một trang sẽ thiếu một headyếu tố. Một trang HTML luôn có một.

— Jukka K. Korpela

@ JukkaK.Korpela, tôi đã cập nhật phần mã trong câu hỏi của mình để trả lời câu hỏi của bạn.

— Saran

6

(Vì chúng tôi đang ở đây tại SE.SX, một cách tiếp cận chiến lược hơn có thể là một sự bổ sung có giá trị cho các cân nhắc kỹ thuật thông thường.)

[lời mở đầu] Thông số HTML5 là một mục tiêu di chuyển liên tục và họ có chính sách tiếp theo về thực tiễn chung đã thiết lập. Họ đã lỗi thời và hồi sinh các tính năng trong quá khứ, thay đổi ý nghĩa của những người khác, thay đổi trọng tâm của các khuyến nghị phương pháp, vv Nó không được viết mãi mãi với tất cả sự khôn ngoan của loài người có sẵn cùng một lúc. Thông số kỹ thuật không phải là nguồn thiêng liêng của sự thật. Điều tự nhiên là đôi khi các trình duyệt là đúng. [/ lời mở đầu]

Tình hình của OP là rất phổ biến và hợp lệ.

Bạn có một CMS, với chủ đề được thiết kế và cài đặt, tất cả CSS được tải đúng cách từ HEAD, sau đó bạn, trình chỉnh sửa trang, còn lại với hộp WYSIWYG thời trang mà bạn có thể (cảm ơn Chúa!) Chuyển sang "chế độ nguồn" và gõ (dán) trong đánh dấu HTML (trước đây được tạo ở nơi khác, với các công cụ phù hợp hơn). May mắn thay, bạn thậm chí có thể bao gồm STYLEcác thẻ (có lẽ do thiếu sót ngẫu nhiên trong bộ lọc thẻ) ... Ngày được lưu, từ rất nhiều công việc cằn nhằn hủy diệt tâm hồn lặp đi lặp lại. Nhưng bạn vẫn không có phương tiện nào để can thiệp vào yếu tố CHÍNH của hệ thống từ kịch bản chỉnh sửa trang.

Có nên tách bạn khỏi việc sử dụng CSS theo cách đơn giản với các đoạn HTML của bạn, chỉ vì thông số kỹ thuật nói như vậy?

Hoặc, bạn có một ứng dụng AJAX một trang.

Nó chạy mà không tải lại trong một phiên dài và có nội dung được cung cấp đến từ nhiều nguồn ngẫu nhiên khác nhau, tất cả đều được tạo kiểu độc lập và độc lập. Yêu cầu chúng phải được chuyển đổi đầu tiên để chỉ sử dụng các STYLEthuộc tính nội tuyến thay vì chỉ đi kèm với một STYLEphần tử nhúng sẽ là vô lý.

Hơn nữa: bạn có thể a) đã nhúng bất kỳ CSS nào ở bất kỳ đâu trong BODY, thông qua STYLEcác thuộc tính, vì vậy dù sao thì CSS cũng "hợp pháp" về mặt lý thuyết; và b) bạn đã có thể làm bất cứ điều gì bạn muốn với bất kỳ phong cách nào, bất cứ khi nào bạn muốn (và hơn thế nữa) từ Javascript, vì vậy CSS cũng có thể sử dụng sai theo những cách không hiệu quả về mặt bệnh lý. Và không ai trong chúng ta sẽ phản đối những tính năng đó. W3C cũng không.

Vì vậy, những gì chính xác là rất xấu về STYLEcác yếu tố trong BODY? Những tác động bất lợi bổ sung mà nó sẽ thêm vào kho vũ khí rộng lớn của chúng ta đối với các cấu trúc HTML là gì? Hiệu suất kém hơn? Có lẽ. Đôi khi.

Đó có phải là một lý do hợp lệ để bãi bỏ thực hành vô cùng hữu ích này, được hỗ trợ bởi mọi trình duyệt vì một lý do? Không có trong một triệu dặm!

Chúng tôi không ngốc. Chà, không phải tất cả, hoặc không phải luôn luôn ...;) Các kỹ thuật có nguy cơ thực hiện kém có thể chỉ đơn giản là tài liệu , thay vì chỉ bị cấm. Chúng tôi đã từng có các applet Java trong những ngày đầu của web và đã sống sót. Ô tô có thể bị lạm dụng, gây ra sự khốn khổ, thậm chí thực phẩm có thể được sử dụng theo cách gây rối, không hiệu quả, và những người lái xe có thể ăn có thể, trung bình, thậm chí còn ngu ngốc hơn cả nhà thiết kế web trung bình. Bên cạnh đó, W3C thân mến, không cần phải lo lắng: những người tin tức HTML giận dữ có đôi chân bị bắn ra với STYLEcác yếu tố BODYvẫn không thể đuổi theo W3C và trả thù. Họ không biết địa chỉ. Và họ không có chân.

Vì vậy, xin vui lòng: làm cho giọng nói của bạn được nghe để STYLEtrở thành hợp pháp BODY! Ngoan ngoãn trích dẫn văn bản, nhưng không cung cấp một sự thay thế khả thi tốt hơn tình hình hiện tại là không có ích. Nó thực sự là một mối đe dọa cho kỹ thuật giải pháp cuối cùng này.

Hãy nhớ rằng: thông số HTML5 được gọi là đề xuất .

— lunakid
nguồn

Cập nhật: thông số kỹ thuật cuối cùng bắt kịp: STYLElà hiện nay có giá trị trong BODY! ;)

— lunakid

1

Cập nhật 2: Thông số kỹ thuật chưa bắt kịp vì họ đã thay đổi quyết định (nhấp qua liên kết của lunakid, nó đã được cập nhật).

— Maximillian Laumeister

2

Đặc tả html nói rằng

Một phần tử kiểu không có thuộc tính phạm vi bị hạn chế xuất hiện trong phần đầu của tài liệu.

Thuộc tính phạm vi là một giá trị boolean chỉ ra rằng nó nên được áp dụng cho chỉ cây con gốc ở phần tử cha của phần tử kiểu.

Tại thời điểm này chỉ có Firefox hỗ trợ thuộc tính phạm vi. http://www.w3schools.com/tags/att_style_scoped.asp

— crad
nguồn

5

Trang web w3schools không nên được trích dẫn như một tài liệu tham khảo, hoặc tất cả; xem w3fools.com

— Jukka K. Korpela

2

Và điều này không trả lời câu hỏi.

— Jukka K. Korpela

1

Cảm ơn @ JukkaK.Korpela đó là liên kết đầu tiên tôi tìm thấy trích dẫn hỗ trợ trình duyệt thuộc tính phạm vi. Các bình luận khác cung cấp một trích dẫn tốt hơn nhiều. +1 câu trả lời của bạn -1 ít hơn bình luận mang tính xây dựng.

— crad

+1 để chỉ về thông số kỹ thuật cũng như lưu ý thiếu hỗ trợ cho phạm vi (cần phải tuân thủ thông số kỹ thuật). Tôi nghĩ bạn nên đọc câu trả lời trước khi nhảy súng ở đó @ JukkaK.Korpela, rất kém. Bạn thực sự không thể có được sự tin cậy hơn thông số kỹ thuật và nó trả lời câu hỏi một cách hoàn hảo. " Sẽ là một ý tưởng sai lầm khi có phong cách trong cơ thể " - theo thông số kỹ thuật " Có, nó sẽ như vậy. "

— Fergus Tại Luân Đôn

1

Có một vài lý do kỹ thuật để có css của bạn trong tệp so với thẻ kiểu:

Khả năng sử dụng công cụ khai thác css (Tôi không tin công cụ khai thác hoạt động trên thẻ kiểu)
Để có tập tin css có thể lưu vào bộ nhớ cache của trình duyệt.

Một số lý do dựa trên ý kiến để sử dụng tệp:

Bạn có thể sử dụng một bộ tiền xử lý css tuyệt vời như Sass (La bàn) hoặc Ít hơn.
Bạn đang duy trì hai cách để thêm css vào ứng dụng của mình.

Sở thích cá nhân của tôi là sử dụng La bàn để giữ các tệp riêng biệt cho mỗi trang và sau đó sử dụng nó để biên dịch tất cả chúng thành một tệp. Tập tin duy nhất đó sẽ được bao gồm bởi mỗi trang. Nếu xuống đường, các tập tin cần được tách ra vì bất kỳ lý do gì chúng luôn có thể xảy ra nhưng điều đó không đáng để gặp rắc rối trong thời gian này.

— hân hoan
nguồn