2012-05-22 12 views
27

¿Cuáles son las razones por las cuales las personas parecen preferir técnicas como SMACSS para el espaciado de nombres, más de css namespaces?¿Alguien realmente está usando espacios de nombres css?

He buscado esto en Google por un tiempo, pero no he podido encontrar ningún buen recurso. (Me preocupa que mi google-fu sea una porquería (muy probable) o que la especificación del espacio de nombres css sea inútil (menos probable))

+3

ni siquiera lo ven en [Cuándo se puede usar?] (Http: //caniuse.com/) y no creo que ningún navegador lo soporte ni siquiera parcialmente ... –

+1

@DominicBarnes - Está en estado de Recomendación, eso significa que debe haber al menos dos implementaciones independientes de él. – Quentin

+2

@Dominic Barnes: En realidad, todos los navegadores modernos lo admiten, incluido IE9 +. Hace poco respondí una pregunta sobre los espacios de nombres de CSS, que contiene un código que puede usar para verificar que funcione: http: // stackoverflow.com/questions/9490155/trouble-getting-declared-names-names-to-work/9491691 # 9491691 La razón principal por la que sospecho que los espacios de nombres de CSS no aparecen en ese sitio se debe a que no hay muchos casos de uso del mundo real en el presente Industria web, ya que HTML5 es lo nuevo y divertido que no usa espacios de nombres de ninguna manera. – BoltClock

Respuesta

24

Cubren casos de uso completamente diferentes.

Los espacios de nombres CSS son para aplicar CSS a documentos XML que mezclan elementos de diferentes espacios de nombres XML. p.ej. para que pueda apuntar <foo:p> y <bar:p> sin confusión.

SMACSS cubre técnicas para escribir CSS sólido que no interfiere con otras partes de la página. p.ej. para que .title en su libreta de direcciones HTML no se confunda con .title en su lista de publicaciones HTML.


Más detalles de la spec:

Nota: En HTML, el atributo xmlns no tiene absolutamente ningún efecto. Básicamente es un talismán. Está permitido simplemente hacer que la migración hacia y desde XHTML sea ligeramente más fácil. Cuando es analizado por un analizador HTML, el atributo termina en ningún espacio de nombres, ni en el espacio de nombres "http://www.w3.org/2000/xmlns/" como los atributos de declaración del espacio de nombres en XML do.

+0

no solo xml, sino también html – xiaoyi

+3

@xiaoyi - HTML no tiene espacios de nombres. – Quentin

+0

HTML tiene espacios de nombres. Como usar Embed svg y otros casos de uso. – xiaoyi

4

espacios de nombres tienen una sintaxis bastante desagradable en el CSS, ya que el carácter ":" espacio de nombres deben ser escritos mediante una barra invertida inicial para diferenciarlo de un pseudo-clase:

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

Esto sólo es realmente útil cuando incrusta HTML dentro de un documento XML. Al agregar el espacio de nombres html, los elementos del espacio de nombres HTML se muestran correctamente, ya que aparecerían en HTML, permitieron el acceso a capacidades que aún no fueron provistas por 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> 
    ... 

En un contexto HTML5, no puedo pensar en ningún caso en que lo necesite. El único lugar donde he visto espacios de nombres en CSS hasta ahora, es el CSS predeterminado de Webkit para SVG o MathML, y usan una sintaxis diferente: @namespace at-rule.

Por ejemplo, este es el código 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; 
} 

... 

Este es el código 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 
} 

...