Biểu thức thuộc tính trong CSS

Internet Explorer 5 của Windows đã giới thiệu biểu thức điều kiện trong CSS, một phần mở rộng cho phép chúng ta sử dụng kịch bản Javascript của Microsoft để gán một giá trị động tới giá trị thuộc tính của CSS. Giá trị này có thể thực hiện một số việc đơn giản như là tính toán số học, hoặc những thứ phức tạp hơn như tính toán chiều rộng của trình duyệt Window. Bạn nên nhớ rằng để biểu thức điều kiện hoạt động bạn phải đảm bảo rằng trình duyệt của bạn đang được bật JavaScript nếu không biểu thức sẽ bị vô hiệu hóa. Mặc dù chúng ta không có nhiều mô tả về kỹ thuật này cũng như ít thấy các web designer thực hiện nhưng nếu bạn không muốn loại bỏ trình duyệt IE6 hặc IE7 khỏi cuộc chơi thì đây cũng là điều đáng để chú ý.

Ở đây chúng ta có hai ví dụ đơn giản để giúp bạn hiểu được cách thức làm việc của biểu thức điều kiện trong CSS.

Ví dụ đầu tiên chúng ta sẽ sử dụng biểu thức để mô phỏng thuộc tính min-width và max-width trong CSS, những thuộc tính này không được thực hiên trên trình duyệt IE từ phiên bản 6 trở xuống bởi vậy tôi nghĩ đây sẽ là một ví dụ rất thiết thực.

#outer{
 width: expression(
 (d = document.compatMode == "CSS1Compat" ?
   document.documentElement : document.body) &&
 (d.clientWidth > 1024 ? "1024px" :
   d.clientWidth < 600 ? "600px" : "auto")
 );
 background: red;
}

Biểu thức trên được áp dụng cho phần tử có id tên "outer", và thuộc tính chiều rộng của phần tử nhận giá trị từ kết quả trong biểu thức điều kiện. Biểu thức nói rằng nếu chiều rộng trình duyệt Window của bạn có kích thước lớn hơn 1024px thì biểu thức sẽ trả về giá trị là 1024px và nếu chiều rộng của trình duyệt Window có kích thước nhỏ hơn 600px thì biểu thức sẽ trả về giá trị là 600px, điều này là tương đương với thuộc tính trong CSS hiện đại là min-width: 600px và max-width: 1024px.

Trong ví dụ kế tiếp chúng ta sẽ mô phỏng giá trị fixed cuả thuộc tính position, đây là giá trị mà chúng không được hổ trợ trên trình duyệt IE từ phiên bản 6 trở xuống.

h1#fixed {
position: absolute;
top: expression(
  (d = document.compatMode == "CSS1Compat" ?
   document.documentElement : document.body) &&
  (eval(d.scrollTop))
);
}

Trong vị dụ trên phần tử h1 với id tên là fixed sẽ giữ cho thanh cuộn luôn ở giá trị top cố định nên chúng ta có thể thấy phần tử vẫn đứng im khi kéo thanh cuộn xuống. Nhưng điểm hạn chế lớn nhất trong việc sử dụng biểu thức này là hiệu xuất làm việc của trình duyệt bị giảm đi đáng kể và chúng sẽ để lại hiệu ứng không thực trơn tru.

Có thể bạn không thực sự cần dùng tới những biểu thức điều kiện này trong thiết kế web hiện đại bởi CSS3 đã làm được quá nhiều thứ nhưng chúng ta cũng có thêm sự hiểu biết và biết đâu đấy bạn lại cần dùng đến chúng khi nào bạn muốn website của bạn không bị mất đi những tính năng bạn thích trên các phiên bản củ của trình duyệt Internet Explorer. Để biết thêm thông tin các bạn truy cập vào địa chỉ thư viện phát triển và giải pháp của Microsoft msdn.