2010-01-28 15 views
5

Estoy desarrollando una aplicación que usa ubiquity-xforms. Previamente había estado publicando las páginas como texto/html con el doctype XHTML 1.0.¿Se puede dar estilo a los elementos XHTML en otro espacio de nombres usando identificadores css de nombre y clase?

Si cambio el tipo mime a application/xhtml + xml, vería una mejora de rendimiento bastante grande, porque el javascript podría usar las funciones get ____ NS(), en lugar de lo que está haciendo ahora (iterando lentamente a través de todo Árbol DOM cada vez que necesita seleccionar un elemento).

Pero cuando probé esto, un montón de mi CSS dejó de funcionar. Noté que cuando inspeccioné los elementos, ya sea en Firebug o en el WebKit Nightly Web Inspector, el punto de falla fueron los selectores '.classname' y '#id' css en los elementos en el espacio de nombres XFORMS. También noté que en las propiedades de DOM listadas para esos elementos carecían de los atributos 'id' y 'className'.

Mi pregunta es, ¿hay alguna manera de que pueda conseguir que el UA reconozca estos como clases e ids?

cosas que he intentado, sin éxito:

  1. especificando el "id" atributos como identificación en ATTLIST de un tipo de documento en línea
  2. tratar cada tipo de documento que pude, o ningún tipo de documento en absoluto
  3. calificación de los atributos id y class name en el espacio de nombres xhtml (es decir, xhtml: id)

Aquí hay un ejemplo de xhtml. No funciona bien en Firefox 3.5 o Safari 4/WebKit Nightly

<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:xhtml="http://www.w3.org/1999/xhtml" 
    xmlns:xf="http://www.w3.org/2002/xforms"> 
<head> 
    <style type="text/css"> 
    /* <![CDATA[ */ 
    #test { 
     background-color: red; 
    } 
    .testing { 
     color: blue; 
    } 
    /* ]]> */ 
    </style> 
</head> 
<body> 
    <xf:group id="test" class="testing">Test</xf:group> 
</body> 

Respuesta

4

Frankie,

respuesta de porneL que es correcto - en el modo XHTML usted tiene que utilizar diferentes reglas CSS, porque hay no es nada "especial" sobre @id y @class.

Incluso armados con este conocimiento, sus problemas no han terminado.:)

La tentación podría ser sólo hay que poner los selectores de HTML y CSS XHTML juntos, y aplicarlos a la misma regla:

@namespace xf url(http://www.w3.org/2002/xforms); 

xf\:input.surname, xf|input[class~="surname"] { 
    color: green; 
} 

Sin embargo, un problema adicional es que IE ignorará toda la regla, porque no le gusta la sintaxis XHTML. Así que deja en desorden a través de XForms Ubiquity verá cosas como esta:

@namespace xf url(http://www.w3.org/2002/xforms); 

xforms\:hint.active, xf\:hint.active { 
    display: inline; 
} 

xf|hint[class~="active"] { 
    display: inline; 
} 

Como se puede ver que hemos tenido que repetir el estilo con diferentes selectores. (Esto es algo que estamos esperando para hacer frente con una función que se resumen a cabo la tarea de fijación de estilo entonces usted sólo tiene que escribir una regla..)

Nota un par de cosas adicionales:

  • que las reglas HTML están usando ':' como un carácter literal (de ahí el '\' para escapar), y no saben nada de espacios de nombres;
  • las reglas XHTML CSS utilizan el operador '~ =', lo que significa que el atributo debe contener el valor especificado, en lugar de ser exactamente igual a él.
+0

Como estoy desarrollando una aplicación interna, me dieron permiso para establecer los requisitos del navegador, por lo que IE no es un problema (la línea base es Firefox 3.6 y Safari 4). Tenía la esperanza de poder evitar tener que modificar todos los estilos, pero parece que no tengo muchas opciones. – Frankie

0

No tiene tipo de documento, la codificación de caracteres, etc. Aquí van:

Cambio a esto exactamente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <!--Always include character encoding and content-type--> 
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> 
</head> 
+0

Supongo que pude haber sido más claro, pero no los incluí porque no parecían hacer una diferencia con respecto a mi problema. Incluso con ese tipo de documento, o cualquier otro tipo de documento XHTML o HTML5, persiste el problema de que no puedo dar estilo a los elementos que no están en el espacio de nombres xhtml con los selectores #id y .classname css – Frankie

+0

También he leído que no debe incluir un doctype si está publicando contenido como application/xhtml + xml, pero parece que las personas razonables difieren sobre el tema. Realmente no me importa de ninguna manera, siempre que no tenga que cambiar todo mi #idname a * | * [* | id = 'idname'] en el CSS o cualquier tontería que requiera – Frankie

+0

No lo hago T entender Acabo de copiar tu código exacto en Dreamweaver y reemplacé el superior con mi versión y funcionó perfectamente bien en Safari, y Firefox 3.5 (no probó Chrome, IE6, et al). – orokusaki

1

No es necesario utilizar selectores #id/.class. En su lugar, puede utilizar:

[id=test] {} 
[class|=testing] {} 

que son equivalentes.

La clase AFAIK es específica de HTML, y dado que los espacios de nombres XML son completamente descabellados, ¡los atributos XHTML no están en el espacio de nombres XHTML! Probablemente no tengas suerte con este.

Para ID puede probar xml:id, pero no he comprobado si algo realmente lo admite.

En caso de que quería para que coincida con los elementos de espacios de nombres, eso es posible con CSS Namespaces:

@namespace xf "http://www.w3.org/2002/xforms"; 
xf|group {} 
Cuestiones relacionadas