Articles
Giới thiệu về CSS
Các thuộc tính `overflow` và `contain`

Các thuộc tính `overflow` và `contain`

Bài viết này giải thích các thuộc tính overflow và contain.

Bạn có thể học cách mô tả các điều như hiển thị thanh cuộn và cắt bớt nội dung với thuộc tính overflow.

YouTube Video

HTML để Xem trước

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>

Các thuộc tính overflow và contain

overflow

Thuộc tính overflow trong CSS là một thuộc tính quan trọng, kiểm soát cách hiển thị nội dung của một phần tử khi chúng vượt quá kích thước của hộp chứa. Nó thường được sử dụng để định hình bố cục và giao diện người dùng của các trang web, giúp kiểm soát việc hiển thị các thanh cuộn, cắt bớt nội dung, và xử lý tràn nội dung.

Những điều cơ bản về thuộc tính overflow

Thuộc tính overflow có bốn giá trị chính: visible, hidden, scroll, và auto.

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

visible là giá trị mặc định, nơi nội dung của một phần tử tràn ra ngoài kích thước của hộp nhưng vẫn hiển thị được. Các phần nội dung tràn ra có thể chồng lên các phần tử khác, nhưng các thanh cuộn sẽ không được hiển thị.

Đặc điểm:

  • Nội dung được hiển thị mà không có giới hạn.
  • Không hiển thị thanh cuộn.
hidden 
1section.overflow-hidden {
2    width: 400px;
3    height: 100px;
4    overflow: hidden;
5}

hidden là cài đặt mà nếu nội dung của một phần tử vượt quá kích thước của hộp, các phần nội dung tràn sẽ không được hiển thị. Không hiển thị thanh cuộn, và nội dung tràn sẽ không thể thấy được.

Đặc điểm:

  • Khi nội dung vượt quá giới hạn của phần tử, phần vượt ra sẽ bị ẩn.
  • Không hiển thị thanh cuộn.
scroll 
1section.overflow-scroll {
2    width: 400px;
3    height: 100px;
4    overflow: scroll;
5}

Khi sử dụng scroll, các thanh cuộn sẽ được hiển thị bắt buộc nếu nội dung phần tử vượt quá hộp chứa. Ngay cả khi nội dung không tràn, thanh cuộn vẫn luôn được hiển thị.

Đặc điểm:

  • Thanh cuộn vẫn được hiển thị ngay cả khi nội dung vừa với giới hạn của phần tử.
  • Có thể cuộn cả theo chiều ngang và chiều dọc.
auto 
1section.overflow-auto {
2    width: 400px;
3    height: 100px;
4    overflow: auto;
5}

auto chỉ hiển thị thanh cuộn khi nội dung bị tràn ra; nếu nội dung vừa với hộp chứa của phần tử, không hiển thị thanh cuộn.

Đặc điểm:

  • Thanh cuộn chỉ xuất hiện khi nội dung bị tràn ra.
  • Tự động tạo vùng có thể cuộn được.
overflow-x và overflow-y 
1section.overflow-xy {
2    width: 400px;
3    height: 100px;
4    overflow-x: scroll;
5    overflow-y: hidden;
6}

Thuộc tính overflow cũng có thể được kiểm soát riêng lẻ theo hướng ngang (trục x) và dọc (trục y).

Bằng cách này, bạn có thể sử dụng overflow-x và overflow-y để cài đặt hiển thị thanh cuộn dọc và ngang riêng lẻ.

Những điều cần lưu ý khi sử dụng Overflow

Khi sử dụng thuộc tính overflow, có một số điểm bạn cần lưu ý.

Tác động đến thiết kế do việc hiển thị thanh cuộn

Sử dụng scroll hoặc auto để hiển thị thanh cuộn có thể làm gián đoạn thiết kế tổng thể của trang. Đặc biệt, nếu các phần tử được đặt ở cạnh phải hoặc dưới cùng, thanh cuộn có thể làm chúng trở nên kém hiển thị hơn.

Hành vi mặc định của trình duyệt

Cách các thanh cuộn được hiển thị và hoạt động có thể khác nhau giữa các trình duyệt. Đặc biệt giữa Windows và macOS, có sự khác biệt trong kiểu hiển thị thanh cuộn, điều này có thể khiến thiết kế không xuất hiện như mong muốn. Việc kiểm tra tương thích trên các trình duyệt là rất quan trọng.

Tràn phần tử con

Đặt overflow: hidden trên phần tử cha sẽ ẩn các phần tử con vượt ra ngoài hộp của phần tử cha. Điều này có thể khiến các cửa sổ pop-up và modal không hiển thị đúng cách.

overflow: clip (CSS Level 3) 

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

Trong đặc tả CSS mới, một giá trị gọi là overflow: clip cũng đã được giới thiệu. Điều này tương tự như hidden, nhưng nó không cho phép cuộn và chỉ cắt nội dung. Hiện tại, nó chỉ được hỗ trợ bởi một số trình duyệt.

Đặc điểm:

  • Nếu nội dung bị tràn, phần tràn sẽ bị ẩn hoàn toàn.
  • Không hiển thị thanh cuộn.

Kết luận

