7 lưu ý khi thiết kế web với CSS và HTML!

1. Không sử dụng các thẻ HTML nhằm mục đích định dạng hay trình bày nội dung. Hãy nhớ rằng, các thẻ HTML chỉ phục vụ cho việc đánh dấu tài liệu, còn các thuộc tính của CSS mới được dùng cho việc định dạng nội dung.
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.

Web Standards

Hôm nay trong lớp lại nghe tới chuyện việc hiển thị web ở mỗi trình duyệt mỗi khác, IE khác, Firefox khác, Safari lại càng khác… mình lại nghĩ tới Web Standards. Cũng chẳng mới mẻ gì, khái niệm này mình cũng nghe lâu rồi, và cũng cố gắng áp dụng, à không tuân thủ mỗi khi “làm web” – dùng từ “làm” thay cho “design” bởi lẽ mình thấy những gì mình làm ra chưa thể gọi là “nghệ thuật”, mà không phải là “nghệ thuật” – sao có thể gọi là design.

Dù bạn đã từng làm công việc phát triển một ứng dụng web hay chỉ là những người mới tiếp cận công việc đầy thú vị này, thì Web Standard vẫn thật sự là một vấn đề bạn cần lưu tâm. Nó sẽ giúp bạn có được một “ấn phẩm web” có “chất lượng”, hoạt động ổn định trên hầu hết các trình duyệt web thông dụng, bạn sẽ không còn lo lắng quá nhiều về vấn đề người dùng sẽ dùng trình duyệt nào, hệ điều hành nào…. để sử dụng ứng dụng web mà bạn đã tạo ra. Thông thường thì việc phát triển các ứng dụng web “tương thích” với nhiều trình duyệt… sẽ phát sinh thêm những dòng code để phát hiện người dùng đang sử dụng trình duyệt nào và ứng với mỗi trình duyệt như thế sẽ có những xử lý khác nhau, tăng số lượng dòng code đồng nghĩa với chi phí phải trả cho nhân viên sẽ cao hơn. Tuy nhiên, do vấn đề lợi nhuận nên công việc đó thường bị xem nhẹ, thậm chí bỏ đi. Hậu quả là một phần nội dung hoặc những thao tác như ý đồ thiết kế không được thực hiện. Chính vì vậy, việc tuân thủ Web Standard sẽ góp phần giảm thiểu chi phí cho việc phát triển một cách đáng kể. Thậm chí ứng dụng web của bạn còn có khả năng phục vụ cho nhiều đối tượng người dùng, đặc biệt là dành cho cả người khiếm thị.

Vậy thực chất Web Standards là gì? Web Standards là một tập hợp các tiêu chuẩn, chuẩn mực về công nghệ, ngôn ngữ… đảm bảo cho một trang web có thể hoạt động tốt trên mọi nền tảng phần mềm hay phần cứng. Không những vậy, nó còn hạn chế được chi phí phát sinh khi tiến hành phát triển, bảo trì trang web.

Vậy tuân thủ Web Standards sẽ đem lại lợi ích gì?

• Trước mắt là vấn đề hiển thị. Mọi thứ sẽ tương đương nhau cho dù bạn dùng trình duyệt nào, hệ điều hành nào, trên PC, thiết bị PDA hay các điện thoại có chức năng duyệt web và thậm chí cả công tác in ấn nữa.
• Tiếp theo dĩ nhiên là vấn đề lợi nhuận như đã phân tích ở trên.
• Giải quyết được vấn đề cộng tác, bạn hình dung một ứng dụng web được phát triển bởi nhiều cá nhân có trình độ, tư duy, phương pháp tiếp cận khác nhau… chưa kể, công việc được chia thành nhiều công đoạn, quy trình phát triển khác nhau… do đó cần phải tạo ra những quy ước để các cá nhân có thể hợp tác “ổn thỏa” với nhau. Do đó, tốt nhất là sử dụng chuẩn
• Một điều nữa đó là nó hứa hẹn ứng dụng web sẽ được thực thi nhanh hơn (dù chưa được kiểm chứng rõ ràng). Lý do có thể là do số lượng dòng code được giảm thiểu, trình duyệt không còn phải xử lý những đoạn code lạ do các kỹ thuật hack (như hack css) gây ra.

Tuân thủ Web Standards như thế nào? Đây thực sự là một câu hỏi hay! Trước khi nói về cách thức tuân thủ Web Standards chúng ta cần biết rằng, khi nói tới “Standard” là nói tới các ngôn ngữ được sử dụng trong Web Standards. Cụ thể là

