Trong hai đến bốn năm qua, lượng cải tiến trong CSS thật đáng kinh ngạc. Nhiều đổi mới đã được phát hành và hiện được hỗ trợ trên tất cả các trình duyệt hiện đại, và một số trong số đó thay đổi cơ bản cách tạo các trang web.
Trang này là một bảng gian lận cho những điều mới trong CSS mà tôi muốn bắt đầu sử dụng vào năm 2024. Lưu ý rằng, để hỗ trợ các trình duyệt cũ, đôi khi cần thiết phải sử dụng polyfills.
Thuộc tính Logic
Trong thời gian dài, nhiều thuộc tính CSS sử dụng hướng vật lý để thiết lập giá trị. Ví dụ: margin-top, padding-right, bottom, border-left. Nhưng những thuộc tính này không tính đến việc chuyển sang hướng đọc khác, có thể được thiết lập bằng cách sử dụng direction, text orientation và writing mode.
Ví dụ, một đường viền đặt ở bên trái của văn bản sẽ ở lại bên trái nếu hướng đọc văn bản được đảo ngược, thay vì chuyển sang bên phải để có trải nghiệm người dùng tương tự. Thuộc tính logic tránh vấn đề này bằng cách cho phép thiết lập thuộc tính trên trục X (gọi là inline) và Y (gọi là block).
Tôi sẽ không đi vào toàn bộ thông số kỹ thuật (xem MDN) nhưng đây là các trường hợp sử dụng phổ biến nhất.
Đối với chiều cao và chiều rộng và các biến thể như max-width và min-width:
css
height: block-size;
width: inline-size;
max-width: max-inline-size;
min-height: min-block-size;Đối với lề, đệm, viền và các biến thể:
css
left and right : inline;
left : inline-start;
right : inline-end;
top and bottom: block;
top : block-start;
bottom: block-end;Đối với các thuộc tính inset như top, bottom, left, right:
css
left and right : inset-inline;
left: inset-inline-start;
right: inset-inline-end;
top and bottom: inset-block;
top: inset-block-start;
bottom: inset-block-end;Chi tiết về các phiên bản trình duyệt hỗ trợ tính năng này: Can I Use.
Truy vấn Container
Truy vấn container có hai tính năng riêng biệt: truy vấn kích thước và truy vấn kiểu. Trong phần này tôi chỉ đề cập đến truy vấn kích thước được hỗ trợ rộng rãi, trong khi truy vấn kiểu thì không.
Truy vấn media cho phép thực hiện logic if/else sử dụng chiều rộng hoặc chiều cao của trình duyệt làm điều kiện. Truy vấn kích thước container cho phép cùng một logic if/else, nhưng cho bất kỳ container nào, không chỉ trình duyệt. Bạn khai báo một phần của dom là container:
css
.card {
container-type: size|inline-size|normal;
}Có ba giá trị có thể:
- size: Cho phép sử dụng các kích thước inline và block, cũng như truy vấn kiểu.
- inline-size: Tương tự như trên nhưng chỉ cho kích thước inline (điều này rất hữu ích cho thiết kế đáp ứng).
- normal: Vô hiệu hóa truy vấn kích thước, chỉ cho phép truy vấn kiểu.
Và sau đó sử dụng nó như một truy vấn media:
css
@container (min-width: 700px) {
.card h2 {
font-size: 2em;
}
}Cũng có thể đặt tên cho các container, sử dụng thuộc tính container-name, hoặc một lối tắt với container.
css
.card {
container: sidebar / inline-size;
}Lớp (Layer)
Lớp là một công cụ tổ chức, không phải cơ chế phạm vi. Điều này đặc biệt hữu ích trong các cơ sở mã lớn. Nó cho phép ép mã vào một thứ tự cụ thể, giảm căng thẳng khi tìm kiếm nơi để thêm mã mới và liệu nó có ảnh hưởng đến phần còn lại của mã hay không.
Ví dụ, hãy nói rằng chúng ta muốn nhập một bảng kiểu CSS của bên thứ ba, thêm nó vào một lớp và xây dựng các kiểu của chúng ta lên trên nó.
css
// nhập framework.css và định nghĩa như lớp framework
@import "framework.css" layer(framework);
// Sắp xếp framework trước cá nhân
@layer framework personal;
@layer personal {
// Kiểu của riêng tôi
}Nhưng sau này trong dự án, chúng ta nhận thấy framework có một kiểu bị lỗi. Chúng ta có thể sửa nó trong lớp framework mà không cần chạm vào lớp cá nhân. Và thậm chí tốt hơn, chúng ta không phải quay lại đầu tệp:
css
@import "framework.css" layer(framework);
@layer framework personal;
@layer personal {
// Kiểu của riêng tôi
}
@layer framework {
// Sửa lỗi nhỏ
}Điều cuối cùng: kiểu không nằm trong lớp luôn có ưu tiên trên các kiểu trong lớp. Trong các ví dụ trên, một kiểu được viết bên ngoài một lớp sẽ đã xóa các kiểu được định nghĩa trước đó. Xem hướng dẫn rất chi tiết này để hiểu rõ hơn về cách lớp kiểu trong các trình duyệt.
Chi tiết về các phiên bản trình duyệt hỗ trợ tính năng này: Can I Use.
Subgrid
Thuộc tính subgrid đã được chờ đợi từ lâu và cuối cùng cũng xuất hiện, chủ yếu được sử dụng để giải quyết một vấn đề rất khó chịu. Hãy tưởng tượng một số cột có cùng chiều cao, và mỗi cột đó có cùng số lượng con, nhưng những đứa trẻ đó không có cùng chiều cao.
Khi nhìn vào tổng thể, các con không được căn chỉnh theo chiều dọc:
Khi chỉ có hai con, vấn đề này có thể được giải quyết bằng cách khai báo một container cột flex và sử dụng space-between, nhưng nó không lý tưởng. Khai báo các con là một phần tử lưới và subgrid là giá trị của grid-template-rows cho phép căn chỉnh các con:
css
.parent {
display: grid;
gap: 1rem;
grid-template-columns: 1fr 1fr;
}
.children {
grid-row: span 2;
display: grid;
grid-template-rows: subgrid;
}Tất nhiên, còn nhiều điều hơn về subgrid.
