เป็นความคิดที่ผิดหรือไม่ที่จะมี <style> ใน <body>?

12

ในโค้ดด้านล่างนี้ฉันวางสไตล์ชีทภายในพร้อมกับแท็กเนื้อหาแทนที่จะใส่ไว้ในส่วนหัว สำหรับแอปพลิเคชันหน้าเดียวฉันกำลังพิจารณาที่จะทำสิ่งนี้สำหรับสไตล์ที่สามารถใช้ได้กับหน้านั้นเพียงอย่างเดียวแทนที่จะมีไฟล์ pagespecific.css แยกกัน

มีสถานการณ์ที่สิ่งนี้มีข้อเสียเนื่องจากฉันไม่ได้ใส่ในส่วนหัว?

<!-- 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

— สราญ
แหล่งที่มา

18

styleองค์ประกอบภายในbodyองค์ประกอบละเมิดกฎไวยากรณ์ HTML (ยกเว้นว่าเป็นไปตามร่าง HTML5 จะอนุญาตในบางเงื่อนไขหากมีscopedแอตทริบิวต์นั้นเบราว์เซอร์บางตัวรองรับคุณลักษณะนี้) ในทางกลับกันเบราว์เซอร์ไม่สนใจ การแบ่งheadและbodyองค์ประกอบเป็นไปตามทฤษฎี

แต่คุณจะได้รับอะไรโดยใช้ไวยากรณ์ที่ไม่ถูกต้องเป็นตรงข้ามกับการวางภายในstyle headข้อแก้ตัวเท่านั้นที่จะเป็นข้อ จำกัด ทางเทคนิคในบางสภาพแวดล้อมการเขียนที่อาจป้องกันคุณจากการใส่อะไรลงไปในheadส่วน

ปัญหาในการใช้styleองค์ประกอบกับสไตล์ชีทภายนอกผ่านlinkนั้นเป็นคำถามที่สมบูรณ์

— Jukka K. Korpela
แหล่งที่มา

1

ส่วนแรกของคำตอบของคุณไม่จำเป็นจริง

— patricksweeney

1

@patricksweeney ฉันคิดว่ามันค่อนข้างเชิงทฤษฎีในบริบทนี้ แต่การสังเกตที่ถูกต้อง; อัปเดตคำตอบแล้ว

— Jukka K. Korpela

ฉันใช้ "เบราว์เซอร์ไม่สนใจ" เป็นสิ่งที่ดีสำหรับแนวทางของฉัน เนื่องจากหน้าของฉันเป็นส่วนหนึ่ง (แอปพลิเคชันหน้าเดียว) ฉันไม่สามารถมีส่วน <head> สาเหตุที่ฉันพยายามใส่ <body> หรือองค์ประกอบภายในร่างกาย

— ซา

2

@Galaxy ฉันไม่เห็นว่าทำไมแอปพลิเคชันหน้าเดียวจะขาดheadองค์ประกอบ หน้า HTML มีหนึ่งหน้าเสมอ

— Jukka K. Korpela

@ JukkaK.Korpela ฉันอัปเดตส่วนของรหัสในคำถามเพื่อตอบคำถามของคุณ

— สราญ

6

(เนื่องจากเราอยู่ที่ SE.SX แนวทางเชิงกลยุทธ์ที่มากกว่านี้อาจเป็นการเพิ่มคุณค่าให้กับการพิจารณาทางเทคนิคตามปกติ)

[บทนำ] ข้อกำหนด HTML5 เป็นเป้าหมายที่เคลื่อนไหวอย่างต่อเนื่องและพวกเขามีนโยบายที่จะติดตามการปฏิบัติทั่วไปที่กำหนดไว้ พวกเขาล้าสมัยและฟื้นคืนชีพในอดีตเปลี่ยนความหมายของผู้อื่นเปลี่ยนจุดเน้นของคำแนะนำที่เป็นระบบ ฯลฯ มันไม่ได้เขียนขึ้นสำหรับนิรันดร์ทั้งหมดด้วยภูมิปัญญาของมนุษยชาติที่มีอยู่ทั้งหมดในครั้งเดียว ข้อมูลจำเพาะไม่ใช่แหล่งที่มาของความจริงอันศักดิ์สิทธิ์ เป็นเรื่องธรรมดาที่บางครั้งเบราว์เซอร์นั้นถูกต้อง [/ คำนำ]

สถานการณ์ของ OP พบได้ทั่วไปและถูกต้อง

