MOBILE HTML5學習手冊

354

|

第十一章

flex-direction: column;

}

}

請記得，一定要檢視小型與大型格式的版面，在適當或必要的時候建立媒體查詢版面配

置中斷點。

使用 @supports 來偵測功能

雖然行動領域還沒有支援

@supports

，而且它目前只處於 W3C 的候選建議等級，但

Firefox 與 Opera 已經開始支援它了。

@supports

的 @ 規則可以協助我們為支援或不支援

Flexbox 的瀏覽器建立獨立的版面，而且不需要任何 hack。

瀏覽器開始支援 Flexbox 之後，還要經過很長一段時間，使用者設備才會全部都支援

Flexbox。我們肯定會尋求其他的 CSS 新功能，它們如同 Flexbox，會使用既有的 CSS

特性的值：如

display: flex;

。

@supports

類似

@media

，但它不會根據瀏覽器與設備的指

標來選擇瀏覽器，而是根據瀏覽器對 CSS 的支援情形：

@supports (display: flex) and (background-color: red) {

h1 {color: green;}

}

這會讓同時支援

display: flex;

與

background-color: red;

的瀏覽器的所有

<h1>

變成綠

色的，它不會讓任何背景顏色變成紅色。這只是用來測試特性與特性值的支援情形。

在過渡期間，有一些瀏覽器使用

@media

來偵測功能：

@media screen and (-webkit-transform-3d) {

h1 {

-webkit-transform: ...