Thuộc tính overflow của CSS là một công cụ thiết yếu để kiểm soát hiển thị nội dung trong thiết kế web. Bằng cách xử lý các tình huống khi nội dung vượt quá hộp của phần tử và áp dụng các thanh cuộn phù hợp hoặc cắt nội dung, nó mang đến cho người dùng giao diện thân thiện hơn. Hơn nữa, việc sử dụng overflow-x và overflow-y cho phép điều khiển chi tiết hơn. Với giá trị này, các thanh cuộn sẽ được hiển thị bắt buộc khi nội dung phần tử vượt quá hộp. Ngay cả khi nội dung không tràn, thanh cuộn vẫn luôn được hiển thị.

contain

Tổng quan về thuộc tính contain

Thuộc tính CSS contain giới hạn sự ảnh hưởng của một phần tử đến các phần tử khác và toàn bộ trang, tối ưu hóa quá trình render của trình duyệt. Cụ thể, thuộc tính này giới hạn việc tái bố trí và tái vẽ bằng cách ngăn các thay đổi về kiểu dáng hoặc bố cục trong một phần tử ảnh hưởng đến nội dung bên ngoài phần tử đó.

Điều này quan trọng đối với hiệu suất của trang web và đặc biệt hiệu quả đối với các trang web có bố cục phức tạp hoặc lượng nội dung lớn.

Các giá trị cho thuộc tính contain

Thuộc tính contain có các giá trị sau:.

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

layout áp dụng các giới hạn liên quan đến bố cục. Bằng cách sử dụng giá trị này, kích thước và vị trí của một phần tử sẽ không ảnh hưởng đến các phần tử khác. Ví dụ, ngay cả khi kích thước của một phần tử thay đổi bên trong, thay đổi đó cũng không ảnh hưởng đến bố cục bên ngoài.

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

paint giới hạn ảnh hưởng của việc vẽ. Khi giá trị này được chỉ định, việc vẽ trong phần tử sẽ không còn ảnh hưởng đến các phần tử bên ngoài, do đó giới hạn phạm vi tính toán tái vẽ.

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

size đảm bảo rằng kích thước của phần tử không phụ thuộc vào các phần tử bên ngoài. Cụ thể, nó ngăn chặn việc thay đổi kích thước của các phần tử con ảnh hưởng đến kích thước của phần tử cha, từ đó cải thiện sự ổn định của bố cục.

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

style đảm bảo rằng kiểu dáng của một phần tử không ảnh hưởng đến các phần tử bên ngoài. Ví dụ, việc sử dụng contain: style; đảm bảo rằng các thay đổi kiểu dáng trong phần tử đó không ảnh hưởng đến các phần tử khác, giảm phạm vi tái tính toán.

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

content là một giá trị tổng hợp bao gồm layout, paint, size và style. Với giá trị này, bạn có thể đảm bảo rằng bố cục, vẽ, kích thước và kiểu dáng của phần tử không ảnh hưởng đến các phần tử bên ngoài.

Lợi ích về hiệu suất

Lý do chính để sử dụng thuộc tính contain là để cải thiện hiệu suất của trang web. Đặc biệt, nó hiệu quả trong các trường hợp sau:.

  1. Tối ưu hóa tái bố trí: Khi kích thước hoặc bố cục của một phần tử thay đổi, ảnh hưởng có thể bị giới hạn ở phạm vi nhỏ nhất có thể. Điều này giảm phạm vi của các lần tái bố trí không cần thiết (tái tính toán bố cục) và giảm tải cho trình duyệt.

  2. Giảm tái vẽ: Bằng cách giới hạn khu vực vẽ, phần cần tái vẽ khi kiểu dáng hoặc nội dung của một phần tử thay đổi có thể được giảm thiểu.

  3. Phát triển dựa trên thành phần: Vì mỗi thành phần hoặc module hoạt động độc lập với các phần tử khác, nó cải thiện hiệu suất của từng thành phần ngay cả trong các ứng dụng web quy mô lớn.

Ghi chú

Khi sử dụng thuộc tính contain, bạn nên lưu ý các điểm sau.

  1. Hiểu phạm vi áp dụng: Thuộc tính contain hữu ích cho việc tối ưu hóa hiệu suất, nhưng không nên áp dụng cho mọi phần tử. Điều quan trọng là sử dụng nó một cách hợp lý ở những vị trí phù hợp. Ví dụ, việc sử dụng nó trên các phần tử thay đổi thường xuyên hoặc các phần của một cấu trúc DOM lớn có thể làm giảm hiệu suất thay vì cải thiện.

  2. Khả năng tương thích trình duyệt: Thuộc tính contain là một tính năng CSS tương đối mới và chưa được hỗ trợ đầy đủ trên tất cả các trình duyệt. Nó được hỗ trợ trong các trình duyệt chính (Chrome, Firefox, Edge, Safari), nhưng có thể không áp dụng được trên các phiên bản cũ.

Kết luận

Thuộc tính CSS contain là một công cụ mạnh mẽ để tối ưu hóa hiệu suất của các trang web và ứng dụng. Bằng cách hạn chế tác động của một phần tử cụ thể lên các phần tử khác, nó giảm chi phí reflow và repaint, giúp đơn giản hóa quá trình kết xuất tổng thể. Tuy nhiên, điều quan trọng là phải xem xét cẩn thận nơi áp dụng nó và sử dụng nó một cách hợp lý.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

So sánh giữa Flexbox, Grid và Bố cục Cột