usar - ¿Puedes diseñar elementos XHTML en otro espacio de nombres usando los selectores de css id y class name?
id y class en css (3)
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.
Si cambiara 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 por todo el árbol DOM cada vez necesita seleccionar un elemento).
Pero cuando probé esto, muchos de mis CSS dejaron 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 los reconozca como clases e ids?
Cosas que he intentado, en vano:
- especificando los atributos "id" como ID en ATTLIST de un doctype en línea
- probando cada doctype que pude, o ningún doctype en absoluto
- calificando los atributos de identificación y nombre de clase en el espacio de nombres xhtml (es decir, xhtml: id)
Aquí hay un ejemplo de xhtml. No funciona ni en Firefox 3.5 ni en 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>
No tiene ningún tipo de documento, codificación de caracteres, etc. Aquí tiene:
Cambie 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>
No tiene que usar los selectores de #id / .class . En cambio, puedes usar:
[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 locos, ¡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 quisieras hacer coincidir elementos con espacio de nombres, eso es posible con espacios de nombres CSS :
@namespace xf "http://www.w3.org/2002/xforms";
xf|group {}
Frankie,
La respuesta de porneL es correcta: en el modo XHTML tienes que usar diferentes reglas CSS, porque no hay nada "especial" sobre @id @class .
Incluso armados con este conocimiento, tus problemas no han terminado. :)
La tentación podría ser simplemente juntar los selectores CSS HTML y XHTML, 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. Tan lleno de Ubiquity XForms verás 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 puede ver, hemos tenido que repetir el diseño con diferentes selectores. (Esto es algo que esperamos abordar con una función que resumirá la tarea de establecer el estilo. Luego, solo tendrá que escribir una regla).
Tenga en cuenta 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 los espacios de nombres;
- las reglas XHTML CSS usan el operador ''~ ='', lo que significa que el atributo debe contener el valor especificado, en lugar de ser exactamente igual a él.