The CSS Display Property is Changing Forever
Tóm tắt ngắn:
- Video giới thiệu về sự thay đổi lớn trong cách sử dụng thuộc tính
displaytrong CSS, từ việc chỉ sử dụng một giá trị duy nhất sang việc sử dụng hai giá trị. - Các điểm chính bao gồm: sự tiến hóa của thuộc tính
display, các giá trị đa dạng nhưblock,inline,flex,grid,inline-flex,inline-grid,contents,flow,flow-root,list-item, và cách sử dụng hai giá trị để kiểm soát hiển thị của phần tử và con của nó. Video cũng đề cập đến khái niệm "block formatting context" và cách nó ảnh hưởng đến margin collapsing. - Ứng dụng của việc sử dụng hai giá trị
displaymang lại sự linh hoạt cao hơn trong việc thiết kế layout, đặc biệt là khi kết hợp vớiflexboxvàgrid. Thuộc tínhcontentscho phép nhóm các phần tử mà không ảnh hưởng đến layout. - Video hướng dẫn chi tiết cách sử dụng hai giá trị
displayvà minh họa bằng các ví dụ mã nguồn.
Tóm tắt chi tiết:
Video được chia thành nhiều phần chính:
Phần 1: Sự tiến hóa của thuộc tính display: Ban đầu, display chỉ có các giá trị đơn giản như block, inline, và inline-block. inline-block cho phép thêm padding và height cho các phần tử inline, nhưng vẫn có những hạn chế. Sau đó, display được mở rộng để kiểm soát cả cách hiển thị của phần tử và con của nó (ví dụ: flex, grid).
Phần 2: Sử dụng hai giá trị display: Để giải quyết sự hạn chế của việc chỉ sử dụng một giá trị, CSS cho phép sử dụng hai giá trị cho display. Giá trị đầu tiên xác định cách hiển thị của phần tử (block, inline,...), giá trị thứ hai xác định cách hiển thị con của nó (flex, grid, flow...). Ví dụ: inline flex tạo ra một container flex có kiểu inline. Nếu chỉ định một giá trị, giá trị mặc định cho phần tử là block và cho con là flow.
Phần 3: flow và flow-root: flow sử dụng layout chuẩn của tài liệu. flow-root tạo ra một "block formatting context", ngăn chặn margin collapsing. Video minh họa điều này bằng ví dụ về margin của các phần tử kế tiếp nhau.
Phần 4: contents: Thuộc tính contents làm cho phần tử như thể không tồn tại trong DOM, nhưng vẫn giữ lại các thuộc tính CSS của con. Điều này hữu ích khi nhóm các phần tử mà không muốn ảnh hưởng đến layout. Tuy nhiên, cần lưu ý đến vấn đề truy cập cho người dùng màn hình đọc.
Phần 5: list-item: list-item tạo ra kiểu hiển thị như một mục trong danh sách. Nó có thể được sử dụng với cả hai giá trị của display (ví dụ: block list-item, inline list-item).
Phần 6: Các giá trị khác của display: Video đề cập đến các giá trị khác như các giá trị liên quan đến bảng (table, table-caption,...) và ruby, nhưng khuyến cáo nên sử dụng các phần tử HTML tương ứng thay vì dựa vào các giá trị này của display.
Phần 7: Kết luận: Video tóm tắt lại các điểm chính và giới thiệu khóa học CSS của tác giả.
Những câu nói đáng chú ý:
- "…the display property actually takes two values not just one…"
- "…it's going to default the first portion of your display to block always…"
- "…flow root creates that new block formatting context…"
- "…when you use a display of contents essentially what CSS and HTML is doing is it's pretending that this outer div doesn't even exist at all…"
Tóm lại, video cung cấp một cái nhìn sâu sắc về sự phát triển và cách sử dụng linh hoạt của thuộc tính display trong CSS hiện đại, nhấn mạnh vào việc sử dụng hai giá trị và các thuộc tính mới như contents và flow-root.