สรุปคร่าวๆ
พร็อพเพอร์ตี้ CSS Containment ใหม่ช่วยให้นักพัฒนาแอปจำกัดขอบเขตของสไตล์ เลย์เอาต์ และสีของเบราว์เซอร์ได้
![การควบคุม CSS ก่อน: เลย์เอาต์ใช้เวลา 59.6 มิลลิวินาที หลัง: เลย์เอาต์ใช้เวลา 0.05 มิลลิวินาที](https://developer.chrome.com/static/blog/css-containment/image/css-containment-before-dd44d7d4075ef.jpg?authuser=6&hl=th)
ซึ่งมีอยู่ 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 ใหม่ที่มอบการควบคุมให้แก่นักพัฒนาแอป ซึ่งก็คือการควบคุม
คอนเทนเนอร์ CSS เป็นพร็อพเพอร์ตี้ใหม่ที่มีคีย์เวิร์ด ซึ่งรองรับค่า 4 ค่าดังนี้
layout
paint
size
style
แต่ละค่าจะช่วยให้คุณสามารถจำกัดปริมาณการแสดงผลที่จำเป็นของเบราว์เซอร์ มาดูรายละเอียดเพิ่มเติมของแต่ละค่ากัน
เลย์เอาต์ (มี: เค้าโครง)
การล้อมองค์ประกอบรูปแบบน่าจะเป็นข้อดีสูงสุดของการควบคุม เช่นเดียวกับ contain: paint
โดยปกติแล้ว เลย์เอาต์จะกำหนดขอบเขตตามเอกสาร ทำให้ปรับขนาดตามสัดส่วนของขนาด DOM ได้ ดังนั้นหากคุณเปลี่ยนพร็อพเพอร์ตี้ left
ขององค์ประกอบ คุณอาจต้องตรวจสอบทุกองค์ประกอบใน DOM
การเปิดใช้การป้องกันนี้อาจลดจำนวนองค์ประกอบลงให้เหลือเพียงไม่กี่รายการ แทนที่จะเป็นทั้งเอกสาร ทำให้เบราว์เซอร์ทำงานที่ไม่จำเป็นได้อย่างจุใจ และปรับปรุงประสิทธิภาพได้อย่างมาก
สี (มี: สี)
การลอกสีเป็นอีกหนึ่งประโยชน์ที่ดีมากของการกำจัดของสี องค์ประกอบที่กักเก็บสีจะตัดองค์ประกอบที่เป็นปัญหาเอาไว้ แต่ก็มีผลข้างเคียงอื่นๆ ด้วยเช่นกัน
- ทำหน้าที่เป็นบล็อกที่ประกอบด้วยองค์ประกอบที่มีตำแหน่งแน่นอนและตายตัว ซึ่งหมายความว่ารายการย่อยใดๆ จะถูกจัดตำแหน่งตามองค์ประกอบที่มี
contain: paint
ไม่ใช่องค์ประกอบหลักอื่นๆ เช่น เอกสาร - กลายเป็นบริบทซ้อนกัน ซึ่งหมายความว่าสิ่งต่างๆ อย่างเช่น
z-index
จะส่งผลต่อองค์ประกอบ และองค์ประกอบย่อยจะซ้อนกันตามบริบทใหม่ - กลายเป็นบริบทใหม่ในการจัดรูปแบบ ซึ่งหมายความว่าหากคุณมีองค์ประกอบระดับบล็อกที่มีการปิดกั้นการแสดงผล ระบบจะถือว่าคอมโพเนนต์ดังกล่าวเป็นสภาพแวดล้อมเลย์เอาต์ใหม่ที่เป็นแบบอิสระ ซึ่งหมายความว่าโดยทั่วไปเลย์เอาต์นอกองค์ประกอบจะไม่ส่งผลต่อองค์ประกอบย่อยในองค์ประกอบที่มีอยู่นั้น
ขนาด (มี: ขนาด)
สิ่งที่ contain: size
หมายความว่ารายการย่อยขององค์ประกอบไม่มีผลต่อขนาดระดับบนสุด และมิติข้อมูลที่อนุมานหรือที่ประกาศจะเป็นขนาดที่ใช้ ดังนั้นหากคุณตั้งค่า contain: size
แต่ไม่ได้ระบุขนาดสําหรับองค์ประกอบ (โดยตรงหรือผ่านคุณสมบัติ Flex) องค์ประกอบจะแสดงผลที่ 0px x 0px
การกักเก็บขนาดเป็นมาตรการที่ใช้เข็มขัดและวงเล็บปีกกาเพื่อตรวจสอบว่าคุณไม่ได้อาศัยองค์ประกอบย่อยในการปรับขนาด แต่ตัวเองไม่ได้ให้ประโยชน์ด้านประสิทธิภาพมากนัก
รูปแบบ (มี: รูปแบบ)
การคาดเดาสิ่งที่จะเกิดขึ้นกับแผนผัง 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 ขึ้นไป แล้วบอกเราว่าคุณเป็นอย่างไรบ้าง