Skip to content

Commit 6d2e96e

Browse files
doyoedoyoe
committed
1 parent e01e0ea commit 6d2e96e

File tree

7 files changed

+227
-2
lines changed

7 files changed

+227
-2
lines changed

‎css3-quicksearch.htm

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -391,6 +391,7 @@ <h2 class="tit"><a href="rules/index.htm">语法与规则 Rules and Syntax</a></
391391
<li><a href="rules/@media.htm" class="g-color-css3-change">@media</a></li>
392392
<li><a href="rules/@font-face.htm" class="g-color-css3-new">@font-face</a></li>
393393
<li><a href="rules/@keyframes.htm" class="g-color-css3-new">@keyframes</a></li>
394+
<li><a href="rules/@supports.htm" class="g-color-css3-new">@supports</a></li>
394395
</ul>
395396
</div>
396397
</section>

‎index.htm

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -623,6 +623,7 @@ <h2>web前端开发参考手册系列</h2>
623623
<li><div class="css3-new"><a href="rules/@font-face.htm">@font-face</a></div></li>
624624
<li><div><a href="rules/@page.htm">@page</a></div></li>
625625
<li><div class="css3-new"><a href="rules/@keyframes.htm">@keyframes</a></div></li>
626+
<li><div class="css3-new"><a href="rules/@supports.htm">@supports</a></div></li>
626627
</ul>
627628
</li>
628629
<li>

‎js/inner.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -483,7 +483,8 @@ if (!Global.isLocal && Global.name) {
483483
'@media' : [],
484484
'@font-face' : [],
485485
'@page' : [],
486-
'@keyframes' : []
486+
'@keyframes' : [],
487+
'@supports' : []
487488
},
488489

