11 Tính năng và chức năng mới sắp ra mắt trong CSS

Nhóm làm việc CSS đã phát hành Bản thảo làm việc công khai đầu tiên cho Mô-đun Giá trị và Đơn vị CSS Cấp 5. Bản phát hành này mô tả các giá trị và đơn vị chung mà các thuộc tính CSS chấp nhận và cú pháp được sử dụng cho chúng, đồng thời đi kèm với một số tính năng mới thú vị.

Các tính năng mới đáng chú ý trong CSS

Lưu ý: Vì bản phát hành này còn khá mới và hiện đang ở trạng thái Bản thảo đang được phát triển nên nhiều tính năng được mô tả trong bài viết này sẽ thay đổi và chúng sẽ không khả dụng trong tất cả các trình duyệt (một số trình duyệt thì có!).

Vào ngày 13 tháng 9 năm 2024, Nhóm làm việc CSS đã phát hành Bản thảo làm việc công khai đầu tiên cho Mô-đun Giá trị và Đơn vị CSS Cấp 5. Đây là bản mở rộng của cấp độ trước đó bao gồm một số bổ sung thú vị.

Những điều không thể tưởng tượng được cách đây không lâu đang dần xuất hiện trong thông số kỹ thuật: giá trị ngẫu nhiên, sử dụng thuộc tính làm giá trị trong bất kỳ thuộc tính nào, có thể sử dụng thứ tự trong phép tính... Nó có vẻ đầy hứa hẹn.

Nhiều tính năng trong số này có một điểm chung: chúng đơn giản hóa mã CSS. Những điều trước đây yêu cầu nhiều quy tắc hoặc giải pháp phức tạp sẽ có thể thực hiện được chỉ với một hoặc hai dòng CSS. Như tôi đã nói, nó có vẻ đầy hứa hẹn.

Đây là danh sách các thay đổi mới (thông tin chi tiết hơn bên dưới):

• Thay đổi đối với hàm attr(): để có thể sử dụng với bất kỳ thuộc tính nào và trong bất kỳ thuộc tính CSS nào (không chỉ trên nội dung).
• Hàm calc-size(): sử dụng các giá trị nội tại như auto hoặc min-content trong phép tính.
• Hàm first-valid() mới để tránh các vấn đề với các thuộc tính tùy chỉnh có giá trị không hợp lệ.
• Họ hàm -mix() mới với ký hiệu mới cho tỷ lệ.
• Họ hàm -progress() mới để tính toán tỷ lệ tiến độ giữa một phạm vi hoặc trong một phương tiện hoặc vùng chứa.
• Ngẫu nhiên hóa với các hàm random() và random-item() mới, để trả về các giá trị ngẫu nhiên từ một phạm vi hoặc danh sách (cuối cùng!).
• Các hàm sibling-count() và sibling-index() mới cung cấp các giá trị số nguyên để hoạt động tùy thuộc vào thứ tự và kích thước.
• Hàm toggle() mới để tạo kiểu cho các phần tử lồng nhau dễ dàng xoay vòng qua danh sách các giá trị.
• Ký hiệu hàm mới cho các đối số với danh sách các giá trị được phân cách bằng dấu phẩy, để tránh mơ hồ với dấu phẩy phân cách các đối số.
• Bộ sửa đổi URL mới để cung cấp khả năng kiểm soát nhiều hơn đối với các yêu cầu url().
• Mở rộng kiểu vị trí để cho phép các giá trị tương đối dòng.

1. Thay đổi đáng chú ý với hàm attr()

Đọc một thuộc tính và sử dụng nó trong CSS không phải là mới. Điều đó đã có thể thực hiện được với attr(), nhưng một phàn nàn phổ biến là chức năng bị hạn chế như thế nào, chỉ hoạt động với chuỗi và trong content.

Hàm attr() sẽ trải qua một số cập nhật, vì vậy bất kỳ thuộc tính dữ liệu nào độc lập với loại dữ liệu của nó đều có thể được sử dụng trong bất kỳ thuộc tính nào. Sẽ đơn giản như chỉ định loại và, nếu muốn, chúng ta có thể chỉ định một giá trị dự phòng trong trường hợp có sự cố xảy ra.

Đây là một bản cập nhật được mong đợi từ lâu sẽ khiến nhiều nhà phát triển hài lòng.

2. Tính toán với các giá trị nội tại bằng calc-size()

