Series 5 file reset cực kì quan trọng dành cho thiết kế web (Phần I)

Khi thiết kế website, việc định hướng về trình duyệt phổ biến mà người dùng sử dụng là rất quan trọng. Mỗi trình duyệt sẽ có một style mặc định, và chúng sẽ không giống nhau. Khi bạn sắp xếp mọi thành phần của website thật đẹp trên trình duyệt này, thì có nghĩa rằng chúng sẽ hiển thị một cách “hổ lốn” trên trình duyệt khác và rồi khi đó bạn lại tự hỏi “Cái quái gì xảy ra vây?”, bạn sửa hiển thị trên trình duyệt kia và sẽ lại bất ngờ khi xem nó trên trình duyệt trước.

Để giải quyết vấn đề này, không có cách nào ngoài việc sử dụng một file reset.css. Nó sẽ reset các thông số, cấu hình của các trình duyệt về trạng thái tốt nhất để bạn thiết kế một cách chính xác nhất.

Có một số website cung cấp file reset.css này, để giảm bớt quá trình tìm kiếm của bạn, chúng tôi xin đưa ra 5 file reset.css phổ biến nhất để bạn chọn lựa ra thứ thích hợp nhất với mình.

Eric Meyer’s “Reset CSS” 2.0

Một trong những người tiên phong trong việc tạo ra phương pháp Reset CSS, Eric Meyer tạo ra một kiểu thiết lập mà được sử dụng trên hàng triệu website hiện nay. Hầu hết mọi người đều sử dụng phiên bản gốc mà Eric Meyer tạo ra, mặc dù điều này làm Eric Meyer khá là khó chịu và kịch liệt phản đối.

1. html, body, div, span, applet, object, iframe,
2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3. a, abbr, acronym, address, big, cite, code,
4. del, dfn, em, img, ins, kbd, q, s, samp,
5. small, strike, strong, sub, sup, tt, var,
6. b, u, i, center,
7. dl, dt, dd, ol, ul, li,
8. fieldset, form, label, legend,
9. table, caption, tbody, tfoot, thead, tr, th, td,
10. article, aside, canvas, details, embed,
11. figure, figcaption, footer, header, hgroup,
12. menu, nav, output, ruby, section, summary,
13. time, mark, audio, video {
14. margin: 0;
15. padding: 0;
16. border: 0;
17. font-size: 100%;
18. font: inherit;
19. vertical-align: baseline;
20. }
21. /* HTML5 display-role reset for older browsers */
22. article, aside, details, figcaption, figure,
23. footer, header, hgroup, menu, nav, section {
24. display: block;
25. }
26. body {
27. line-height: 1;
28. }
29. ol, ul {
30. list-style: none;
31. }
32. blockquote, q {
33. quotes: none;
34. }
35. blockquote:before, blockquote:after,
36. q:before, q:after {
37. content: '';
38. content: none;
39. }
40. table {
41. border-collapse: collapse;
42. border-spacing: 0;
43. }

Yahoo! (YUI 3) Reset CSS

Yahoo! YUI 3 là một thế hệ tiếp theo của thư viện JavaScript / CSS, viết chung bởi Yahoo! Developer Network, được sử dụng trên trang chủ Yahoo!. Nó kết hợp hơn năm năm phát triển thư viện chuyên dụng cho Yahoo!, bao gồm các thành phần cốt lõi CSS / JS, một bộ đầy đủ các tiện ích, thư viện Widget.

YUI 3 CSS giảm nhẹ phong cách không phù hợp của các yếu tố HTML của trình duyệt, để tạo ra một nền tảng phẳng mà trên đó có thể xây dựng các trang web và ứng dụng web.

1. html{
2. color:#000;
3. background:#FFF;
4. }
5. /*
6. TODO remove settings on BODY since we can't namespace it.
7. */
8. /*
9. TODO test putting a class on HEAD.
10. - Fails on FF.
11. */
12. body,
13. div,
14. dl,
15. dt,
16. dd,
17. ul,
18. ol,
19. li,
20. h1,
21. h2,
22. h3,
23. h4,
24. h5,
25. h6,
26. pre,
27. code,
28. form,
29. fieldset,
30. legend,
31. input,
32. textarea,
33. p,
34. blockquote,
35. th,
36. td {
37. margin:0;
38. padding:0;
39. }
40. table {
41. border-collapse:collapse;
42. border-spacing:0;
43. }
44. fieldset,
45. img {
46. border:0;
47. }
48. /*
49. TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
50. */
51. address,
52. caption,
53. cite,
54. code,
55. dfn,
56. em,
57. strong,
58. th,
59. var {
60. font-style:normal;
61. font-weight:normal;
62. }
63.  
64. ol,
65. ul {
66. list-style:none;
67. }
68.  
69. caption,
70. th {
71. text-align:left;
72. }
73. h1,
74. h2,
75. h3,
76. h4,
77. h5,
78. h6 {
79. font-size:100%;
80. font-weight:normal;
81. }
82. q:before,
83. q:after {
84. content:'';
85. }
86. abbr,
87. acronym {
88. border:0;
89. font-variant:normal;
90. }
91. /* to preserve line-height and se-lector appearance */
92. sup {
93. vertical-align:text-top;
94. }
95. sub {
96. vertical-align:text-bottom;
97. }
98. input,
99. textarea,
100. se-lect {
101. font-family:inherit;
102. font-size:inherit;
103. font-weight:inherit;
104. }
105. /*to enable resizing for IE*/
106. input,
107. textarea,
108. se-lect {
109. *font-size:100%;
110. }
111. /*because legend doesn't inherit in IE */
112. legend {
113. color:#000;
114. }
115. /* YUI CSS Detection Stamp */
116. #yui3-css-stamp.cssreset { display: none; }

(Còn nữa)

Trong khi chờ đợi những file reset.css tiếp theo. Bạn có thể xem qua những bài viết khác như 3 phong cách chữ cực đẹp làm bởi CSS để biết cách sử dụng CSS để tạo ra những phong cách cho nội dung văn bản trong website.