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

https://webdesign.tutsplus.com/vi/tutorials/css-feature-detection-modernizr-or-feature-queries--cms-23508

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:

1

<h2 id="reflection">CSS Reflections</h2>

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:

0102030405060708091011121314151617181920212223

h2 { color: #c0ccdb; font-size: 3em;} .cssreflections h2 { -webkit-box-reflect: below -.45em -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(255, 255, 255, 0.75)));} .no-cssreflections h2 { text-shadow: 0 1px 0 #136ed1, 0 2px 0 #126ac9, 0 3px 0 #1160b6, 0 4px 0 #105cad, 0 5px 0 #0f56a2, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);}

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 reflection và no-reflection vào phần tử <h2 id="reflection"> một cách thủ công:

123456

var element = document.getElementById('reflection');if (Modernizr.cssreflections) { element.className = 'reflection';} else { element.className = 'no-reflection';}

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

1234567

.reflection { /* apply reflection property */} .no-reflection { /* apply text-shadow property */}

Và demo mới trên Codepen:

Advertisement

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 và @supports not. Cú pháp của chúng trông như thế này:

1234567

@supports(test condition) { /* apply rules */} @supports not(test condition) { /* apply rules */}

Đ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:

01020304050607080910111213141516

body { --bg-color: #98FB98; background-color: khaki;} @supports (background-color: var(--bg-color)) { body { background-color: var(--bg-color); }} @supports not(background-color: var(--bg-color)) { body { background-color: tomato; }}

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 đó:

0102030405060708091011121314

@supports ((/* reflections condition */) and (-webkit-text-stroke: 1px tomato)) { h2 { /* apply reflection property */ -webkit-text-stroke: 1px tomato; }} @supports not ((/* reflections condition */) and (/*stroke condition*/)){ h2 { /* apply text-shadow property */ }}

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:

Advertisement

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ó:

123

CSS.supports(propertyName, propertyValue) CSS.supports(test condition)

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:

12345678

var result = CSS.supports('(/*reflections condition*/) and (/*stroke condition*/)'); var element = document.getElementById('reflection');if(result) { element.className = 'reflection';} else { element.className = 'no-reflection';}

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ự

PreviousModernizr là gì ? Sử dụng nó cho những trình duyệt cũ ra sao? (ok)Next[SALESFORCE] Remote Action function in Visualforce Page (ok)

Last updated