[Tips] Normalize.css - Thiết kế web dễ dàng hơn với Reset CSS

Các trình duyệt hiện nay đều có các thông số mặc định riêng cho cấu trúc trang web, việc này đôi lúc gây khó khăn cho người thiết kế, khi cần viết một trang web hiển thị giống nhau trên tất cả trình duyệt.
Reset CSS là thuật ngữ nói đến một tệp, một đoạn CSS đồng bộ các tham số mặc định của các trình duyệt.


Ví dụ một mã reset CSS mà bạn thường gặp:

Code:

* {margin: 0; padding: 0;}

Ngoài ra, bạn cũng cần reset thuộc tính CSS khác ở các thẻ HTML mà bạn dùng trong thiết kế của mình. Bạn có thể tự làm việc này, tuy nhiên bạn không cần vất vả thế, khi mà các tệp reset CSS đã được làm và chia sẽ khá phổ biến. Các tệp này được chia sẽ cũng khác nhau tùy theo tác giả, trong số đó thì tệp normalize.css được đánh giá cao và sử dụng phổ biến hơn cả.

Một số thông tin

Normalize.css là một dự án thực hiện bởi Nicolas Gallagher, và Jonathan Neal.
Hỗ trợ đầy đủ các thuộc tính HTML5, và được sử dụng trong các dự án lớn như Bootstrap, HTML5 Boilerplate, YUI3, TweetDeck, Soundcloud, .... Không như phần lớn các tệp reset css khác, nó không reset toàn bộ mà vẫn giữ lại các thuộc tính css hữu ích, đồng bộ các thuộc tính css khác nhau trên các trình duyệt phổ biến và trên các thiết bị như di động, máy tính bảng.

normalize.css hiện có có 2 phiên bản.

Normalize.css v1 hỗ trợ trình duyệt cũ (IE 6+, Safari 4+)

• Google Chrome
  
• Mozilla Firefox 3+
  
• Apple Safari 4+
  
• Opera 10+
  
• Internet Explorer 6+
  

Normalize.css v3

• Google Chrome (latest)
  
• Mozilla Firefox (latest)
  
• Mozilla Firefox 4
  
• Opera (latest)
  
• Apple Safari 6+
  
• Internet Explorer 8+
  

Bạn có thể download và theo dõi các bản cập nhật mới nhất tại: http://necolas.github.io/normalize.css/

Dưới đây là code của Normalize.css đã rút gọn(loại bỏ các chú thích), bạn có thể chèn vào phần đầu của css diễn đàn:
ACP >> Display >> Pictures and Colors >> Colors >> CSS Stylesheet

Code:

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

Bạn có thể bỏ bớt đoạn CSS cho các tag HTML mà bạn không sử dụng.

Hoặc đặt file Normalize.css vào Temp overall_header:
ACP >> Display >> Templates >> QLTT >> overall_header

Tìm:

Code:

{T_HEAD_STYLESHEET}

Và đặt trước nó:

Code:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" type="text/css" />

Cập nhật Normalize.css version 3.0.0

Zzbaivong wrote:Cập nhật Normalize.css version 3.0.0

diễn đàn hoạt động bình thường. vậy nếu đặt css này thêm vào có lợi gì không bạn? vì kiểu gì cũng load nặng hơn nhiều

bluehnvn wrote:

Zzbaivong wrote:Cập nhật Normalize.css version 3.0.0

diễn đàn hoạt động bình thường. vậy nếu đặt css này thêm vào có lợi gì không bạn? vì kiểu gì cũng load nặng hơn nhiều

Bản thân CSS gốc của forumotion cũng đã có những đoạn reset CSS, fix lỗi trình duyệt cũ, nên nếu bạn không có nhu cầu thì không bắt buộc dùng nó.
Bạn cần dùng Normalize.css khi bạn có đòi hỏi cao về giao diện, cần hiển thị ổn định ở nhiều thiết bị, nhiều trình duyệt.
Nó sẽ cực kỳ cần thiết nếu bạn định dùng HTML5 và Responsive Web Design để thiết kế skin.
Hơn nữa chỉ vài dòng CSS thế này cũng không tính là nặng so với lợi ích nó mang lại.

Zzbaivong wrote:

bluehnvn wrote:

Zzbaivong wrote:Cập nhật Normalize.css version 3.0.0

diễn đàn hoạt động bình thường. vậy nếu đặt css này thêm vào có lợi gì không bạn? vì kiểu gì cũng load nặng hơn nhiều

Bản thân CSS gốc của forumotion cũng đã có những đoạn reset CSS, fix lỗi trình duyệt cũ, nên nếu bạn không có nhu cầu thì không bắt buộc dùng nó.
Bạn cần dùng Normalize.css khi bạn có đòi hỏi cao về giao diện, cần hiển thị ổn định ở nhiều thiết bị, nhiều trình duyệt.
Nó sẽ cực kỳ cần thiết nếu bạn định dùng HTML5 và Responsive Web Design để thiết kế skin.
Hơn nữa chỉ vài dòng CSS thế này cũng không tính là nặng so với lợi ích nó mang lại.

Cảm ơn bạn nhiều nhé. Bài viết ý nghĩa về lâu dài thật