Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Nhận biết tính năng CSS: Modernizr hay Feature Queries?

by
Difficulty:IntermediateLength:MediumLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong hướng dẫn này, tôi sẽ đi qua hai phương pháp tiếp cận để nhận biết một trình duyệt có hỗ trợ các tính năng nào đó của CSS hay không. Cái đầu tiên là tận dụng Modernizr, một thư viện JavaScript phổ biến và cái thứ hai là feature queries, giải pháp CSS đầy hứa hẹn.

Vậy, chúng ta hãy bắt đầu!

Nhận biết tính năng bằng cách sử dụng Modernizr

Như đã đề cập ở trên, Modernizr là một thư viện JavaScript nhẹ dùng để nhận biết tính năng HTML5 và CSS3 trong trình duyệt của bạn. Ngay khi trang web của bạn được tải, nó chạy nền và thực hiện các kiểm tra tính năng. Sau đó, nó lưu trữ các kết quả như là các thuộc tính của một đối tượng JavaScript và các lớp của các phần tử html. Chúng ta sẽ tìm hiểu nhiều hơn về điều đó sau.

Để cài đặt và sử dụng Modernizr, bạn có thể truy cập vào trang web của nó và tải về phiên bản mong muốn.

Lưu ý: tại thời điểm viết bài, phiên bản hiện tại của Modernizr là 2.8.3, mặc dù phiên bản 3 là hầu như đã sẵn sàng. Trong thực tế, nhóm đứng đằng sau thư viện mong muốn phát hành nó trong những tuần lễ sắp tới. Tổng quan về phiên bản mới này có thể được tìm thấy ở đây. Hơn nữa, bạn có thể lấy phiên bản beta của nó bằng cách truy cập liên kết này.

Sau khi tải về, đặt các tập tin JavaScript trong dự án của bạn và thêm nó vào trong <head> của trang html. Cuối cùng nhưng không kém phần quan trọng, để kích hoạt các chức năng của Modernizr bạn nên thêm lớp no-js vào phần tử html.

Trong hai phần tiếp theo, tôi sẽ bao quát những cái cơ bản của Modernizr. Với các khái niệm sâu hơn hãy đảm bảo là bạn đọc tài liệu hướng dẫn.

Nhận biết tính năng thông qua CSS

Như đã đề cập ở trên, Modernizr thêm một số lớp vào phần tử html. Tên lớp tuỳ thuộc vào trình duyệt hỗ trợ. Nếu trình duyệt không nhận biết một số bài kiểm tra tính năng, thì Modernizr thêm tiền tố no- trước tên lớp có sẵn của nó. Ví dụ, giả sử chúng ta đang kiểm tra hiệu ứng reflection, phần tử html trên Chrome 40 trông giống như thế này:

Trong khi trên Firefox 35:

Đồng thời lưu ý lớp js. Khi Modernizr chạy, giả sử JavaScript đã được kích hoạt trong trình duyệt của chúng ta, nó sẽ thay thế lớp no-js cũ bằng cái mới.

Dựa trên kết quả có được từ các bài kiểm tra của Modernizr, chúng ta có thể tuỳ biến CSS của chúng ta.

Ví dụ

Để bắt đầu, đây là mã HTML cơ bản mà chúng ta sẽ sử dụng cho phần còn lại của hướng dẫn:

Sử dụng các lớp được cho bởi Modernizr, chúng ta sửa đổi phong cách của phần tử h2 như sau:

Các trình duyệt dựa trên WebKit hỗ trợ tính năng reflections sẽ hiển thị phần tử h2 như sau:

Trong khi phần còn lại của chúng (ít nhất là thuộc tính text-shadow đó) sẽ áp dụng một hiệu ứng khác, dựa trên một hiệu ứng chữ 3D bởi Mark Otto:

Đây là ví dụ trên Codepen:

Nhận biết tính năng thông qua JavaScript

Cách thứ hai để kiểm tra kết quả các bài test của Modernizr là thông qua JavaScript. Như đã đề cập, Modernizr sẽ tạo ra một đối tượng với tên thuộc tính của các tính năng mà được cấu hình để kiểm tra. Hầu hết, giá trị trả về của chúng hoặc là true hoặc false.

Hình minh hoạt dưới đây cho thấy cách Firefox 35 hiển thị các đối tượng Modernizr (Tab giao diện dòng lệnh):

Như chúng ta có thể thấy thuộc tính Modernzir.cssreflections trả về một giá trị false. Điều đó xảy ra bởi vì, Chrome, Safari, và Opera là trình duyệt duy nhất, mà hỗ trợ tính năng reflections (tại thời điểm viết bài).

Dưới đây là cách mà chúng ta có thể tạo lại các ví dụ trước với JavaScript, bằng cách thêm các lớp reflectionno-reflection vào phần tử <h2 id="reflection"> một cách thủ công:

Sau đó định phong cách các mã CSS thích hợp:

Và demo mới trên Codepen:

Nhận biết tính năng sử dụng Feature Queries

