Articles
แนะนำ CSS
คุณสมบัติ `overflow` และ `contain`

คุณสมบัติ `overflow` และ `contain`

บทความนี้อธิบายเกี่ยวกับคุณสมบัติ overflow และ contain

คุณสามารถเรียนรู้วิธีการจัดการสิ่งต่าง ๆ เช่น การแสดงแถบเลื่อนและการตัดเนื้อหาด้วยคุณสมบัติ overflow

YouTube Video

HTML สำหรับการแสดงตัวอย่าง

css-overflow-contain.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-overflow-contain.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Overflow Content</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Overflow And Contain Properties</h2>
 20        </header>
 21        <article>
 22            <h3>overflow</h3>
 23            <section>
 24                <header><h4>overflow: visible</h4></header>
 25                <section class="sample-view">
 26                    <section class="overflow-visible">
 27                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 28                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 29                    </section>
 30                </section>
 31                <header><h4>overflow: hidden</h4></header>
 32                <section class="sample-view">
 33                    <section class="overflow-hidden">
 34                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 35                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 36                    </section>
 37                </section>
 38                <header><h4>overflow: scroll</h4></header>
 39                <section class="sample-view">
 40                    <section class="overflow-scroll">
 41                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 42                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 43                    </section>
 44                </section>
 45                <header><h4>overflow: auto</h4></header>
 46                <section class="sample-view">
 47                    <section class="overflow-auto">
 48                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 49                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 50                    </section>
 51                </section>
 52                <header><h4>overflow-x: scroll; overflow-y: hidden;</h4></header>
 53                <section class="sample-view">
 54                    <section class="overflow-xy">
 55                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 56                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 57                    </section>
 58                </section>
 59                <header><h4>overflow: clip</h4></header>
 60                <section class="sample-view">
 61                    <section class="overflow-clip">
 62                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 63                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 64                    </section>
 65                </section>
 66            </section>
 67        </article>
 68        <article>
 69            <h3>contain</h3>
 70            <section>
 71                <header><h4>contain: layout</h4></header>
 72                <section class="sample-view">
 73                    <section class="contain-layout">
 74                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 75                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 76                    </section>
 77                </section>
 78                <header><h4>contain: paint</h4></header>
 79                <section class="sample-view">
 80                    <section class="contain-paint">
 81                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 82                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 83                    </section>
 84                </section>
 85                <header><h4>contain: size</h4></header>
 86                <section class="sample-view">
 87                    <section class="contain-size">
 88                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 89                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 90                    </section>
 91                </section>
 92                <header><h4>contain: style</h4></header>
 93                <section class="sample-view">
 94                    <section class="contain-style">
 95                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
 96                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
 97                    </section>
 98                </section>
 99                <header><h4>contain: content</h4></header>
100                <section class="sample-view">
101                    <section class="contain-content">
102                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
103                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
104                    </section>
105                </section>
106            </section>
107        </article>
108    </main>
109</body>
110</html>

คุณสมบัติ overflow และ contain

overflow

คุณสมบัติ overflow ใน CSS เป็นคุณสมบัติที่สำคัญ ซึ่งควบคุมการแสดงผลของเนื้อหาภายในองค์ประกอบเมื่อมีขนาดเกินกล่องที่กำหนดไว้ มันมักจะถูกใช้เพื่อปรับแต่งเลย์เอาต์และอินเทอร์เฟซผู้ใช้ของหน้าเว็บ ช่วยจัดการการแสดงผลของแถบเลื่อน การตัดเนื้อหา และการเกินขอบขององค์ประกอบ

พื้นฐานของคุณสมบัติ overflow

คุณสมบัติ overflow มีค่าเริ่มต้นหลักสี่ค่า ได้แก่ visible, hidden, scroll และ auto

visible 
1section.overflow-visible {
2    width: 400px;
3    height: 100px;
4    overflow: visible;
5}

visible เป็นค่าดั้งเดิมที่เนื้อหาขององค์ประกอบจะล้นเกินขนาดของกล่องแต่ยังคงสามารถมองเห็นได้ ส่วนที่ล้นอาจทับซ้อนกับองค์ประกอบอื่น ๆ แต่จะไม่มีการแสดงแถบเลื่อนเป็นพิเศษ

คุณสมบัติ:

  • เนื้อหาแสดงผลโดยไม่มีข้อจำกัด
  • ไม่มีการแสดงแถบเลื่อน
