CSS :scope pseudo-class มีไว้เพื่ออะไร

:scope ได้รับการกําหนดไว้ในตัวเลือก CSS 4 ดังนี้

พсевโดคลาสที่แสดงถึงองค์ประกอบที่อยู่ในชุดองค์ประกอบการอ้างอิงตามบริบท นี่เป็นชุดองค์ประกอบที่ระบุไว้อย่างชัดเจน (อาจว่างเปล่า) เช่น องค์ประกอบที่ระบุโดย querySelector() หรือองค์ประกอบหลักขององค์ประกอบ <style scoped> ซึ่งใช้เพื่อ "กําหนดขอบเขต" ตัวเลือกเพื่อให้จับคู่ภายในซับต้นไม้เท่านั้น

ตัวอย่างการใช้คำสั่งนี้ภายใน <style scoped> (ข้อมูลเพิ่มเติม) มีดังนี้

<style>
    li {
    color: blue;
    }
</style>

<ul>
    <style scoped>
    li {
        color: red;
    }
    :scope {
        border: 1px solid red;
    }
    </style>
    <li>abc</li>
    <li>def</li>
    <li>efg</li>
</ul>

<ul>
    <li>hij</li>
    <li>klm</li>
    <li>nop</li>
</ul>

ซึ่งจะเปลี่ยนสีองค์ประกอบ li ใน ul แรกเป็นสีแดง และเนื่องจากกฎ :scope จึงใส่เส้นขอบรอบ ul นั่นเป็นเพราะในบริบทของ <style scoped> นี้ ul ตรงกับ :scope บริบทในเครื่อง หากเราเพิ่มกฎ :scope ใน <style> ภายนอก กฎดังกล่าวจะจับคู่กับทั้งเอกสาร ซึ่งเทียบเท่ากับ :root

องค์ประกอบตามบริบท

คุณอาจรู้จัก querySelector() และ querySelectorAll() เวอร์ชัน Element คุณสามารถจํากัดชุดผลลัพธ์ให้แสดงเฉพาะองค์ประกอบตามบริบทแทนการค้นหาทั้งเอกสารได้ ดังนี้

<ul>
    <li id="scope"><a>abc</a></li>
    <li>def</li>
    <li><a>efg</a></li>
</ul>
<script>
    document.querySelectorAll('ul a').length; // 2

    var scope = document.querySelector('#scope');
    scope.querySelectorAll('a').length; // 1
</script>

เมื่อเรียกใช้เมธอดเหล่านี้ เบราว์เซอร์จะแสดง NodeList ที่กรองเพื่อรวมเฉพาะชุดโหนดที่ (ก) ตรงกับตัวเลือก และ (ข) ที่เป็นรายการสืบทอดขององค์ประกอบบริบทด้วย ดังนั้นในตัวอย่างที่ 2 เบราว์เซอร์จะค้นหาองค์ประกอบ a ทั้งหมด จากนั้นกรององค์ประกอบที่ไม่ได้อยู่ในองค์ประกอบ scope ออก วิธีนี้ได้ผล แต่อาจทําให้อุปกรณ์ทำงานแปลกๆ ได้หากไม่ระมัดระวัง อ่านต่อไป

เมื่อ querySelector ทำงานผิดพลาด

มีประเด็นสำคัญจริงๆ ในข้อกำหนดเกี่ยวกับตัวเลือกที่ผู้คนมักมองข้าม แม้ว่าจะมีการเรียกใช้ querySelector[All]() ในองค์ประกอบ แต่ตัวเลือกจะยังคงประเมินในบริบทของทั้งเอกสาร ซึ่งหมายความว่าอาจเกิดเหตุการณ์ที่ไม่คาดคิดขึ้นได้ ดังนี้

    scope.querySelectorAll('ul a').length); // 1
    scope.querySelectorAll('body ul a').length); // 1

WTF! ในตัวอย่างแรก ul คือองค์ประกอบของฉัน แต่ฉันยังคงใช้และจับคู่โหนดได้ ในตัวที่ 2 body ไม่ได้เป็นองค์ประกอบย่อยของฉัน แต่ "body ul a" ยังคงจับคู่ได้ ทั้ง 2 รายการนี้ทำให้สับสนและไม่ใช่สิ่งที่คุณคาดหวัง

เราขอเปรียบเทียบกับ jQuery ซึ่งใช้แนวทางที่ถูกต้องและทําสิ่งที่คุณคาดหวัง

    $(scope).find('ul a').length // 0
    $(scope).find('body ul a').length // 0

…ป้อน :scope เพื่อแก้ปัญหาความซับซ้อนทางความหมายเหล่านี้

การแก้ไข querySelector ด้วย :scope

WebKit เพิ่งรองรับการใช้คลาสจำลอง :scope ใน querySelector[All]() คุณสามารถทดสอบได้ใน Chrome Canary 27

คุณสามารถใช้เพื่อจํากัดตัวเลือกไว้ที่องค์ประกอบบริบท มาดูตัวอย่างกัน ต่อไปนี้ :scope ใช้เพื่อ "กําหนดขอบเขต" ตัวเลือกไปยังต้นไม้ย่อยขององค์ประกอบขอบเขต ถูกต้อง เราพูดคำว่าขอบเขตไป 3 ครั้ง

    scope.querySelectorAll(':scope ul a').length); // 0
    scope.querySelectorAll(':scope body ul a').length); // 0
    scope.querySelectorAll(':scope a').length); // 1

การใช้ :scope ทำให้ความหมายของเมธอด querySelector() คาดเดาได้ง่ายขึ้นและสอดคล้องกับสิ่งที่เครื่องมืออื่นๆ เช่น jQuery กำลังทำอยู่

ประสิทธิภาพเพิ่มขึ้นไหม

ยังไม่มี :(

ฉันอยากทราบว่าการใช้ :scope ใน qS/qSA ช่วยเพิ่มประสิทธิภาพได้ไหม เราจึงทำการทดสอบตามแบบวิศวกรที่ดี เหตุผลคือยิ่งเบราว์เซอร์มีพื้นที่ทำงานน้อยลงในการจับคู่ตัวเลือก ก็ยิ่งทำให้การค้นหาเร็วขึ้น

จากการทดสอบของเรา ขณะนี้ WebKit ใช้เวลานานกว่าประมาณ 1.5-2 เท่าเมื่อเทียบกับการไม่ใช้ :scope น่าเสียดาย เมื่อ crbug.com/222028 ได้รับการแก้ไขแล้ว ในทางทฤษฎีแล้ว การใช้ฟีเจอร์นี้ควรช่วยเพิ่มประสิทธิภาพได้เล็กน้อยเมื่อเทียบกับการไม่ใช้