Mô-đun này cũng giới thiệu một hàm mới có thể hoạt động an toàn với các giá trị nội tại (auto, max-content, fit-content, v.v.) Đây là một tính năng sẽ đặc biệt hữu ích trong chuyển tiếp và hoạt ảnh.

Nó cũng bổ sung các từ khóa mới (size) để cung cấp thêm tính linh hoạt cho các phép tính, giúp dễ dàng làm việc với kích thước hơn.

Tại sao lại có một hàm hoàn toàn mới trong khi calc() đã có ở đó? Như tài liệu giải thích, có những lý do thực tế và tương thích ngược khiến nó được thực hiện theo cách này (ví dụ: nội suy mượt mà trong mọi trường hợp, đặc biệt là khi hoạt động theo tỷ lệ phần trăm).

3. Họ hàm -mix() mới

Ví dụ về cách sử dụng họ hàm *-mix() trong CSS.

Nó cũng giới thiệu một hàm mới, mix(), có thể được sử dụng để đơn giản hóa các hàm -mix khác nhau. Bạn có muốn pha trộn màu sắc? Bạn có thể làm điều gì đó như color-mix(red 60%, blue) hoặc đơn giản hơn là mix(60%, red, blue) cũng sẽ thực hiện được mánh khóe đó. Và như chúng ta nói về màu sắc, chúng ta cũng có thể trộn độ dài, biến đổi hàm, v.v.

Ký hiệu đó cũng được mở rộng cho họ hàm *-mix khác:

• calc-mix()
• color-mix()
• cross-fade()
• palette-mix()

Nếu không có hàm easing nào được chỉ định trong tham số tiến độ (tham số đầu tiên), linear sẽ được áp dụng theo mặc định.

4. Hàm mới: first-valid()

Một phương thức mới được giới thiệu: first-valid(). Ý tưởng là chuyển một danh sách các giá trị cho hàm; chúng sẽ được giải quyết và giá trị hợp lệ đầu tiên sẽ là giá trị được sử dụng. Điều này sẽ đặc biệt hữu ích khi xử lý các thuộc tính tùy chỉnh CSS (còn gọi là biến CSS).

Một vấn đề khi hoạt động với các biến CSS là, trong một khai báo, chúng được coi là một giá trị hợp lệ, ngay cả khi giá trị thực tế chứa trong đó không hợp lệ. Việc đặt giá trị dự phòng cũng sẽ không giúp ích gì và khai báo dự phòng cũng sẽ bị bỏ qua.

Với phương pháp này, chúng ta có thể đơn giản hóa mã bằng cách hợp nhất tất cả các khai báo dự phòng thành một khai báo duy nhất với first-valid().

5. Họ hàm *-progress() mới

Chúng đại diện cho tiến độ tỷ lệ của một giá trị nhất định từ một giá trị bắt đầu đến một giá trị kết thúc khác. Kết quả là một số từ 0 đến 1 có thể được sử dụng trong các phép toán, nhưng nó sẽ đặc biệt tiện dụng khi kết hợp với họ hàm *-mix được mô tả trước đó.

Có ba hàm trong họ này:

• progress(): chung, cho bất kỳ hàm toán học nào.
• media-progress(): cho các tính năng media.
• content-progress(): cho các truy vấn container.

6. Hàm ngẫu nhiên hóa trong CSS

Các thiết kế thú vị có một số mức độ ngẫu nhiên, điều gì đó đã bị thiếu trong CSS. Nhưng mô-đun này giới thiệu hai hàm mới trả về các giá trị ngẫu nhiên từ một danh sách (random-item()) hoặc giữa một phạm vi (random()).

Không còn thủ thuật phức tạp hay phụ thuộc vào các ngôn ngữ khác để đạt được điều này. Cú pháp đơn giản và cũng mạnh mẽ, với khả năng tính toán số ngẫu nhiên theo bộ chọn hoặc phần tử.

7. Hàm sibling mới

Đôi khi bạn có thể muốn cung cấp các kiểu khác nhau tùy thuộc vào thứ tự của các phần tử trong một vùng chứa. Thật không may, các bộ đếm không thể được sử dụng như vậy trong CSS (Tôi sẽ để dành lời phàn nàn đó cho một ngày khác).

Với việc giới thiệu hai hàm mới trả về một số, giúp có thể vận hành với chúng, rào cản này được loại bỏ:

• sibling-count(): trả về số lượng sibling.
• sibling-index(): trả về vị trí/thứ tự của phần tử trong danh sách sibling.

Không cần phải đặt các thuộc tính tùy chỉnh trên mỗi phần tử hoặc viết các bộ chọn riêng lẻ với nth-child.

