Mit jQuery ist, wie zu finden heraus, ob der CSS-Selektor "input[type=text]" wird nativ unterstützt von browser?

In meinem CSS habe ich eine Regel, die angewendet werden müssen, um alle text-Felder (mit den CSS3-Selektor input[type=text].

Benutze ich auch jQuery. Einige Browser wie der Internet Explorer 6 nicht unterstützt, die form für den CSS-Selektor. So mein workaround ist, um einen zusätzlichen Klassennamen im CSS:

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

Und via jQuery dann fügen Sie die CSS-Klasse:

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

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

  • ich dachte, ich lasse Sie wissen, dass [attr=val] ist nicht ein CSS3-Selektor, es ist 2.1 und unterstützt von allen modernen Browsern. Was ist neu in CSS3 ist [attr^=val] und ähnliche RegEx-wie Selektoren.
  • alle, aber ie6 ! ja
  • Ich sagte modern, nicht ich :p
  • 2001 war modern ! 🙂
  • Vielen Dank für die Klarstellung! CSS2.1 Regeln waren offensichtlich nicht im Fokus von IE-team im Jahr 2001 🙂
InformationsquelleAutor Jesper Rønn-Jensen | 2009-09-09
  1. 3

    Warum nicht einige nutzlose css-Stil und überprüfen Sie, ob der Stil angewendet wurde. Nur fügen Sie die workaround-Klasse auf die Elemente, die sich nicht haben, dieser Stil angewendet.

    Problem ist nur ich kann nicht kommen mit einem "sinnlos" - Stil, den Sie verwenden können 🙂

    • Ich denke, das @conditional comments für IE6 kann den trick tun. (siehe meine Antwort unten). Auf diese Weise, die Stile, die angewendet werden können, um alle Textfelder nur dann -- und nur dann, wenn der browser nicht unterstützt es nativ. In 8-10 Jahren, wenn der IE6 ist wirklich Auslaufen, dann das @ - bedingten Kommentar kann entfernt werden.
    InformationsquelleAutor Philippe Leybaert
  3. 1

    Warum nicht einfach haben,

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

    dann fügen Sie workaround_classname alle text-Eingaben in Ihr markup.

    Die Selektoren, die man verwenden könnte, sind (ich glaube, das zweite ist wahrscheinlich ein, dass wäre das einfachste um zu verstehen, was es war, die Auswahl für jemand anderen Lesen den code)

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

    Dann keine Erkennung notwendig ist und Sie nicht unter Berufung auf die JavaScript hinzufügen, um den Namen der Klasse.

    InformationsquelleAutor Russ Cam
  4. 0

    Haben Sie einen Blick auf http://www.geocities.com/seanmhall2003/css3/detect.html. Sie sollten dies tun, für jede Eigenschaft.

    InformationsquelleAutor Daniel Moura
  5. 0

    Landete ich mit conditional comments in meine javascript-Datei. Auf diese Weise konnte ich die Adresse IE6 und anwenden der CSS-Klasse

    $(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@*/

});

    Diese Weise habe ich am Ende Hinzugefügt Klassennamen für alle Formular-Felder:

    .type_text{}
.type_radio{}
.type_checkbox{}
.type_password{}
    • wirklich, dies zu tun, ist eigentlich noch schlimmer als das hinzufügen von Klassen-Elemente für alle Browser, wenn Sie nicht verwenden können, einige css-Selektoren. Auch, mehr javascript im ie6 bedeutet weniger Leistung ... 🙂
    • Vincent, Sie verpassen einen wichtigen Punkt: ich möchte keine zusätzliche Arbeit und keine zusätzlichen unnötigen Arbeitsschritte, die von den Entwicklern die Umsetzung meiner Stile. Entwickler sollten sich einfach darauf konzentrieren, zu denken: "ich möchte ein Textfeld, hier..." und NICHT daran denken müssen, fügen Sie eine zusätzliche class="type_text" oder ähnliches. Ich habe gesehen, dass schief geht, so viele Male.
    • Eine andere Sache, die mir zu Gunsten dieser Idee ist, dass es absolut keine änderungen an vorhandenen Feldern. Und absolut keine Möglichkeit zu vergessen, den Klassennamen zu setzen.
    InformationsquelleAutor Jesper Rønn-Jensen
  6. 0

    Es gibt keine einfache Möglichkeit zu wissen "bedeutet in diesem browser-Unterstützung von CSS3-Selektoren". Alles, was Sie tun können, ist die Erkennung von browser und browser-version.

    Modernizr wird Ihnen nicht helfen, wie Sie können nicht erkennen, ob eine bestimmte CSS-Selektor funktioniert in einer .css-Datei. (Oder Sie haben zu prüfen, ob eine bestimmte CSS-Eigenschaft aus der CSS-Selektor angewendet wird, und DAS ist wirklich hässlich !)

    ABER! Hier der einfachste Weg wäre, zu vergessen, die CSS 2.1-Selektoren wie [attr=] auf .css-Dateien, da es nicht breit unterstützt wird. Und wenn Sie schreiben für die Browser, die das nicht unterstützen (wie Internet Explorer 6), nur können Sie Sie nicht benutzen.

    So fügen Sie eine Klasse für alle. Ihr code leichter zu verstehen, ansonsten wirst du immer unnötige JavaScript-code.

    Ich verstehen, ich bin mir nicht beantworten Sie, aber das ist b-a-d!!!!

    InformationsquelleAutor vvo
Schreibe einen Kommentar