Go to comments ↓ Home » Blog

让主题通过 W3C CSS3 验证

Wordpress最近比较忙,同时有沉迷于各种东西。。。(什么逻辑,忙还能沉迷其他的)

好久没折腾了,博客要长草了,惭愧。是该稍微重视下。

武艺之道是从整理出清爽舒适的空间开始”。恩,吐槽语里面还是有几句靠谱的。
好吧,不只是武艺,其实各种方面都是如此,博客亦如此,既然空间什么的暂时动不了,那就 WordPress 主题吧,动的就是你。

其实这个主题最原始的状态,是可以通过 W3C 验证的,但我是折腾着玩,也就没有考虑标准什么的,而且还有考虑各个浏览器的兼容问题。验证就杯具了。
趁此机会还是让它通过验证好。
恩,看到绿色的对勾会有那么一点点满足感。 😳

W3C CSS3 验证

虽然往往标准和浏览器的兼容总是冲突的,不遵守规范和不那么遵守的都很多。
但解决方法也很简单,就是把 box-shadow 和其他的私有属性(-moz 之类的)放到js里面输出。
这是 Willin Kan 大师在 A9 主题中的做法,值得借鉴。

另外 XHTML 验证中出现了一下莫名其妙的错误。。不懂,暂时不折腾,不要太过分执着。

» 转载请以超链接形式注明来源:A.shun Blog » 《让主题通过 W3C CSS3 验证》
» 本文链接地址:http://shun.im/21409

