CSS calc() – Cách sử dụng hàm calc() trong CSS

CSS calc() là một hàm tích hợp trong CSS cho phép thực hiện các phép tính toán. Nó được sử dụng để tính toán độ dài, phần trăm, thời gian, số, tần số nguyên hay góc. Hàm này sử dụng bốn toán tử cơ bản là cộng (+), nhân (*), trừ (-), và chia (/). Điểm đặc biệt của CSS calc() là nó cho phép kết hợp các đơn vị khác nhau như pixel và phần trăm.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS calc() là gì?

Hàm CSS calc() cho phép tính toán giá trị của một thuộc tính CSS dựa trên một biểu thức toán học. Biểu thức này có thể sử dụng các đơn vị khác nhau và sử dụng các toán tử để tính toán giá trị. Nhờ vậy, CSS calc() rất tiện lợi, giúp việc lập trình CSS linh hoạt và dễ dàng hơn.

CSS calc() là một công cụ mạnh mẽ và hữu ích đối với các nhà lập trình web, thiết kế web, và các nhà phát triển ứng dụng web. Những người muốn tối ưu hóa thiết kế web của mình, đảm bảo hiệu suất và khả năng tương thích giữa các trình duyệt sẽ tìm thấy CSS calc() là một công cụ hữu ích.

Syntax Values

Hàm CSS calc() nhận một tham số duy nhất là biểu thức và kết quả của biểu thức này sẽ được sử dụng làm giá trị. Nó có thể là bất kỳ biểu thức toán học nào sử dụng bốn toán tử cộng (+), trừ (-), nhân (*), và chia (/). Biểu thức là bắt buộc phải được xác định.

Các điểm quan trọng

Toán tử cộng (+) và trừ (-) luôn phải được bao quanh bởi khoảng trắng. Nếu không, biểu thức sẽ bị xem là không hợp lệ.

Nesting của hàm calc() là hoàn toàn có thể. Nội tuyến hàm này có thể được sử dụng để tính toán tổng các giá trị khác nhau.

Hướng dẫn CSS calc()

Để sử dụng CSS calc() trong CSS, chỉ cần đặt giá trị biểu thức vào trong hàm calc(). Sau đó, các toán tử cộng, trừ, nhân, chia được sử dụng để tính toán giá trị của thuộc tính CSS.

Ví dụ đơn giản

Trong ví dụ này, chúng ta sử dụng hàm calc() để xác định chiều rộng và chiều cao của phần tử div. Có một phép trừ trong biểu thức của hàm calc() với các đơn vị giống nhau. Kết quả của biểu thức sẽ được xem như giá trị của thuộc tính, vì vậy giá trị của chiều rộng sẽ là 75%, và giá trị của chiều cao sẽ là 275px.

div{
    width: calc(75% - 25px);
    height: calc(300px - 25px);
}

Ví dụ sử dụng các đơn vị khác nhau

Trong ví dụ này, chúng ta sẽ thấy rõ sự tiện lợi của CSS calc() khi sử dụng các đơn vị khác nhau. Trong biểu thức của hàm calc(), ta có thể sử dụng các đơn vị như px, em, rem, %, vh, vw, và nhiều đơn vị khác nữa.

div{
    width: calc(50% - 20px);
    height: calc(100vh - 80px);
    padding: calc(2rem + 10px) calc(1em / 2) calc(3% + 5px) 20px;
}

Ở ví dụ trên, chúng ta sử dụng đơn vị phần trăm (%) cho chiều rộng và đơn vị viewport height (vh) cho chiều cao. Chúng ta cũng sử dụng các đơn vị em, rem, %, và pixel để tính toán giá trị cho thuộc tính padding.

Ưu và Nhược điểm CSS calc()

Ưu điểm

• CSS calc() giúp việc lập trình CSS linh hoạt và dễ dàng hơn.
• Nó cho phép kết hợp các đơn vị khác nhau trong một biểu thức, giúp tối ưu hóa thiết kế web.
• Nesting của hàm calc() là hoàn toàn có thể, giúp tính toán các giá trị phức tạp.

Nhược điểm

• CSS calc() không được hỗ trợ ở một số trình duyệt cũ.
• Sử dụng quá nhiều hàm calc() có thể làm chậm tốc độ tải trang.

Lời khuyên CSS calc() là gì?

Khi sử dụng CSS calc(), nên lưu ý các điểm sau:

• Luôn sử dụng khoảng trắng để bao quanh toán tử cộng và trừ (+, -) trong biểu thức của hàm calc().
• Tránh sử dụng quá nhiều hàm calc() trong một trang web để tối ưu hóa tốc độ tải trang.
• Nếu sử dụng các đơn vị khác nhau, hãy chắc chắn rằng bạn đã kiểm tra kĩ để đảm bảo tính tương thích giữa các trình duyệt.

Tổng kết

Trong bài viết này, chúng ta đã tìm hiểu về CSS calc() – một hàm tính toán được tích hợp trong CSS cho phép tính toán các giá trị số trong thiết kế web. Chúng ta đã xem qua cách sử dụng của hàm calc(), cú pháp, các ưu và nhược điểm, lời khuyên và các FAQ liên quan đến nó.

CSS calc() là một công cụ rất hữu ích trong lập trình web, giúp cho thiết kế linh hoạt và tối ưu hóa. Bằng cách sử dụng đúng cách và cẩn thận kiểm tra tính tương thích trên các trình duyệt, chúng ta có thể tận dụng được hết tiềm năng của loại hàm này.