forked from ks-tech/cs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
160 lines (156 loc) · 7.25 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<link rel="stylesheet" type="text/css" href="default.css" />
<link rel="stylesheet" type="text/css" href="index.css" />
<script src="static/gitbug.js"></script>
<title>浏览器增强 与差异化方案</title>
</head>
<body data-git-path="jindw/cs">
<pre class="example-background" style="right:-300px"></pre>
<div class="icon">
<a class="native" style="display:none">原生支持</a>
<a class="stable">增强后稳定支持</a>
<a class="sandbox">开发中</a>
<a class="planning">计划中</a>
<a class="none">不支持</a>
</div>
<div class="spec hover-child-ul">
<a href="prefix.html">差异化规范</a>
<ul>
<p>用一种统一的容易理解的前缀来代替以前常用的css hack，以提高代码可读性的一种规范<a href="prefix.html">更多</a>。</p>
<li>常用前缀:
<ul>
<li class="hover-child">-moz-<p>webkit 系列(谷歌:chrome/苹果:safari等)</p></li>
<li class="hover-child">-webkit-<p>webkit 系列(谷歌:chrome/苹果:safari等)</p></li>
<li class="hover-child">-ms-<p>ie9,ie10+ 等支持html5,css3 的IE浏览器</p></li>
<li class="hover-child">-o-<p>Opera</p></li>
<li class="hover-child">-ie6- -ie7- -ie8- <p>不支持HTML5 的IE浏览器</p></li>
<li class="hover-child">-ie9-<p>IE9(部分支持HTML5), -ie9- 优先级高于 -ms-</p></li>
<li class="hover-child">-ie-<p> IE 系列浏览器, 优先级最低(会被-ms-, -ie?- 覆盖)</p></li>
</ul></li>
</ul>
</div>
<div class="start hover-child-ul">
<a href="guide/index.html">安装/试用</a>
<a href="example/test.html">测试</a>
<ul>
<pre>
Install:
npm install cs
Example:
//start as a test server
node -e "require('cs')"
//or run export script
require('cs')
.setScriptPath('/static/cs.js')
.setHtcPath('/static/cs.htc')
.exportTo('../output.zip')"
</pre>
</ul>
</div>
<div class="gitbug-form" data-git-form="cs/jindw"></div>
<ul class="content">
<li id="selector">
<h3 class="stable"><a href="example/selector/index.html">选择器语法增强</a></h3>
<ul>
<li><h4 class="stable">交互选择器<div class="gitbug" data-git-label="selector:dynamic"></div></h4>
<i>(:hover,:focus,:active)</i>
</li>
<li><h4 class="stable">状态选择器<div class="gitbug" data-git-label="selector:state"></div></h4>
<i>(<span>:target</span>,:enabled,:disabled,:checked)</i></li>
<li><h4 class="stable">属性选择器<div class="gitbug" data-git-label="selector:attribute"></div></h4>
<i>([attr="value"],[attr^="prefix"],[attr$="postfix"],[attr*="any"],[attr~="word"],)</i></li>
<li><h4 class="stable">结构选择器<div class="gitbug" data-git-label="selector:structure"></div></h4>
<i>(<span class="stable">:empty</span>,:first-child,:last-child,nth-child(nth/odd/even),nth-last-child(nth),nth-of-(last)?-type(nth)...)</i></li>
<li><h4 class="stable">选择器组合<div class="gitbug" data-git-label="selector:combinator"></div></h4>
<i>(<span title="多class组合">.classA.AndClassB</span>,
<span title="直接子节点组合">P>C</span>,
<span title="相邻组合">P+N</span>,
<span title="前置组合">P~N</span>,
<span title="排除组合">E:not(s)</span>)</i></li>
<li><h4 class="stable">生成内容<div class="gitbug" data-git-label="selector:gen"></div></h4>
<i>(<span class="stable">:before</span>,
<span class="stable">:after</span>)</i></li>
</ul>
</li>
<li id="layout">
<h3 class="stable"><a href="example/layout/index.html">变形/动画/布局类功能增强</a></h3>
<ul>
<li><h4 class="stable">溢出控制<div class="gitbug" data-git-label="layout:mimax-size"></div></h4>
(max-width/max-height/min-width/min-height)
<p>控制超出大小的切除和不足大小的补充。</p>
</li>
<li><h4 class="stable">固定定位<div class="gitbug" data-git-label="layout:fixed"></div></h4>
(position:fixed)
<p>已支持，IE6下鼠标拖动时会有抖动</p>
</li>
<li><h4 class="stable">变形增强<div class="gitbug" data-git-label="layout:transform"></div></h4>
(transform)
<p>完成2D变换的全部变换函数,对动画的支持还需优化</p>
</li>
<li><h4 class="stable">transition动画增强<div class="gitbug" data-git-label="layout:transition"></div></h4>
(transition-property)
<p>需要明确指定动画的属性，不支持 transition-property:all</p>
</li>
<li><h4 class="none">animation动画增强</h4>
(animation)
<p>貌似animation动画用javascript描述更合理，目前尚无支持计划。</p>
</li>
<li><h4 class="none">组合宽高增强</h4>
(width:calc(50%-2px))
<p>貌似标准上载争论中,看需求确定何时实现</p>
</li>
<li>
<h4 class="none">multi-column </i></h4>(columns)
<p>难以实现,不支持</p>
</li>
</ul>
</li>
<li id="presentation">
<h3 class="stable"><a href="example/background/index.html">边框背景图形类增强</a></h3>
<ul>
<li><h4 class="stable">半透明支持<div class="gitbug" data-git-label="presentation:opacity"></div></h4>(opacity)
<p>用户可以直接书写CSS3 opacity属性,系统自动调用filter实现(本系统有统一的fliter管理器,防止不同filter需求的冲突)。</p>
</li>
<li><h4 class="stable">PNG24 Alpha 背景图<div class="gitbug" data-git-label="presentation:png24"></div></h4>(background-image:xx.png)
<p>读取png源码,判断是否为png24 且包含alpha半透明,如存在,在ie6下会自动转化为filter实现兼容(本实现无相对路径问题)。</p>
</li>
<li><h4 class="stable" title="rgba(r,g,b,a),hsla(h,s%,l%,a">透明背景色）<div class="gitbug" data-git-label="presentation:rgba"></div></h4>
(background-color:rgba(0,255,0,0.3);)
<!--color:hsl(120,100%,50%) 系统把HSL颜色编译成RGB颜色，-->
<p>如果背景色包含alpha通道，将通过filter渐变背景实现</p>
</li>
<li><h4 class="stable">线性渐变<div class="gitbug" data-git-label="presentation:gradient"></div></h4>
(linear-gradient)
<p>目前采用filter实现，只能两个颜色，水平和垂直两个方向(不如CSS3强大)，后续可能尝试生成图片文件的方式</p>
</li>
<li><h4 class="stable">阴影增强<div class="gitbug" data-git-label="presentation:box-shadow"></div></h4>
(box-shadow)
<p>计划用filter实现，不支持内阴影</p>
</li>
<li><h4 class="sandbox">圆角增强<div class="gitbug" data-git-label="presentation:radius"></div></h4>
(border-radius)
<p>目前采用filter＋vml实现，性能不佳，后续可能尝试动态生成图片文件的方式</p>
</li>
<li><h4 class="planning">图形边框<div class="gitbug" data-git-label="presentation:border-image"></div></h4>
(border-image)
<p>有一定难度</p>
</li>
<li>
<h4 class="none">outline</i></h4>(outline)
<p>难以实现,不支持</p>
</li>
</ul>
</li>
</ul>
<!--
<ul>
<li><a href="prefix.html">差异化前缀规范</a>
<p>通过统一的容易理解和书写的前缀来代替以前常用的css hack，来提高代码质量的一种方法。</p>
</li>
</ul>
-->
</body>
</html>