Lần này, các bạn sẽ được biết đến những điều cần tránh trong khi viết mã HTML và CSS nếu bạn muốn website của mình hiển thị tốt ở hầu hết các browser.

1. Không bao giờ sử dụng padding cho các đối tượng có độ rộng cố định (fixed width)

Đây là nguyên tắc cơ bản vì cách căn lề của Internet Explorer khác với các trình duyệt khác và cũng là 1 lỗi của trình duyệt này. Lỗi này được gọi là “Box Model Bug” hình dưới là một hình ảnh minh họa cho lỗi này.

Bạn có thể thấy rằng độ rộng của đối tượng “được” cộng thêm khi hiển thị ở IE nếu như có padding. Vậy đơn giản là không dùng padding cho các đối tượng có độ rộng cố định (fixed width).

2. Cố định cỡ chữ bằng đơn vị % và em

Thông thường các browser hiển thị cỡ chữ theo cách khác nhau nếu như bạn chưa định cỡ cho chúng. Khi mới bắt đầu học CSS, chúng ta thường định dạng cỡ chữ theo cách sau:

PLAIN TEXT

CSS:

Dòng mã là cách cơ bản, nhưng vấn đề là ở IE người xem sẽ không thể thay đổi cỡ chữ. Điều này rất cần thiết với những người để độ phân giải cao. Nhưng bạn đừng lo, có một giải pháp khác tốt hơn, hãy dùng % và em để định dạng cỡ chữ như sau:

PLAIN TEXT

CSS:

3. Không nên dùng đơn vị 100%

Sử dụng 100% để căn chiều rộng của một đối tượng rất dễ gặp rủi ro trong việc bố trí kết cấu của website vì mỗi trình duyệt hiển thị chiều rộng 100% rất khác biệt. Theo kinh nghiệm bản thân thì những lần thử định vị 100% thì gần như rất khó có thể đạt được kết quả tốt nhất. Hãy chọn một con số khác có thể là nhỏ hơn 100% (95% có thể sẽ tốt hơn). Hoặc đơn giản hơn là hãy… cố định nó.

4. Không dùng 0px để định chiều cao

Các browser không thích việc bạn chọn 0px để định chiều cao cho đối tượng và thưởng hiển thị nó theo cách bạn… không muốn chút nào. Nếu có thể hãy thay nó bằng 1px sẽ tốt hơn rất nhiều.

PLAIN TEXT

CSS:

5. Không dùng “>” trong CSS

Mình đã từng thấy có người, thậm chí rất nhiều người viết mã CSS như sau:

PLAIN TEXT

CSS:

Với dòng mã CSS như trên IE6 sẽ không hiểu và không thể hiển thị được định dạng trên. Hãy dùng đoạn mã dưới đây, sẽ an toàn hơn rất nhiều.

1. Xây dựng một nền tảng để thay thế các phương thức cổ điển của Web. Tổ chức World Wide Web Consortium (W3C) tạo ra CSS để thay thế các bảng (table), các thẻ font, frame và các dạng “hack” thẻ HTML để tạo hiệu quả cho website Với tôi, CSS mang lại hiệu quả công việc cao hơn. Nhìn cái tag font rối rắm là tôi thấy nản. Coder muốn sửa chữa gì cũng mệt vì sự rối rắm của nó. Trong trường hợp muốn thay đổi về thiết kế của code, bạn lại đụng tới khá nhiều mảng của coder. Còn nếu sử dụng css, việc chỉnh sửa rất đơn giản, không phụ thuộc vào coder.

2. Tăng tốc độ website.
Thời gian load một website sẽ nhanh hơn. Dung lượng của một trang web sẽ nhẹ hơn 50% so với cách làm cổ điển.
Theo cơ sở của DOM thì:
- Table: web browser phải load cả <table>…</table> thì mới có thể dựng thành DOM tree và hiển thị ra màn hình.
- Div: chỉ cần load <div>..</div> là đã có thể dựng được DOM tree và hiển thị.
Như vậy, quá trình hiển thị 1 trang table-less sẽ nhanh hơn 1 trang table. Hơn nữa, cùng 1 cấu trúc nhưng DOM tree của table sẽ lớn và phức tạp hơn của div rất nhiều, điều này cũng ảnh hưởng đến bộ nhớ và tốc độ xử lý của browser.
Chưa kể, cùng 1 trang nhưng nếu dùng table thì code HTML sẽ lớn hơn dùng div. Code CSS có dùng div có thể sẽ lớn hơn, nhưng CSS được load 1 lần, sau đó được cache trên client.

