Utilizzando jQuery, come scoprire se il selettore CSS "input [type = text]" è supportato nativamente dal browser?

Question

Nel mio CSS ho una regola che deve essere applicato a tutti i campi di testo (utilizzando il selettore CSS3 input[type=text].

uso anche jQuery. Alcuni browser come Internet Explorer 6 non supporta quella forma di selettore CSS. Così la mia soluzione è quella di aggiungere un nome di classe in più in CSS:

input[type=text], .workaround_classname{ 
    /* css styling goes here */ 
} 

E tramite jQuery quindi aggiungere la classe CSS:

$('input[type=text]').addClass('workaround_classname'); 

la domanda è: come faccio a essere sicuro questa regola è solo inv oked quando i selettori CSS3 non sono supportati nativamente?

Answer 1

Ho finito per utilizzare i commenti condizionali nel mio file javascript. In questo modo ho potuto affrontare IE6 e applicare la classe CSS

$(function(){ 
    //add css class to input[type=text] fields if the selector is not natively supported 
    // IE6 hack: Since some CSS selectors are not working, we simulate with class names. 
    /*@cc_on@if (@_jscript_version <= 5.6) 
    $('input[type=text],input[type=password],input[type=radio],input[type=checkbox]'). 
     each(function() { $(this).addClass('type_' + this.type); }); 
    @end@*/ 

}); 

In questo modo, ho finire con nomi di classe aggiunto per tutti i campi del modulo:

.type_text{} 
.type_radio{} 
.type_checkbox{} 
.type_password{} 

Answer 2

Perché non impostare uno stile css inutile e controllare se lo stile è stato applicato. Aggiungi la classe di soluzione alternativa solo agli elementi a cui non è applicato questo stile.

L'unico problema è che non posso venire con uno stile "inutile" è possibile utilizzare :-)

Answer 3

Questo sembra incorporare qualcosa come te parlare di:

http://www.w3avenue.com/2009/07/02/detect-support-for-css3-html5-with-modernizr/

Answer 4

Dai guarda http://www.geocities.com/seanmhall2003/css3/detect.html. Dovresti farlo per ogni proprietà.

Answer 5

Non c'è un modo semplice per sapere "questo browser supporta i selettori CSS3". Tutto quello che puoi fare è rilevare la versione del browser e del browser.

Modernizr non ti aiuterà poiché non è possibile rilevare se un determinato selettore CSS funziona in un file .css. (O devi controllare se una particolare proprietà CSS dal tuo selettore CSS è applicata e QUESTO è davvero brutto!)

MA! Qui il modo più semplice sarebbe quello di dimenticare i selettori di CSS 2.1 come [attr =] nei file .css perché non è ampiamente supportato. E se devi scrivere per i browser che non li supportano (come Internet Explorer 6), non puoi semplicemente usarli.

Quindi, aggiungi un corso per tutti. Il tuo codice sarà più facile da capire, altrimenti aggiungerai sempre codice JavaScript non necessario.

Capisco che non ti sto rispondendo, ma questo è b-a-d!

Answer 6

Perché non basta avere

input.workaround_classname{ 
    /* css styling goes here */ 
} 

quindi aggiungi workaround_classname a tutti gli input di testo nel tuo markup.

I selettori si potrebbe usare sono (credo che il secondo è probabilmente quello che sarebbe stato più facile da capire che cosa stava selezionando per qualcun altro la lettura del codice)

$('input:text') 
// or 
$('input:text.workaround_classname') 
// or 
$('input.workaround_classname') 

allora non è necessario il rilevamento e si non si baserà su JavaScript per aggiungere il nome della classe.