1. Trang chủ
  2. Câu hỏi và trả lời
  3. thẻ kiểu và chữ trong HTML body ... tại sao lại không?

thẻ kiểu và chữ trong HTML body ... tại sao lại không?

2009-09-01 19 views
43

[này liên quan đến this question, nhưng không phải vì nó không phải về email].thẻ kiểu và chữ trong HTML body ... tại sao lại không?

Trong nhiều trường hợp - đặc biệt là khi làm việc với một CMS hoặc khuôn khổ của người khác, nó dễ dàng hơn để nhúng <style> thẻ và <script> thẻ trong số <body> so với số <head>. Điều này dường như làm việc trong IE6, IE7 (Windows), Firefox 3.x và Safari (OS X).

Nói đúng, điều này có sai không? Và nếu nó là, những hậu quả tiêu cực có thể gây ra ... ngoài việc bị bỏ qua hoàn toàn ở một số khách hàng?

Lưu ý: Rất vui khi mọi người đều muốn nói về kiểu DRY và tập trung. Hãy tưởng tượng trong một giây rằng tôi muốn sử dụng các thẻ kiểu trong một tài liệu bởi vì chúng KHÔNG TOÀN CẦU và tôi KHÔNG CÓ TRUY CẬP ĐẾN ĐẦU TRÊN CƠ SỞ TRANG TRƯỚC. Vì lý do gì, có thể là trang web khác nhau trên cơ sở từng trang hoặc cơ sở mỗi đoạn hoặc bất kỳ điều gì. Tôi không quan tâm đến việc khó theo dõi và thay đổi. Tôi lo lắng về những hậu quả có thể xảy ra khi sử dụng phong cách trong cơ thể.

Bạn tập trung vào nội dung trung tâm. Mọi thứ khác là sưng lên trong các bảng định kiểu trung tâm.

Nguồn

2009-09-01 Dan Rosenstark

+1

Xem http://stackoverflow.com/questions/1213281/does-javascript-have-to-be-in-the-head-tags – Gumbo

Trả lời

26

Mặc dù thông số kỹ thuật rõ ràng thẻ phong cách nhà nước không được phép trong thẻ cơ thể, thông số kỹ thuật không phải là tất cả những gì quan trọng. Các thẻ kiểu được hỗ trợ trong cơ thể bởi mọi trình duyệt chính và cuối cùng là cách người dùng xem trang web của bạn. * Trong khi từ lâu đã có một ổ đĩa cho các tiêu chuẩn và tiêu chuẩn tốt hơn hỗ trợ trong ngành công nghiệp trình duyệt. tài liệu cũng như có thể được.

Google, người dẫn đầu nỗ lực đặc tả HTML5, đồng thời duy trì google.com vi phạm các thông số để lưu byte, bằng cách để dấu ngoặc kép khỏi giá trị thuộc tính của nó, sử dụng bộ chọn hacks chống CSS spec, bao gồm thẻ tập lệnh không có loại hoặc ngôn ngữ và thẻ liên kết không có loại. Một người theo chủ nghĩa thuần túy có thể tranh luận một trong những trang web được sử dụng nhiều nhất trên mạng Internet là vi phạm các thông số kỹ thuật và nguy cơ nghiêm trọng bị thất bại khủng khiếp. Hoặc, chúng tôi có thể lý do rằng không có trình duyệt nào sẽ sử dụng phổ biến mà không thể hiển thị các lỗi được sử dụng rộng rãi trên thông số kỹ thuật. Vì vậy, câu hỏi đặt ra là theo cách nào mà ngành công nghiệp trình duyệt đang đi - một lần nữa là một trong những thông số kỹ thuật tốt hơn, nhưng cũng cố gắng hết sức để tôn trọng ý định của các trang vi phạm các thông số kỹ thuật đó. Đặt cược của tôi là thẻ phong cách sẽ tiếp tục làm việc trong cơ thể trong một thời gian dài sắp tới.

* Theo văn bản này, các thẻ kiểu trong nội dung được hỗ trợ với một loại tài liệu HTML5 trong Firefox 3+, IE6 +, Safari 2+, Chrome 12+. Hỗ trợ có khả năng quay trở lại xa hơn nhưng các trình duyệt này hiếm khi được thấy trên các mạng nội bộ.

Nguồn

2012-06-12 01:53:39

+7

Trong khi tôi đồng ý đây là câu trả lời phù hợp nhất, tôi nghĩ rằng nó đáng để chỉ ra rằng dấu ngoặc kép là tùy chọn trên tất cả các thuộc tính miễn là giá trị không chứa khoảng trắng/ký tự không hợp lệ. – Sleavely

+0