3.Thời gian phát triển website nhanh hơn
Thông qua một thao tác về thiết kế: thay đổi CSS, thì hàng ngàn trang web sẽ được thay đổi theo.

4. Typography thể hiện ngầu hơn
CSS có khả năng kiểm soát mạnh mẽ hơn tag FONT rất nhiều. Chúng ta có thể kiểm soát chiều cao giữa các dòng, thay màu font, các font theo họ – tức là không có font này, sẽ tự chọn font tiếp theo trong danh sách, và nhiều nhiều hơn thế.

5. Dễ viết
Bạn có thể tạo và thay đổi CSS dễ dàng như khả năng làm code HTML thủ công.

6.Khả năng phát triển.
Sử dụng CSS hiệu quả sẽ tương tự như sử dụng cấu trúc nội dung với HTML. Với cấu trúc HTML, chúng ta chỉ giữ lại các tag cho đoạn văn, các tag tiêu đề (H1 -> H6), bảng dành cho một số ít bảng biểu đặc biệt, bạn sẽ tăng khả năng đáp ứng lượng khách viếng thăm mà không cần xây dựng một phiên bản độc lập để giảm tải.

7. Thiết kế dành cho in ấn cũng đẹp như dành cho web. CSS hỗ trợ tốt cho một khi bạn cần in ra, chẳng hạn in ấn, hay PowerPoint

8. Dễ kiểm soát thông qua vị trí các thành phần trên web. Việc đánh ID trên từng thẻ DIV, sẽ dễ dàng hơn cho bạn khi cần kiểm soát và hỗ trợ tốt cho Ajax.

9. Các trang web tách biệt phần thiết kế và nội dung. Giữ lại thiết kế trong một file liên kết, bạn có thể tiết kiệm nhiều thời gian khi cần thêm bớt các thành phần của một trang web.

10. Cải thiện vị trí trong các website tìm kiếm. Với cách sử dụng HTML cho phần nội dung mà thôi, bạn đã loại bỏ các tag định dạng phức tạp cho thiết kế. Điều này là cho các website tìm kiếm index (tạo chỉ mục) website của bạn tốt hơn, và sẽ là tăng thứ hạng của website.

Ảnh minh họa

Để tạo ra hiệu ứng cho chữ trước hết chúng ta cần tạo ra một trang HTML có định dạng như sau:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css"
  href="/textshadow.css" media="all" />
  <title>CSS Text Shadow</title>
  </head>
  <body>

    <div id="wrapper">

    <div id="css-shadow">
      <h1>CSS Text shadow</h1>
      <h1>CSS Text shadow</h1>
    </div>

    <p>Lorem ipsum dolor sit amet consectetuer pretium mattis.</p>
    </div>

  </body>
</html>

Để có thể định vị được các dòng text chúng ta cần định nghĩa cho thẻ <div> một kích thước nhất định, giả sử trong bài viết này tôi định nghĩa là chiều rộng là 300 pixel, chiều cao là 25 pixel. Mã CSSCascading Style Sheets như sau:

#css-shadow {
  margin: 0;
  padding: 0;
  position: relative; /* Dùng để định vị chữ */
  width: 300px;
  height: 250px;
}

Tiếp đó chúng ta sẽ định nghĩa vị trí mà màu sắc cho các dòng text, để có thể nhìn thấy bóng đổ thì ta sẽ định nghĩa cho dòng chữ ở dưới là màu xám và cách dòng chữ ở trên 2 pixel về phía phải và phía dưới. Cụ thể mã CSSCascading Style Sheets như sau:

#css-shadow h1.font {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  color: #CC0000;
}

#css-shadow h1.shadow {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 0;
  color: #C0C0C0;
}

Một điều mà chúng ta cần hết sức chú ý đó là thuộc tính z-index:. Trong trường hợp chúng ta muốn đặt lớp (layer) nào ở phía trên thì chúng ta sẽ đặt thuộc tính z-index của lớp đó lớn hơn các lớp (layer) khác.

1. Dùng kỹ thuật Sorthand để thực hiện viết mã CSS.

Như tôi đã trình bày trong bài viết “Cách viết giản lược trong CSS” thì việc sử dụng kỹ thuật này rất tiện ích cho quá trình bạn viết mã CSSCascading Style Sheets.

Ví dụ: Khi style cho font chữ trong CSS thông thường bạn sẽ viết như sau:

font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: Verdana, sans-serif;

Nếu áp dụng kỹ thuật Sorthand thì chúng ta chỉ cần phải viết.

font: bold italic small-caps 1em/1.5em verdana, sans-serif;

2. Đặt hai class cho cùng một đối tượng

