TL;DR
พร็อพเพอร์ตี้ CSS Containment ใหม่ช่วยให้นักพัฒนาซอฟต์แวร์จำกัดขอบเขตของสไตล์ เลย์เอาต์ และงานระบายสีของเบราว์เซอร์ได้
ซึ่งมีค่าอยู่ 2-3 ค่า ซึ่งทำให้ไวยากรณ์มีลักษณะดังนี้
contain: none | strict | content | [ size || layout || style || paint ]
เพราะ Chrome 52 ขึ้นไป และ Opera 40 ขึ้นไป (ได้รับการสนับสนุนจากสาธารณะจาก Firefox) ดังนั้นลองใช้และบอกเราว่าคุณเป็นอย่างไรบ้าง
พร็อพเพอร์ตี้มี
การสร้างเว็บแอปหรือแม้กระทั่งเว็บไซต์ที่ซับซ้อน ความท้าทายที่สําคัญด้านประสิทธิภาพคือการจำกัดผลกระทบของรูปแบบ เลย์เอาต์ และการลงสี บ่อยครั้งที่ DOM ทั้งหมดถือว่า "อยู่ในขอบเขต" สำหรับงานการคํานวณ ซึ่งหมายความว่าการพยายาม "มุมมอง" แบบในตัวในเว็บแอปอาจเป็นเรื่องยุ่งยาก เพราะการเปลี่ยนแปลงส่วนใดส่วนหนึ่งของ DOM อาจส่งผลต่อส่วนอื่นๆ และไม่มีวิธีบอกเบราว์เซอร์ว่าสิ่งใดควรอยู่ในหรืออยู่นอกขอบเขต
ตัวอย่างเช่น สมมติว่า DOM บางส่วนมีลักษณะดังต่อไปนี้
<section class="view">
Home
</section>
<section class="view">
About
</section>
<section class="view">
Contact
</section>
และคุณเพิ่มองค์ประกอบใหม่ลงในมุมมอง 1 รายการ ซึ่งจะเรียกให้แสดงรูปแบบ เลย์เอาต์ และสี
<section class="view">
Home
</section>
<section class="view">
About
<div class="newly-added-element">Check me out!</div>
</section>
<section class="view">
Contact
</section>
อย่างไรก็ตาม ในกรณีนี้ DOM ทั้งหมดอยู่ในขอบเขตที่มีประสิทธิภาพ ซึ่งหมายความว่าการคำนวณรูปแบบ เลย์เอาต์ และสีจะต้องพิจารณาองค์ประกอบทั้งหมด ไม่ว่าจะมีการเปลี่ยนแปลงหรือไม่ก็ตาม ยิ่ง DOM มีขนาดใหญ่เท่าใด ระบบก็ยิ่งมีการคำนวณที่เกี่ยวข้องมากขึ้นเท่านั้น นั่นหมายความว่าคุณอาจทำให้แอปไม่ตอบสนองต่อข้อมูลจากผู้ใช้ได้
ข่าวดีก็คือเบราว์เซอร์ที่ทันสมัยเริ่มสามารถจำกัดขอบเขตของรูปแบบ เลย์เอาต์ และงานลงสีได้โดยอัตโนมัติ ซึ่งหมายความว่าสิ่งต่างๆ จะเร็วขึ้นโดยที่คุณไม่ต้องทำอะไรเลย
แต่ที่ดียิ่งกว่านั้นก็คือมีพร็อพเพอร์ตี้ CSS ใหม่ที่จะควบคุมขอบเขตให้กับนักพัฒนาซอฟต์แวร์ได้ นั่นคือ Containment
การควบคุม CSS เป็นพร็อพเพอร์ตี้ใหม่ที่มีคีย์เวิร์ด "ประกอบด้วย" ซึ่งรองรับ 4 ค่า ดังนี้
layout
paint
size
style
แต่ละค่าเหล่านี้จะช่วยจำกัดปริมาณงานในการแสดงผลที่เบราว์เซอร์ต้องทำ มาดูรายละเอียดเพิ่มเติมของแต่ละด้านกัน
เลย์เอาต์ (มี: เลย์เอาต์)
การควบคุมเลย์เอาต์อาจเป็นประโยชน์ที่ใหญ่ที่สุดของการควบคุม ร่วมกับ contain: paint
โดยปกติเลย์เอาต์จะกำหนดขอบเขตของเอกสาร ทำให้ปรับขนาดตามสัดส่วนของขนาดของ DOM ดังนั้นหากคุณเปลี่ยนพร็อพเพอร์ตี้ left
ขององค์ประกอบ คุณอาจต้องตรวจสอบทุกองค์ประกอบใน DOM
การเปิดใช้การกักเก็บที่นี่อาจลดจำนวนองค์ประกอบให้เหลือเพียงหยิบมือแทนที่จะเป็นทั้งเอกสาร ทำให้เบราว์เซอร์มีงานที่ไม่จำเป็นจำนวนมาก และปรับปรุงประสิทธิภาพได้อย่างมาก
สี (มี: สี)
สีที่กำหนดขอบเขตพื้นที่เป็นอีกหนึ่งประโยชน์ที่มีประโยชน์อย่างยิ่งของการกักเก็บ โดยพื้นฐานแล้วการกันสีจะตัดคลิปองค์ประกอบที่เป็นปัญหา แต่ก็มีผลข้างเคียงอื่นๆ ด้วย ดังนี้
- ทำหน้าที่เป็นบล็อกที่เก็บองค์ประกอบที่มีตำแหน่งคงที่และคงที่ ซึ่งหมายความว่าเด็กจะได้รับตำแหน่งตามองค์ประกอบที่มี
contain: paint
ไม่ใช่องค์ประกอบหลักอื่นๆ เช่น เอกสาร - เนื้อหาจะกลายเป็นบริบทแบบซ้อนกัน ซึ่งหมายความว่าสิ่งต่างๆ เช่น
z-index
จะส่งผลต่อองค์ประกอบ และจะมีการจัดเรียงรายการย่อยตามบริบทใหม่ - กลายเป็นบริบทการจัดรูปแบบใหม่ ซึ่งหมายความว่า ตัวอย่างเช่น หากคุณมีองค์ประกอบระดับบล็อกที่มีการกันสี องค์ประกอบนั้นจะถือเป็นสภาพแวดล้อมของเลย์เอาต์ใหม่ที่แยกเป็นอิสระ ซึ่งหมายความว่าโดยทั่วไปเลย์เอาต์นอกองค์ประกอบจะไม่ส่งผลต่อองค์ประกอบย่อยขององค์ประกอบที่มีองค์ประกอบอยู่
ขนาด (มี: ขนาด)
ความหมาย contain: size
หมายความว่าองค์ประกอบย่อยขององค์ประกอบไม่มีผลต่อขนาดของระดับบนสุด และมิติข้อมูลที่อนุมานหรือที่ประกาศไว้จะเป็นขนาดที่ใช้ ดังนั้นหากคุณตั้งค่า contain: size
แต่ไม่ได้ระบุมิติข้อมูลขององค์ประกอบ (ไม่ว่าโดยตรงหรือผ่านพร็อพเพอร์ตี้เฟลกซ์) ก็จะแสดงผลที่ 0 x 0 พิกเซล
จริงๆ แล้วการควบคุมขนาดคือวิธีวัดขนาดเข็มขัดและวงเล็บปีกกาเพื่อให้มั่นใจว่าคุณไม่ต้องอาศัยองค์ประกอบย่อยในการปรับขนาด แต่เพียงอย่างเดียวก็ไม่ได้ให้ประโยชน์ด้านประสิทธิภาพมากนัก
สไตล์ (มี: สไตล์)
การคาดเดาว่าการเปลี่ยนแปลงสไตล์ขององค์ประกอบหนึ่งๆ จะส่งผลอย่างไรต่อโครงสร้าง DOM จะเป็นตัวสำรอง ตัวอย่างหนึ่งคือตัวนับ CSS ซึ่งการเปลี่ยนแปลงตัวนับในกลุ่มย่อยอาจส่งผลต่อค่าตัวนับซึ่งมีชื่อเดียวกันซึ่งใช้ในส่วนอื่นของเอกสาร เมื่อใช้การตั้งค่า contain: style
การเปลี่ยนแปลงรูปแบบจะไม่ถูกเผยแพร่กลับออกไปจากองค์ประกอบที่มีอยู่
เพื่อความชัดเจน สิ่งที่ contain: style
ไม่ได้ระบุคือการจัดรูปแบบที่กำหนดขอบเขตซึ่งคุณจะได้รับจาก Shadow DOM การควบคุมในที่นี้มีไว้เพื่อจำกัดส่วนของโครงสร้างต้นไม้ที่ต้องพิจารณาเมื่อมีการเปลี่ยนรูปแบบเท่านั้น ไม่ใช่เมื่อมีการประกาศรูปแบบ
การเข้มงวดและการป้องกันเนื้อหา
นอกจากนี้ คุณยังรวมคีย์เวิร์ด เช่น contain: layout paint
ซึ่งจะใช้เฉพาะลักษณะการทำงานเหล่านั้นกับองค์ประกอบได้อีกด้วย แต่ประกอบด้วยรองรับค่าเพิ่มเติมอีก 2 ค่าด้วย ได้แก่
contain: strict
มีความหมายเหมือนกับcontain: size layout paint
contain: content
มีความหมายเหมือนกับcontain: layout paint
การใช้การควบคุมแบบเข้มงวดจะมีประโยชน์มากเมื่อคุณทราบขนาดขององค์ประกอบล่วงหน้า (หรือต้องการสงวนขนาดองค์ประกอบ) แต่โปรดทราบว่าหากคุณประกาศการกักเก็บที่เข้มงวดโดยไม่มีมิติข้อมูล เนื่องจากขนาดที่โดยนัย องค์ประกอบอาจแสดงเป็นช่องขนาด 0 x 0 พิกเซล
ในทางตรงกันข้าม การควบคุมเนื้อหาจะช่วยปรับปรุงขอบเขตได้อย่างมาก แต่คุณไม่จำเป็นต้องทราบหรือระบุมิติข้อมูลขององค์ประกอบล่วงหน้า
จาก 2 รายการ contain: content
คือรายการที่คุณควรจะใช้โดยค่าเริ่มต้น คุณควรถือว่าการควบคุมเข้มงวดเป็นช่องทางลี้ภัยเพิ่มเติมเมื่อ contain: content
ยังไม่รัดกุมเพียงพอสำหรับความต้องการ
โปรดแจ้งให้เราทราบการใช้งานของคุณ
การควบคุมเป็นวิธีที่ดีในการเริ่มระบุสิ่งที่คุณต้องการจะแยกไว้ในหน้าเว็บให้เบราว์เซอร์ทราบ ลองใช้งานใน Chrome 52 ขึ้นไป และแจ้งให้เราทราบการใช้งานของคุณ!