Html5 – Giới thiệu thư viện Modernizr

Modernizr Html5 logoCác công nghệ web mới ra đời như HTML5, CSS3, Responsive design đòi hỏi developer và cả designer đều phải nắm bắt kịp thời và giải quyết những vấn đề phát sinh như tính tương thích, hiệu quả, linh hoạt,… Nếu bạn đang đối mặt với điều này, bạn có thể cần dùng đến Modernizr – một thư viện javascript giúp bạn vận dụng hiệu quả HTML5 và CSS3.

Cài đặt

Bạn vào trang download để chọn các tính năng cần thiết cho trang web. Mã javascript sẽ được tạo ra dựa vào các lựa chọn của bạn. Nếu muốn tìm hiểu mã nguồn của thư viện này, bạn có thể đánh dấu vào checkbox “Don’t Minify Source” bên dưới. Ngoài ra, bạn có thể mở rộng mục Extensibility và Community add-ons để lựa chọn thêm các tính năng mở rộng của thư viện này.

Download Modernizr

Polyfill là gì?

Đây là thuật ngữ dùng để chỉ các đoạn code được dùng để cung cấp một chức năng (hoặc công nghệ) của các trình duyệt hiện đại cho các trình duyệt cũ. Thông qua đó, các trang web sử dụng các công nghệ mới (như HTML5) có thể chạy ổn định trên các trình duyệt cũ chưa hỗ trợ.
Một cách ngắn gọn:

“polyfill (n): a JavaScript shim that replicates the standard API for older browsers”

Ví dụ các trình duyệt hiện nay đều hỗ trợ requestAnimationFrame, và để tạo một chức năng tương tự trên các trình duyệt cũ, ta có thể dùng đến hàm setTimeout() để thay thế.

var requestAnimationFrame =
	window.requestAnimationFrame1       ||
		  window.webkitRequestAnimationFrame1 ||
		  window.mozRequestAnimationFrame1    ||
		  window.oRequestAnimationFrame1      ||
		  window.msRequestAnimationFrame1     ||
		  function( callback ){ // polyfill
			window.setTimeout(callback, 1000 / 60);
		  };

Làm việc với Html5 và Css3

Một cách thường được áp dụng để kiểm tra trình duyệt có hỗ trợ javascript hay không là thêm class “no-js” vào thẻ html. Khi được nạp, Modernizr sẽ thay thế class này bằng “js”. Ngoài ra, Modernizr còn thêm vào các tính năng khác mà nó kiểm tra được trình duyệt có hỗ trợ hay không (với tiền tố no-). Ví dụ với bản Firefox 12, thẻ html sẽ trở thành thế này:

<html class=" js no-flexbox flexbox-legacy canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage no-sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
...
</html>

Dựa vào đây, ta có thể định nghĩa các class css tương ứng và vì chúng được gắn vào thẻ html, các đoạn mã css sẽ được áp dụng cho toàn bộ trang web.

Để kiểm tra một tính năng của trình duyệt, ta sử dụng trực tiếp đối tượng Modernizr trong javascript và lấy giá trị từ một thuộc tính của nó. Ngoài các tính năng mới của HTML5 như canvas, localStorage, Web Worker,… Modernizr còn có thể kiểm tra được các tính năng CSS3 như boxshadow, borderradius,…

if (Modernizr.localstorage) {
    alert("This browser supports local Storage!");
}

Nạp script động với YepNope

Modernizr sử dụng thư việc yepnopejs để hỗ trợ việc load các tập tin javascript và css thông qua việc gọi một hàm javascript. Hàm load() cơ bản của Modernizr bao gồm 3 tham số chính:
– test: điều kiện dùng để kiểm tra.
– yep: chứa đường dẫn đến tập tin sẽ nạp nếu điều kiện test là đúng.
– nope: chứa đường dẫn đến tập tin sẽ nạp nếu điều kiện test là sai.

YepNopeJs
Như vậy tùy theo trình duyệt, ta có thể kết hợp kiểm tra các tính năng và tải tập tin script tương ứng. Điều này giúp hạn chế việc tải các tập tin không cần thiết và đảm bảo trang web có thể chạy ổn định trên các loại trình duyệt.

Modernizr.load({
  test: Modernizr.geolocation,
  yep : 'geo.js',
  nope: 'geo-polyfill.js'
});

Một cú pháp thông dụng khác để nạp một tập tin script và thực hiện một hàm callback:

Modernizr.load(
{
	load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
	complete: function () {
		if ( !window.jQuery ) {
			Modernizr.load('js/libs/jquery-1.7.1.min.js');
		}
	}
});

Thư viện YepNope này còn hỗ trợ rất nhiều tham số hữu ích khác mà bạn có thể tìm hiểu tại trang chủ của nó.

Đọc thêm

Bên cạnh các tính năng được giới thiệu trong bài viết này, Modernizr còn hỗ trợ một vài hàm hữu dụng khác, đặc biệt cho các designer và hướng thiết kế responsive. Dưới đây là các link tham khảo nếu như bạn muốn tìm hiểu sâu thêm về thư viện này:

Modernizr Documentation
Modernizr Resources

YinYangIt’s Blog

Advertisements

4 thoughts on “Html5 – Giới thiệu thư viện Modernizr

  1. Mấy bữa nay em toàn viết về gaming, nên anh không đọc / comment, vì nó không thuộc vấn đề anh quan tâm.

    Modernirz là thư viện nên dùng để bảo đảm tính tương thích ngược với những trình duyệt cũ, chưa hỗ trợ hết các tính năng của HTML 5. Chính vì thế mà ASP.NET Team đã đính kèm sẵn thư viện này trong các dự án ASP.NET MVC.

  2. Pingback: Giới thiệu kĩ thuật Hook và các khái niệm cơ bản | NGỌC TẤN KIẾN THỨC LẬP TRÌNH AN GIANG

Đã đóng bình luận.