Trong kỷ nguyên thiết kế web hiện đại, CSS không còn chỉ là các cặp “key-value” tĩnh. Việc nắm vững các CSS Functions giúp chúng ta chuyển dịch logic từ JavaScript sang CSS, tối ưu hiệu suất và tạo ra các giao diện có khả năng thích ứng cao (adaptive UI).

Dưới đây là hệ thống các hàm CSS cốt lõi được phân loại theo mục đích sử dụng.

1. Mathematical Functions (Hàm tính toán)

Nhóm hàm này cho phép thực hiện các phép tính logic ngay trong thời gian thực (runtime).

• calc(): Thực hiện các phép tính cơ bản.

  • Ví dụ: width: calc(100% - 80px);

• min() & max(): Trả về giá trị nhỏ nhất hoặc lớn nhất từ một danh sách.

  • Ví dụ: width: min(500px, 100%);

• clamp(): Giới hạn giá trị trong một khoảng nhất định (min, preferred, max).

  • Ví dụ: font-size: clamp(1rem, 2.5vw, 2rem);

2. Color Functions (Hàm xử lý màu sắc)

Cung cấp các phương thức biểu diễn và biến đổi màu sắc linh hoạt.

• rgb() / rgba(): Định nghĩa màu theo hệ Red-Green-Blue.

• hsl() / hsla(): Định nghĩa màu theo Hue-Saturation-Lightness.

• color-mix(): Trộn hai không gian màu theo tỷ lệ.

  • Ví dụ: background: color-mix(in srgb, red, blue 50%);

• oklch(): (Modern) Giúp định nghĩa màu sắc dựa trên nhận thức thị giác của con người, đảm bảo độ tương phản đồng nhất.

3. Transformation Functions (Hàm biến đổi hình học)

Xác định cách các phần tử được thay đổi về mặt không gian.

• translate(): Di chuyển phần tử theo trục X, Y.

  • Ví dụ: transform: translate(10px, 20px);

• scale(): Thay đổi tỉ lệ hiển thị.

  • Ví dụ: transform: scale(1.5);

• rotate(): Xoay phần tử theo đơn vị góc.

  • Ví dụ: transform: rotate(45deg);

• skew(): Làm nghiêng phần tử.

4. Filter & Visual Effects (Hàm bộ lọc & Hiệu ứng)

Xử lý đồ họa trực tiếp trên trình duyệt mà không cần can thiệp vào file ảnh gốc.

• blur(): Làm mờ phần tử.

  • Ví dụ: filter: blur(5px);

• brightness() / contrast(): Điều chỉnh độ sáng và độ tương phản.

• drop-shadow(): Tạo bóng đổ theo hình dáng thực tế của nội dung.

  • Ví dụ: filter: drop-shadow(2px 4px 6px black);

• grayscale(): Chuyển đổi sang tông màu xám.

5. Image & Gradient Functions (Hàm hình ảnh & Dải màu)

Sử dụng để tạo ra các nền động và xử lý tài nguyên đa phương tiện.

• linear-gradient(): Chuyển màu theo đường thẳng.

  • Ví dụ: background: linear-gradient(to right, red, yellow);

• radial-gradient(): Chuyển màu tỏa tròn từ tâm.

• url(): Tham chiếu đến tài nguyên bên ngoài.

• element(): (Experimental) Sử dụng một phần tử HTML khác để làm hình nền.

6. Reference & Utility Functions (Hàm tham chiếu & Tiện ích)

Quản lý các giá trị tái sử dụng và biến môi trường.

• var(): Truy cập giá trị của các biến CSS (Custom Properties).

  • Ví dụ: color: var(--primary-color);

• attr(): Lấy giá trị thuộc tính HTML để sử dụng trong nội dung CSS.

  • Ví dụ: content: attr(data-label);

• env(): Lấy các biến do trình duyệt/hệ điều hành cung cấp (như safe-area-inset-top).

Kết luận

Việc sử dụng thành thạo các hàm CSS không chỉ giúp giảm bớt sự phụ thuộc vào JavaScript mà còn giúp mã nguồn sạch sẽ, dễ bảo trì và tối ưu cho hiệu suất rendering của trình duyệt.

Pro-tip: Luôn ưu tiên dùng clamp() cho font-size và var() cho các thông số hệ thống để đảm bảo tính nhất quán của toàn bộ dự án.