คุณมี CMS ซึ่งมีการออกแบบและติดตั้งชุดรูปแบบ CSS ทั้งหมดโหลดอย่างถูกต้องจาก HEAD จากนั้นคุณก็จะมีตัวแก้ไขหน้าทิ้งไว้ด้วยกล่อง WYSIWYG ที่ทันสมัยที่คุณสามารถ (ขอบคุณพระเจ้า!) เปลี่ยนเป็น "source source" และ พิมพ์ (วาง) ในมาร์กอัป HTML (สร้างขึ้นก่อนหน้านี้ที่อื่นด้วยเครื่องมือที่เหมาะสมกว่า) โชคดีที่คุณยังสามารถรวมSTYLEแท็ก (อาจเกิดจากการละเว้นอย่างบังเอิญในตัวกรองแท็ก) ... วันนี้ได้รับการบันทึกจากงานซ้ำซากทำลายวิญญาณที่น่ากลัวจำนวนมาก แต่คุณยังคงไม่มีวิธีใด ๆ ที่จะเข้าไปยุ่งกับองค์ประกอบ HEAD ของระบบจากสถานการณ์การแก้ไขหน้า

ควรที่จะทำให้คุณไม่สามารถใช้ CSS ได้อย่างตรงไปตรงมากับแฟรกเมนต์ HTML ของคุณเพียงเพราะสเป็คพูดอย่างนั้นหรือ

หรือคุณมีแอปพลิเคชัน AJAX หน้าเดียว

มันทำงานโดยไม่ต้องโหลดซ้ำสำหรับเซสชันที่มีความยาวและมีเนื้อหาที่รวบรวมมาจากแหล่งสุ่มต่างๆทุกรูปแบบโดยพลการและอิสระ ต้องการให้พวกเขาได้รับการแปลงเป็นครั้งแรกเพื่อใช้เฉพาะSTYLEแอตทริบิวต์แบบอินไลน์แทนที่จะเพิ่งมาพร้อมกับSTYLEองค์ประกอบแบบฝังจะไร้สาระ

ยิ่งไปกว่านั้น: คุณสามารถก) ฝัง CSS ใด ๆ ในที่ใดก็ได้BODYผ่านทางSTYLEคุณลักษณะดังนั้น CSS นั้นถูกต้องตามหลักวิชาการในเชิงทฤษฎี และ b) คุณสามารถทำสิ่งที่คุณต้องการได้ทุกรูปแบบเมื่อใดก็ตามที่คุณต้องการ (และอื่น ๆ ) จาก Javascript ดังนั้น CSS จึงเป็นไปได้ที่จะใช้วิธีที่ไม่ใช่ทางพยาธิวิทยาในทางที่ผิด และพวกเราไม่มีใครคัดค้านคุณสมบัติเหล่านั้น และ W3C ก็เช่นกัน

ดังนั้นสิ่งที่ชั่วร้ายเกี่ยวกับSTYLEองค์ประกอบในBODY? อะไรคือสิ่งที่ไม่พึงประสงค์เป็นพิเศษที่มันจะเพิ่มเข้าไปในคลังแสงที่กว้างของการใช้ HTML ในทางที่ผิด? ประสิทธิภาพที่แย่กว่านี้ไหม อาจ. บางครั้ง

นั่นเป็นเหตุผลที่ถูกต้องหรือไม่ที่จะยกเลิกการฝึกฝนที่มีประโยชน์อย่างไม่น่าเชื่อนี้ได้รับการสนับสนุนจากทุกเบราว์เซอร์ด้วยเหตุผลหรือไม่? ไม่ได้อยู่ในล้านไมล์!

เราไม่ใช่คนงี่เง่า ดีไม่ใช่ทั้งหมดหรือไม่เสมอไป ... ;) เทคนิคที่มีความเสี่ยงต่อประสิทธิภาพที่ไม่ดีอาจมีการจัดทำเป็นเอกสารแทนที่จะเป็นสิ่งต้องห้าม เราเคยมีแอปเพล็ต Java ในช่วงต้นของเว็บและรอดชีวิตมาได้ รถยนต์สามารถนำไปใช้ในทางที่ผิดก่อให้เกิดความทุกข์ยากแม้กระทั่งอาหารสามารถใช้ในการรบกวนวิธีที่ไม่มีประสิทธิภาพและคนขับรถที่สามารถกินได้โดยเฉลี่ยจะยิ่งโง่กว่านักออกแบบเว็บไซต์ทั่วไป นอกจากนี้ที่รัก W3C ไม่จำเป็นต้องกังวล: ฝูงโกรธของนักออกแบบ HTML ที่ขาของพวกเขาถูกยิงด้วยSTYLEองค์ประกอบในBODYยังไม่สามารถตาม W3C และแก้แค้นได้ พวกเขาไม่รู้ที่อยู่ และพวกเขาไม่มีขา

