2013-10-29 36 views
1

我最近注意到,我在每個@media查詢規則中都使用all,我無法弄清楚爲什麼我這麼做。爲什麼在隱含的時候使用媒體查詢類型「all」?

我在網上搜索,我發現在網絡上最@media規則示例使用一些格式這樣@media all and (some other condition...),爲什麼會有媒體類型all時,如果沒有指定的媒體類型,它已經暗示了什麼? 這可能是一些較舊的瀏覽器兼容性問題?

我想我真正要問的是,爲什麼在沒有必要使用媒體類型all時常見的做法是?

+2

沒有什麼特別的原因,我可以看到除了在媒體查詢中包含媒體類型是一種常見慣例。唯一的瀏覽器兼容性問題是,一些舊的瀏覽器可能會試圖解析媒體查詢,只是他們的媒體類型,在這種情況下,人們只會使用「全部......」來阻止這種情況的發生。不是在這種情況下。 – BoltClock

回答

2

Media Queries W3C Recommendation提到:

「所有」被用來指示該樣式表適用於所有介質類型。

...

簡寫語法可供適用於所有媒體類型媒體查詢;關鍵字'all'可以被忽略(以及尾部的'和')。即如果媒體類型沒有明確給出,它是'全部'。

使用的話指示在第一引用的句子聲音我像all本身可以完全用於表象的目的。

但有幾個部分all用於特定目的。在section 3.1該文件提到:

未知的媒體功能。當指定媒體特徵之一未知時,用戶代理將代表媒體查詢爲"not all"

未知的媒體特徵值。與未知媒體功能一樣,當指定媒體功能值之一未知時,用戶代理將代表媒體查詢爲"not all"

格式錯誤的媒體查詢默認爲not all

另一個這樣的例子,因爲BoltClock在his comment中提到的問題將使用only all。關鍵字only用於隱藏較舊用戶代理的樣式表。我們可以用下面的CSS測試:

body { 
    background: red; 
} 

@media only all { 
    body { 
     background: green; 
    } 
} 

如果我們在現代瀏覽器中打開此,該文檔的body將有一個綠色的背景。如果我們在舊瀏覽器(例如IE8)中打開此文檔,則文檔的body將具有紅色背景。

JSFiddle demo

+2

如果您試圖否定媒體查詢但希望將其應用於所有媒體類型(例如, '不是所有和(顏色)'都會匹配沒有彩色顯示的用戶代理,無論它們是打印,屏幕還是別的。出於某種原因,'not(color)'無效。 – BoltClock

相關問題