Thư viện

Trải nghiệm

Thứ Ba, tháng 4 15, 2014

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

Chỉnh sửa thuộc tính CSS của blogspot và website theo chuẩn HTML5, chuẩn hóa W3C.

Chia sẻ:
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.
Chỉnh sửa CSS theo chuẩn HTML5 (W3C)

» 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:
- Nếu trang của bạn đã chuẩn w3c sẽ có một thông báo như bên dưới:
Chỉnh sửa CSS theo chuẩn HTML5 (W3C)

» 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:

» 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.

42 nhận xét:

  1. Thực sự 2 bài viết về html5-w3c vừa rồi quá tuyệt vời luôn, ít thấy ai chia sẻ về vấn đề này hết, tìm nát cái google mà k thấy dc, nay thì may nhờ bài viết của anh mà fix dc khá nhiều lỗi, cảm ơn anh rất nhiều.

    Trả lờiXóa
    Trả lời
    1. Thấy mọi người khó khăn trong vấn đề đó nên anh chia sẻ để mọi người cùng biết và khắc phục thôi e.

      Xóa
    2. terocket ơi liên hệ với mình theo số 0944812582 mình có việc quan trọng nhờ bạn tư vấn

      Xóa
  2. Cảm ơn bạn, mình đã làm theo hướng dẫn của Bạn trong bài này, kết quả test thành công !
    Tuy nhiên có một vấn đề mới nảy sinh: avarta của comment trong bài viết không hiển thị nữa.
    Bạn có cách nào giúp mình sửa lỗi này không thì chỉ giúp nhé. Cảm ơn!

    Trả lờiXóa
    Trả lời
    1. Vì ảnh avatar hiển thị được nhờ đoạn js mà bạn đã thêm chú thích vào nên không hoạt động nữa, phải viết riêng js cho nó. Vì thế bạn thêm đoạn js sau


      <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>


      Nhớ thay ID-Comment thành ID comment của bạn
      Trước đây lỗi này mình cũng gặp phải nhưng may có bác Duy Phạm giúp nên mới biết :D

      Xóa
    2. Mình từng thử thấy đoạn này cũng khá hiệu quả:

      <b:if cond='data:comment.favicon'>
      <img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
      </b:if>
      <a expr:name='data:comment.anchorName'/>
      <b:if cond='data:blog.enabledCommentProfileImages'>
      <data:comment.authorAvatarImage/>
      </b:if>

      thay cho đoạn hình ảnh avantar cũ :)

      Xóa
    3. Cảm ơn Huy Cò VIP nhiều, mình làm được rồi!

      Xóa
    4. Ngoài ra ta cũng có thể dùng cách khác là tìm đoạn code:

      <data:comment.authorAvatarImage/>

      Và thay thế nó thành:

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

      Xóa
    5. ID-Comment là cái ID gì thế?

      Xóa
    6. THẻ này mỗi blog sẽ khác nhau hãy để lại URL mình chỉ cho.

      Xóa
  3. Vấn đề này khá đau đầu cho những blogger không am hiểu nhiều về code
    Mình cũng đang chỉnh theo chuẩn w3c cho blog của mình
    Rất cảm ơn Nam đã viết bài về chủ đề này, bạn sẽ là người tiên phong tạo ra làm sóng chuẩn góa blogger cho anh em blogger
    thanhks

    Trả lờiXóa
  4. Cảm ơn blog của Nam, mình đã sửa lại cơ số lỗi theo chuẩn w3c và việc còn lại bây giờ là phát triển nó lên nữa thôi :) ...

    Thanks nhiều :)

    Trả lờiXóa
    Trả lời
    1. Không có gì rất vui vì bài viết có ích với bạn.

      Xóa
  5. A Nam ơi em quảng cáo popup thì đăng ký GA dc ko nhỉ??? Hi

    Trả lờiXóa
    Trả lời
    1. Trong diều khoản google không cấm tuy nhiên nếu cài GA thì không nên đặt pop vì rất có thể họ sẽ hiểu mình tăng lượng click thông qua pop thì mệt lắm :)

      Xóa
  6. giúp e vs anh ơi, khi em thêm cái " &lt;!--<style type='text/css'/>--&gt;" thỳ web có vài chỗ hình ảnh nó ko hiển thị đúng, chỉnh sửa theo 2 cách trên rùi mà cũng ko trở lại vị trí bình thường , web của e: http://hungnguyenbay.blogspot.com/. help me với, :(((((((((((((

    Trả lờiXóa
    Trả lời
    1. Khi thêm đoạn đó vào một số tiện ích cung cấp bởi blogger sẽ bị như vậy em ak. Vì nó xóa toàn bộ các css và js mặc định của blogger.

      Khắc phục bằng cách em mở file
      https://www.blogger.com/static/v1/widgets/3841957138-widget_css_bundle.css

      và copy đoạn mã css liên quan đến tiện ích em muốn dùng dán vào trước thẻ ]]></b:skin>

      Xóa
  7. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  8. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  9. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  10. cho mình hỏi lỗi này là sao nhỉ

    105 Invalid separator in shape definition. It must be a comma.

    Cái dòng 105 là sao nhỉ, làm sao mình biết lỗi nó nằm ở đâu bạn nhỉ.

    Cám ơn bạn nhiều!

    p/s: mọi thứ quá oke, sẽ vào blog của bạn cập nhật thường xuyên ^^

    Trả lờiXóa
    Trả lời
    1. Đó chỉ là tên của lôi thôi => Có rất nhiều nguyên nhân gây nên lỗi đó. Bạn phải copy đầy đủ thông báo lôi đó mình mới có hướng khắc phục cho bạn được nha bạn.

      Xóa
  11. a ơi a có thể sửa giúp e cái code blog của e được không ạ, e mới lập blog nên ko rõ, vs lại nhiều lỗi quá nên e ko biết làm gì, cảm ơn anh rất nhiều . .
    tên blog của e: http://vn-teen24h.blogspot.com/
    code: https://www.mediafire.com/?a7ch5mvbx9fp1l5

    Trả lờiXóa
    Trả lời
    1. Hiện tại thì chưa được em ak. mấy hôm nay a hơi bận, nếu được thì em chờ vài hôm nữa nha.

      Xóa
  12. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  13. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  14. em muốn thay đổi giao diện toàn bộ blog mà chẳng bít làm sao cả. anh chỉ giùm em với.

    Trả lờiXóa
    Trả lời
    1. Download một template có sẵn trên mạng rồi update thôi. Giờ nhiều giao diện đẹp mà cũng dễ tùy chỉnh lắm.

      Xóa
  15. http://thuthuatthietke.blogspot.com/

    hihi, chuẩn ko cần chỉnh

    Trả lờiXóa
  16. http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.vanvietblog.blogspot.com%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en#css
    Anh nam ơi, có lỗi này mà em không thể nào tìm được, anh có thể giúp em không ạ?

    Trả lờiXóa
    Trả lời
    1. Không có thông báo lỗi tức là nó đã chuẩn CSS W3C rồi em ak.

      Xóa
    2. Của em vẫn bị lỗi mà anh "Parse Error -->".

      Xóa
    3. Nguyên do trong css của em chứa các đoạn chú thích không cần thiết, anh ví dụ đoạn:

      legend {
      border: 0; /* 1 */
      padding: 0;
      white-space: normal; /* 2 */
      margin-left: -7px; /* 3 */
      }

      em có thể viết lại thành:

      legend {
      border: 0;
      padding: 0;
      margin-left: -7px;
      }

      Một số thuộc tính white-space và /*....*/ trong css không cần thiết.

      Xóa
  17. Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space.
    A nam ơi. Lỗi này fix như thế nào ạ

    Trả lờiXóa
  18. Lúc đầu ko bị gì chỉnh sao mà nó bị lỗi Parse Error } rồi chỉ mình khắc phục nhé!

    Site: http://www.toilaquantri.com/

    Trả lờiXóa
  19. Em chào anh ạ!

    Mong anh giúp đỡ, trang web của em là vaytieudungtinchap.net có nhiều lỗi nhưng em không biết phải chỉnh thế nào?? Mong anh giúp đỡ em với ạ!

    Thank anh nhiều!

    Trả lờiXóa
  20. Chào anh!

    Mong anh giúp đỡ, trang web của em làm www.bandatquan12giare.net có nhiều lỗi

    Em mới tập làm blog nên chưa phải chỉnh thế nào

    Mong anh giúp đỡ em với ạ

    Trân trọng

    Trả lờiXóa
  21. Chào anh!

    Mong anh giúp đỡ, trang web của em làm www.bandatquan12giare.net có nhiều lỗi

    Em mới tập làm blog nên chưa phải chỉnh thế nào

    Mong anh giúp đỡ em với ạ

    Trân trọng

    Trả lờiXóa
  22. http://www.quangcaothienma.com/

    Trả lờiXóa
  23. Bạn ơi giúp mình với, minh muốn hình ành trở nên đẹp hơn khi rê chuột vào
    www.gothongchile.tk
    cảm ơn

    Trả lờiXóa
  24. Bạn ơi giúp mình với, minh muốn hình ành trở nên đẹp hơn khi rê chuột vào
    www.gothongchile.tk
    cảm ơn

    Trả lờiXóa