人々が実際のcss 名前空間よりも、名前空間にSMACSSなどの手法を好むように見える理由は何ですか?
私はこれを少しグーグルで調べましたが、良いリソースを思いつくことができませんでした. (私のgoogle-fuがくだらない(可能性が非常に高い)か、css名前空間の仕様が役に立たない(可能性は低い)のではないかと心配しています)
人々が実際のcss 名前空間よりも、名前空間にSMACSSなどの手法を好むように見える理由は何ですか?
私はこれを少しグーグルで調べましたが、良いリソースを思いつくことができませんでした. (私のgoogle-fuがくだらない(可能性が非常に高い)か、css名前空間の仕様が役に立たない(可能性は低い)のではないかと心配しています)
それらは完全に異なるユースケースをカバーしています。
CSS名前空間は、異なるXML名前空間の要素を混合するXMLドキュメントにCSSを適用するためのものです。たとえば、混乱することなくターゲットを設定できます<foo:p>
。<bar:p>
SMACSSは、ページの他の部分に干渉しない堅牢なCSSを作成するための手法をカバーしています。たとえば、アドレス帳のHTMLが出版物のリストのHTML.title
と混同されないようにするためです。.title
仕様からの詳細:
注:HTMLでは、xmlns属性はまったく効果がありません。基本的にはお守りです。XHTMLへの移行とXHTMLからの移行を少し簡単にするだけです。HTMLパーサーで解析すると、属性は名前空間なしで終了します。XMLの名前空間宣言属性のような「 http://www.w3.org/2000/xmlns/ 」名前空間ではありません。
名前空間は、CSS ではかなり厄介な構文を持っています。これは、":" 名前空間文字を先頭のバックスラッシュでエスケープして、疑似クラスと区別する必要があるためです。
html\:img {
border: 2px solid black;
}
html\:a:visited html\:img {
border-color: grey;
}
これは、XML ドキュメント内に HTML を埋め込む場合にのみ、本当に役立ちます。html 名前空間を追加すると、HTML 名前空間の要素が HTML で表示されるように正しく表示され、CSS によってまだ提供されていない機能へのアクセスが許可されます。
<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>
...
HTML5 のコンテキストでは、これが必要になるケースは考えられません。これまで CSS で名前空間を見たことがある唯一の場所は、SVG または MathML の Webkit のデフォルト CSS であり、異なる構文 (@@namespace
規則) を使用しています。
たとえば、これはWebKit/webkit/blob/master/Source/WebCore/css/mathml.css のコードです:
@namespace "http://www.w3.org/1998/Math/MathML";
math {
-webkit-line-box-contain: glyphs replaced;
text-indent: 0;
direction: ltr;
}
mtext {
line-height: 1.0;
}
...
これはWebKit/webkit/blob/master/Source/WebCore/css/svg.css のコードです:
@namespace "http://www.w3.org/2000/svg";
@namespace html "http://www.w3.org/1999/xhtml";
svg:not(:root), symbol, image, marker, pattern, foreignObject {
overflow: hidden
}
svg:root {
width: 100%;
height: 100%
}
text, foreignObject {
display: block
}
...