Chỉnh sửa CSS theo chuẩn HTML5 (W3C)

Thiết kế một trang web/blog theo chuẩn HTML5 giúp trang của bạn SEO tốt hơn. Tất nhiên nhiều người chỉ chú ý đến chuẩn HTML5 (W3C) của XML mà quyên mất răng trong trang web còn một thành phần khác cấu tạo nên nó, đó là CSS. Về cơ bản chỉnh sửa lỗi W3C liên quan đến CSS đơn giản hơn XML vì đơn giản bạn chỉ cần bỏ đi những thuộc tính chuẩn W3C hiện nay không hỗ trợ là được.

» Làm thế nào để biết trang của bạn có chuẩn hóa CSS theo W3C hay không?

Rất đơn giản bạn chỉ cần truy cập vào trang bên dưới và điền tên trang web/blog của bạn vào và bấm check để kiểm tra xem CSS của bạn đã chuẩn hóa theo W3C hay chưa:

http://jigsaw.w3.org/css-validator/validator.html.en

- Nếu trang của bạn đã chuẩn w3c sẽ có một thông báo như bên dưới:

» Chuẩn hóa HTML5 (W3C) có những yêu cầu nào.

Thông thường sẽ có 2 phần trong cấu tạo một tran web cần chuẩn hóa W3C là:

• Chuẩn hóa XML (code dưới dạng HTML)
• Chuẩn hóa CSS (đoạn code trước thẻ ]]><b:skin> và trong cặp thẻ <style>

Trong khuôn khổ bài viết này mình chỉ giới thiệu đến các bạn cách Chuẩn hóa CSS valid HTML5 (W3c). Để chỉnh sửa HTML chuẩn hóa HTML5 thì các bạn đọc thêm bài viết sau nha:

Cách thiết kế code XML của Blogspot chuẩn hóa HTML5 (W3C)

» Làm sao để sửa lỗi css theo chuẩn W3C

1. Không thêm css vào trong thẻ XML
- Nhiều người sai lầm khi tiến hành cho css trực tiếp vào trong thẻ xml thông qua thẻ style="thuộc tính css" ví dụ đoạn code hình ảnh bên dưới là sai:

<img alt="Mô tả ảnh" src="URL_ANH" title="Tiêu đề ảnh" style="border:2px;background:#eee"/>

- Trường hợp này viết đúng bạn phải thêm một class hoặc id và chèn css thông qua class hoặc id đó. Ví dụ vẫn trường hợp chèn ảnh trên.

<img alt="Mô tả ảnh" src="URL_ANH" title="Tiêu đề ảnh" class="cssanh"/>

và định dạng hình ảnh thông qua thuộc tính class chèn trước thẻ ]]></b:skin> như sau:

