MODERNIZR LÀ GÌ

  -  
post-promotion-placement#checkSidebarAdDisplayCondition" data-controller="sticky-ad post-promotion-placement">
Read Time:7 minsLanguages:url-selector#selectionChanged" data-controller="url-selector">EnglishEspañolTiếng Việt

Trong gợi ý này, tôi đã trải qua hai phương thức tiếp cận để nhận ra một trình chú tâm bao gồm cung ứng các tuấn kiệt làm sao kia của CSS hay là không. Cái đầu tiên là tận dụng Modernizr, một tlỗi viện JavaScript phổ biến cùng dòng sản phẩm hai là feature queries, giải pháp CSS đầy tiềm ẩn.

Bạn đang xem: Modernizr là gì

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

Nhận biết tuấn kiệt bằng phương pháp sử dụng Modernizr

Nlỗi sẽ nói ngơi nghỉ bên trên, Modernizr là 1 trong tlỗi viện JavaScript nhẹ dùng để làm nhận biết tính năng HTML5 cùng CSS3 vào trình để ý của khách hàng. Ngay khi trang web của công ty được sở hữu, nó chạy nền với triển khai các khám nghiệm công dụng. Sau kia, nó tàng trữ những tác dụng như là những thuộc tính của một đối tượng người dùng JavaScript cùng những lớp của những bộ phận html. Chúng ta vẫn tìm hiểu nhiều hơn về điều ấy sau.

Để cài đặt và thực hiện Modernizr, chúng ta cũng có thể truy cập vào website của nó và mua về phiên bản ước muốn.

*

Lưu ý: tại thời gian viết bài xích, phiên bản hiện tại của Modernizr là 2.8.3, mặc dù phiên phiên bản 3 là phần nhiều đang sẵn sàng chuẩn bị. Trong thực tiễn, đội đứng ẩn dưới thỏng viện mong muốn gây ra nó Một trong những tuần lễ tiếp đây. Tổng quan về phiên bạn dạng bắt đầu này có thể được kiếm tìm thấy ở đây. Nhiều hơn, bạn có thể mang phiên phiên bản beta của chính nó bằng phương pháp truy cập links này.

Sau Lúc sở hữu về, đặt các tập tin JavaScript trong dự án công trình của khách hàng và thêm nó vào trong của trang html. Cuối cùng tuy vậy không hề kém phần đặc trưng, nhằm kích hoạt các chức năng của Modernizr chúng ta nên thêm lớp no-js vào thành phần html.

Trong nhị phần tiếp theo sau, tôi đã tổng quan những chiếc cơ bản của Modernizr. Với những có mang sâu rộng hãy bảo đảm là độc giả tài liệu chỉ dẫn.

Nhận biết chức năng trải qua CSS

Nhỏng đang nhắc sinh hoạt trên, Modernizr thêm một số trong những lớp vào bộ phận html. Tên lớp tuỳ trực thuộc vào trình để mắt hỗ trợ. Nếu trình chăm nom không phân biệt một số trong những bài khám nghiệm bản lĩnh, thì Modernizr thêm tiền tố no- trước tên lớp bao gồm sẵn của nó. lấy một ví dụ, mang sử chúng ta đang khám nghiệm hiệu ứng reflection, thành phần html trên Chrome 40 trông giống như nắm này:

*

Trong lúc bên trên Firefox 35:

*

Đồng thời xem xét lớp js. khi Modernizr chạy, đưa sử JavaScript đã làm được kích hoạt vào trình chuyên chú của bọn họ, nó đang thay thế lớp no-js cũ bằng mẫu new.

Dựa trên công dụng dành được tự các bài bác soát sổ của Modernizr, chúng ta cũng có thể tuỳ thay đổi CSS của họ.

Ví dụ

Để bước đầu, đây là mã HTML cơ phiên bản nhưng bọn họ sẽ thực hiện bỏ phần còn sót lại của phía dẫn:

CSS Reflections

Sử dụng các lớp được đến bởi vì Modernizr, bọn họ sửa đổi phong thái của bộ phận h2 như sau:

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 chuẩn y dựa vào WebKit cung ứng tính năng reflections sẽ hiển thị phần tử h2 nlỗi sau:

*

Trong Lúc phần còn lại của bọn chúng (ít nhất là nằm trong tính text-shadow đó) đang vận dụng một cảm giác khác, dựa vào một hiệu ứng chữ 3D do Mark Otto:

*

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

Nhận biết anh tài thông qua JavaScript

Cách thứ nhì nhằm bình chọn tác dụng những bài chạy thử của Modernizr là thông qua JavaScript. Như vẫn nói, Modernizr sẽ tạo ra một đối tượng người tiêu dùng cùng với thương hiệu nằm trong tính của những tính năng mà được thông số kỹ thuật nhằm bình chọn. Hầu hết, giá trị trả về của chúng Hay là true hoặc false.

Hình minch hoạt tiếp sau đây cho thấy biện pháp Firefox 35 hiển thị những đối tượng Modernizr (Tab đồ họa chiếc lệnh):

*

Nhỏng chúng ta có thể thấy ở trong tính Modernzir.cssreflections trả về một quý hiếm false. Điều kia xảy ra chính vì, Chrome, Safari, và Opera là trình để mắt độc nhất vô nhị, mà cung ứng tính năng reflections (trên thời điểm viết bài).

Xem thêm: Top 10 Mô Hình Chăn Nuôi "Hái Ra Tiền" Tại Việt Nam, Nuôi Con Gì Lợi Nhuận Cao Năm 2021

Dưới đó là cách cơ mà chúng ta có thể tạo thành lại những ví dụ trước với JavaScript, bằng cách thêm các lớp reflection và no-reflection vào bộ phận

