Giới thiệu

Nếu bạn đang theo dõi sự phát triển của CSS, có lẽ bạn đã nghe nói về tính năng mới này, mang lại sức mạnh như một ngôn ngữ lập trình cho CSS (dù có phần phóng đại). Quy tắc @function là một bổ sung được đề xuất cho CSS, cho phép chúng ta định nghĩa các hàm tùy chỉnh, tương tự như Mixins trong Sass.

Trong bài viết này, tôi sẽ giới thiệu cách thức hoạt động của @function và những gì chúng ta có thể làm với nó. Tôi sẽ trình bày một vài ví dụ thực tiễn và trường hợp sử dụng để làm nổi bật tiềm năng của nó trong việc tối ưu hóa quy trình làm việc và tạo ra các thiết kế dễ bảo trì hơn.

@function là gì?

Về cơ bản, quy tắc @function là một phần của Mô-đun Hàm và Mixins trong CSS, một bản nháp đang được W3C phát triển, giúp đưa logic vào CSS. Hãy nghĩ về nó như việc tạo ra các hàm mini của riêng bạn, có thể nhận đối số, thực hiện các phép toán và trả về giá trị. Các hàm này được gọi tương tự như các thuộc tính tùy chỉnh (sử dụng tên có dấu gạch ngang như --example-function()), nhưng chúng vượt xa việc thay thế biến đơn giản bằng cách hỗ trợ tham số, giá trị mặc định và ngay cả các quy tắc điều kiện như @media.

Khác với các hàm CSS tích hợp sẵn như calc() hay clamp(), mà đã được định nghĩa trước, @function cho phép bạn định nghĩa các hàm tùy chỉnh. Điều này có nghĩa là bạn có thể đóng gói các phép toán hoặc kiểu dáng phức tạp mà nếu không sẽ làm rối mã của bạn hoặc yêu cầu các công cụ bên ngoài. Điều này đặc biệt hữu ích cho các hệ thống thiết kế, nơi tính nhất quán và khả năng mở rộng là chìa khóa.

Quy tắc này vẫn đang trong quá trình phát triển, nhưng tính đến cuối năm 2025, nó đã bắt đầu có mặt trên các trình duyệt dựa trên Chromium. Hỗ trợ từ Firefox và Safari vẫn đang chờ xử lý, vì vậy hiện tại, bạn nên sử dụng với @supports hoặc như một cải tiến tiến bộ.

Cách @function hoạt động? Tổng quan về cú pháp

Việc tạo ra một hàm rất đơn giản và dễ hiểu. Bạn sử dụng quy tắc @function theo sau là một tên có dấu gạch ngang, các tham số tùy chọn với kiểu và giá trị mặc định, và một thân hàm kết thúc bằng một mô tả result chỉ định đầu ra.

Dưới đây là cú pháp cơ bản:

@function --set-font-size(--size-small type(length), --size-large type(length)) {
  /* Giả sử đây là điều kiện của chúng ta */
  @media (width > 640px) {
    result: var(--size-small); /* Chúng ta sẽ trả về tham số đầu tiên cho màn hình nhỏ */
  }
  result: var(--size-large); /* ... và tham số thứ hai nếu điều kiện trên không được thỏa mãn */
}

Để sử dụng hàm:

.heading {
  width: --set-font-size(24px, 36px);
}

.quote {
  width: --set-font-size(16px, 18px);
}

Ví dụ này có thể không nhìn có vẻ thực tiễn, nhưng điểm quan trọng là bạn có thể tái sử dụng cùng một hàm ở nhiều nơi khác nhau nhiều lần.

Các tham số có thể thuộc nhiều loại khác nhau (ví dụ: length, color hoặc cú pháp phức tạp hơn qua type()) và hàm được đánh giá vào thời điểm giá trị được tính toán, thừa hưởng ngữ cảnh từ nơi nó được gọi. Nếu các đối số không khớp, nó sẽ tự động quay lại một giá trị không hợp lệ.

Chúng ta có thể làm gì với @function?

Phép màu thực sự của @function nằm ở những gì nó cho phép. Hãy xem một số ví dụ.

1. Chuyển đổi đơn vị (ví dụ: từ pixel sang rem)

Chán nản với việc chuyển đổi đơn vị bằng tay? Tạo một hàm để tự động xử lý điều đó. Điều này rất tuyệt cho các thiết kế tập trung vào khả năng tiếp cận, nơi đơn vị rem đảm bảo tỷ lệ tốt hơn.

@function --px-to-rem(--px type(length)) {
  result: calc(var(--px) / 16 * 1rem); /* Giả sử kích thước phông chữ gốc là 16px */
}

h1 {
  font-size: --px-to-rem(32px);
}

2. Xử lý màu sắc (ví dụ: độ mờ hoặc tints)

Các hàm rất hữu ích trong việc xử lý màu sắc. Cần một phiên bản bán trong suốt của một màu cơ bản? Định nghĩa một hàm trợ giúp về độ mờ:

