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