<p class="zw">媒体查询使用<code>@media</code>作为查询标志，然而它并不是仅有的CSS条件语句。特征查询使用<code>@supports</code>，来为支持特定CSS声明的浏览器，添加独有的样式内容。</p> <p class="zw">在第一个例子中，我们将会对支持<code>display:flex</code>的浏览器，设置对于<code>figcaption</code>元素删除<code>font-size</code>属性，这会使图释在更小的宽度的时候更具可读性。</p> <pre class="代码无行号"><code>@supports (display:flex) { .figure--horizontal figcaption { display : flex; } }</code></pre> <p class="zw">仔细观察上例，你也许会注意到，这个查询并不是简单的测试下是否支持<code>display</code>属性，而是包含了属性和值两个设置。在实际操作中，这意味着我们有能力去做更加精确的支持。比如，我们也许想针对支持<code>column-span:all</code>声明的浏览器，设置CSS多列布局。这个特性还不被Firefox支持，可以像如下设置一样，让多列布局更加实用。</p> <pre class="代码无行号"><code>@supports (column-span:all) { section { column-count : 2; } }</code></pre> <p class="zw">不像我们创建媒体查询，使用特征查询提供两种可供选择的样式的最佳实践，依赖于浏览器是否对该CSS声明支持。</p> <p class="zw">我们可以使用<code>not</code>运算符来配合使用。针对上面这个例子，让我们来优化多列布局的体验，针对像Firefox这样还不支持<code>column-span:all</code>的浏览器，通过添加内边距<code>padding</code>属性以减小尺寸。</p> <pre class="代码无行号"><code>@supports (column-span:all) { section { column-count : 2; } } @supports not (column-span:all) { section { padding : 0 4rem; } }</code></pre> <p class="图"><img alt="1011.tif" src="http://csdn-ebook-resources.oss-cn-beijing.aliyuncs.com/images/c4eeb42b07f54b42a9fd1568b8ec4b98/75.jpg" style="width: 1284px" width="1284"></p> <p class="图题">所有支持<code>column-span:all</code>的浏览器将会自动渲染成两列，而像Firefox这样不支持多列布局的浏览器，将会在章节上增内边距值来增强体验。</p> <p class="zw">如同本例所示，我们可以很方便地通过<code>@supports</code>测试，来为浏览器增加两个或更多的样式。这种做法对于识别浏览器是否支持原生CSS特性，或者是浏览器私有的CSS特性十分有用。我们可以使用<code>or</code>操作符来实现。</p> <pre class="代码无行号"><code>@supports (column-count:2) or (-webkit-column-count:2) { section { column-count : 2; } }</code></pre> <p class="zw">我们也许也会配合<code>and</code>操作符使用，来确认浏览器是否支持两个或更多的声明。继续引用上面的例子，我们可以写一个特征查询，用来为同时支持<code>column-count:2</code>和<code>column-span:all</code>声明的浏览器，添加一个<code>section</code>的样式。</p> <pre class="代码无行号"><code>@supports (column-count:2) and (column-span:all) { section { column-count : 2; } }</code></pre>
