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

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.

Bạn thấy bài viết này như thế nào?: 
No votes yet
Ảnh của Khanh Hoang

Khanh Hoang - Kenn

Kenn is a user experience designer and front end developer who enjoys creating beautiful and usable web and mobile experiences.

Bình luận (0)

 

Add Comment

Filtered HTML

  • Các địa chỉ web và email sẽ tự động được chuyển sang dạng liên kết.
  • Các thẻ HTML được chấp nhận: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Tự động ngắt dòng và đoạn văn.

Plain text

  • No HTML tags allowed.
  • Các địa chỉ web và email sẽ tự động được chuyển sang dạng liên kết.
  • Tự động ngắt dòng và đoạn văn.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
11 Sản phẩm "bèo bọt" trong quá khứ của Apple

11 Sản phẩm "bèo bọt" trong quá khứ của Apple

Nếu iPad và iPhone tạo nên sự thay đổi ngoạn mục trong lịch sử công nghệ tiêu dùng thế giới, thì một số sản phẩm xa xưa của Apple lại hoàn toàn bị lãng quên.

Hướng dẫn Drupal 7 Migration thành Drupal 8

Hướng dẫn Drupal 7 Migration thành Drupal 8

The developer in me has been itching to give it a try on a "real" project. The Drupalize.Me site

Bí ẩn trong phím Option của Mac OS X

Bí ẩn trong phím Option của Mac OS X

Bản thân Mac OS X có rất nhiều những bí mật mà bạn phải tự tìm kiếm bởi chúng không nằm trong bất cứ hướng dẫn sử dụng nào.

Công ty diệt chuột T&C

 

Diet con trung