489490
selectors : {

‎quicksearch.htm

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -559,6 +559,7 @@ <h2 class="tit"><a href="rules/index.htm">语法与规则 Rules and Syntax</a></
559559
<li><a href="rules/@font-face.htm" class="g-color-css3-new">@font-face</a></li>
560560
<li><a href="rules/@page.htm">@page</a></li>
561561
<li><a href="rules/@keyframes.htm" class="g-color-css3-new">@keyframes</a></li>
562+
<li><a href="rules/@supports.htm" class="g-color-css3-new">@supports</a></li>
562563
</ul>
563564
</div>
564565
</section>

‎rules/@keyframes.htm

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ <h1 class="tit">@keyframes</h1>
4848
<section id="syntax" class="g-mod g-attr">
4949
<h2 class="tit">语法：</h2>
5050
<div class="cont">
51-
<p><strong>@keyframes</strong> <a href="../../values/textual/identifier.htm">&lt;identifier&gt;</a> '{' <a href="#dfn-syntax">&lt;keyframes-blocks&gt;</a> '}';</p>
51+
<p><strong>@keyframes</strong> <a href="../../values/textual/identifier.htm">&lt;identifier&gt;</a> { <a href="#dfn-syntax">&lt;keyframes-blocks&gt;</a> }</p>
5252
<p id="dfn-syntax"><strong>&lt;keyframes-blocks&gt;</strong>：[ [ from | to | <a href="../values/numeric/percentage.htm">&lt;percentage&gt;</a> ]{ sRules } ] [ [ , from | to | <a href="../values/numeric/percentage.htm">&lt;percentage&gt;</a> ]{ sRules } ]*</p>
5353
</div>
5454
</section>

‎rules/@supports.htm

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-cmn-Hans">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>@supports</title>
6+
<meta name="Description" content="CSS3参考手册之: @supports" />
7+
<meta name="Keywords" content="@supports, 条件规则" />
8+
<meta name="author" content="Joy Du(飘零雾雨), [email protected], www.doyoe.com" />
9+
<meta name="robots" content="all" />
10+
<!--[if lte IE 8]>
11+
<script src="../js/html5.js"></script>
12+
<![endif]-->
13+
<link rel="stylesheet" href="../skin/article.css" />
14+
</head>
15+
<body>
16+
<nav id="guide" class="g-mod">
17+
<div class="from">
18+
<a href="http://css.doyoe.com/" target="_blank">CSS3参考手册</a>
19+
<span>&#187;</span>
20+
<a href="../index.htm" id="category" rel="rules" name="@supports">语法与规则列表</a>
21+
<span>&#187;</span>
22+
</div>
23+
<div class="to">
24+
<span class="label">相关内容：</span>
25+
<div class="g-combobox g-transition">
26+
<a href="?" class="g-transition target">
27+
<strong>其它语法与规则参考</strong>
28+
<span>选择其它项<!--[if lte IE 7]><ins>IE7 and earlier, Get to die</ins><![endif]--></span>
29+
</a>
30+
<div class="g-transition list">
31+
<ul>
32+
<!-- 插入快速分类导航 -->
33+
</ul>
34+
</div>
35+
</div>
36+
</div>
37+
</nav>
38+
<header id="hd">
39+
<section id="title" class="g-mod">
40+
<h1 class="tit">@supports</h1>
41+
<ul class="info">
42+
<li><strong>版本：CSS3</strong></li>
43+
</ul>
44+
<!-- 插入浏览器信息 -->
45+
</section>
46+
</header>
47+
<section id="bd">
48+
<section id="syntax" class="g-mod g-attr">
49+
<h2 class="tit">语法：</h2>
50+
<div class="cont">
51+
<p><strong>@supports</strong> (rule)[<a href="#operator">operator</a> (rule)]* { sRules }</p>
52+
<p id="operator"><strong>operator</strong>：or | and | not</p>
53+
</div>
54+
</section>
55+
<section id="value" class="g-mod g-attr">
56+
<h2 class="tit">取值：</h2>
57+
<div class="cont">
58+
<dl>
59+
<dt>rule：</dt>
60+
<dd>指定一条具体的CSS规则，必须使用括号包裹</dd>
61+
<dt><a href="#operator">operator</a>：</dt>
62+
<dd>使用<code class="g-code">or | and | not</code>等操作符指定多条规则。</dd>
63+
</dl>
64+
</div>
65+
</section>
66+
<section id="intro" class="g-mod g-attr">
67+
<h2 class="tit">说明：</h2>
68+
<div class="cont">
69+
<strong>检测是否支持某CSS特性</strong>
70+
<ul>
71+
<li>
72+
<strong>定义支持和不支持flex标准写法的浏览器分别使用不同的规则：</strong>
73+
<div class="gquote">
74+
<p class="gquote-tit"><strong>示例代码：</strong></p>
75+
<blockquote class="gquote-cont"><code><xmp>@supports ( display: flex ) {
76+
body {
77+
display: flex;
78+
}
79+
#aside {
80+
width: 210px;
81+
}
82+
#main {
83+
flex: auto;
84+
}
85+
}
86+
87+
@supports not ( display: flex ) {
88+
#aside {
89+
float: left;
90+
width: 210px;
91+
}
92+
#main {
93+
overflow: hidden;
94+
*zoom: 1;
95+
}
96+
}</xmp></code></blockquote>
97+
<p class="gquote-info">我们可以通过类似这样的写法来给不同的终端使用差异化的方案。</p>
98+
</div>
99+
</li>
100+
<li>
101+
<strong>你也可以写多重规则来进行过滤：</strong>
102+
<div class="gquote">
103+
<p class="gquote-tit"><strong>示例代码：</strong></p>
104+
<blockquote class="gquote-cont"><code><xmp>@supports ( box-shadow: 2px 2px ) or
105+
( -moz-box-shadow: 2px 2px ) or
106+
( -webkit-box-shadow: 2px 2px ) {
107+
.demo {
108+
-moz-box-shadow: 2px 2px 0 rgba(0, 0, 0, .3);
109+
-webkit-box-shadow: 2px 2px 0 rgba(0, 0, 0, .3);
110+
box-shadow: 2px 2px 0 rgba(0, 0, 0, .3);
111+
}
112+
}</xmp></code></blockquote>
113+
</div>
114+
</li>
115+
</ul>
116+
</div>
117+
</section>
118+
<section id="compatible" class="g-mod g-attr">
119+
<h2 class="tit">兼容性：</h2>
120+
<div class="cont">
121+
<ul class="support-type">
122+
<li><span class="support">浅绿</span> = 支持</li>
123+
<li><span class="unsupport">红色</span> = 不支持</li>
124+
<li><span class="partsupport">粉色</span> = 部分支持</li>
125+
</ul>
126+
<table class="g-data">
127+
<thead>
128+
<tr>
129+
<th>IE</th>
130+
<th>Firefox</th>
131+
<th>Chrome</th>
132+
<th>Safari</th>
133+
<th>Opera</th>
134+
<th>iOS Safari</th>
135+
<th>Android Browser</th>
136+
<th>Android Chrome</th>
137+
</tr>
138+
</thead>
139+
<tbody>
140+
<tr>
141+
<td class="unsupport">6.0-11.0</td>
142+
<td class="unsupport">2.0-21.0</td>
143+
<td class="unsupport">4.0-27.0</td>
144+
<td class="unsupport">6.0-8.0</td>
145+
<td class="support" rowspan="2">15.0+</td>
146+
<td class="unsupport">6.0-8.4</td>
147+
<td class="unsupport">2.1-4.3</td>
148+
<td class="unsupport">18.0-26.0</td>
149+
</tr>
150+
<tr>
151+
<td class="support">12.0+</td>
152+
<td class="support">22.0+</td>
153+
<td class="support">28.0+</td>
154+
<td class="support">9.0+</td>
155+
<td class="support">9.0+</td>
156+
<td class="support">4.4+</td>
157+
<td class="support">27.0+</td>
158+
</tr>
159+
</tbody>
160+
</table>
161+
</div>
162+
</section>
163+
<section id="example" class="g-mod g-attr">
164+
<h2 class="tit">示例：</h2>
165+
<div class="cont">
166+
<textarea cols="90" rows="10">
167+
<!DOCTYPE html>
168+
<html lang="zh-cmn-Hans">
169+
<head>
170+
<meta charset="utf-8" />
171+
<title>@supports_CSS参考手册_web前端开发参考手册系列</title>
172+
<meta name="author" content="Joy Du(飘零雾雨), [email protected], www.doyoe.com" />
173+
<style>
174+
@supports ( display: flex ) {
175+
body {
176+
display: flex;
177+
}
178+
#aside {
179+
width: 210px;
180+
}
181+
#main {
182+
flex: auto;
183+
}
184+
}
185+
186+
@supports not ( display: flex ) {
187+
#aside {
188+
float: left;
189+
width: 210px;
190+
}
191+
#main {
192+
overflow: hidden;
193+
*zoom: 1;
194+
}
195+
}
196+
</style>
197+
</head>
198+
<body>
199+
<div id="aside">aside</div>
200+
<div id="main">main</div>
201+
</body>
202+
</html>
203+
</textarea>
204+
<p><input type="button" value="运行" class="g-btn g-btn-sure" /></p>
205+
</div>
206+
</section>
207+
</section>
208+
<footer id="ft">
209+
<aside id="rights" class="g-mod">
210+
<!-- 插入浏览器及版权信息 -->
211+
</aside>
212+
</footer>
213+
<script src="../js/jquery.js"></script>
214+
<script src="../js/inner.js"></script>
215+
</body>
216+
</html>

‎rules/index.htm

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,11 @@ <h2 class="tit">语法与规则 Rules and Syntax</h2>
9696
<td>CSS3</td>
9797
<td>指定动画名称和动画效果。</td>
9898
</tr>
99+
<tr>
100+
<td><a href="@supports.htm" class="g-color-css3-new">@supports</a></td>
101+
<td>CSS3</td>
102+
<td>检测是否支持某特性。</td>
103+
</tr>
99104
</tbody>
100105
</table>
101106
</div>

0 commit comments

Comments
 (0)