@function --opacity(--color type(color), --level type(number): 0.5) {
  result: rgb(from var(--color) r g b / var(--level));
}

.button {
  background-color: --opacity(#F00, 0.8);
}

Điều này có thể mở rộng cho việc tints, shading, hoặc thậm chí kiểm tra độ tương phản để cải thiện khả năng tiếp cận.

3. Kiểu chữ biến thiên và tỷ lệ

Một trong những trường hợp sử dụng phổ biến nhất là kiểu chữ biến thiên, có thể được điều chỉnh mượt mà với kích thước viewport, được giới hạn giữa các giá trị tối thiểu và tối đa.

@function --fluid-type(--min, --max, --scale) {
  result: clamp(
    var(--min),
    calc(var(--min) + var(--scale)),
    var(--max)
  );
}

h1 {
  font-size: --fluid-type(20px, 40px, 5vw);
}

p {
  font-size: --fluid-type(14px, 18px, 2vw);
}

Điều này giúp văn bản phản hồi trở nên dễ dàng, điều chỉnh theo kích thước màn hình khác nhau mà không cần các truy vấn phương tiện ở khắp mọi nơi.

Những ví dụ này chỉ mới chạm vào bề mặt. Hãy tưởng tượng các hàm cho các giá trị ngẫu nhiên, toán học nâng cao, hoặc thậm chí tích hợp với các thuộc tính tùy chỉnh cho việc chuyển đổi chủ đề. Lợi ích chính? Giảm sự lặp lại, bảo trì dễ dàng hơn và CSS có thể diễn đạt hơn.

Hỗ trợ trình duyệt và các lưu ý

Như đã đề cập, hỗ trợ còn hạn chế nhưng đang phát triển. Nó có sẵn trong Chrome 139+ và Edge 139+, với các biến thể Android theo sau. Để đảm bảo khả năng tương thích rộng hơn, hãy bao bọc các sử dụng trong @supports selector(--my-function()) { ... } để cung cấp các phương án dự phòng. Hãy theo dõi các bản cập nhật, điều này có thể trở thành một tiêu chuẩn trong CSS sớm thôi.

Quy tắc @function được dự đoán sẽ biến đổi cách chúng ta viết CSS, cầu nối khoảng cách giữa các kiểu tĩnh và logic động. Bằng cách cho phép các phép tính và điều kiện tùy chỉnh, nó trao quyền cho các nhà phát triển xây dựng các thiết kế mạnh mẽ, có thể mở rộng mà không cần các phụ thuộc bên ngoài. Dù bạn đang điều chỉnh màu sắc, tỷ lệ các phần tử hay xử lý độ phản hồi, đây là một công cụ khuyến khích sự sáng tạo và hiệu quả.

Best Practices

• Sử dụng @function để tối ưu hóa mã CSS và giảm thiểu việc lặp lại.
• Đảm bảo các hàm có thể tái sử dụng ở nhiều nơi khác nhau trong dự án của bạn.
• Kiểm tra tính tương thích của trình duyệt trước khi triển khai.

Common Pitfalls

• Không định nghĩa đúng kiểu dữ liệu của tham số có thể dẫn đến lỗi không mong muốn.
• Quá phức tạp trong việc xây dựng hàm có thể làm cho mã trở nên khó đọc.

Performance Tips

• Giảm số lượng phép toán trong hàm để tối ưu hóa hiệu suất.
• Sử dụng caching cho các giá trị được tính toán nhiều lần.

Troubleshooting

• Nếu hàm không hoạt động như mong đợi, hãy kiểm tra xem các tham số có khớp không.
• Sử dụng @supports để kiểm tra tính tương thích của hàm trước khi sử dụng.

FAQ

1. @function có khả năng hoạt động trên tất cả các trình duyệt không?

• Hiện tại, nó đã được hỗ trợ trên Chrome 139+ và Edge 139+, nhưng hỗ trợ từ Firefox và Safari vẫn đang chờ xử lý.

2. Tôi có thể sử dụng @function với các thuộc tính khác không?

• Có, bạn có thể tích hợp @function với bất kỳ thuộc tính CSS nào để tạo ra các kiểu dáng động và phức tạp hơn.

3. Làm thế nào để kiểm tra nếu hàm được hỗ trợ?

• Bạn có thể sử dụng cú pháp @supports để kiểm tra tính tương thích của hàm trong trình duyệt của mình.

Kết luận

Quy tắc @function hứa hẹn sẽ thay đổi cách chúng ta viết CSS, cho phép các phép tính tùy chỉnh và logic điều kiện. Điều này không chỉ nâng cao tính khả thi của CSS mà còn mở ra nhiều khả năng sáng tạo cho các nhà phát triển. Hãy bắt đầu khám phá và áp dụng @function vào dự án của bạn ngay hôm nay để tận dụng tối đa sức mạnh của CSS trong thiết kế web!