Question

为何人们似乎更喜欢“a href=”“http://smacss.com/” Rel=“noreferrer” >SMACSS 等技术, 而不是实际的cs命名空间 ?

我查了一下这个,但我一直无法找到任何好的资源。 (这让我担心我的谷歌-福是垃圾(很可能),或者Cs 命名空间(cs space spec)是没用的(不太可能))

Answer 1

它们涵盖了完全不同的使用案例。

CSS 命名空间用于将 CSS 组合成来自不同 XML 命名空间的元素的 XML 文档, 例如, 这样您就可以以 < code\ lt; foo: p> 和为目标, 而不混淆。

SMACSS 涵盖在不干扰页面其他部分的情况下撰写稳健的 CSS 的技术,例如,在您的地址簿 HTML 中, < code>. title 在您的出版物列表 HTML 中不会被. title 混为一谈。

http://www.w3.org/TR/html5/dom.html#global-atribites" rel=“noreferrer”>spec 。

注:在 HTML 中, xmlns 属性绝对没有效果, 基本上是一个 talisman 。它仅允许让 XHTML 迁移和从 XHTML 迁移容易一些。当被 HTML 解析时, 属性最终会出现在没有命名空间的地方, 而不是“ < a href= ”, 而不是 http://www.w3. org/2000/xmlns/" rel= “ noreferrer” > http://www.w3. org/2000/xmlns/ 命名空间, 像 XML do 中的命名空间声明属性。

Answer 2

命名空格在 CSS 中有一个相当讨厌的语法, 因为“ : ” 命名空格字符必须被前导反斜线排除, 才能将其与伪类区分 :

html:img {
  border: 2px solid black;
}
html:a:visited html:img {
  border-color: grey;
}

这只有在将 HTML 嵌入 XML 文档中时才真正有用。当添加 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>
    ...

在 HTML 5 背景下, 我无法想到任何您需要它的情况。到目前为止, 我在 CSS 中看到命名空间的唯一地方是 Webkit s 默认的 SVG 或 MathML 的 CSS, 它们使用不同的语法 : < code\ namespace 规则。

例如,这是WebKit/webkit/blob/master/resourcs/WebCore/css/mathml.cs 的代码:

@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;
}

...

这是来自 "的代码 https://github.com/WebKit/webkit/blob/master/resources/WebCore/csss/svg.cs" rel="noreferr"\\ enger>WebKit/webkit/blob/master/resources/WebCore/csss/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
}

...

Answer 3

工作过于繁忙。分析 HTML 的浏览器将所有内容都插入默认命名空间, 但某些标签名称除外( 例如: svg )。也就是说, 您可以在特殊命名空间内创建一个元素 :

<html>
<head>
  <style>
    @namespace foo "http://foo";
    foo|div { color: red; }
  </style>
</head>
<body>
    <div>I m an HTMLDIVElement</div>
</body>
<script>
  const div = document.createElementNS( http://foo ,  div );
  div.textContent =  I am namespaced. ;
  document.body.appendChild(div);
</script>
</html>

据我所知, HTML 解码器无法为您选择另一个命名空间。由浏览器 s HTML 解码器创建的任何元素都会在默认命名空间中创建。另外, 一旦您逃过 HTMLElement 元素, 它们将不再重现。您不能只使用 < code> hTMLElement 的标签名, 并期望它会是一个有所有符号、互动和属性的 < code> HTMLButtonElement 属性。这也意味着没有 HTMLBText < /code>、 < code>. dir 、 < code >.offsetTop 等 HTMLT/codec > 元素。最大的一个不是 < code >. style < /code > 。这还意味着设置一个 < code > type < tyle 属性没有任何东西。您必须在 CSS 文件中指定所有样式。

这实际上意味着这只是为真正有限的 XML 环境设置的, 而不是为普通 HTML 内容设置的。可能有一种方法可以使您的组件执行 < code> HTMLElement , 虽然我还没有找到一个( 可能是 Web 部件? ) 。尽管如此, 这意味着您的所有元素都必须用 < code > 文件构建。创建 EmentlementNS 可能远比寻找其他方法来覆盖您的 CSS 组件要多得多。

友情链接