hidden 
1section.overflow-hidden {
2    width: 400px;
3    height: 100px;
4    overflow: hidden;
5}

hidden เป็นการตั้งค่าที่เนื้อหาขององค์ประกอบที่เกินขนาดของกล่องจะไม่ถูกแสดง จะไม่มีการแสดงแถบเลื่อน และเนื้อหาที่เกินจะไม่สามารถมองเห็นได้

คุณสมบัติ:

  • เมื่อเนื้อหาเกินขอบเขตขององค์ประกอบ ส่วนเกินนั้นจะถูกซ่อน
  • ไม่มีการแสดงแถบเลื่อน
scroll 
1section.overflow-scroll {
2    width: 400px;
3    height: 100px;
4    overflow: scroll;
5}

เมื่อเลือกใช้ scroll แถบเลื่อนจะถูกแสดงโดยบังคับหากเนื้อหาขององค์ประกอบเกินขนาดของกล่อง แม้ว่าเนื้อหาจะไม่ล้น แถบเลื่อนจะถูกแสดงเสมอ

คุณสมบัติ:

  • แถบเลื่อนจะถูกแสดงแม้ว่าเนื้อหาจะพอดีกับขอบเขตขององค์ประกอบ
  • การเลื่อนสามารถทำได้ทั้งแนวนอนและแนวตั้ง
auto 
1section.overflow-auto {
2    width: 400px;
3    height: 100px;
4    overflow: auto;
5}

auto จะแสดงแถบเลื่อนเฉพาะเมื่อเนื้อหาล้นเกิน; หากเนื้อหาพอดีกับกล่ององค์ประกอบจะไม่มีการแสดงแถบเลื่อน

คุณสมบัติ:

  • แถบเลื่อนจะปรากฏเฉพาะเมื่อเนื้อหาล้น
  • สร้างพื้นที่ที่เลื่อนดูได้อัตโนมัติ
overflow-x และ overflow-y 
1section.overflow-xy {
2    width: 400px;
3    height: 100px;
4    overflow-x: scroll;
5    overflow-y: hidden;
6}

คุณสมบัติ overflow สามารถควบคุมแยกกันได้สำหรับทิศทางแนวนอน (แกน x) และแนวตั้ง (แกน y)

ด้วยวิธีนี้ คุณสามารถใช้ overflow-x และ overflow-y เพื่อกำหนดการแสดงแถบเลื่อนในแนวตั้งและแนวนอนแยกกัน

ข้อพิจารณาสำหรับการล้นของเนื้อหา

เมื่อใช้คุณสมบัติ overflow มีบางประเด็นที่คุณต้องระวัง

ผลกระทบต่อการออกแบบเนื่องจากการแสดงแถบเลื่อน

การใช้ scroll หรือ auto เพื่อแสดงแถบเลื่อนอาจทำให้การออกแบบหน้าทั้งหมดมีปัญหา โดยเฉพาะอย่างยิ่งหากมีการวางองค์ประกอบไว้ที่ขอบขวาหรือด้านล่าง แถบเลื่อนอาจทำให้องค์ประกอบเหล่านั้นเห็นได้น้อยลง

พฤติกรรมเริ่มต้นของเบราว์เซอร์

วิธีการแสดงผลและการทำงานของแถบเลื่อนอาจแตกต่างกันระหว่างเบราว์เซอร์ โดยเฉพาะระหว่าง Windows และ macOS มีความแตกต่างในรูปแบบการแสดงผลแถบเลื่อน ซึ่งอาจทำให้การออกแบบไม่ปรากฏตามที่ตั้งใจไว้ การทดสอบข้ามเบราว์เซอร์เป็นสิ่งสำคัญ

การล้นขององค์ประกอบลูก

การตั้งค่า overflow: hidden บนองค์ประกอบพาเรนต์จะซ่อนองค์ประกอบลูกที่เกินจากกรอบของพาเรนต์ สิ่งนี้อาจทำให้ป๊อปอัปและหน้าต่างโมดอลแสดงผลไม่ถูกต้อง

overflow: clip (CSS Level 3) 

1section.overflow-clip {
2    width: 400px;
3    height: 100px;
4    overflow: clip;
5}

