Est-ce que quelqu'un utilise réellement les espaces de noms css?
Quelles sont les raisons pour lesquelles les gens semblent préférer des techniques telles que SMACSS pour les espaces de noms, par rapport aux espaces de noms CSS?
J'ai googlé cela un peu, mais j'ai été incapable de trouver de bonnes ressources. (Cela me fait craindre que mon google-fu soit de la merde (très probable) ou que la spécification de l'espace de noms css soit inutile (moins probable))
2 réponses
Ils couvrent des cas d'utilisation complètement différents.
Les espaces de noms CSS permettent d'appliquer CSS à des documents XML qui mélangent des éléments provenant de différents espaces de noms XML. par exemple, vous pouvez cibler <foo:p> et <bar:p> sans confusion.
SMACSS couvre les techniques d'écriture de CSS robustes qui n'interfèrent pas avec d'autres parties de la page. par exemple, pour que .title dans votre carnet D'adresses HTML ne soit pas confondu avec .title dans votre liste de publications HTML.
Plus de détails de la Spécifications :
Remarque: En HTML, l'attribut xmlns n'a absolument aucun effet. C'est essentiellement un talisman. Il est permis simplement de faciliter légèrement la migration vers et depuis XHTML. Lorsqu'il est analysé par un analyseur HTML, l'attribut se retrouve dans aucun espace de noms, pas le " http://www.w3.org/2000/xmlns/ " espace de noms comme les attributs de déclaration d'espace de noms en XML font.
Les espaces de noms ont une syntaxe plutôt désagréable en CSS, car le caractère d'espace de noms ":" doit être échappé par une barre oblique inverse pour le différencier d'une pseudo-classe:
html\:img {
border: 2px solid black;
}
html\:a:visited html\:img {
border-color: grey;
}
Ceci n'est vraiment utile que lors de l'intégration de HTML dans un document XML. Lors de l'ajout de l'espace de noms html, les éléments de L'espace de noms HTML sont correctement affichés tels qu'ils apparaîtraient en HTML, ce qui permet d'accéder aux fonctionnalités qui ne sont pas encore fournies par 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>
...
Dans un contexte HTML5, Je ne peux pas penser à tous les cas où vous auriez besoin de cela. Le seul endroit où j'ai vu des espaces de noms en CSS jusqu'à présent, est le CSS par défaut de Webkit pour SVG ou MathML, et ils utilisent une syntaxe différente: la règle @namespace at.
Par exemple, c'est le code de 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;
}
...
C'est le code de 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
}
...