8. Hàm toggle() mới

Một cách thuận tiện mới để xác định các giá trị trong các phần tử lồng nhau được giới thiệu. Hàm toggle() đặt các giá trị mà phần tử và phần tử con của nó sẽ xoay vòng, đơn giản hóa đáng kể mã. Quên các quy tắc phức tạp hoặc xác định lại - mọi thứ sẽ chỉ trong một dòng mã.

Ví dụ: hãy tưởng tượng rằng chúng ta có một danh sách với bốn cấp độ lồng nhau. Chúng tôi muốn các cấp độ lẻ có đĩa và các cấp độ chẵn là hình vuông. Chúng ta có thể vui vẻ khi thực hiện ul > li ul > li ul > li ul ... ở các cấp độ khác nhau hoặc chúng ta chỉ có thể làm điều gì đó như ul list-style-type: disc, square;. Bùm! Xong!

Điều duy nhất hơi đáng lo ngại về chức năng này là tên của nó. Có thể chỉ là tôi, nhưng từ "toggle" có nghĩa "tính hai mặt": bật/tắt, có/không - hai giá trị chuyển đổi/chuyển đổi giữa nhau. Hàm toggle() có thể có nhiều tham số như bạn muốn, vì vậy cảm giác thật kỳ lạ khi nó được đặt tên là "toggle".

9. Ký hiệu hàm mới cho các đối số

Một điều bạn có thể nhận thấy là cách một số hàm mới (ví dụ: random() hoặc toggle()) có thể nhận các đối số là danh sách các giá trị được phân cách bằng dấu phẩy.

Làm cách nào chúng ta có thể phân biệt đối số này với đối số tiếp theo trong những trường hợp đó? Đó là lý do tại sao có một đề xuất "nâng cấp dấu phẩy" cho các ký hiệu hàm. Điều này có nghĩa là chúng ta có thể sử dụng dấu chấm phẩy ( thay cho dấu phẩy (,) để phân tách các tham số một cách rõ ràng.

Ví dụ: hãy tưởng tượng rằng bạn muốn có một họ phông chữ ngẫu nhiên trên trang của mình và chỉ định các tùy chọn khác nhau:

• Times, serif
• Arial, sans-serif
• Roboto, sans-serif

Tất cả các đối số đó là danh sách các giá trị được phân cách bằng dấu phẩy. Nếu chúng ta sử dụng dấu phẩy để phân tách các đối số, đó sẽ là một mớ hỗn độn rất lớn. Nhưng với ký hiệu mới, thật dễ dàng để xác định vị trí kết thúc của đối số này và bắt đầu của đối số tiếp theo:

.random-font  
  font-family: random-item(Times, serif; Arial, sans-serif; Roboto, sans-serif);

10. Mở rộng kiểu vị trí

CSS đã có các thuộc tính logic cho margin, padding và border — các giá trị liên quan đến hướng viết văn bản và có thể thay đổi từ ngôn ngữ này sang ngôn ngữ khác.

Điều này hiện được giới thiệu cho kiểu vị trí (không nhầm lẫn với thuộc tính position). Các thuộc tính cho biết vị trí (ví dụ: background-position, object-position, v.v.) có thể chỉ định các giá trị sẽ liên quan đến luồng và hướng của văn bản.

Các giá trị mới có thể được sử dụng là:

• x-start
• x-end
• y-start
• y-end
• block-start
• block-end
• inline-start
• inline-end

Kết luận

Nó vẫn đang ở giai đoạn đầu và mọi thứ sẽ thay đổi, nhưng một số tính năng và chức năng mới được bao gồm trong Mô-đun Giá trị và Đơn vị CSS Cấp 5 có vẻ cực kỳ hứa hẹn.

Một số cũng được mong đợi từ lâu! Đặc biệt là khả năng sử dụng bất kỳ thuộc tính nào với bất kỳ thuộc tính nào. Tôi nhớ đã thấy tùy chọn đó trong thông số kỹ thuật cách đây rất lâu. Hy vọng rằng, đây là động lực mà nó cần để biến nó thành hiện thực.

Đừng quên kiểm tra Bản thảo làm việc của Mô-đun Giá trị và Đơn vị CSS Cấp 5 để biết thêm chi tiết và thông tin. Nếu bạn có bất kỳ câu hỏi hoặc nhận xét nào, hãy ghi lại vé tại kho lưu trữ GitHub của họ.

Chúc bạn thử nghiệm và viết mã (CSS) vui vẻ!