cssdream / css-creating Goto Github PK
View Code? Open in Web Editor NEWCSS创作指南
License: MIT License
CSS创作指南
License: MIT License
错误的语法
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);
例如:
-webkit-overflow-scrolling: touch;
用于修复overflow: scroll
时不能平滑滚动的问题。
iScroll
模拟Android 2.3 -webkit-border-radius 不支持 % 单位?
移动端 click 事件 300ms 延迟问题:使用fastclick解决。详见《300 毫秒点击延迟的来龙去脉》
iOS 7.1 Safari 的 minimal-ui 属性有一个小 bug,第一次打开页面的时候,window.innerHeight 值不正确。http://github.hjin.me/minimal_ui_bug/
http://csstriggers.com 详细记录了常见 CSS 属性的性能。
关于第一点的缩进描述,只说了不要空格和制表符混用,但没给出明确要求是用空格还是制表符,写清楚一点吧
//开启自动换行
"word_wrap": true,
//可以添加多个标尺
"rulers": [80, 100, 120],
//设置换行宽度
"wrap_width": 80
CSS 规范中定义了一些保留关键字,我们应该在 <custom-ident>
中避免使用这些值。历史遗留原因,虽然当前某些浏览器支持这些值,但在将来可能会禁用,这会导致相关 CSS 失效。
TODO: CSS 示例
详见:
这些关键字当前散落在不同的规范,包括:
https://www.w3.org/TR/css-values-4/#common-keywords
Defined:
initial
inherit
unset
https://drafts.csswg.org/css-cascade/#defaulting-keywords
Defined:
initial
inherit
unset
revert
https://drafts.csswg.org/css-cascade-5/#revert-layer
Defined:
initial
inherit
unset
revert
revert-layer
https://www.w3.org/TR/css-values-4/#ref-for-css-wide-keywords
The CSS-wide keywords are not valid
<custom-ident>
s. Thedefault
keyword is reserved and is also not a valid<custom-ident>
There is a default
keyword.
第一、缩进与换行/ 2、 快速开始/ 3、安装编辑器插件 这里的sublime指向跟文字错了。。 sublime 不是 subtdme
讨论: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的开发指南中的一点,感觉还是很不错的,可以考虑加上
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.