» 本文采用 BY-NC-SA 协议进行授权。
» 建议通过 Rss( Feedly | Feedburner | Feedsky )方式及时获取更新。
  1. sf

    Google Chrome 7.0.517.5 Google Chrome 7.0.517.5 Windows 7 Windows 7
    #1
    @
  2. 哈哈,看完后前排坐住

    ChromePlus 1.4.1.0 ChromePlus 1.4.1.0 Windows 7 Windows 7
    #2
    @
  3. xhtml有一些小错误,很好解决啊

    Firefox 3.6.9 Firefox 3.6.9 Windows 7 Windows 7
    #3
    @
  4. css3不知道要怎么通过 看来我要再看看a9主题

    Google Chrome 7.0.520.0 Google Chrome 7.0.520.0 Windows 7 Windows 7
    #4
    @
  5. 记得当初折腾验证很烦人,所以就爱咋咋样,不通过就不通过。= =

    Opera 10.60 Opera 10.60 Windows 7 Windows 7
    #5
    @
  6. 恭喜啊,不过没明白这个验证有什么用?

    Firefox 3.6.9 Firefox 3.6.9 Ubuntu 10.04 Ubuntu 10.04
    #6
    @
  7. 偶已经没有时间折腾了orz

    Mozilla Compatible Mozilla Compatible iPad iOS 3.2.2 iPad iOS 3.2.2
    #7
    @
  8. 首页的 go to comments都删了吧- -点了半天还没反应。。
    文章页都是小问题~加油改

    Firefox 3.6.9 Firefox 3.6.9 Windows 7 Windows 7
    #8
    @
    • @snowxh 那个首页的第一个 go to comments 的问题我知道怎么回事了,下次修复

      Opera 10.70 Opera 10.70 Windows XP Windows XP
  9. 以前想通过就为挂个标志..

    Firefox 3.6.9 Firefox 3.6.9 Windows 7 Windows 7
    #9
    @
  10. 以前挺在乎的,现在无所谓了……

    Firefox 3.6.9 Firefox 3.6.9 Windows 7 Windows 7
    #10
    @
  11. 哈,现在我所有的主题用到私有属性的统统放JS里,向willin大师学习

    Firefox 3.6.9 Firefox 3.6.9 Windows XP Windows XP
    #11
    @
  12. 这些检验,我也不太在乎,因为对我改善浏览器兼容性没多大帮助。。

    Firefox 3.6.9 Firefox 3.6.9 Windows 7 Windows 7
    #12
    @
  13. 要通过验证
    园子博客是别想了
    哈哈。

    Firefox 3.6.8 Firefox 3.6.8 Windows XP Windows XP
    #13
    @
  14. 现在觉得不太想折腾博客,连升级都懒,只想偶尔写写就行了 😡

    Firefox 3.6.8 Firefox 3.6.8 Windows 7 Windows 7
    #14
    @
  15. 查看: 错误 (25) 警告 (40) 已经校验的层叠样式表
    ╮( ̄▽ ̄||)╭,杯具 ~

    Google Chrome 7.0.520.0 Google Chrome 7.0.520.0 Windows XP Windows XP
    #15
    @
  16. 💡 小邪大半夜的不睡觉…
    额..不对时区不一样…

    Internet Explorer 8.0 Internet Explorer 8.0 Windows XP Windows XP
    #16
    @
  17. 我的过不了,也不知道怎么改

    Google Chrome 6.0.472.59 Google Chrome 6.0.472.59 Windows XP Windows XP
    #17
    @
  18. 这个东西,不是必要的

    360Safe Explorer 360Safe Explorer Windows XP Windows XP
    #18
    @
  19. 😮 啊。这个是一个很牛的验证吗?啊哈哈。 ➡

    Internet Explorer 8.0 (Compatibility Mode) Internet Explorer 8.0 (Compatibility Mode) Windows 7 Windows 7
    #19
    @
  20. 我的css验证就会剩下:-moz-、-webkit-,你知道的 😀

    Google Chrome 7.0.517.5 Google Chrome 7.0.517.5 Windows 7 Windows 7
    #20
    @
  21. 我的CSS 没通过!杯具啊!

    Google Chrome 6.0.472.55 Google Chrome 6.0.472.55 Windows XP Windows XP
    #21
    @
  22. 你果然文囧……
    咳,话说,我现在CSS和XHTML又不过了,因为放插件的原因……
    算了,我淡定了……

    Google Chrome 6.0.472.55 Google Chrome 6.0.472.55 Windows 7 Windows 7
    #22
    @
  23. 我算是有阵子没来的人了。
    尽量通过就行了,没必要非得通过呀。

    Internet Explorer 8.0 Internet Explorer 8.0 Windows 7 Windows 7
    #23
    @
  24. 我的都没有通过,还有几个错误,不过不是模板和程序的问题,而是一个侧边栏得要个订阅按钮好像有问题

    Google Chrome 6.0.472.59 Google Chrome 6.0.472.59 Windows XP Windows XP
    #24
    @
    • @学夫子 你的那个错误都是私有属性引起的,很好解决。把-moz-和-webkit-用js输出。参考A9。
      另外,-khtml-border-radius和-webkit-border-radius 已经不需要了,chrome圆角方面支持标准的border-radius,换成这个就好。而这样IE9和Opera也能显示圆角。

      Opera 10.70 Opera 10.70 Windows XP Windows XP
  25. 过来瞧瞧

    Firefox 3.6.9 Firefox 3.6.9 Windows XP Windows XP
    #25
    @
  26. 你太强了。css3都用上了。

    Internet Explorer 6.0 Internet Explorer 6.0 Windows XP Windows XP
    #26
    @
  27. 😛 嘿嘿 不错不错~我没申请。。。

    Firefox 3.6.8 Firefox 3.6.8 Windows 7 Windows 7
    #27
    @
  28. 我也有阵子没更新了,你还比较勤快了

    Firefox 3.6.10 Firefox 3.6.10 Ubuntu 10.04 Ubuntu 10.04
    #28
    @
  29. 最好也能通过HTML的校验哈。

    Firefox 3.6.10 Firefox 3.6.10 Windows 7 Windows 7
    #29
    @
  30. 这东西也太折腾人啦

    Google Chrome 6.0.472.62 Google Chrome 6.0.472.62 Windows 7 Windows 7
    #30
    @
  31. 难得用OP,怎么能不来狠狠踩一脚呢!!!! 😎

    Opera 10.62 Opera 10.62 Windows 7 Windows 7
    #31
    @
  32. 中秋将至,送上祝愿,一送月圆不用花钱,二送人圆没有时限,三送梦圆努力实现,四送佳缘幸福美满,五送我心愿,祝你天天开心无极限佳节!。

    Firefox 3.6.9 Firefox 3.6.9 Windows XP Windows XP
    #32
    @
  33. 天啊,我的竟然有45 Errors, 8 warning(s) 。

    Firefox 3.6.10 Firefox 3.6.10 Windows 7 Windows 7
    #33
    @
  34. 我已经精疲力尽了,以前那万恶的CNZZ统计代码是肯定不能过W3C的。

    Firefox 3.6.10 Firefox 3.6.10 Windows 7 Windows 7
    #34
    @
  35. :roll:
    通过之后然后呢?
    psd转化成div+css
    高水平的切图服务,符合w3c验证, 兼容浏览器,300元/张,你看你谷歌广告都变成这样的了。

    Google Chrome 7.0.514.0 Google Chrome 7.0.514.0 Windows XP Windows XP
    #35
    @
  36. 在ie6下显示怎么样?

    Internet Explorer 8.0 Internet Explorer 8.0 Windows 7 Windows 7
    #36
    @
  37. 修改的过程中眼睛看得花吧~

    Google Chrome 6.0.490.1 Google Chrome 6.0.490.1 Windows XP Windows XP
    #37
    @
  38. 我要自已设计一个主题了

    Firefox 3.6.10 Firefox 3.6.10 Windows 7 Windows 7
    #38
    @
  39. 懒得 再把 css 偷换到 js里面了、、不标准就不标准吧、、反正 每个浏览器 都有 私有属性的 额、、

    Firefox 3.6.9 Firefox 3.6.9 Windows XP Windows XP
    #39
    @
    • @Kars 有是有,不过Opera对css3的支持基本上不需要私有属性的。

      Opera 10.70 Opera 10.70 Windows XP Windows XP
    • @A.shun 浏览器不止 Opera ~ 😎

      Firefox 3.6.9 Firefox 3.6.9 Windows XP Windows XP
    • @Kars 是不止啊。但box-shadow这样的属性只有o有效。圆角也差不多。
      其他的要加上-moz、-webkit什么的。
      如果不考虑那些,我就不用把本来只有一行的代码写成一坨坨的 😡
      嘛,FF的访客朋友蛮多,我会注意兼容的。

      Opera 10.70 Opera 10.70 Windows XP Windows XP
    • @A.shun 为了效果好,那也是 木有办法的事情、、o(*^▽^*)o

      看了看你的CSS,发现 有些相同的图片 重复加载了、、
      完全可以 这样来写,把背景图相同的,写到一块儿:
      .feed1 a,a[href^=http://feeds2.feedburner.com/],.feed2 a,a[href^=http://feed.a-shun.com/],.feed3 a,a[href^=https://www.google.com/reader/] {background:url(images/icons.gif) no-repeat;}
      然后,再分别设置背景图的位置:
      .feed1 a,a[href^=http://feeds2.feedburner.com/] { background-position:0 -180px; }
      这样写的话,就可以 减少 HTTP请求 了、、o(* ̄▽ ̄*)o

      Firefox 3.6.9 Firefox 3.6.9 Windows XP Windows XP
    • @Kars 原来还可以这样。
      我以为相同图片就不用请求了,其实还是要检查一遍的。

      .feed1 a这种是为了照顾某浏览器= =,唉。
      下次折腾,感谢提醒。

      Opera 10.70 Opera 10.70 Windows XP Windows XP
    • @Kars 话说你换域名了?这个好短

      Opera 10.70 Opera 10.70 Windows XP Windows XP
    • @A.shun 还有 一件关于 你博客的CSS 的事、、
      记得上次 偶建议 把 .page-numbers:hover{border:1px solid #F73B00;} 改为 a.page-numbers:hover{border:1px solid #F73B00;}
      那个是 评论翻页的CSS吧、、
      其实,上次 没说明白、、因为 class=”page-numbers” 的标签 有两个 a 和 span。按照原来写的,当鼠标 放到 a.page-numbers 上,会变红色;放到 span.page-number 同样也会变红色、、然后,就 感觉 比较 奇怪了、、

      Firefox 3.6.9 Firefox 3.6.9 Windows XP Windows XP
    • @Kars 囧,连框也变色,这就是我要的效果啊。只是链接变色不醒目嘛 ❗

      Opera 10.70 Opera 10.70 Windows XP Windows XP
    • @A.shun 但是 不是 链接 的 框 也会 变成红色啊、、把鼠标 放到 这个 页面的 评论列表 的 “2” 那个 当前 页码 上、、 ❗

      Firefox 3.6.9 Firefox 3.6.9 Windows XP Windows XP
    • @Kars 好吧,你实在太细心了。
      下次一起改

      Opera 10.70 Opera 10.70 Windows XP Windows XP
    • @A.shun 大家都是我学习的榜样~ 榜样的错误 也是要 指出的~~ 😛

      Firefox 3.6.9 Firefox 3.6.9 Windows XP Windows XP
  40. 恭喜恭喜~~

    Firefox 3.6.10 Firefox 3.6.10 Windows XP Windows XP
    #40
    @
  41. 个人觉得,验证只是为了让你发现你无意间写的语法错误,不一样的非要追求验证,只要是对的就行。

    Google Chrome 6.0.472.62 Google Chrome 6.0.472.62 Windows 7 Windows 7
    #41
    @
  42. crossyou

    主在chrome 和opera下非常漂亮。 😀

    Opera 10.62 Opera 10.62 GNU/Linux GNU/Linux
    #42
    @
  43. 恩,我还没验证过标准,以后再验证把

    Firefox 3.6.10 Firefox 3.6.10 Windows 7 Windows 7
    #43
    @
  44. 哇,很恐怖,我一大堆错误

    Firefox 12.0 Firefox 12.0 Windows 7 Windows 7
    #44
    @
  45. css3验证也真是够怪的,-moz 都不知道。

    Google Chrome 18.0.1025.162 Google Chrome 18.0.1025.162 Windows XP Windows XP
    #45
    @
Leave a Reply

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: