cssdream / css-creating Goto Github PK

错误的语法

width: calc(100%/3-2*1em+2*1px)
margin: calc(1rem -2px) calc(1rem- 1px);

正确的语法

width: calc(100%/3 - 2*1em + 2*1px)
margin: calc(1rem - 2px) calc(1rem - 1px);

推荐的写法：

width: calc(100% / 3 - 2 * 1em + 2 * 1px)
margin: calc(1rem - 2px) calc(1rem - 1px);

「*」、「/」虽然不用加前后空格，但是为了统一，建议都加空格。

font-size: calc(100vw / 40);
background-position: calc(50% + 20px), calc(50% + 20px);

整个文档没有描述关于命名规则的条例，应该补充上去

浏览器支持情况，bug 等。

CSS 属性取值「initial」和「inherit」的区别是什么？

MDN

https://developer.mozilla.org/en-US/docs/Web/CSS/inherit
https://developer.mozilla.org/en-US/docs/Web/CSS/initial

例如：

1. -webkit-overflow-scrolling: touch;

   用于修复overflow: scroll时不能平滑滚动的问题。

   • 支持情况：iOS5 beta1 +
   • 实现原理：http://blog.csdn.net/hursing/article/details/9186199
   • 解决方案：使用iScroll模拟

2. [译] iOS 7 之 HTML5 综合测评：亮点、缺点和槽点

3. Android 2.3 -webkit-border-radius 不支持 % 单位？

4. Android Webkit中CSS属性zIndex问题

5. PPT:淘宝移动端Web开发最佳实践

6. devicePixelRatio = 1.5 引发的问题

7. Android 4.2.x 和 三星 Galaxy S4 border-radius 背景色溢出

8. Android Chrome -webkit-overflow-scrolling: touch; 问题

9. 移动端 click 事件 300ms 延迟问题：使用fastclick解决。详见《300 毫秒点击延迟的来龙去脉》

10. iOS 7.1 Safari 的 minimal-ui 属性有一个小 bug，第一次打开页面的时候，window.innerHeight 值不正确。http://github.hjin.me/minimal_ui_bug/

11. http://csstriggers.com 详细记录了常见 CSS 属性的性能。

讨论：w3c/csswg-drafts#1162
规范变更：w3c/csswg-drafts@6027891

Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=569703
Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1234357

Testcase:

http://media.junglecode.net/test/linear-gradient/linear-gradient.html

.chromebug {
  background: linear-gradient(0, red, blue);
  width: 200px;
  height: 200px;
}

关于第一点的缩进描述，只说了不要空格和制表符混用，但没给出明确要求是用空格还是制表符，写清楚一点吧

省略图像、媒体文件、样式表和脚本等URL协议头部声明 ( http: , https: )。如果不是这两个声明的URL则不省略。

省略协议声明，使URL成相对地址，防止内容混淆问题和导致小文件重复下载。

<script src="http://www.xxx.com/js/*.js"></script>

<script src="//www.xxx.com/js/*.js"></script>

/* 不推荐 */

.example {
  background: url(http://www.xxx.com/images/*.png);
}

/* 推荐 */

.example {
  background: url(//www.xxx.com/images/*.png);
}

这个是google的开发指南中的一点，感觉还是很不错的，可以考虑加上

第一、缩进与换行/ 2、 快速开始/ 3、安装编辑器插件 这里的sublime指向跟文字错了。。 sublime 不是 subtdme

http://tabatkins.github.io/specs/css-apply-rule/#using

https://github.com/yisibl/perfectionist-test/blob/master/perfectionist/at-apply.css

CSS 规范中定义了一些保留关键字，我们应该在 <custom-ident> 中避免使用这些值。历史遗留原因，虽然当前某些浏览器支持这些值，但在将来可能会禁用，这会导致相关 CSS 失效。

TODO: CSS 示例

详见：

• w3c/csswg-drafts#7170
• w3c/csswg-drafts#7439

这些关键字当前散落在不同的规范，包括：

css-values-4

https://www.w3.org/TR/css-values-4/#common-keywords

Defined:

• initial
• inherit
• unset

css-cascade-4

https://drafts.csswg.org/css-cascade/#defaulting-keywords

Defined:

• initial
• inherit
• unset
• revert

css-cascade-5

https://drafts.csswg.org/css-cascade-5/#revert-layer

Defined:

• initial
• inherit
• unset
• revert
• revert-layer

css-values-4

https://www.w3.org/TR/css-values-4/#ref-for-css-wide-keywords

The CSS-wide keywords are not valid <custom-ident>s. The default keyword is reserved and is also not a valid <custom-ident>

There is a default keyword.

https://docs.google.com/document/pub?id=17dKkWwdaKyNnkwswihHje2cfoMGqbSJLydTIxqFwlQU