.cssanh{border:2px;background:#eee}

2. Sử dụng tham số không đúng.

- Trong CSS có một số thuộc tính có số giới hạn cụ thể do vậy nếu bạn sử dụng nó không đúng nó sẽ báo lỗi w3c.

 Ví dụ: Thuộc tính opacity có giá trị lớn nhất là opacity:1 nhưng bạn lại để opacity:2 là sai. Giá trị được chấp nhận nằm trong khoảng opacity:0 đến opacity:1

3. Sử dụng hình ảnh background không đúng

Base64 image là một hình thức mã hóa hình ảnh được khá nhiều người sử dụng tuy nhiên CSS chuẩn w3c không sử dụng các hình ảnh mã hóa dưới dạng base64 image. Do vậy nếu sử dụng hình ảnh làm hình nền thì bạn nên chọn một hình ảnh và tải nó trực tiếp lên host của bạn và thêm vào nha.

4. Xóa bỏ Styleseet css mặc định của blogger.
- Bình thường blogger cung cấp cho chúng ta 2 đoạn mã CSS. Bạn có thể thấy 2 đoạn mã này khi xem nguồn của trang blog của bạn như sau:

<link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/3841957138-widget_css_bundle.css' />
<link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=1284053134771667067&zx=8df275b9-8201-444a-9f80-f8a0563c7851' />

- 2 file trên có tác dụng định dạng một số tiện ích mà blogger cung cấp như: Popularpost, Archive,feed, search,.... Tuy nhiên nếu để 2 file này hoạt động thì khi kiểm tra w3c bạn sẽ thấy phát sinh rất nhiều lỗi, vì trong đó nó sử dụng rất nhiều thuộc tính css mà chuẩn w3c (html5) không hỗ trợ. Vậy để hết thông báo lỗi đó bạn phải ngăn không cho 2 tiện ích này hoạt động.

- Để xóa 2 file css đó bạn chỉ cần thêm đoạn mã bên dưới vào trước đoạn <b:skin><![CDATA[/*  trong mẫu của bạn và lưu lại.

&lt;!--<style type='text/css'/>--&gt;

- Lưu ý: Khi chèn đoạn mã trên vào trong mẫu của bạn đồng nghĩa với việc bạn vô hiệu hóa 2 đoạn mã css của blogger, tức là lúc này một số tiện ích mà blogger cung cấp sẽ hiển thị không theo hàng lối (nếu không muốn nói là linh tinh). Do vậy nếu thêm đoạn này bạn phải viết mã css mới cho những tiện ích đó để định dạng lại nó.

- Điển  hình của việc thêm đoạn mã trên là avantar comment sẽ không hiển thị. Do vậy có 2 cách khắc phục lỗi này là:
+ Cách 1: Bạn tìm đoạn code:

<data:comment.authorAvatarImage/>

Và thay thế nó thành:

<img expr:src='data:comment.authorAvatarSrc'/>

+ Cách 2: bạn thêm đoạn mã bên dưới vào trước thẻ </head> (đoạn mã này được Duypham viết)

<script type='text/javascript'>var cL=document.getElementById('ID-Comment');c=cL.getElementsByTagName('span');if(c){for(z=0;z&lt;c.length;z++){f=c.item(z).innerHTML;if(f.indexOf('style="')!=-1){f=f.replace(/src="http:\/\/img1.blogblog.com\/img\/blank.gif"/,'');f=f.replace(/display: none/i,'');f=f.replace(/\/s512-c\//,'/s45-c/');f=f.replace(/longdesc=/i,'src=');c.item(z).innerHTML=f}}}</script>

5. Lỗi "is an unknown vendor extension" sử dụng thuộc tính css mà w3c không hiểu.

- Như các bạn đã biết hiện nay có rất nhiều trình duyệt như firefox, chroome, opera, safari,ie,.. Mỗi loại này có một hình thức hiển thị và hiểu css khác nhau. Do vậy khi thiết kế người ta thường thêm vào trước một số thuộc tính css để các trình duyệt có thể hiểu. Nhưng w3c thì không nghĩ vậy, tất cả những thuộc tính dành riêng cho từng trình duyệt đều không chuẩn w3c như:

• Thuộc tính bắt đầu bằng dấu gạch ngang dưới ( _ ) dành cho IE ví dụ: _width:100px hay _padding:0px,....
• Thuộc tính bắt đầu bằng -moz dành cho trình duyệt firefox ví dụ: -moz-inline-box, -moz-box-orient, -moz-border-radius, -moz-transition, -moz-user-select,....
• Thuộc tính bắt đầu bằng -o dành cho trình duyệt opera ví dụ:  -o-transition, -o-linear-gradient, ....
• Thuộc tính bắt đầu bằng -ie dành cho trình duyệt internet explorer như: -ie-box-shadow, ....
• Thuộc tính bắt đầu bằng -webkit dành cho trình duyệt google chroome như: -webkit-box-shadow, -webkit-box-sizing,....

- Nếu có thông báo lỗi thì bạn chỉ cần xóa những thuộc tính lỗi đó đi rồi lưu lại và kiểm tra sẽ thấy valid ngay thôi.

6. Không thêm CSS vào trong các cặp thẻ <style> nếu không cần thiết.
- Với một số blogger có host riêng thì nên chèn nó vào trong file.css rồi nhúng nó vào trang của bạn.

- Với những blogger không có khả năng tài chính thì CSS bạn nên đặt nó trước thẻ ]]></b:skin> của mẫu. Như vậy sẽ không phát sinh lỗi khi chuẩn hóa HTML5 thay đổi cách sử dụng cặp thẻ <style type='text/css'> Nếu để ý bạn sẽ thấy trong trang của mình không có đoạn mã nào chèn trong cặp thẻ style cả.

Note: Nói chung theo như kinh nghiệm của Namkna thì chỉnh sửa CSS chuẩn hóa HTML5 dễ thực hiện hơn rất nhiều so với chỉnh sửa XML chuẩn hóa HTML5.  Tuy nhiên nếu có bất cứ thắc mắc nào hãy để lại comment của bạn ở dưới bài viết này mình sẽ giải đáp. Và đừng quyên bấm like chia sẻ bài viết này để nhiều người hơn nữa biết đến nha.