• Ngôn ngữ có cấu trúc và mang tính ngữ nghĩa (Structural and Semantic Languages): Đó chính là HTML 4.01, XHTML 1.0 và XML 1.0
• Ngôn ngữ trình bày (Presentation Languages): Đó chính là CSS level 1, 2, 2. Ngôn ngữ này giúp chúng ta có thể dễ dàng và linh động trong việc định dạng màu sắc, kích thước, vị trí… của các thành phần trong ứng dụng web của bạn.
• Mô hình đối tượng (Object Model): Đó là DOM level 1, 2, 3. Mô hình này cho phép chúng ta thao tác được với tất cả các đối tượng theo mô hình cây.
• Ngôn ngữ kịch bản (Scripting Language): Đó chính là ECMAScript được biết với cái tên thông dụng là JavaScript dù rằng gọi như thế là không đầy đủ. Loại ngôn ngữ này thường được biết đến với việc tạo ra các hiệu ứng, các xử lý hoạt động tương tác ở phía client.
• Ở một mức cao hơn, bạn nên biết đến phiên bản mở rộng của HTML và XHTML, các ngôn ngữ đánh dấu mở rộng như MathML. Tuy nhiên, tạm thời chúng ta chỉ cần quan tâm tới 4 loại ngôn ngữ ở trên là đủ.

Vậy là bạn đã đoán được ý đồ của việc tuân thủ Web Standards rồi đấy! Chỉ cần bạn sử dụng các ngôn ngữ trên cho các ứng dụng web của bạn một cách thành thục và cố gắng phát huy tối đa lợi thế mà mỗi ngôn ngữ trên đem lại. Tuy nhiên cần chú ý tới những yêu cầu đi kèm đối với việc sử dụng mỗi ngôn ngữ. Chẳng hạn như các quy định khi làm việc với XHTML đó là:

• Có thẻ mở thì phải có thẻ đóng. Ví dụ: <html>…</html>
• Đối với các loại thẻ rỗng (empty tags) như <br>, <hr>… được sử dụng dưới hình thức <br />, <hr /> hoặc có thẻ đóng </br>, </hr>..
• Các giá trị của các thuộc tính phải được bao bởi cặp dấu nháy đơn hoặc nháy kép.
• Thẻ mở trước phải được đóng sau. Tức là các thẻ có thể được lồng vào nhau nhưng không được chồng lên nhau. Ví dụ: <b><i>Hello World!</b></i> là không hợp lý. Phải là: <b><i>Hello World!</i></b>

Bạn đã phần nào thấy được sự tuyệt vời mà Web Standards đem lại, việc tuân thủ chúng có vẻ cũng đơn giản. Tuy nhiên, cũng như bất kỳ những vấn đề gì, việc tuân thủ Web Standards cũng có những mặt hạn chế và bất cập.

• Đầu tiên, bạn sẽ phải thay đổi tư duy khi phát triển ứng dụng web. Một điều thường thấy là các trang web vẫn được thiết kế theo hướng table, nghĩa là bạn sử dụng table để trình bày bố cục (layout) của trang web. Tức là phần code HTML của trang web thường có dạng <body><table width=”100%”>…</table></body>… hoặc tương tự như thế. Cách thiết kế này gọi là “table-based”. Để thay thế nó, bạn nên biết và sử dụng cách thiết kế “boxed-model” mà bạn có thể tìm thấy nó trong bất cứ tài liệu nào về CSS. Còn vấn đề tại sao ư, việc layout cho trang web của bạn theo hướng table-based sẽ khiến trang web của bạn load chậm hơn, nó làm cho trang web của bạn mất đi tính “accessible”, tức là bạn không thể lướt web bằng bàn phím hoặc trên các thiết bị PDA, điện thoại chưa kể, bạn không thể tận dụng tối đa những điều tuyệt vời mà CSS đem lại, mà trong chừng mực của bài viết này không thể trình bày kỹ càng. Một cách đơn giản, hãy sử chúng vì nó là “chuẩn”.
• Bạn phải học cách phân tách công việc trình bày và xử lý. Một cách nôm na đó là khi bạn muốn thay đổi định dạng màu sắc, kích thước của một phần tử, việc mà bạn cần làm đó là chỉnh sửa file CSS chứ không phải là chỉnh sửa các đoạn code xử lý.
• Một bất lợi nữa đó là hiện nay các trình duyệt vẫn chưa có sự “ăn ý” với nhau. Giữa chúng vẫn còn một khoảng cách nhất định. Bạn hoàn toàn có thể nhận ra điều này khi ứng dụng boxed-model trên các trình duyệt IE và đem so sánh với Firefox, Nescape, Opera, Safari… Bạn sẽ nhận thấy rằng, chính IE mới là kẻ “tội đồ”. Vì vậy hãy sử dụng song song các trình duyệt.
• Đó là chưa kể tới việc bạn phải tốn công nghiên cứu Web Standard là cái gì nữa đó! Nhưng đừng quá lo lắng, mọi thứ khi mới bắt đầu đều gặp khó khăn cả. Dần dần, bạn sẽ thấy những điều tuyệt vời mà Web Standards đem lại.

Bạn đã từng quan tâm tới chất lượng sản phẩm liệu có đáp ứng được yêu cầu của bạn như hứa hẹn của nhà sản xuất, bạn đã từng quan tâm tới ISO của một sản phẩm, của một công ty, của một tổ chức; đã từng nghe tới CMMi của một công ty phần mềm… vậy hãy quan tâm tới Web Standard.