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! ช่วง!
div! a span!
div! span!
แน่นอนว่าสามารถดำเนินการที่ใดก็ได้ในมาร์กอัป ดังนั้นถ้าอยากลอง คุณอาจฝังสไตล์ที่กำหนดขอบเขตไว้ในส่วนอื่นๆ ของมาร์กอัปได้มากเท่าที่ต้องการเพื่อรับการควบคุมแบบละเอียดสำหรับตำแหน่งที่ใช้รูปแบบ
Use Case
แล้วสิ่งนี้มีข้อดีอย่างไร
กรณีการใช้งานทั่วไปคือเนื้อหาที่คัดลอกมา เมื่อคุณในฐานะผู้เขียนเว็บต้องการที่จะผสานเนื้อหาจากบุคคลที่สาม ซึ่งรวมถึงรูปแบบทั้งหมดของเว็บไซต์ แต่ไม่อยากเสี่ยงให้รูปแบบดังกล่าว "สร้างมลพิษ" ให้กับส่วนอื่นๆ ที่ไม่เกี่ยวข้องในหน้าเว็บ ข้อได้เปรียบที่ดีมากคือความสามารถในการรวมเนื้อหาจากเว็บไซต์อื่น เช่น Yelp, Twitter, ebay และอื่นๆ ไว้ในหน้าเดียว โดยไม่ต้องแยกเนื้อหาเหล่านั้นออกโดยใช้ <iframe> หรือแก้ไขเนื้อหาภายนอกได้ทันที
หากคุณใช้ระบบจัดการเนื้อหา (CMS) ซึ่งส่งข้อมูลโค้ดของมาร์กอัปที่รวมกันทั้งหมดเข้าด้วยกันเป็นการแสดงหน้าสุดท้าย นี่จะเป็นฟีเจอร์ที่ยอดเยี่ยมในการทำให้ข้อมูลโค้ดแต่ละชิ้นได้รับการจัดรูปแบบแยกจากส่วนอื่นๆ ในหน้าเว็บ ซึ่งมีประโยชน์สำหรับ wiki เช่นกัน
เมื่อคุณต้องการเขียนโค้ดสาธิตดีๆ บนหน้าเว็บ คุณสามารถจำกัดรูปแบบให้อยู่เฉพาะในเนื้อหาสาธิตได้อย่างง่ายดาย ทำให้คุณได้ทำการเปลี่ยนแปลงกับ 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> อย่างกว้างขวางและระบบอาจเลิกใช้ตัวเลือกรหัส
สถานะ
เนื่องจากการใช้งานสไตล์ชีตที่กำหนดขอบเขตยังเป็นเรื่องใหม่ ปัจจุบันจึงซ่อนการ์ดเหล่านี้ไว้หลังจากแฟล็กรันไทม์ใน Chrome หากต้องการเปิดใช้ คุณต้องใช้ Chrome เวอร์ชันที่มีหมายเลขเวอร์ชัน 19 ขึ้นไป (Chrome Canary ในขณะนี้) จากนั้นค้นหารายการ "เปิดใช้ <style scoped>" ใน chrome://flags (ต่อท้าย) คลิก "เปิดใช้" จากนั้นรีสตาร์ทเบราว์เซอร์
ปัจจุบันไม่มีข้อบกพร่องที่ทราบ แต่ @global และเวอร์ชันที่กำหนดขอบเขตของ @keyframes และ @-webkit-region ยังอยู่ระหว่างการดำเนินการ และจะละเว้น @font-face ในตอนนี้ด้วย เนื่องจากมีโอกาสสูงที่ข้อมูลจำเพาะจะเปลี่ยนแปลง
เราอยากแนะนำให้ทุกคนที่สนใจฟีเจอร์นี้ให้ลองใช้งาน และแจ้งให้เราทราบเกี่ยวกับประสบการณ์ที่คุณได้รับ เช่น ดี ไม่ดี และ (อาจจะ) ข้อบกพร่อง