CSS3 – Đã đến lúc sử dụng hàm calc()

Nếu như bạn thường xuyên phải gặp khó khăn trong việc canh chỉnh kích thước của các thành phần HTML, thì nay vấn đề này có thể được giải quyết một cách đơn giản trong CSS3 nhờ vào hàm calc().
Nếu như bạn thường xuyên phải gặp khó khăn trong việc canh chỉnh kích thước của các thành phần HTML, thì nay vấn đề này có thể được giải quyết một cách đơn giản trong CSS3 nhờ vào hàm calc().
Trước đây, calc() chỉ mới được hỗ trợ trên IE9 và FF4 trở đi, nhưng hiện tại với sự hỗ trợ từ Chrome 19, tính năng này sẽ bắt đầu thực sự được phổ biến trong các ứng dụng web về sau.

Hàm calc() ra đời nhằm cung cấp khả năng tính toán cho CSS, khiến nó linh động và đơn giản hóa công việc cho các designer. Không chỉ đơn thuần áp dụng cho việc tính toán kích thước, việc nhiều tính năng mới của CSS3 đòi hỏi sự phức tạp và chính xác của các con số.
Bạn có thể sử dụng các phép tính đơn giản (+, -, *, /) và có thể trộn lẫn các đơn vị khác nhau như %, rem, em, px,... Ví dụ:

#div1 {      width: calc(100% – 300px);    width: -webkit-calc(100% – 300px);    width: -moz-calc(100% – 300px); }

 

Tất nhiên bạn cũng có thể sử dụng hàm này cho bất kì thuộc tính nào sử dụng giá trị là các con số, ví dụ như các thuộc tính khác để xác định vị trí (left, top, margin,…)

Để dự phòng, bạn có thể sử dụng thêm -o-calc() để đợi sẵn tính năng này trên Opera.

Tham khảo thêm tại http://www.caniuse.com/calc và calc() specification.