โดยปกติแล้วไฟล์ css จะใส่เข้าไปด้านใน<head></head>ถ้าฉันใส่เข้าไปข้างใน<body></body>จะเกิดอะไรขึ้น?
โดยปกติแล้วไฟล์ css จะใส่เข้าไปด้านใน<head></head>ถ้าฉันใส่เข้าไปข้างใน<body></body>จะเกิดอะไรขึ้น?
คำตอบ:
เพียงเพิ่มสิ่งที่ jdelStrother พูดถึงเกี่ยวกับสเปค w3 และ ARTstudio เกี่ยวกับการแสดงผลเบราว์เซอร์
ขอแนะนำเพราะเมื่อคุณประกาศ CSS ก่อนที่จะ<body>เริ่มสไตล์ของคุณได้โหลดแล้ว ผู้ใช้จึงเห็นสิ่งที่ปรากฏบนหน้าจออย่างรวดเร็ว (เช่นสีพื้นหลัง) หากไม่มีผู้ใช้จะเห็นหน้าจอว่างเปล่าก่อนที่ CSS จะถึงผู้ใช้
นอกจากนี้หากคุณปล่อยสไตล์ไว้ที่ใด<body>เบราว์เซอร์จะต้องแสดงหน้าซ้ำ (ใหม่และเก่าเมื่อโหลด) เมื่อสไตล์ที่ประกาศถูกแยกวิเคราะห์
linkและstyleจะต้องไม่ปรากฏในเนื้อหายกเว้นว่ามีการกำหนดขอบเขต (สไตล์) หรือมีการประกาศแอตทริบิวต์itemprop(ลิงก์)
styleเป็นองค์ประกอบการไหลใน html5 และ html4.1 (แม้ว่าจะไม่ได้กำหนดขอบเขต) และสามารถใส่ในร่างกาย
scopedแอตทริบิวต์นั้นล้าสมัยแล้ว
ข้อมูลจำเพาะ HTML เวอร์ชันล่าสุดอนุญาตให้<style>แท็กอยู่ภายในองค์ประกอบเนื้อหา https://www.w3.org/TR/html5/dom.html#flow-content
นอกจากนี้scopedแอตทริบิวต์ที่เคยมีความจำเป็นต้องมีstyleแท็กในแท็กbodyนั้นล้าสมัยแล้ว
ซึ่งหมายความว่าคุณสามารถใช้ styleแท็กได้ทุกที่ที่คุณต้องการสิ่งที่เกี่ยวข้องเพียงอย่างเดียวคือประสิทธิภาพหน้าเว็บลดลงเนื่องจากมีการเรียกคืน / repaints ที่เป็นไปได้เมื่อเบราว์เซอร์พบลักษณะที่ลดลงในแผนผังเพจ
คำตอบที่ล้าสมัย:
<style>แท็กไม่ได้รับอนุญาตภายใน<body>ตามรายละเอียด W3 รายละเอียด (แน่นอนว่าคุณสามารถใช้รูปแบบอินไลน์ได้<div style="color:red">หากจำเป็น แต่โดยทั่วไปถือว่าเป็นการแยกสไตล์และเนื้อหาออกมาไม่ดี)
<style>เป็นองค์ประกอบการไหลใน html 5 และ 4.1 และสามารถใส่ไว้ในร่างกาย (เช่นองค์ประกอบการไหลอื่น ๆ ทั้งหมด)
การใส่ CSS ในเนื้อหาหมายถึงโหลดในภายหลัง มันเป็นเทคนิคที่ใช้เพื่อให้เบราว์เซอร์เริ่มต้นวาดอินเทอร์เฟซได้เร็วขึ้น (เช่นลบขั้นตอนการบล็อก) นี่เป็นสิ่งสำคัญสำหรับประสบการณ์ผู้ใช้บนสมาร์ทโฟน
ฉันพยายามอย่างดีที่สุดที่จะเก็บ css เล็ก ๆ ไว้ที่หนึ่ง<head>แล้วขยับที่เหลือที่ด้านล่าง ตัวอย่างเช่นหากหน้าใช้ JQuery UI CSS ฉันจะย้ายไปที่ด้านล่างของ<body>ก่อนหน้าลิงก์ไปยัง JQuery javascript อย่างน้อยสามารถดึงรายการที่ไม่ใช่ของ JQuery ทั้งหมดได้
Head ได้รับการออกแบบสำหรับ (Quoting the W3C):
"ข้อมูลเกี่ยวกับเอกสารปัจจุบันเช่นชื่อคำหลักที่อาจเป็นประโยชน์ต่อเครื่องมือค้นหาและข้อมูลอื่น ๆ ที่ไม่ถือว่าเป็นเนื้อหาของเอกสาร "
ดูโครงสร้างทั่วโลกของเอกสาร HTML เนื่องจาก CSS ไม่ใช่เนื้อหาของเอกสารจึงควรอยู่ในส่วนหัว
นักพัฒนาเว็บอื่น ๆ ทุกคนคาดหวังว่าจะเห็นสิ่งนั้นอยู่ที่นั่นดังนั้นอย่าสับสนกับสิ่งต่าง ๆ โดยวางมันไว้ในร่างกายแม้ว่ามันจะใช้งานได้!
CSS เดียวที่คุณควรใส่ไว้ใน body คือinline CSSแม้ว่าฉันมักจะหลีกเลี่ยงสไตล์อินไลน์
มาตรฐาน ( HTML 4.01: องค์ประกอบสไตล์ ) ระบุไว้อย่างชัดเจนว่าอนุญาตให้ใช้แท็กสไตล์ภายในแท็กส่วนหัวเท่านั้น หากคุณใส่แท็กสไตล์ในแท็กเนื้อหาเบราว์เซอร์จะพยายามทำให้ดีที่สุดเท่าที่จะทำได้หากเป็นไปได้
อาจเป็นไปได้ว่าเบราว์เซอร์จะไม่สนใจแท็กสไตล์ในเนื้อความถ้าคุณระบุประเภทเอกสารที่เข้มงวด ฉันไม่ทราบว่าเบราว์เซอร์ปัจจุบันนี้ทำสิ่งนี้หรือไม่ แต่ฉันจะไม่นับในเวอร์ชันในอนาคตทั้งหมดเพื่อให้ผ่อนคลายเกี่ยวกับตำแหน่งที่คุณวางองค์ประกอบสไตล์
styleแท็กHTML5 ได้รับอนุญาตในเนื้อหาหากมีscopedแอตทริบิวต์
แม้ว่าstyleแท็กจะไม่ได้รับอนุญาตในเนื้อหา แต่linkตราบใดที่คุณอ้างถึงสไตล์ชีทภายนอกเบราว์เซอร์ทั้งหมดควรแสดงผลและใช้ CSS อย่างถูกต้องเมื่อใช้ในbodyได้อย่างถูกต้องเมื่อนำมาใช้ใน
ที่มา: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element
นอกจากคำตอบก่อนหน้านี้แม้ว่าจะวางบล็อกโค้ดสไตล์ไว้ในองค์ประกอบ อาจใช้งานได้ในเบราว์เซอร์สมัยใหม่ (แม้ว่าจะยังไม่ถูกต้องก็ตาม) ก็ยังมีอันตรายอยู่เสมอโดยเฉพาะกับเบราว์เซอร์รุ่นเก่าที่เบราว์เซอร์รุ่นเก่า นอกเสียจากว่าส่วนของสไตล์จะรวมอยู่ในส่วนของ CDATA
แน่นอนสิ่งอื่น ๆ ที่มีการวางไว้ในองค์ประกอบนอกเหนือจากรูปแบบอินไลน์คือมันไม่เป็นไปตามข้อกำหนด W3C HTML / XHTML คือหน้าใด ๆ ที่มีภายในร่างกายจะล้มเหลวในตัวตรวจสอบ W3C การแสดงข้อผิดพลาดที่ไม่คาดคิดนั้นง่ายกว่าเสมอหากรหัสของคุณถูกต้องทั้งหมดทำให้ง่ายต่อการตรวจพบข้อผิดพลาด องค์ประกอบ HTML ที่ไม่ถูกต้องอาจส่งผลกระทบต่อการลบองค์ประกอบใด ๆ และทั้งหมดที่เกิดขึ้นในรหัสดังนั้นคุณสามารถรับผลกระทบที่ไม่คาดคิดที่มีองค์ประกอบในสถานที่ที่ไม่ควรเป็นเพราะเมื่อเบราว์เซอร์พบองค์ประกอบที่ไม่ถูกต้อง ทำให้คาดเดาได้ดีที่สุดว่าควรแสดงอย่างไรและเบราว์เซอร์ที่แตกต่างกันอาจทำการตัดสินใจที่แตกต่างกันในการแสดงผล
ไม่ว่าคุณจะใช้แบบหัวต่อหัวเลี้ยวหรือหัวต่อแบบเข้มงวดมันจะยังคงไม่ถูกต้องตามข้อกำหนด (X) HTML
คุณจะเอาชนะจุดประสงค์ของการใช้ CSS โดยการใส่สไตล์ไว้ในเนื้อความ จุดจะแยกเนื้อหาจากงานนำเสนอ (และฟังก์ชัน) ด้วยวิธีนี้การเปลี่ยนแปลงสไตล์สามารถทำได้ในสไตล์ชีทไม่ใช่ในเนื้อหา เมื่อคุณใช้วิธีการแบบอินไลน์ทุกหน้าที่มีการกำหนดสไตล์แบบอินไลน์ต้องเปลี่ยนทีละหน้า น่าเบื่อและเสี่ยงเพราะคุณอาจพลาดหน้าหนึ่งหรือสามหรือสิบ
เมื่อใช้สไตล์ชีทคุณจะต้องเปลี่ยนสไตล์ชีทเท่านั้น การเปลี่ยนแปลงเผยแพร่โดยอัตโนมัติไปยังทุกหน้า HTML ที่เชื่อมโยงไปยังสไตล์ชีท
ประเด็นของ Neonble ก็เป็นอีกเหตุผลที่ดีเช่นกัน หากคุณทำให้ HTML ยุ่งเหยิงโดยเพิ่ม CSS แบบอินไลน์การแสดงผลจะกลายเป็นปัญหา HTML ไม่ส่งข้อยกเว้นรหัสของคุณ แต่มันออกไปและทำให้มันเป็นวิธีที่ดีที่สุดที่จะทำได้และเดินหน้าต่อไป
การปฏิบัติตามมาตรฐานเว็บโดยใช้สไตล์ชีททำให้เว็บไซต์ดีขึ้น และเมื่อคุณต้องการความช่วยเหลือเพราะสิ่งต่าง ๆ ในหน้าของคุณไม่ตรงตามที่คุณต้องการวาง CSS ไว้ในหัวตรงข้ามกับเนื้อหาทำให้การแก้ไขปัญหาดีขึ้นด้วยตัวเองและสำหรับทุกคนที่คุณขอความช่วยเหลือ
คำตอบที่ขัดแย้งกันสองคำ:
จากหน้า MDN บนแท็กลิงก์:
<link>องค์ประกอบสามารถเกิดขึ้นได้ทั้งใน<head>หรือ<body>องค์ประกอบขึ้นอยู่กับว่ามันมีประเภทการเชื่อมโยงที่เป็นร่างกาย ok ตัวอย่างเช่นประเภทการเชื่อมโยงสไตล์ชีตคือ body-ok และ<link rel="stylesheet">อนุญาตให้a ในเนื้อหา นี่ไม่ใช่วิธีปฏิบัติที่ดีที่สุด มันเหมาะสมกว่าที่จะแยก<link>องค์ประกอบของคุณออกจากเนื้อหาร่างกายวางไว้ในหัวของคุณ
จาก CSS The Definitive Guide (4th Edition / 2017) หน้า 10
หากต้องการโหลดสไตล์ชีทภายนอกให้สำเร็จต้องวางลิงก์ไว้ในองค์ประกอบส่วนหัว แต่ต้องไม่วางในองค์ประกอบอื่น
ความแตกต่างคือ การโหลดหน้าเว็บเป็นแบบอะซิงโครนัสดังนั้นหากคุณมีสไตล์ชีทภายนอกมันจะโหลดไฟล์ css ทันทีเมื่อมาถึงแท็กลิงก์นั่นคือเหตุผลว่าทำไมจึงเป็นสิ่งที่ดีที่จะอยู่ด้านบนสุดในหัว
มันจะสร้างความแตกต่างอะไร
ข้อดี: บางครั้งจะใช้คุณลักษณะบางอย่างได้ง่ายขึ้นในบางสถานที่โดยเฉพาะอย่างยิ่งหากโค้ดถูกสร้างขึ้นอย่างรวดเร็ว (เช่นการสร้างผ่าน php และแต่ละรายการขนาดแบบไดนามิกต้องใช้คลาสของตัวเอง ... เช่นสำหรับการกำหนดเวลารายการสำหรับการแปลง)
จุดด้อย: ช้าลงเล็กน้อยอาจไม่สามารถทำงานได้ในวันข้างหน้า
ความเห็นทั่วไปของฉันเกี่ยวกับมัน: อย่าทำอย่างที่คุณไม่จำเป็นต้องทำ แต่ถ้าคุณต้องทำอย่านอนไม่หลับ
วาง <style>ในเนื้อความนั้นทำงานได้ดีกับเบราว์เซอร์สมัยใหม่ทั้งหมด
ฉันเคยใช้สิ่งนี้ใน eBay
ถ้ามันใช้งานได้อย่าเตะมัน