在CSS中使用@namespace有什麼用？

Question

從doc，我發現使用命名空間的象下面這樣：

@namespace foo url(http://www.example.com); 
foo|h1 { color: blue } 

但我想更多地瞭解這一點。我們爲什麼用它？

Answer 1

在給出的示例中，color: blue規則將僅限於foo命名空間中的h1元素（由url(example.com)鏈接）。

據我所知，它被認爲是不經常需要的。它看起來很奇怪。

下面是其應用的一個很好的總結：http://nimbupani.com/spacing-out-on-css-namespaces.html

它定義的唯一的事情就是如何申報CSS的XML namespace前綴。如果您想使用僅匹配特定命名空間中的元素的選擇器，那麼這是必需的。例如，SVG使用XML和HTML共享HTML的一些常見元素（例如<a>）和CSS屬性。如果您爲HTML和SVG文檔使用相同的樣式表，則最好將SVG和HTML的樣式分開以防止出現重疊。 ...

下面是其組成部分的一個很好的一步一步的細分：

@namespace聲明默認命名空間並綁定一個命名空間的命名空間前綴。默認名稱空間應用於沒有明確命名空間組件的名稱。 ...如果您使用前綴聲明@namespace規則，則可以在名稱空間限定的名稱中使用前綴。 ...

最後，這裏的MDN的doc：https://developer.mozilla.org/en-US/docs/Web/CSS/@namespace

的@namespace規則是在規則定義將在樣式表中使用的XML命名空間。定義的命名空間可用於限制,類型和屬性選擇器只能選擇該命名空間下的元素。規則@namespace通常只在處理包含多個名稱空間的XML文檔時纔有用 - 例如，嵌入了SVG的XHTML文檔。

@namespace規則可用於定義樣式表的默認名稱空間。定義默認名稱空間時，所有通用類型選擇器（而不是屬性選擇器，請參見下面的註釋）僅適用於該名稱空間上的元素。

@namespace規則也可用於爲樣式表定義名稱空間前綴。當普遍，型，或屬性選擇與命名空間前綴的前綴，如果命名空間（在型的情況下，不只是名稱或屬性選擇器）的元素或屬性的那麼該選擇器僅匹配火柴。

使用非XML HTML時，已知元素將被自動分配名稱空間。這意味着即使HTML文檔中的任何位置沒有xmlns屬性，HTML元素也會像在XHTML名稱空間中一樣。

請注意，在XML中，除非在屬性上直接定義前綴，否則該屬性沒有名稱空間。換句話說，屬性不會繼承它們所在元素的名稱空間。爲了匹配這種行爲，CSS中的默認命名空間不適用於屬性選擇器。

Answer 2

從MSDN

HTML命名空間與CSS瀏覽XML時，特殊對待。來自HTML命名空間的元素將顯示爲它們在HTML中顯示的元素。這允許訪問尚未由CSS提供的功能。有用的嵌入HTML元素的一些例子是<TABLE>,<A>,<IMG>,<SCRIPT>和<STYLE>。

例如，您可以將鏈接和徽標添加到以下餐館評論樣本中。首先，您必須在文檔頂部聲明HTML名稱空間，然後在嵌入式HTML元素上使用HTML前綴。以這種方式嵌入的HTML必須是格式良好的XML，因此元素需要最小化的結束標記。

<story xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional"> 
    ... 
    <restaurant> 
    <name>Red Apple Inn</name> 
    <logo> 
     <HTML:A href="javascript:alert('Visit the Red Apple Inn!')"> 
     <HTML:IMG src="red-apple.gif" height="50" width="200"/> 
     </HTML:A> 
    </logo> 
    ... 

在Microsoft®Internet Explorer中，前綴必須保留HTML或html，以便將元素解釋爲HTML元素。可以使用<HTML:STYLE>塊在CSS文檔中嵌入CSS樣式表。該塊將增加樣式表處理指令指向的任何樣式表。當沒有外部樣式表時，即使沒有指定href屬性，仍然必須存在樣式表處理指令，以指示應該使用CSS樣式表語言來顯示XML文檔。

以下示例顯示如何使用HTML名稱空間，<HTML:STYLE>元素和不帶href屬性的樣式表處理指令將review.css樣式表嵌入到XML文檔中。 HTML

<?xml version="1.0"?> 
<?xml-stylesheet type="text/css"?> 
<story xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional"> 
    <HTML:STYLE> 
    story 
    { 
     display: block; 
     font-family: Arial, Helvetica, sans-serif; 
     font-size: small; 
     width: 30em; 
    } 
    restaurant 
    { 
     display: block; 
     padding: 1.2em; 
     font-size: x-small; 
     margin-bottom: 1em; 
    } 
    ... 
    </HTML:STYLE> 
    <restaurant> 
    ...