ดังนั้นโปรดทำเสียงของคุณให้STYLEถูกต้องตามกฎหมายBODY! การอ้างข้อความอย่างเชื่อฟัง แต่ไม่สามารถจัดหาทางเลือกที่ทำงานได้ดีกว่าสถานการณ์ปัจจุบันก็ไม่ช่วยอะไร อันที่จริงมันเป็นภัยคุกคามต่อเทคนิคการแก้ปัญหาสุดท้ายวิธีนี้

จำเอาไว้: ข้อมูลจำเพาะ HTML5 เรียกว่าข้อเสนอแนะ

— lunakid
แหล่งที่มา

ปรับปรุง:รายละเอียดในที่สุดก็ถูกจับขึ้น: STYLEคือตอนนี้ที่ถูกต้องในBODY! ;)

— lunakid

1

อัปเดต 2:รายละเอียดยกเลิกการติดตามเนื่องจากพวกเขาเปลี่ยนใจ (คลิกที่ลิงก์ของ lunakid ซึ่งเป็นข้อมูลล่าสุด)

— Maximillian Laumeister

2

ข้อกำหนด html ที่ระบุว่า

องค์ประกอบสไตล์ที่ไม่มีแอททริบิวต์ที่กำหนดขอบเขตถูก จำกัด ให้ปรากฏในส่วนหัวของเอกสาร

แอ็ตทริบิวต์ที่กำหนดขอบเขตเป็นค่าบูลีนที่ระบุว่าควรใช้กับแผนผังย่อยที่รูทที่องค์ประกอบหลักขององค์ประกอบสไตล์

ในขณะนี้ Firefox เท่านั้นรองรับแอตทริบิวต์ที่กำหนดขอบเขต http://www.w3schools.com/tags/att_style_scoped.asp

— ซีดีการ์ด
แหล่งที่มา

5

เว็บไซต์ w3schools ไม่ควรอ้างถึงเป็นข้อมูลอ้างอิงหรือเลย ดูw3fools.com

— Jukka K. Korpela

2

และนี่ไม่ได้ตอบคำถาม

— Jukka K. Korpela

1

ขอบคุณ @ JukkaK.Korpela มันเป็นลิงค์แรกที่ฉันพบอ้างถึงการสนับสนุนเบราว์เซอร์คุณลักษณะที่กำหนดขอบเขต ความคิดเห็นอื่นให้การอ้างอิงที่ดีกว่ามาก +1 คำตอบของคุณ -1 ความคิดเห็นที่สร้างสรรค์น้อยกว่าของคุณ

— crad

+1 สำหรับการชี้ไปที่ข้อมูลจำเพาะรวมถึงไม่สนับสนุนการกำหนดขอบเขต (ซึ่งจำเป็นต้องปฏิบัติตามข้อกำหนด) ฉันคิดว่าคุณควรอ่านคำตอบก่อนที่จะกระโดดปืนที่นั่น @ JukkaK.Korpela แย่มาก คุณไม่สามารถได้รับความน่าเชื่อถือมากกว่าข้อมูลจำเพาะและตอบคำถามได้อย่างสมบูรณ์แบบ " มันจะเป็นความคิดที่ผิดที่จะมีสไตล์ในร่างกาย " - ตามสเป็ค " ใช่มันจะเป็น "

— เฟอร์กัสในลอนดอน

1

มีเหตุผลทางเทคนิคบางประการที่ทำให้ css ของคุณอยู่ในไฟล์เทียบกับแท็กสไตล์:

ความสามารถในการใช้ css minifier (ฉันไม่เชื่อว่า minifiers ทำงานบนแท็กสไตล์)
หากต้องการให้ไฟล์ css สามารถเบราว์เซอร์ได้

ความเห็นบางส่วนมีสาเหตุมาจากการใช้ไฟล์:

คุณสามารถใช้ตัวประมวลผลล่วงหน้า css ที่ยอดเยี่ยมเช่น Sass (Compass) หรือน้อยกว่า
คุณมีสองวิธีในการเพิ่ม css ในแอปพลิเคชันของคุณ

ความชอบส่วนตัวของฉันคือการใช้เข็มทิศเพื่อแยกไฟล์สำหรับแต่ละหน้าจากนั้นใช้มันเพื่อรวบรวมไฟล์ทั้งหมดเป็นไฟล์เดียว ไฟล์เดียวนั้นจะถูกรวมไว้ในทุกหน้า หากต้องแยกไฟล์ออกจากถนนไม่ว่าจะด้วยเหตุผลใดก็ตามพวกเขาก็สามารถทำได้ แต่ก็ไม่คุ้มกับความยุ่งยากในระหว่างนี้

— pllee
แหล่งที่มา