เมื่อเร็วๆ นี้ Chromium ได้ติดตั้งใช้งานฟีเจอร์ใหม่จาก HTML5 ซึ่งได้แก่ สไตล์ชีตที่กำหนดขอบเขต
<style scoped> ผู้เขียนเว็บสามารถจำกัดกฎรูปแบบให้มีผลกับบางส่วนของหน้าเท่านั้น โดยการตั้งค่าแอตทริบิวต์ "กำหนดขอบเขต" ในองค์ประกอบ <style> ที่เป็นหน่วยย่อยโดยตรงขององค์ประกอบรูทของแผนผังย่อยที่คุณต้องการใช้รูปแบบ ซึ่งจะจำกัดรูปแบบให้มีผลเฉพาะกับองค์ประกอบที่เป็นระดับบนขององค์ประกอบ <style> และองค์ประกอบสืบทอดทั้งหมด
ตัวอย่าง
เอกสารทั่วไปที่ใช้การจัดรูปแบบมาตรฐานมีดังนี้
<html>
<body>
<div>a div! <span>a span!</span></div>
<div>
<style>
div { color: red; }
span { color: green; }
</style>
a div! <span>a span!</span></div>
<div>a div! <span>a span!</span></div>
</body>
</html>
กฎรูปแบบที่ระบุจะใส่สีข้อความภายในสีแดง <div> และภายในสีเขียว <span>:
a div! a span!
a div! a span!
a div! a span!
อย่างไรก็ตาม หากเราตั้งค่า scoped ในองค์ประกอบ <style>:
<html>
<body>
<div>a div! <span>a span!</span></div>
<div>
<style scoped>
div { color: red; }
span { color: green; }
</style>
a div! <span>a span!</span></div>
<div>a div! <span>a span!</span></div>
</body>
</html>
ระบบก็จะจำกัดกฎของรูปแบบเพื่อให้นำไปใช้กับ <div> ที่ล้อมรอบซึ่งเป็นระดับบนสุดขององค์ประกอบ <style scoped> และข้อมูลอื่นๆ ใน <div> ดังกล่าว เราเรียกสิ่งนี้ว่า "ขอบเขต" และผลลัพธ์ที่ได้จะมีลักษณะดังนี้
div! a span!
a div! span!
a div! ระยะเวลา!
ซึ่งทำได้ทุกที่ในมาร์กอัป ดังนั้นหากต้องการทดลองใช้ คุณก็ฝังสไตล์ที่กำหนดขอบเขตไว้ในส่วนที่มีขอบเขตส่วนอื่นๆ ของมาร์กอัปได้บ่อยเท่าที่ต้องการเพื่อให้ควบคุมตำแหน่งที่จะใช้รูปแบบได้อย่างละเอียด
กรณีการใช้งาน
ตอนนี้มีข้อดีอย่างไร
กรณีการใช้งานที่พบบ่อยคือเนื้อหาที่คัดลอกมา เมื่อคุณในฐานะผู้เขียนเว็บต้องการจะนำเนื้อหาจากบุคคลที่สาม ซึ่งรวมถึงสไตล์ทุกรูปแบบ แต่ไม่ต้องการเสี่ยงว่ารูปแบบเหล่านั้นจะ "ก่อให้เกิดมลพิษ" กับส่วนอื่นๆ ที่ไม่เกี่ยวข้องของหน้าเว็บ ข้อได้เปรียบที่ยอดเยี่ยมคือความสามารถในการรวมเนื้อหาจากเว็บไซต์อื่นๆ เช่น Yelp, Twitter, ebay และอื่นๆ ไว้ด้วยกันในหน้าเดียวโดยไม่ต้องแยกเนื้อหาโดยใช้ <iframe> หรือตัดต่อเนื้อหาภายนอกได้ทันที
หากคุณใช้ระบบจัดการเนื้อหา (CMS) ที่ส่งตัวอย่างมาร์กอัปซึ่งทั้งหมดเรียงต่อกันเป็นการแสดงผลหน้าสุดท้าย นี่เป็นฟีเจอร์ที่ยอดเยี่ยมในการตรวจสอบว่าข้อมูลโค้ดแต่ละรายการได้รับการจัดรูปแบบแยกจากข้อมูลอื่นๆ บนหน้าเว็บ ซึ่งจะเป็นประโยชน์สำหรับ wiki เช่นกัน
เมื่อคุณต้องการเขียนโค้ดการสาธิตที่ดีในหน้าเว็บ คุณสามารถจำกัดรูปแบบสำหรับเนื้อหาสาธิตเท่านั้น ซึ่งจะช่วยให้คุณได้ใช้งาน CSS ในการสาธิตอย่างเต็มประสิทธิภาพ แต่สิ่งอื่นๆ ในหน้าเว็บได้รับผลกระทบ
กรณีการใช้งานอีกอย่างหนึ่งคือการสรุปรวมไว้ เช่น หากหน้าเว็บมีเมนูด้านข้าง คุณควรใส่รูปแบบที่เฉพาะเจาะจงสำหรับเมนูนั้นลงในส่วน <style scoped> ในส่วนนั้นของมาร์กอัป กฎสไตล์เหล่านั้นจะไม่มีผลใดๆ เมื่อแสดงผลส่วนอื่นๆ ของหน้าเว็บ ซึ่งทำให้แยกส่วนเหล่านี้ออกจากเนื้อหาหลักได้เป็นอย่างดี
น่าจะเป็นหนึ่งในกรณีการใช้งานที่น่าสนใจที่สุดสำหรับโมเดลคอมโพเนนต์เว็บ คอมโพเนนต์ของเว็บจะเป็นวิธีที่ยอดเยี่ยมในการสร้างสิ่งต่างๆ เช่น แถบเลื่อน เมนู เครื่องมือเลือกวันที่ วิดเจ็ตแท็บ ฯลฯ การระบุสไตล์ที่กำหนดขอบเขตจะทำให้นักออกแบบสร้างวิดเจ็ตและจัดแพ็กเกจเข้ากับสไตล์ต่างๆ เป็นส่วนประกอบในตัวซึ่งผู้อื่นสามารถจับและรวมไว้ในเว็บแอปพลิเคชันที่สมบูรณ์ได้ เราวางแผนที่จะใช้ <style scoped> กับคอมโพเนนต์เว็บและ shadow DOM เป็นหลัก (ซึ่งสามารถเปิดใช้ได้แล้วโดยการตั้งค่า Flag "Shadow DOM" แบบทดลองใน chrome://flags) ปัจจุบันยังไม่มีวิธีที่ดีในการตรวจสอบว่าได้จำกัดสไตล์ไว้ที่คอมโพเนนต์เว็บเท่านั้น โดยไม่ใช้แนวทางปฏิบัติที่ไม่ดี เช่น การจัดรูปแบบในบรรทัด สไตล์ที่กำหนดขอบเขตจึงเหมาะกับกรณีนี้
เหตุใดจึงรวมองค์ประกอบระดับบนสุด
วิธีที่เป็นธรรมชาติที่สุดคือการรวมองค์ประกอบระดับบนสุดเพื่อให้กฎ <style scoped> ตั้งสีพื้นหลังทั่วไปสำหรับทั้งขอบเขตได้ เป็นต้น นอกจากนี้ยังอนุญาตให้เขียนสไตล์ชีตที่กำหนดขอบเขต "ป้องกัน" สำหรับเบราว์เซอร์ที่ยังไม่รองรับ <style scoped> ด้วยคำนำหน้ากฎด้วยตัวเลือกรหัสหรือคลาสเป็นค่าสำรอง ดังนี้
<div id="menu">
<style scoped>
#menu .main { … }
#menu .sub { … }
…
ซึ่งเลียนแบบผลกระทบของการใช้สไตล์เมื่อใช้ "ขอบเขต" แต่จะมีผลกระทบบางส่วนต่อประสิทธิภาพการทำงานขณะรันไทม์เนื่องจากตัวเลือกที่ซับซ้อนกว่า ข้อดีของวิธีนี้ก็คือช่วยให้สามารถใช้แนวทางสำรองแบบค่อยเป็นค่อยไปได้จนกว่าจะถึงวันที่มีการรองรับ <style scoped> ในวงกว้างและอาจทิ้งตัวเลือกรหัสไปได้เลย
สถานะ
เนื่องจากการใช้สไตล์ชีตที่กำหนดขอบเขตยังคงเป็นการใช้งานแบบใหม่ ปัจจุบันระบบซ่อนแถบดังกล่าวไว้หลังธงสถานะรันไทม์ใน Chrome หากต้องการเปิดใช้ คุณต้องใช้ Chrome เวอร์ชันที่มีหมายเลขเวอร์ชัน 19 ขึ้นไป (ขณะนี้มี Chrome Canary) ให้ค้นหารายการ "เปิดใช้ <style scoped>" ใน chrome://flags (ส่วนท้าย) คลิก "เปิดใช้" แล้วรีสตาร์ทเบราว์เซอร์
ขณะนี้ยังไม่มีข้อบกพร่องที่ทราบ แต่มีเพียง @global และเวอร์ชันที่กำหนดขอบเขตของ @keyframes และ @-webkit-region และยังอยู่ระหว่างการดำเนินการ นอกจากนี้ ระบบจะไม่สนใจ @font-face ในขณะนี้ เนื่องจากมีโอกาสสูงที่ข้อมูลจำเพาะจะมีการเปลี่ยนแปลง
เราต้องการส่งเสริมให้ทุกคนที่สนใจฟีเจอร์นี้ได้ลองใช้งาน และแจ้งให้เราทราบเกี่ยวกับประสบการณ์ของคุณ ทั้งในแง่ดี แย่ และ (อาจเป็น)ข้อบกพร่อง