2010-01-28 6 views
5

Sto sviluppando un'applicazione che utilizza ubiquity-xforms. In precedenza avevo pubblicato le pagine come text/html con il doctype XHTML 1.0.Puoi modellare gli elementi XHTML in un altro spazio dei nomi utilizzando id e selettori css del nome di classe?

Se passassi il tipo mime a application/xhtml + xml, vedrei un miglioramento delle prestazioni piuttosto grande, perché il javascript potrebbe usare le funzioni get ____ NS(), invece di quello che sta facendo ora (iterando lentamente attraverso l'intero Albero DOM ogni volta che è necessario selezionare un elemento).

Ma quando ho provato questo, un po 'del mio CSS ha smesso di funzionare. Ho notato che quando ho controllato gli elementi, sia in Firebug che in WebKit Nightly Web Inspector, il punto di errore erano i selettori css ". Nomass" e "nid" sugli elementi nello spazio dei nomi XFORMS. Ho anche notato che nelle proprietà DOM elencate per quegli elementi mancavano entrambi gli attributi 'id' e 'className'.

La mia domanda è, c'è un modo per far sì che l'UA riconosca questi come classi e id?

Le cose che ho provato, inutilmente:

  1. specificando il "id" attributi come ID in ATTLIST di un doctype linea
  2. cercando ogni doctype ho potuto, o nessun doctype affatto
  3. qualificando gli attributi id e class name nello spazio dei nomi xhtml (es. xhtml: id)

Ecco alcuni esempi di xhtml. Non funziona sia in 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> 

risposta

4

Frankie,

risposta di porneL è giusto - in modalità XHTML è necessario utilizzare diverse regole CSS, perché ci non è niente di speciale su @id e @class.

Anche armati di questa conoscenza, i vostri problemi non sono finiti però.:)

La tentazione potrebbe essere quella di mettere solo HTML e XHTML CSS selettori insieme, e applicarli alla stessa regola:

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

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

Tuttavia, un ulteriore problema è che IE ignorerà l'intera regola, perché non gli piace la sintassi XHTML. Così disseminato attraverso XForms Ubiquity vedrete cose come questa:

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

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

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

Come si può vedere che abbiamo dovuto ripetere lo stile con diversi selettori. (Questo è qualcosa che stiamo sperando di affrontare con una funzione che verrà estratto il compito stile-impostazione allora si dovrà solo scrivere una regola..)

nota un paio di cose in più:

  • che le regole HTML usano ':' come carattere letterale (da cui il '\' per uscire), e non sanno nulla dei namespace;
  • le regole CSS XHTML utilizzano l'operatore '~ =', il che significa che l'attributo contiene il valore specificato anziché essere esattamente uguale a esso.
+0

Dato che sto sviluppando un'applicazione interna, mi è stata data l'autorizzazione per impostare i requisiti del browser, quindi IE non è un problema (la versione di base è Firefox 3.6 e Safari 4). Speravo di evitare di dover modificare tutti gli stili, ma sembra che non abbia molta scelta. – Frankie

0

Non hai doctype, la codifica dei caratteri, ecc Qui si va:

Cambia per questo esattamente:

<!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

Suppongo che avrei potuto essere più chiaro, ma non ho incluso quelli perché non sembrano fare la differenza per quanto riguarda il mio problema. Anche con quel doctype, o qualsiasi altro doctype XHTML o HTML5, il problema persiste che non posso creare elementi nello spazio dei nomi xhtml con i selettori di #id e .classname css – Frankie

+0

Ho anche letto che non dovresti includere un doctype se stai servendo contenuti come application/xhtml + xml, ma sembra che le persone ragionevoli differiscano sull'argomento. Non mi interessa davvero in entrambi i casi, purché non debba passare tutto il mio #idname a * | * [* | id = 'idname'] nel css o qualsiasi altra assurdità richiederebbe – Frankie

+0

I don ' t capire. Ho appena copiato il tuo codice esatto in Dreamweaver e ho sostituito la parte superiore con la mia versione e ha funzionato perfettamente in Safari e Firefox 3.5 (non ho testato Chrome, IE6 e altri). – orokusaki

1

Non è necessario utilizzare i selettori #id/.class. Invece è possibile utilizzare:

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

che sono equivalenti.

La classe AFAIK è specifica per HTML, e poiché gli spazi dei nomi XML sono completamente folle, gli attributi XHTML non si trovano nello spazio dei nomi XHTML! Probabilmente sei sfortunato con questo.

Per ID si potrebbe provare xml:id, ma non ho controllato se qualcosa in realtà lo supporta.

Nel caso in cui si volesse abbinare elementi namespace, che è possibile con CSS Namespaces:

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