31

人々が実際のcss 名前空間よりも、名前空間にSMACSSなどの手法を好むように見える理由は何ですか?

私はこれを少しグーグルで調べましたが、良いリソースを思いつくことができませんでした. （私のgoogle-fuがくだらない（可能性が非常に高い）か、css名前空間の仕様が役に立たない（可能性は低い）のではないかと心配しています）

4

3 に答える 3

28

それらは完全に異なるユースケースをカバーしています。

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/ 」名前空間ではありません。

于 2012-05-22T13:46:26.213 に答える
5

名前空間は、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
}

...
于 2015-07-30T11:07:24.307 に答える