Thông thường khi bạn viết mã HTML bạn chỉ đặt một class cho một đối tượng. Tuy nhiên điều đó không có nghĩa rằng bạn chỉ được phép đặt duy nhất một class cho một đối tượng. Định dạng HTML cho phép bạn đặt 2 class cho cùng một đối tượng.

<div>...</div>

Như các bạn đã thấy ở trên nếu bạn muốn đặt 2 class cho cùng một đối tượng thì tên của class thứ nhất phải cách tên của class thứ hai bằng khoảng trống. Trong trường hợp hai class này đều được đặt cùng một thuộc tính thì đối tượng này sẽ được định dạng theo thuộc tính nào được viết sau.

Ví dụ cả hai class đều định nghĩa màu nền cho đối tượng

div.class1 {
background: #CC0000;
}

div.class2 {
background: #00000FF;
}

Trong trường hợp như trên thì đối tượng sẽ nhận thuộc tính background của class2. Vì class2 được định nghĩa sau và trình duyệt sẽ nhận giá trị của thuộc tính này.

3. Các giá trị mặc định của đường viền

Trong quá trình bạn style một đối tượng nào đó có thuộc tính border bạn sẽ liệt kê ra các giá trị của thuộc tính border đó. Vd:

border: 2px solid #000;

Vậy cái gì sẽ hiện thị giá trị mặc định?

1. Border-style: Trong quá trình bạn định nghĩa đường viền (border) cho các đối tượng HTML, nếu như đối tượng phía trước được định nghĩa kiểu border như thế nào thì các đối tượng sau cũng được định nghĩa kiểu border đó ( trong trường hợp bạn không nêu ra kiểu của các đối tượng định nghĩa sau )
2. Border-width: Khi bạn không định nghĩa rõ độ dày của đường viền cho đối tượng bạn định style thì trình duyệt sẽ lấy mặc định độ dày của đường viền đó là 1 pixel.
3. Border-color: Màu của đường bao ngoài sẽ có màu mặc định là màu của đối tượng được bao ( trong trường hợp bạn bỏ qua thông số màu của đối tượng )

4. Định dạng CSS cho tài liệu ở dạng in ấn.

Hầu hết những Web Designer ở Việt Nam rất ít quan tâm tới vấn đề này, nhưng thực chất nó lại là một trong những vấn đề khá quan trọng trong quá trình thiết kế Web. Khi bạn bắt tay vào thiết kế thông thường bạn chỉ quan tâm tới nó hiện thị trên thiết bị đầu cuối là màn hình như thế nào, mà bạn ít khi quan tâm tới khi Website của bạn sẽ được in ra như thế nào? Trong trường hợp người duyệt Web muốn lưu lại những thông tin trên Website của bạn bằng những bản in thì bắt buộc người duyệt cần phải mất thời gian cho việc lựa chọn và xóa bỏ những đối tượng không cần thiết.

Để khắc phục điều đó bạn chỉ cần thêm một file CSS phục vụ riêng cho việc in ấn vào trong Website của bạn. Cách thức cho như sau, trên phần header của bạn ngay sau dòng lệnh chèn file CSSCascading Style Sheets bạn sẽ thêm một dòng tương tự dòng trên những có một số chỗ khác biệt.

<link type=”text/css” rel=”stylesheet” href=”/stylesheet.css” media=”screen” /> <link type=”text/css” rel=”stylesheet” href=”/printstyle.css” media=”print” />

Hai chỗ khác biệt đó là tên file CSS (printstyle.css) được sử dụng cho chế độ in và thứ hai là thuộc tính media của link phải đặt là “print” (media=”print”)

Trong file CSS này bạn sẽ tự động tắt các thành phần không cần thiết (vd: hình quảng cáo, phần tỉ giá, thời tiết,..mà thay vào đó là bạn cho hiển thị những phần nội dung mà người xem quan tâm.

Theo cssyeah

2. Không chèn các đoạn mã css vào bên trong tài liệu HTML. Để thực hiện công việc này hãy sử dụng các class.

3. Hãy định nghĩa các đặc tính định dạng thường dùng một lần duy nhất.

4.Bạn hoàn toàn có thể áp dụng nhiều class cho một một HTML element.

5. Sử dụng selector hierarchical thay cho việc mở rộng thêm các class.

6. Hãy Sử dụng external style sheet. Chỉ sử dụng internal style sheet trong trường hợp bạn muốn có những ngoại lệ riêng cho một trang HTML nào đó.

7.Nếu cần, hãy chia nhỏ file .css thành nhiều file tùy theo ý đồ thiết kế hoặc thói quen, miễn là hợp lý và logic.

Theo glorevenhite’s blog