พูดอย่างเคร่งครัดstyleแท็กต้องอยู่ในheadเอกสาร HTML หรือไม่? มาตรฐาน 4.01 หมายความว่า แต่ไม่ได้ระบุไว้อย่างชัดเจน:
องค์ประกอบ STYLE ช่วยให้ผู้เขียนสามารถใส่กฎสไตล์ชีตในส่วนหัวของเอกสารได้ HTML อนุญาตให้มีองค์ประกอบ STYLE จำนวนเท่าใดก็ได้ในส่วน HEAD ของเอกสาร
ฉันพูดว่า "พูดอย่างเคร่งครัด" เพราะฉันมีแอปที่ใส่องค์ประกอบสไตล์ไว้ในร่างกายและเบราว์เซอร์ทั้งหมดที่ฉันทดสอบดูเหมือนจะใช้องค์ประกอบสไตล์ ฉันแค่สงสัยว่ามันถูกกฎหมายจริงหรือเปล่า
styleในbodyเพื่อที่ว่าดีพอสำหรับฉันโดยไม่คำนึงถึงสิ่งที่ส่อให้เห็นถึงส่วนแนวทางการเขียน
คำตอบ:
styleควรจะรวมไว้ในheadเอกสารเท่านั้น
นอกเหนือจากจุดตรวจสอบความถูกต้องแล้วข้อแม้อย่างหนึ่งที่คุณอาจสนใจเมื่อใช้styleบนแฟลชbodyคือแฟลชของเนื้อหาที่ไม่มีการควบคุม เบราว์เซอร์จะได้รับองค์ประกอบที่มีสไตล์หลังจากที่แสดงขึ้นทำให้เปลี่ยนขนาด / รูปร่าง / แบบอักษรและ / หรือการกะพริบ โดยทั่วไปเป็นสัญญาณของฝีมือที่ไม่ดี โดยทั่วไปคุณสามารถstyleหลีกเลี่ยงการวางได้ทุกที่ที่คุณต้องการ แต่พยายามหลีกเลี่ยงทุกครั้งที่ทำได้
HTML 5 แนะนำscopedแอตทริบิวต์ที่อนุญาตstyleให้รวมแท็กได้ทุกที่ในเนื้อหา แต่จากนั้นก็ลบออกอีกครั้ง
styleแท็กในส่วนbodyนี้แม้ว่าจะเป็นส่วนของผู้สร้างข้อมูลจำเพาะ แต่ฉันก็ถือว่ารูปแบบเนื้อหานั้นถูกต้อง github.com/whatwg/html/issues/1605#issuecomment-235961103
ตามข้อกำหนดปัจจุบันใช่styleองค์ประกอบต้องอยู่ในไฟล์head. ไม่มีข้อยกเว้น (ยกเว้นstyleองค์ประกอบภายในtemplateองค์ประกอบหากคุณต้องการนับสิ่งนั้น)
สิ่งนี้ไม่ได้เป็นเช่นนั้นเสมอไปในอดีต หากคุณสนใจเกี่ยวกับรายละเอียดของข้อมูลจำเพาะและประวัติโปรดอ่านต่อไป
ไม่ว่าสิ่งที่สเปคกล่าวว่าการใช้styleองค์ประกอบในbody ไม่ทำงานมากขึ้นหรือน้อยลงในเบราว์เซอร์ที่สำคัญทั้งหมด อย่างไรก็ตามถือเป็นการปฏิบัติที่ไม่ดีทั้งสองอย่างเนื่องจากละเมิดข้อกำหนดและอาจทำให้เกิดผลที่ไม่พึงประสงค์เช่นประสิทธิภาพการแสดงผลที่แย่ลงหรือ "เนื้อหาที่ไม่เป็นระเบียบ"
styleองค์ประกอบที่ไม่ได้อยู่ในHTML ที่ 2 พวกเขาได้รับการแนะนำให้รู้จักใน HTML 3.0 ที่พวกเขาถูกรวมอยู่ในรายการขององค์ประกอบที่สามารถนำมารวมอยู่ในหัวธาตุแต่ไม่ได้รวมอยู่ในรายการขององค์ประกอบที่อาจจะอยู่ในร่างกายธาตุ ดังนั้นในขณะที่ระบุองค์ประกอบเป็นครั้งแรกสามารถรวมไว้ในไฟล์head.
สิ่งนี้ยังคงเป็นเช่นนั้น (แม้ว่าจะแสดงโดยใช้ถ้อยคำที่แตกต่างกัน) จนถึง HTML 5 ซึ่งแนะนำscopedแอตทริบิวต์(ตั้งแต่ลบออก) สำหรับstyleองค์ประกอบ แอตทริบิวต์นี้มีขึ้นเพื่ออนุญาตให้styleวางองค์ประกอบภายในองค์ประกอบในร่างกายเพื่อจัดรูปแบบเฉพาะลูกหลานขององค์ประกอบนั้นเท่านั้น อย่างไรก็ตามคุณลักษณะที่ไม่เคยทำให้มันเป็นเบราว์เซอร์ที่แท้จริงใด ๆ (อย่างน้อยไม่ได้โดยไม่จำเป็นต้องได้รับการเปิดใช้งานผ่านธงนักพัฒนา) และจะถูกลบออกจากทั้ง W3C WHATWG และรายละเอียด"เนื่องจากการขาดความสนใจ implementer" หลังจากนั้นstyleองค์ประกอบจะได้รับอนุญาตเฉพาะในบริบทที่อนุญาตให้มีเนื้อหาเมทาดาทาซึ่งเป็นเพียงส่วนหัวเท่านั้น ดังนั้นเราจึงกลับไปใช้กฎเดิมเหมือนก่อน HTML 5
อย่างไรก็ตามเนื่องจากข้อผิดพลาดที่เกิดขึ้นโดยองค์กรข้อมูลจำเพาะทั้งสองดัชนีที่ไม่เป็นบรรทัดฐานขององค์ประกอบที่รวมอยู่ในภาคผนวกในข้อกำหนดทั้งสองจึงไม่ได้รับการอัปเดตอย่างเหมาะสมเพื่อให้สอดคล้องกับการลบออกscopedทำให้ไม่สอดคล้องกับข้อกำหนดเชิงบรรทัดฐาน ฉันชี้ให้เห็นสิ่งนี้ทั้งกับ WhatWGและW3Cและในการทำเช่นนั้นโดยไม่เจตนาในเหตุการณ์การเคลื่อนไหวที่ทำให้ข้อกำหนดทั้งสองแตกต่างกัน
วิธีแก้ปัญหาของ WhatWG สำหรับความไม่สอดคล้องกันระหว่างข้อมูลจำเพาะเชิงบรรทัดฐานและดัชนีที่ไม่ใช่บรรทัดฐานคือการยอมรับแพตช์ของฉันที่แก้ไขดัชนีที่ไม่ใช่บรรทัดฐาน
ในทางกลับกัน W3C ปฏิเสธโปรแกรมแก้ไขที่เทียบเท่าของฉันแทนการอัปเดตข้อกำหนดเชิงบรรทัดฐานเพื่ออนุญาตให้ใช้styleองค์ประกอบในbodyขณะเดียวกันก็ระบุว่าอาจทำให้เกิดปัญหาได้และควรทำ "ด้วยความระมัดระวัง" เหตุผลเบื้องหลังการเปลี่ยนแปลงนี้คือเพื่อให้ข้อมูลจำเพาะสอดคล้องกับพฤติกรรมของเบราว์เซอร์ในชีวิตจริง
ดังนั้นตั้งแต่เดือนมีนาคม 2017 เป็นต้นมาคำตอบอย่างเป็นทางการสำหรับคำถามนี้ขึ้นอยู่กับองค์กรมาตรฐานที่คุณเลือกรับฟัง หากคุณระบุไว้ในข้อมูลจำเพาะ WhatWG (โดยทั่วไปเคารพมากกว่า) แสดงว่าstyleองค์ประกอบไม่ได้รับอนุญาตในไฟล์body. หากคุณระบุในข้อกำหนด W3C แสดงว่าได้รับอนุญาต แต่ไม่แนะนำ
สถานการณ์ที่โง่เขลานี้สิ้นสุดลง (อาจจะเหมือนกับความไม่ลงรอยกันอื่น ๆ อีกมากมาย) ด้วยสนธิสัญญาสันติภาพเดือนเมษายน 2019 ระหว่าง W3C และ WhatWGซึ่งตกลงกันว่าข้อกำหนดของ WhatWG จะกลายเป็นมาตรฐาน HTML ที่ใช้งานได้จริงโดย W3C เป็นเพียงการปล่อยภาพรวมจากมันตามหมายเลข ข้อกำหนด HTML แทนที่จะพัฒนาข้อมูลจำเพาะของคู่แข่งควบคู่กันไป ดังนั้นการเปลี่ยนแปลงจากปี 2017 เป็นทางแยกของ W3C ที่อนุญาตให้styleองค์ประกอบในbodyไม่เป็นส่วนหนึ่งของข้อมูลจำเพาะปัจจุบันอีกต่อไป มันเป็นเพียงความอยากรู้อยากเห็นของประวัติศาสตร์
ดังนั้นวันนี้เราต้องดูเฉพาะข้อมูลจำเพาะของ WhatWGเพื่อพิจารณาว่าสิ่งใดได้รับอนุญาตอย่างเป็นทางการ มีสิ่งนี้ที่จะพูด:
4.2.6.
styleองค์ประกอบหมวดหมู่ :
เนื้อหา Metadata
บริบทที่สามารถใช้องค์ประกอบนี้ :
ในกรณีที่คาดว่าจะมีเนื้อหาข้อมูลเมตา
ใน<noscript>องค์ประกอบที่เป็นลูกของ<head>องค์ประกอบ
CTRL-Fing ผ่านข้อมูลจำเพาะหน้าเดียวแสดงให้เห็นว่าองค์ประกอบเดียวที่โมเดลเนื้อหามีเนื้อหาเมทาดาทาเป็นheadองค์ประกอบ
ดัชนีที่ไม่เป็นบรรทัดฐานขององค์ประกอบที่ฉันกล่าวถึงการแก้ไขก่อนหน้านี้ยังยืนยันว่าผู้ปกครองที่อนุญาตเท่านั้นสำหรับstyleองค์ประกอบคือ a headหรือnoscriptองค์ประกอบ
ในขณะที่คำตอบอื่น ๆ ถูกต้อง แต่ฉันแปลกใจที่ไม่มีใครอธิบายว่ามาตรฐานไม่อนุญาตให้ใช้รูปแบบใดนอกเหนือจากheadนี้
มันอยู่ในส่วนของ Thehead Element (และใน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 -->
ใช่ฉันรู้. DTD นั้นอ่านยาก
นี่เป็นที่เดียวที่STYLEองค์ประกอบเกิดขึ้นดังนั้นโดยปริยายจึงไม่ถูกต้องที่อื่น
พวกเขาไม่ควรออกไปข้างนอก แต่พวกเขาก็ทำงานอยู่ดี แม้ว่าคุณอาจสังเกตเห็นการสั่นไหวอย่างรวดเร็ว ไซต์ไม่ควรตรวจสอบความถูกต้องด้วยแท็กสไตล์ที่อยู่นอกส่วนหัว แต่นั่นมีความสำคัญจริงหรือ? นอกจากนี้แท็กลิงก์ยังทำงานนอกส่วนหัวด้วยแม้ว่าจะไม่ควรทำก็ตาม
styleเริ่มต้นขึ้น
เช่นเดียวกับคำตอบอื่น ๆ ที่ระบุไว้ว่าไม่จำเป็นต้องมี อย่างไรก็ตามจะไม่สามารถตรวจสอบได้ สิ่งนี้อาจสำคัญหรือไม่ก็ได้ในกรณีนี้ แต่โปรดทราบว่าการแสดงผลของ html ขึ้นอยู่กับเบราว์เซอร์ทั้งหมด จากสิ่งที่ฉันรู้ว่าเบราว์เซอร์ที่ใช้ทั้งหมดในปัจจุบันจะรองรับการวางไว้นอกส่วนหัว แต่คุณไม่สามารถรับประกันได้ว่าสำหรับเบราว์เซอร์ในอนาคตและเบราว์เซอร์ในอนาคต
ปฏิบัติตามมาตรฐานและคุณปลอดภัยยิ่งขึ้น ความปลอดภัยมากน้อยเพียงใดขึ้นอยู่กับการถกเถียงกันมาก
คำแนะนำ HTML5.2 W3C, 14 ธันวาคม 2017 (ไม่ได้เป็นร่างก่อนหน้านี้อ้างถึงข้างต้น) <style>ตอนนี้บอกว่าคุณสามารถรวม
"ในเนื้อหาที่คาดว่าจะมีเนื้อหาไหล" (หัวข้อ 4.2.6)
styleในข้อกำหนดbodyนี้ดังนั้นเราจึงกลับไปสู่การถูกห้ามอย่างชัดเจน ดูคำตอบของฉันหากคุณสนใจเส้นทางที่คดเคี้ยวซึ่งเรามาถึงที่นี่
แท็กสไตล์ที่ใดก็ได้ แต่ภายใน<head>จะไม่สามารถตรวจสอบได้ด้วยกฎ W3C
ตามไซต์นี้ HTML5.1 (ในร่าง) และ WHATWG อนุญาตให้ใส่<style>แท็กในเนื้อหา:
http://www.html.am/tags/html-style-tag.cfm
ดูเหมือนว่าเบราว์เซอร์จะได้รับการสนับสนุนมาระยะหนึ่งแล้ว ตามคำตอบ StackOverflow นี้ Firefox 3+, IE6 +, Safari 2+ และ Chrome 12+ รองรับ:
ตามข้อกำหนด HTML 5.2 (ในแบบร่าง) แท็กสไตล์จะได้รับอนุญาตในส่วนหัวของเอกสารเท่านั้น
HTML 5.2 แบบร่างบนแท็กรูปแบบ (Aug 18, 2016)
องค์ประกอบสไตล์ถูก จำกัด ให้ปรากฏในส่วนหัวของเอกสาร
คุณสามารถใช้แท็กสไตล์ภายในส่วนหัวหรือส่วนเนื้อหาหรือนอกแท็ก html ได้เช่นกัน (ไม่แนะนำให้ใช้ html ด้านนอก) ในโครงการเรียลไทม์หลายครั้งคุณจะเห็นว่าพวกเขาใช้แท็กสไตล์ที่ด้านข้างของแท็ก html