HTML5 Boilerplate là 1 template dành cho DEV về HTML5 nhưng vẫn chạy được trên các trình duyệt chưa hổ trợ các TAG của HTML5. Template HTML5 Boilerplate có độ tương thích cao giữa các trình duyệt với nhau. Ví dụ chạy được trên IE6, IE7, IE8, IE9, Firefox 3.x, Firefox 4.x, Firefox 5.x, Google Chrome 9, Google Chrome 10, …. Nó không làm biếng dạng các TAG khi trình duyệt đó không hổ trợ HTML5
Trang 1HTML5 Boilerplate
1 HTML5 Boilerplate là gì? Tại sao phải dùng HTML5 Boilerplate?
- HTML5 Boilerplate là 1 template dành cho DEV về HTML5 nhưng vẫn chạy được trên các trình duyệt chưa hổ trợ các TAG của HTML5
- Template HTML5 Boilerplate có độ tương thích cao giữa các trình duyệt với nhau Ví
dụ chạy được trên IE6, IE7, IE8, IE9, Firefox 3.x, Firefox 4.x, Firefox 5.x, Google
Chrome 9, Google Chrome 10, … Nó không làm biếng dạng các TAG khi trình duyệt
đó không hổ trợ HTML5
Link download: http://github.com/paulirish/html5-boilerplate/zipball/v1.0stripped
2 HTML5 Boilerplate gồm có những thành phần nào?
- HTML5 Boilerplate các thành phần chính như sau:
1. Định hình cho toàn bộ document (phân này dùng để phân biệt các trình duyệt IE với các version khác nhau và với trình duyệt khác IE)
<!doctype html>
<! [if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif] >
<! [if IE 7 ]> <html class="no-js ie7" lang="en"> <![endif] >
<! [if IE 8 ]> <html class="no-js ie8" lang="en"> <![endif] >
<! [if (gte IE 9)|!(IE)]><! > <html class="no-js" lang="en"> <! <![endif] >
2 Phần khai báo các tag meta để
- Với IE version 8 trở về sau thì có dùng tag X-UA-Compatible để yêu cầu web browser trả về key ETag (key mã hóa content của website) trong phần header để browser check vào những thông số này xem phần content có thay đổi hay
không, nếu có thay đổi thì load lại toàn bộ content, nếu không có thay đổi thì dừng và lấy từ cache của trình duyệt ra
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
Peter: Cai nay la de bao cho IE biet la phai dung cai rendering engine moi nhat http://html5boilerplate.com/docs/#The-markup★make-sure-the-latest-version-of-ie-is-used
- Với thiết bị như mobile thì có thêm tag sau đây
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3 Phần chính yếu là đoạn code về js và css của template này
a <link rel="stylesheet" href="css/style.css?v=2">
File CSS này nó có các thành phần như CSS Reset, media queries
Trang 2- Trong mỗi trình duyệt có các thuộc tính css cho từng tag HTML là khác nhau
Ví dụ tag TD của IE thì default text-align là center, còn Firefox là left., Chính vì
sự khác nhau này mà bạn cần làm cho nó giống nhau về giá trị các thuộc tính này cho mọi trình duyệt và đó là điều mà CSS Reset cần làm
- Khi view website của bạn bằng nhiều thiết bị khác nhau như trình duyệt, và khi xem thấy thích muốn in ra 1 bản giấy và các media này khác nhau nên cần phải
có media queries để định riêng cho 1 số thiết bị khác nhau đó (Ví dụ có media = screen, media = print - máy in -, media all - mọi loại thiết bị-)
b <script src="js/libs/modernizr-1.7.min.js"></script>
- File JS này modernizr-1.7.min.js có nhiệm vụ gì? và tại sao nó lại nằm ở trên
phần tag head của document và lại nằm trên các JS của khác của document?
- modernizr-1.7.min.js dùng để chạy trước tiên khi event load của document
xảy ra thì nó sẽ làm nhiệm vụ wrapper các tag của HTML5 nếu như trình duyệt
đó chưa hổ trợ HTML5 và giao diện của website không bị bể khi gặp các tag HTML5 này (vẫn render 1 cách bình thường như hầu hết các tag khác của
HTML)
- Vì sao include file JS này trước tiên và các file JS khác của bạn nằm dưới footer hoặc dưới cái file này? Lưu ý là đoạn này phải thực hiện trước hết thì code JS của bạn bên dưới mới có thể chạy được tốt (ví dụ các event của các tag HTML5 nhưng trên IE6, IE7, IE8 không hổ trợ thì nó được hide đi và chỉ thể hiện
nội dung text chứa bên trong tag đó mà thôi Khi modernizr-1.7.min.js được
chạy trước thì nó làm cho các tag HTML5 này có các chức năng gần như 1 trình duyệt hổ trợ HTML5)
4 Phần nội dung trong tag BODY của document gồm có 3 phần chính
a Header: <header> … </header>
b Main: <div id=”main” role=”main”> ….</div>
Phần này bạn có thể tách nó ra thành từng phần nhỏ nữa tùy theo mục đích sử dụng
<div id=”content”>
<nav id=”breadcrumbs” role=”navigation”> </nav>
<div id=”main” role=”main”>
…
<div role="contentinfo”> … </div>
<div role=”article”> ….</div>
Trang 3</div>
c Footer: <footer> … </footer>
d Load javascript footer
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>window.jQuery || document.write("<script
src='js/libs/jquery-1.5.1.min.js'>\x3C/script>")</script>
<! scripts concatenated and minified via ant build script >
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<! end scripts >
<! [if lt IE 7 ]>
<script src="js/libs/dd_belatedpng.js"></script>
<script>DD_belatedPNG.fix("img, png_bg");</script>
<![endif] >
<script>
var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]]; // Change UA-XXXXX-X to be your site's ID
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t) [0];g.async=1;
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
s.parentNode.insertBefore(g,s)}(document,"script"));
</script>
Phần nội dung JS này bao gồm
- Load thư viện jquery ⇐ trước hết load từ
//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js nếu như không kết nối
được với google thì load tiếp ở local <script>window.jQuery ||
document.write("<script
src='js/libs/jquery-1.5.1.min.js'>\x3C/script>")</script> của website bạn đang build Vì sao phải
load từ google? Để tăng tốc độ load cho website (giảm request về ứng dụng web này) của bạn
Vì sao load jquery từ google nhưng không có http: phía trước dấu //
Trang 4Bằng thực nghiệm load cái file js này bằng 1 cái web localhost thu được kết quả:
Load: //ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js chỉ mất 31ms
Trong khi load: http: //ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js tốn
số ms >= so với không có http:
Theo suy đoán của mình thì
- Load plugins.js ⇐ dùng khi trình duyệt của bạn không có firebug nhưng vẫn
gọi các method của firebug như log, debug, warning, … vẫn không bị báo lỗi
- Load script.js ⇐ load nội dung JS của bạn cần viết thêm cho ứng dụng
- Load dd_belatedpng.js nếu trình duyệt của bạn là IE6 (không hổ trợ
transparent cho hình PNG)
- Load google analytic cuối cùng ⇐ dùng cho google raw content của bạn về cache của Google để khi người dùng tìm kiếm thì google trả kết quả về 1 cách chính xác hơn
Notes:
Nội dung này có 1 attribute khá quan trọng đó là role=” ” Vậy attribute này dùng
để làm gì?
- Nó dùng để cho Google SEO làm việc hiệu quả nhất với content của bạn cần Google SEO raw (tốt hơn cho việc tìm kiếm từ Google) Bạn có thể tìm hiểu thêm về attribute role của HTML5 tại đây
http://www.accessibleculture.org/research/html5-aria/
(Với sự hiểu biết của mình thì role=”main”, role=”contentinfo”, role=”article” sẽ giúp Google SEO định vị để phân tích nội dung chính của website trong tag này trước
và định vị role=”navigation” để raw các link của website tiếp theo.)
Bên cạnh các thành phần này còn có thêm các phần hổ trợ khác để website của bạn được hight performent
.htaccess need enable Apache module (hight performance)
• mod_setenvif.c (setenvif_module)
• mod_deflate.c (deflate_module)
• mod_filter.c (filter_module)
• mod_expires.c (expires_module)
• mod_rewrite.c (rewrite_module)