Điểm tốt - thông số kỹ thuật số trước không cho phép điều này. Phải mất một tấn đào (tại sao họ đợi cho đến khi Mục 8 chỉ xác định một thuộc tính là gì?), Nhưng ở đây nó là trong spec: http://www.w3.org/html/wg/drafts/html/ master/syntax.html # unquoted Có nghĩa là ngay cả trong spec bây giờ điều này là hoàn toàn hợp pháp: –

+1

Các thông số kỹ thuật trước đây đã cho phép điều này, không chỉ XHTML: [W3 giải thích sự khác biệt giữa XHTML1 và HTML4] (http://www.w3.org/TR/xhtml1/diffs.html#h-4.4) – Sleavely

15

Các ngữ cảnh trong đó các thẻ <script> và <style> có thể được sử dụng tùy thuộc vào loại tài liệu bạn đang sử dụng. Ví dụ, tôi sẽ giả sử bạn đang sử dụng các loại tài liệu HTML5:

<!DOCTYPE html>

Các script tag có ba tình huống dưới DOCTYPE HTML5:

  1. đâu metadata content được mong đợi.
  2. Nơi dự kiến ​​phrasing content.
  3. Nơi dự kiến ​​script-supporting elements.

Các style tag có một bối cảnh cấu trúc hơi phức tạp hơn dưới DOCTYPE HTML5:

  1. Nếu scoped attribute vắng mặt: nơi metadata content được mong đợi.
  2. Nếu không có scoped attribute: trong phần tử noscript là phần tử con của phần tử head.
  3. Nếu có scoped attribute: trong đó flow content được mong đợi, nhưng trước bất kỳ nội dung luồng nào khác ngoài khoảng trắng giữa phần tử và phần tử kiểu và không phải là phần tử con có phần tử trong suốt.

Về cơ bản, điều này cho biết bạn có thể đặt thẻ kiểu và thẻ tập lệnh trong phần thân, vì nội dung là nơi chúng tôi đặt nội dung luồng và nội dung phrasing.

Như thường lệ, hãy tham khảo thông số kỹ thuật cho loại tài liệu bạn đang sử dụng.

Nguồn

2009-09-01 11:50:05 Sampson

2

Vâng, bạn có vấn đề trực tiếp nhúng phong cách và tập lệnh vào nội dung của bạn. Câu thần chú chính ở đây là nguyên tắc DRY (Don't Repeat Yourself). Bạn có thể sử dụng tập lệnh hoặc kiểu cụ thể ở nhiều nơi.Khi phong cách hoặc tập lệnh đó yêu cầu sửa đổi, bây giờ bạn có thể tiếp tục tìm kiếm scavenger cho tất cả những nơi mã đó tồn tại. Giữ phong cách và kịch bản của bạn ở một nơi chung là lý tưởng.

Mặt khác, nếu đó là vấn đề về kiểu dáng nhỏ (đẩy pixel hoặc một thứ gì đó liên quan đến chỉ một chế độ xem đó), có thể là không sao.

Nguồn

2009-09-01 11:53:02 Scott

+1

đúng, rõ ràng là chúng ta đang nói về một lần. Những thứ được sử dụng ở nhiều nơi được tập trung. –

0

Vấn đề lớn nhất, theo ý kiến ​​của tôi, là tiện lợi. Nếu bạn muốn thay đổi kiểu dáng của một trang, sẽ dễ dàng hơn nếu làm như vậy nếu tất cả thông tin về kiểu và tập lệnh nằm trong một vùng. Có thể thông tin kiểu/tập lệnh nằm trong nút <style>, trong thuộc tính style của nút (ví dụ: <body style='...'>) hoặc trong tệp bên ngoài (ví dụ: <link rel='stylesheet' type='text/css' href='style.css' />). Việc sử dụng một vị trí nhất quán dễ dàng hơn nhiều so với cố gắng săn lùng tất cả những nơi mà một phong cách có thể xảy ra. Cũng cần lưu ý rằng, "ngoài việc bị bỏ qua hoàn toàn ở một số khách hàng" cũng giống như nói "ngoài việc nổ tung khi bạn đánh nó từ phía sau" hoặc "ngoài việc bay ngoài sân bay và hạ cánh trong một khu dân cư ". Đó là một vấn đề nghiêm trọng đủ để bảo đảm bằng cách sử dụng thực hành tiêu chuẩn.

Nguồn

2009-09-01 11:57:09 Imagist

+0

Tôi không đồng ý, lại: điểm cuối cùng. HTML và CSS là không thể đoán trước, IMO, rằng nếu tôi không biết về một khách hàng nhất định, bỏ qua phong cách của tôi có thể an toàn hơn rất nhiều so với tôn trọng nó một cách không rõ. –

1

Nhưng tại sao bạn có style -tags trong cơ thể? Các phong cách là anyways toàn cầu, vì vậy tôi không thể tìm thấy bất kỳ lý do hợp lý để làm như vậy.

Để đơn giản hóa và tách biệt nhiều thứ hơn nữa, bạn cũng nên sử dụng biểu định kiểu bên ngoài.

Tập lệnh được phép và có lý do: Chúng có thể cung cấp đầu ra, chúng sẽ chạy vào những thời điểm cụ thể và các lý do khác.

Nguồn

2009-09-01 11:57:10

+1

Một số nhà phát triển MVC tải biểu định kiểu cụ thể vào nội dung của chế độ xem của họ, có thể trồng chúng ở đâu đó ở giữa mẫu và do đó trong nội dung. – Sampson

+1

Sau đó, bạn nên đặt mọi thứ vào một biểu định kiểu (hoặc một bộ biểu định kiểu) luôn được bao gồm hoặc tạo một tờ kiểu tùy thuộc vào chế độ xem bạn đang ở. Nếu bạn cần các bảng định kiểu riêng cho mỗi khung nhìn, bạn vừa hiểu lầm một trong các nguyên tắc cơ bản của CSS. Nó luôn luôn được thực hiện với một (các) bộ định kiểu (cố định) cố định - tại sao nó không thể được thực hiện ngay bây giờ? –

+1

Chúng tôi nên hạn chế cuộc trò chuyện này để bạn có thể làm điều đó hay không, tôi nghĩ vậy. Tôi có thể, trên một cảnh nào đó, có những phong cách đặc biệt KHÔNG phải là toàn cầu mà là trên cơ sở từng đoạn, hoặc theo từng trang.Sử dụng kiểu có phần dễ đọc hơn so với sử dụng thuộc tính style = "". –

9

Câu trả lời ngắn:

Câu trả lời chi tiết:

STYLE được định nghĩa là trong head.misc:

<!ENTITY % head.misc "SCRIPT|STYLE|META|LINK|OBJECT" -- repeatable head elements -->

Và yếu tố của head.misc chỉ được phép trở thành con cái của HEAD phần tử. Vì vậy, STYLE chỉ được phép là con của phần tử HEAD.

SCRIPT được định nghĩa là trong head.misc và trong special:

<!ENTITY % special 
    "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">

Và đặc biệt được định nghĩa là trong inline:

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

Ngoài SCRIPT cũng là được phép là con của phần tử BODY.Vì vậy, SCRIPT được phép trong phần tử HEAD nad ở bất kỳ nơi nào nội tuyến được cho phép.

Nguồn

2009-09-01 12:21:39 Gumbo

+0

vậy điều gì có nghĩa là hầu hết các trình duyệt phân tích cú pháp trong nội dung? Rằng nó không nên được sử dụng anyway? –

+0

@yar: Có, nó không phải là một phần của tiêu chuẩn và do đó không nên được sử dụng mặc dù nó có thể hoạt động ở hầu hết các trình duyệt. – Gumbo

+0

Lưu ý câu trả lời này tham chiếu thông số HTML4 trong khi @ Sampson tham chiếu thông số HTML5 - do đó có sự khác biệt nhỏ. –

3

Hai câu trả lời có thể cho phong cách trong cơ thể:

  1. Sử dụng kiểu nội tuyến. Đúng, bạn sẽ mất các ưu điểm của kiểu dáng nội bộ và bên ngoài, nhưng nếu bạn không có quyền truy cập vào tiêu đề, thì bạn không có quyền truy cập vào tiêu đề.

  2. Sử dụng thuộc tính phạm vi trong phần tử kiểu. Điều này là mới đối với HTML5, nhưng ý tưởng là giới hạn phạm vi của CSS thành một phần của một trang, ví dụ như một div duy nhất. Tin xấu là nó chưa được hỗ trợ (tính đến tháng 7 năm 2011), cũng không tương thích ngược. Nhưng có (được cho là) ​​một plugin JQuery có thể trợ giúp. Để biết thêm:

Nguồn

2011-07-15 13:40:06

+0

+1 tương lai! –

+0

Tôi đã gần khóc khi nhìn thấy "Thuộc tính đã bị xóa khỏi đặc điểm kỹ thuật hiện tại" - xem http://caniuse.com/#search=scoped - vì vậy dường như chúng sẽ không được giới thiệu chính thức bất kỳ lúc nào. VẪN, vì mọi trình duyệt đều đang chuẩn bị cho việc này, nó hoàn toàn an toàn khi sử dụng các thẻ