Mit jQuery herausfinden, ob der CSS-Selektor "input [type = text]" nativ vom Browser unterstützt wird?

In meinem CSS habe ich eine Regel, die für alle Textfelder angewendet werden müssen (mit dem CSS3-Selektor input[type=text].Mit jQuery herausfinden, ob der CSS-Selektor "input [type = text]" nativ vom Browser unterstützt wird?

ich jQuery auch verwenden. Einige Browser wie Internet Explorer 6 nicht, dass die Form für CSS-Selektor unterstützt. So ist meine Abhilfe ist, eine zusätzliche Klassennamen in CSS hinzufügen:

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

Und über jQuery dann die CSS-Klasse hinzufügen:

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

die Frage ist: Wie kann ich sicherstellen, dass nur diese Regel inv ist Ok, wenn CSS3-Selektoren nicht nativ unterstützt werden?

Quelle

2009-09-09 Jesper Rønn-Jensen

nur gedacht, ich würde Sie wissen lassen, dass '[attr = val]' ist kein CSS3-Selektor, es ist 2.1, und von allen modernen Browsern unterstützt. Was in CSS3 neu ist, ist '[attr^= val]' und ähnliche RegEx-ähnliche Selektoren. – peirix

alles außer ie6! ja – vvo

@Vincent: Ich sagte modern, habe ich nicht: p – peirix

Ich endete mit bedingten Kommentare in meiner Javascript-Datei. Auf diese Weise konnte ich IE6 Adresse und die CSS-Klasse gelten

$(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. 
    /*@[email protected] (@_jscript_version <= 5.6) 
    $('input[type=text],input[type=password],input[type=radio],input[type=checkbox]'). 
     each(function() { $(this).addClass('type_' + this.type); }); 
    @[email protected]*/ 

});

Auf diese Weise habe ich am Ende für alle Formularfelder mit zusätzlichen Klassennamen auf:

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

Quelle

2009-09-09 11:57:43

wirklich, das ist eigentlich schlimmer als das Hinzufügen von Klassen zu Elementen für alle Browser, wenn Sie einige CSS-Selektoren nicht verwenden können. Auch mehr Javascript in ie6 bedeutet weniger Leistung ... :) – vvo

Vincent, du vermisst einen wichtigen Punkt: Ich will keine zusätzliche Arbeit und keine unnötigen Schritte von Entwicklern, die meine Stile implementieren. Entwickler sollten sich nur auf das Denken konzentrieren: "Ich möchte ein Textfeld hier ..." und NICHT daran denken, einen zusätzlichen 'class =" type_text "' oder ähnliches hinzuzufügen. Ich habe gesehen, dass das so oft schief läuft. –

Eine andere Sache, die mich dazu gebracht hat, diese Idee zu favorisieren, ist, dass es absolut keine Änderungen an bestehenden Feldern gibt. Und absolut keine Möglichkeit, den Klassennamen zu vergessen. –

Warum nicht einen unbrauchbaren CSS-Stil festlegen und prüfen, ob der Stil angewendet wurde. Fügen Sie die Workaround-Klasse nur den Elementen hinzu, auf die dieser Stil nicht angewendet wurde.

Problem ist nur, ich nicht mit einem „nutzlosen“ Stil kann kommen können Sie verwenden :-)

Quelle

2009-09-09 11:23:52

Ich denke, die @ bedingten Kommentare für IE6 können den Trick leisten. (Siehe meine eigene Antwort unten). Auf diese Weise können die Stile nur auf alle Textfelder angewendet werden - und nur dann, wenn der Browser sie nicht nativ unterstützt. In 8-10 Jahren, wenn IE6 wirklich ausläuft, kann der @ bedingte Kommentar entfernt werden. –

Das ist etwas zu übernehmen scheint, wie Sie sprechen von:

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

Quelle

2009-09-09 11:24:38

a Haben schau dir http://www.geocities.com/seanmhall2003/css3/detect.html an. Sie sollten dies für jede Eigenschaft tun.

Quelle

2009-09-09 11:31:29

Es gibt keinen einfachen Weg zu wissen, "unterstützt dieser Browser CSS3-Selektoren". Sie können nur den Browser und die Browserversion erkennen.

Modernizr wird Ihnen nicht helfen, da Sie nicht feststellen können, ob ein bestimmter CSS-Selektor in einer CSS-Datei funktioniert. (Oder Sie müssen überprüfen, ob eine bestimmte CSS-Eigenschaft aus Ihrem CSS-Selektor angewendet wird und das ist wirklich hässlich!)

ABER! Am einfachsten wäre es, CSS 2.1-Selektoren wie [attr =] in .css-Dateien zu vergessen, da sie nicht weit verbreitet sind. Und wenn Sie für Browser schreiben müssen, die sie nicht unterstützen (wie Internet Explorer 6), können Sie sie einfach nicht verwenden.

Also, fügen Sie eine Klasse für alle hinzu. Ihr Code wird einfacher zu verstehen sein, sonst werden Sie immer unnötigen JavaScript-Code hinzufügen.

Ich verstehe, ich antworte dir nicht, aber das ist b-a-d!

Quelle

2009-09-09 11:34:49 vvo

Warum haben nicht nur

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

dann fügen Sie workaround_classname zu allen Texteingaben in Ihrem Markup hinzu.

Die Wähler könnten Sie verwenden sind (ich glaube, das zweite ist wahrscheinlich derjenige, der am einfachsten wäre, zu verstehen, was es für jemand anderen wurde die Auswahl der Codelese)

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

Dann kein Nachweis erforderlich ist und Sie wird nicht auf JavaScript angewiesen, um den Klassennamen hinzuzufügen.

Quelle

2009-09-09 12:01:41

Mit jQuery herausfinden, ob der CSS-Selektor "input [type = text]" nativ vom Browser unterstützt wird?

Antwort

Verwandte Themen