một bí quyết thủ công:

var element = document.getElementById("reflection");if (Modernizr.cssreflections) element.className = "reflection"; else element.className = "no-reflection"; Sau kia định phong cách các mã CSS say đắm hợp:

.reflection /* apply reflection property */.no-reflection /* apply text-shadow property */ Và kiểm tra mới bên trên Codepen:

Nhận biết khả năng sử dụng Feature Queries

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

Sẵn sàng để tìm hiểu chứ?

Nhận biết thông qua CSS

Để định nghĩa feature queries vào CSS, bọn họ yêu cầu sử dụng các lao lý
supports not(thử nghiệm condition) /* apply rules */ Điều kiện bao gồm cặp thuộc tính: giá bán trị của các hào kiệt mà chúng ta mong muốn soát sổ. Những trình chăm bẵm nhưng mà cung ứng các hào kiệt áp dụng những mức sử dụng ước muốn, thì họ hướng đẫn trong phương pháp
supports not được vận dụng.

Sử dụng toán tử ngắn gọn xúc tích AND và/hoặc OR bạn cũng có thể tạo nên những bài chất vấn tinh vi. Tuy nhiên, hãy hãy nhờ rằng các toán tử này đề nghị được bóc tách ra bằng vệt ngoặc 1-1.

Hãy coi nhị ví dụ. Như chúng ta vẫn biết, HTML của chúng ta là cực kỳ giản! Nó chỉ nên 1 phần tử h2.

Trong ví dụ đầu tiên này, bọn họ sử dụng ở trong tính background-color nhằm xác định màu sắc nền của phần tử body. Để có tác dụng cho những thiết bị thú vui hơn, họ cũng chế tác một CSS variable. Trình để mắt tới cung ứng được tạo thành các loại sau:

Trình trông nom bao gồm cung ứng feature queries, tuy vậy ko hỗ trợ CSS variables. Các trình coi xét không hỗ trợ feature queries cũng như CSS variables.

Tùy nằm trong vào đa số ngôi trường hợp này, bộ phận body vẫn hiển thị một background-color không giống nhau.

Đây là mã CSS dựa trên các trường đúng theo nghỉ ngơi trên:

body --bg-color: #98FB98; background-color: khaki;
supports not(background-color: var(--bg-color)) body background-color: tomato; ví dụ như trên Safari, thuộc về loại thứ tía thành phần của họ vẫn trông như vậy này:

*

Sau kia Chrome, hoàn toàn có thể biên dịch Feature Query, dẫu vậy không cung ứng CSS variable, thuộc về thể nhiều loại đồ vật hai:

*

Cuối thuộc 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 phù hợp này, chúng ta sẽ mở rộng ĐK bình chọn để đựng một hình thức đồ vật hai. Cụ thể hơn, bây giờ chúng ta đang nhắm những trình để ý mà cung ứng không chỉ là CSS reflection ngoại giả các hiệu ứng text-stroke.

Xem thêm: Nghĩa Của Từ To Take Out Nghĩa Là Gì ? Take Sth Out

Đây là đoạn mã đến hành động đó:


supports ((/* reflections condition */) & (-webkit-text-stroke: 1px tomato)) h2 /* apply reflection property */ -webkit-text-stroke: 1px tomato;
supports not ((/* reflections condition */) & (/*stroke condition*/)) h2 /* apply text-shadow property */ ví dụ như, các trình coi ngó (tại thời điểm nội dung bài viết này chỉ Chrome 28+) hỗ trợ feature queries, reflection với các hiệu ứng text-stroke vẫn hiển thị các phần tử h2 nhỏng sau:

*

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

Nhận biết công dụng thông qua JavaScript

Feature queries còn hoàn toàn có thể được khái niệm trải qua JavaScript. Để làm cho như vậy, bọn họ cần sử dụng cách tiến hành CSS.supports. Dưới đó là các ttê mê số cơ thể có:

CSS.supports(propertyName, propertyValue)CSS.supports(chạy thử condition) Kết trái của cách làm này là một trong những giá trị Boolean khẳng định trình ưng chuẩn gồm cung ứng các các tính năng hay là không. Cuối thuộc, chúng ta cần đội các tham mê số vào một vết ngoặc đối chọi hoặc có thể dấu ngoặc knghiền.

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

var result = CSS.supports("(/*reflections condition*/) & (/*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 để mắt tới hỗ trợ

Nói tầm thường, trình phê chuẩn có cung cấp giỏi đến feature queries. Tại thời gian viết bài bác thì Firefox (22+), Crom (28+), và Opera (12.1+) toàn bộ hồ hết cung ứng tuấn kiệt CSS này. Hy vọng rằng, những phiên bản tiếp đây của trình phê duyệt IE vẫn hiểu những điều kiện (họ sẽ thao tác cùng với nó!) tương tự

*

Polyfills

Nếu bạn muốn sử dụng feature queries vào dự án của bạn, tuy nhiên các bạn tất cả một ít không tin về những trình ưng chuẩn có thể hiểu bọn chúng, thì các bạn sẽ tìm kiếm thấy một vài polyfills hữu ích dưới đây:

Kết luận

Trong khuyên bảo này, tôi đã đi qua nhị cách thức có ích, bạn có thể sử dụng để cung ứng các yên cầu đa-trình chăm chú tin cậy. tận dụng ưu điểm Modernizr và/hoặc feature queries để giúp chúng ta nắm rõ về công dụng của Việc xây dựng mang lại các tính năng cùng chưa phải mang đến các trình duyệt. Modernizr hiện tại là một trong chiến thuật bình ổn, nhưng feature queries đang đến, do đó, sự chọn lựa là của bạn!