Không nghi ngờ gì, Modernizr là một công cụ có giá trị cho các nhà phát triển front-end. Nhưng có tốt hơn không, nếu chúng ta có thể tạo lại các bài kiểm tra của Modernizr bằng CSS thuần tuý? Rất may, chúng ta có thể làm điều đó bằng cách sử dụng feature queries. Đây là những luật có điều kiện mà cho phép chúng ta áp dụng các phong cách khác nhau tùy thuộc vào trình duyệt hỗ trợ. Chúng làm việc giống như media queries. Và vâng, bên cạnh phiên bản CSS, chúng cũng đang có cho JavaScript.

Sẵn sàng để khám phá chứ?

Nhận biết thông qua CSS

Để định nghĩa feature queries trong CSS, chúng ta phải sử dụng các luật @supports@supports not. Cú pháp của chúng trông như thế này:

Điều kiện bao gồm cặp thuộc tính: giá trị của các tính năng mà chúng ta muốn kiểm tra. Những trình duyệt mà hỗ trợ các tính năng áp dụng các luật mong muốn, thì chúng ta chỉ định trong luật @supports. Nếu không, các phong cách bên trong luật @supports not được áp dụng.

Sử dụng toán tử logic AND và/hoặc OR chúng ta có thể tạo các bài kiểm tra phức tạp. Tuy nhiên, hãy nhớ rằng các toán tử này nên được tách ra bằng dấu ngoặc đơn.

Hãy xem hai ví dụ. Như chúng ta đã biết, HTML của chúng ta là rất giản! Nó chỉ là một phần tử h2.

Trong ví dụ đầu tiên này, chúng ta sử dụng thuộc tính background-color để xác định màu nền của phần tử body. Để làm cho các thứ thú vị hơn, chúng ta cũng tạo một CSS variable. Trình duyệt hỗ trợ được chia thành các loại sau:

  1. Các trình duyệt mà có hỗ trợ feature queries và CSS variables (hiện chỉ Firefox 31+).
  2. Trình duyệt có hỗ trợ feature queries, nhưng không hỗ trợ CSS variables.
  3. Các trình duyệt không hỗ trợ feature queries cũng như CSS variables.

Tùy thuộc vào những trường hợp này, phần tử body sẽ hiển thị một background-color khác nhau.

Đây là mã CSS dựa trên các trường hợp ở trên:

Ví dụ trên Safari, thuộc về loại thứ ba phần tử của chúng ta sẽ trông như thế này:

Sau đó Chrome, có thể biên dịch Feature Query, nhưng không hỗ trợ CSS variable, thuộc về thể loại thứ hai:

Cuối cùng Firefox, nằm trong mục đầu tiên:

Và ví dụ được nhúng từ Codepen:

Một ví dụ khác

Trong trường hợp này, chúng ta sẽ mở rộng điều kiện kiểm tra để chứa một luật thứ hai. Cụ thể hơn, bây giờ chúng ta đang nhắm các trình duyệt mà hỗ trợ không chỉ là CSS reflection mà còn các hiệu ứng text-stroke.

Đây là đoạn mã cho hành vi đó:

Ví dụ, các trình duyệt (tại thời điểm bài viết này chỉ Chrome 28+) hỗ trợ feature queries, reflection và các hiệu ứng text-stroke sẽ hiển thị các phần tử h2 như sau:

Ở dưới là ví dụ được nhúng từ Codepen:

Nhận biết tính năng thông qua JavaScript

Feature queries còn có thể được định nghĩa thông qua JavaScript. Để làm như vậy, chúng ta phải sử dụng phương thức CSS.supports. Dưới đây là các tham số cơ thể có:

Kết quả của phương thức này là một giá trị Boolean xác định trình duyệt có hỗ trợ các các tính năng hay không. Cuối cùng, chúng ta nên nhóm các tham số trong một dấu ngoặc đơn hoặc dấu ngoặc kép.

Sử dụng phiên bản JavaScript của feature queries, ví dụ cuối cùng có thể được tạo lại như sau:

Bản demo tương ứng:

Trình duyệt hỗ trợ

Nói chung, trình duyệt có hỗ trợ tốt cho feature queries. Tại thời điểm viết bài thì Firefox (22+), Crom (28+), và Opera (12.1+) tất cả đều hỗ trợ tính năng CSS này. Hy vọng rằng, các phiên bản sắp tới của trình duyệt IE sẽ hiểu các điều kiện (họ đang làm việc với nó!) tương tự


Polyfills

Nếu bạn muốn sử dụng feature queries trong dự án của bạn, nhưng bạn có một chút hoài nghi về các trình duyệt có thể hiểu chúng, thì bạn sẽ tìm thấy một số polyfills hữu ích dưới đây:

Kết luận

Trong hướng dẫn này, tôi đã đi qua hai phương pháp hữu ích, bạn có thể sử dụng để cung cấp các trải nghiệm đa-trình duyệt đáng tin cậy. Tận dụng Modernizr và/hoặc feature queries sẽ giúp bạn hiểu rõ về lợi ích của việc thiết kế cho các tính năng và không phải cho các trình duyệt. Modernizr hiện là một giải pháp ổn định, nhưng feature queries đang đến, do đó, sự lựa chọn là của bạn!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.