Tag Archives: CSS

一周开源项目集锦(2011/11/01)

Posted on by

QualityBots
A tool for automated comparison of website layouts across multiple Chrome versions.
http://code.google.com/p/qualitybots/

Test Analytics
Test Analytics is a web application that allows rapid generation of a project’s ACC model — an alterative to a test plan that is faster to create and of more practical value.
http://code.google.com/p/test-analytics/

Script Cover
Javascript code coverage detector for web pages in Chrome
http://code.google.com/p/script-cover/

Google Tasks Porter
http://code.google.com/p/google-tasks-porter/
Demo https://google-tasks-porter.appspot.com/

Google APIs Client Library for Objective-C
http://code.google.com/p/google-api-objectivec-client/

Bootstrap
Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.
http://twitter.github.com/bootstrap/

heatmap.js
JavaScript Library for HTML5 canvas based heatmaps
http://www.patrick-wied.at/static/heatmapjs/

Google JS Test
Google JS Test is a fast javascript unit testing framework that runs on the V8 engine, without needing to launch a full browser.
http://code.google.com/p/google-js-test/

HTML&CSS 入门指南

Posted on by

资源库Libary

https://github.com/necolas/normalize.css 虽然说已经有很多CSS Reset库了，不过这个看看注释也不赖。

Google Web Fonts Google的提供的在线免费字体。

图书Books
Dive Into HTML5 seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards. Dive Into HTML5 中文版

重构模式beta 重构是网页设计中重要的一环，是把页面从设计稿还原成静态的页面的过程。主要涉及的技术为PS/HTML/CSS，以及图片优化技术。初级JS技能也是有所帮助的。

未完待续…

Last Updated:2011/06/09 23:16
-EOF-

CSS风格指南

Posted on by

选择器风格

  1. id或class名中的分割线使用减号”-”而不是下划线
  2. 大括号”{}”之间的属性缩进两个空格
  3. 属性名与属性值之间(冒号后)空一格
  4. 属性按照显示属性/盒模型/文本属性来写(via Mozilla)
.g-doc {
width: 100%;
text-align: left;
}

未完待续…
-EOF-

HTML5相关资源

Posted on by

参考资料

HTML5 Readiness : Visual timeline of HTML5 feature support.
When Can I Use… : Up to date HTML5 feature browser support reference.
HTML5 Test : Series of browser tests to evaluate feature support.
HTML5 Infographic : A quick overview of scope and support.
W3C HTML5 Web Author View : Lightweight version of the W3c spec, perfect for web developers.
Chrome Implementation Status : Follow the engineering effort for cutting edge support from the Chrome team.
Dive into HTML5 by Mark Pilgrim : Learn HTML5 and have a laugh at the same time.
HTML5: Comparison of Layout Engines : If the Wikipedia says it then it must be true.
Safari HTML5 Guides : Excellent WebKit-oriented development documentation.
Mozilla Development Center HTML5 Reference : Excellent documentation and guides.
WhatWG Web Apps Spec (HTML5 plus the kitchen sink) : Working draft spec of everything under the larger HTML5 umbrella.
ECMAScript 5 table : Detailed table of ES5 support across browsers.
Compatibility Tables : Results of DOM and CSS properties tests in major browsers.

相关工具
Modernizr : Javascript library for feature detection and control fallback cases of HTML5.
html5 shiv : Javascript patch to make IE support, and print, the new tag elements.
CSS Button Maker : Preview CSS buttons with a fancy interface to play with the parameters.
CSS3 Generator : Preview CSS buttons with a fancy interface to play with the parameters.
CSS3 Sandbox : Test and get the code of the fanciest CSS features.
CSS3 Gradient Generator : Generate CSS code for gradients on the fly.
CSS3 Please : Use CSS3 without having to worry about xbrowser differences.
Font Dragr : Test your fonts using drag and drop.
Font Squirrel Generator : Most complete tool to generate code for you font-face support.
Let’s make the web faster : Complete list of tools related to web performance.

社区
HTML5 Watch
CSS3 Watch
HTML5 Doctor
WhatWG Blog
HTML5 Demos
Ajaxian
Chromium HTML5 Discussion Group
Mozilla Hacks
Safari HTML5 Demos
Test Drive IE9 Demos
Open Web – Opera Developer Community
Chrome Experiments
-EOF-

CSS 换行 CSS white-space 属性

Posted on by 
1
2
3
4
5
6
7
8

pre {
white-space: pre; /* CSS2 */
white-space: -moz-pre-wrap; /* Mozilla*/
white-space: -o-pre-wrap; /* Opera 7 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
}

-EOF-