ในข้อกำหนดใหม่ของ CSS ได้มีการแนะนำค่าที่เรียกว่า overflow: clip สิ่งนี้คล้ายกับ hidden แต่ไม่อนุญาตให้เลื่อนและเพียงแค่ตัดเนื้อหา ในปัจจุบัน สนับสนุนโดยบางเบราว์เซอร์เท่านั้น

คุณสมบัติ:

  • หากเนื้อหาล้นออกมา ส่วนที่ล้นนั้นจะถูกซ่อนโดยสมบูรณ์
  • ไม่มีการแสดงแถบเลื่อน

สรุป

คุณสมบัติ overflow ของ CSS เป็นเครื่องมือที่สำคัญสำหรับควบคุมการแสดงผลเนื้อหาในงานออกแบบเว็บ โดยการจัดการสถานการณ์ที่เนื้อหาเกินกรอบขององค์ประกอบและการใช้แถบเลื่อนหรือการตัดเนื้อหาอย่างเหมาะสม ช่วยให้ผู้ใช้งานมีอินเทอร์เฟซที่ใช้งานง่ายขึ้น ยิ่งไปกว่านั้น การใช้ overflow-x และ overflow-y ช่วยให้สามารถควบคุมได้อย่างละเอียด ด้วยค่านี้ แถบเลื่อนจะถูกแสดงบังคับเมื่อเนื้อหาขององค์ประกอบเกินขอบกรอบ แม้ว่าเนื้อหาจะไม่ล้น แถบเลื่อนจะถูกแสดงเสมอ

contain

ภาพรวมของคุณสมบัติ contain

คุณสมบัติ contain ใน CSS จำกัดอิทธิพลขององค์ประกอบที่มีต่อตัวอื่น ๆ และทั้งหน้า ช่วยเพิ่มประสิทธิภาพกระบวนการเรนเดอร์ของเบราว์เซอร์ โดยเฉพาะอย่างยิ่ง มันจะจำกัดการปรับเปลี่ยนการจัดวางและการวาดภาพใหม่ โดยป้องกันไม่ให้การเปลี่ยนแปลงสไตล์หรือเลย์เอาต์ในองค์ประกอบนั้นกระทบถึงเนื้อหาภายนอก

สิ่งนี้มีความสำคัญต่อประสิทธิภาพของหน้าเว็บ และมีประสิทธิภาพเป็นพิเศษสำหรับเว็บไซต์ที่มีเลย์เอาต์ที่ซับซ้อนหรือมีเนื้อหาจำนวนมาก

ค่าต่าง ๆ ของ contain

คุณสมบัติ contain มีค่าดังต่อไปนี้:

layout 
1section.contain-layout {
2    width: 300px;
3    height: 300px;
4    contain: layout;
5}

layout ใช้ในการจำกัดที่เกี่ยวข้องกับเลย์เอาต์ เมื่อใช้ค่านี้ ขนาดและตำแหน่งขององค์ประกอบจะไม่กระทบต่อองค์ประกอบอื่น ๆ ตัวอย่างเช่น แม้ว่าองค์ประกอบจะถูกปรับขนาดภายใน การเปลี่ยนแปลงนี้จะไม่ส่งผลต่อเลย์เอาต์ภายนอก

paint 
1section.contain-paint {
2    width: 300px;
3    height: 300px;
4    contain: paint;
5}

paint จำกัดผลกระทบของการวาดภาพ (drawing) เมื่อตั้งค่านี้ การวาดภาพภายในองค์ประกอบจะไม่กระทบต่อองค์ประกอบภายนอกอีกต่อไป ช่วยจำกัดขอบเขตของการคำนวณการวาดภาพใหม่

size 
1section.contain-size {
2    width: 300px;
3    height: 300px;
4    contain: size;
5}

size ทำให้มั่นใจว่าขนาดขององค์ประกอบไม่ได้ขึ้นอยู่กับองค์ประกอบภายนอก โดยเฉพาะอย่างยิ่ง มันป้องกันไม่ให้การปรับขนาดขององค์ประกอบลูกส่งผลกระทบต่อขนาดขององค์ประกอบแม่ ช่วยเพิ่มเสถียรภาพของเลย์เอาต์

style 
1section.contain-style {
2    width: 300px;
3    height: 300px;
4    contain: style;
5}

style ทำให้มั่นใจว่าสไตล์ขององค์ประกอบไม่ได้ส่งผลต่อองค์ประกอบภายนอก ตัวอย่างเช่น การตั้งค่า contain: style; ทำให้มั่นใจว่าการเปลี่ยนแปลงสไตล์ในองค์ประกอบนั้นจะไม่กระทบต่อองค์ประกอบอื่น ๆ ช่วยลดขอบเขตของการคำนวณใหม่

content 
1section.contain-content {
2    width: 300px;
3    height: 300px;
4    contain: content;
5}

content เป็นค่าผสมที่ใช้กับ layout, paint, size และ style โดยการใช้ค่านี้ คุณสามารถมั่นใจได้ว่าเลย์เอาต์ การวาดภาพ ขนาด และสไตล์ขององค์ประกอบจะไม่มีผลกระทบต่อองค์ประกอบภายนอกแม้แต่น้อย

ประโยชน์ด้านประสิทธิภาพ

เหตุผลหลักในการใช้คุณสมบัติ contain คือการปรับปรุงประสิทธิภาพของหน้าเว็บ โดยเฉพาะอย่างยิ่ง มันมีประสิทธิภาพในสถานการณ์ต่อไปนี้

  1. การปรับปรุงการไหลใหม่ (Reflow Optimization): เมื่อขนาดหรือตำแหน่งขององค์ประกอบเปลี่ยนแปลง ผลกระทบจะถูกจำกัดให้อยู่ในขอบเขตที่เล็กที่สุดเท่าที่จะเป็นไปได้ สิ่งนี้ลดขอบเขตของการไหลใหม่ที่ไม่จำเป็น (การคำนวณเลย์เอาต์ใหม่) และช่วยลดภาระของเบราว์เซอร์

  2. ลดการวาดใหม่ (Reducing Repaints): โดยการจำกัดพื้นที่การวาด ส่วนที่ต้องถูกวาดใหม่เมื่อสไตล์หรือเนื้อหาขององค์ประกอบเปลี่ยนแปลงจะสามารถลดลงได้

  3. การพัฒนาตามส่วนประกอบ (Component-based Development): เนื่องจากแต่ละส่วนประกอบหรือโมดูลทำงานอย่างอิสระจากองค์ประกอบอื่น ๆ สิ่งนี้ช่วยเพิ่มประสิทธิภาพของแต่ละส่วนประกอบ แม้ในแอปพลิเคชันเว็บที่มีขนาดใหญ่

หมายเหตุ

เมื่อใช้คุณสมบัติ contain คุณควรคำนึงถึงประเด็นต่อไปนี้

  1. ทำความเข้าใจขอบเขตการใช้งาน: คุณสมบัติ contain มีประโยชน์สำหรับการปรับปรุงประสิทธิภาพ แต่ไม่ควรนำไปใช้กับทุกองค์ประกอบ สิ่งสำคัญคือต้องใช้อย่างเหมาะสมในตำแหน่งที่เหมาะสม ตัวอย่างเช่น การใช้บนองค์ประกอบที่มีการเปลี่ยนแปลงบ่อยหรือส่วนหนึ่งของโครงสร้าง DOM ที่ใหญ่ อาจลดประสิทธิภาพแทนที่จะปรับปรุง

  2. ความเข้ากันได้ของเบราว์เซอร์: คุณสมบัติ contain เป็นคุณสมบัติใหม่ใน CSS และยังไม่ได้รับการสนับสนุนเต็มรูปแบบในทุกเบราว์เซอร์ มันได้รับการสนับสนุนในเบราว์เซอร์หลัก (Chrome, Firefox, Edge, Safari) แต่อาจไม่สามารถใช้งานได้ในเวอร์ชันเก่า

สรุป

คุณสมบัติ contain ของ CSS เป็นเครื่องมือที่ทรงพลังสำหรับการปรับปรุงประสิทธิภาพของหน้าเว็บและแอปพลิเคชัน โดยการจำกัดผลกระทบที่องค์ประกอบเฉพาะมีต่อองค์ประกอบอื่น ช่วยลดค่าใช้จ่ายในการจัดเรียงและการวาดใหม่ ทำให้กระบวนการเรนเดอร์โดยรวมมีประสิทธิภาพยิ่งขึ้น อย่างไรก็ตาม จำเป็นต้องพิจารณาอย่างรอบคอบว่าใช้งานที่ใดและใช้อย่างเหมาะสม

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video

การเปรียบเทียบ Flexbox, Grid และ Column Layouts