Используя jQuery, как узнать, поддерживается ли CSS-селектор "input[type=text]" изначально браузером?

в моем CSS у меня есть правило, которое должно применяться ко всем текстовым полям (используя селектор CSS3 input[type=text].

Я также использую jQuery. Некоторые браузеры, такие как Internet Explorer 6, не поддерживают эту форму для селектора CSS. Поэтому мой обходной путь-добавить дополнительное имя класса в CSS:

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

и через jQuery затем добавьте класс CSS:

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

вопрос: Как убедиться, что это правило вызывается только тогда, когда селекторы CSS3 не являются изначально поддерживается?

7
cross-browser css css-selectors jquery jquery-selectors

6 ответов

Почему бы не установить какой-то бесполезный стиль css и проверить, был ли применен стиль. Добавьте только класс обходного пути к элементам, к которым этот стиль не применяется.

единственная проблема в том, что я не могу придумать "бесполезный" стиль, который вы можете использовать : -)

3

Это, кажется, включает что-то вроде того, о чем вы говорите:

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

2

почему бы просто не

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

затем добавить workaround_classname для всех текстовых входов в разметке.

селекторы, которые вы могли бы использовать (я думаю, что второй, вероятно, тот, который будет проще всего понять, что он выбирал для кого-то другого, читающего код)

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

тогда обнаружение не требуется, и вы не будете полагаться на JavaScript для добавления имени класса.

1

взгляните на http://www.geocities.com/seanmhall2003/css3/detect.html. Вы должны сделать это для каждого свойства.

0

Я закончил использование условных комментариев в моем файле javascript. Таким образом, я мог бы обратиться к IE6 и применить класс 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@*/

});

таким образом, я получаю добавленные имена классов для всех полей формы:

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

нет простого способа узнать "поддерживает ли этот браузер селекторы CSS3". Все, что вы можете сделать, это обнаружить браузер и версию браузера.

Modernizr не поможет вам, поскольку вы не можете определить, работает ли конкретный селектор CSS в a .файл CSS. (Или вы должны проверить, применяется ли определенное свойство CSS из вашего селектора CSS, и это действительно уродливо !)

но! Здесь самый простой способ-забыть о селекторах CSS 2.1, таких как [attr=] in .CSS-файлы, как это не широко поддерживаемый. И если вам нужно писать для браузеров, которые их не поддерживают (например, Internet Explorer 6), Вы просто не можете их использовать.

Итак, добавьте класс для всех. Ваш код будет легче понять, иначе вы всегда будете добавлять ненужный код JavaScript.

Я понимаю, что не отвечаю вам, но это Б-а-д!

0