Korzystając z jQuery, jak sprawdzić, czy selektor CSS "input [type = text]" jest natywnie obsługiwany przez przeglądarkę?

W moim CSS mam reguły, które muszą być stosowane do wszystkich pól tekstowych (przy użyciu selektora CSS3 input[type=text].Korzystając z jQuery, jak sprawdzić, czy selektor CSS "input [type = text]" jest natywnie obsługiwany przez przeglądarkę?

Używam również jQuery. Niektóre przeglądarki takie jak Internet Explorer 6 nie obsługuje tę formę dla selektora CSS. Więc moja Rozwiązaniem jest dodanie dodatkowego classname w CSS:

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

I poprzez jQuery następnie dodać klasę CSS:

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

pytanie brzmi: Jak mogę upewnić się, że reguła jest tylko inw oked, gdy selektory CSS3 nie są natywnie obsługiwane?

Źródło

2009-09-09 Jesper Rønn-Jensen

Pomyślałem tylko, że dam ci znać, że '[attr = val]' nie jest selektorem CSS3, jest 2.1 i obsługiwane przez wszystkie współczesne przeglądarki. Nowością w CSS3 jest '[attr^= val]' i podobne selektory podobne do RegEx. – peirix

wszystkie oprócz ie6! tak – vvo

@Vincent: Powiedziałem nowoczesny, czy nie: p – peirix

Skończyło się na użyciu warunkowych komentarzy w moim pliku javascript. W ten sposób mogę rozwiązać IE6 i zastosować klasę 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. 
    /*@[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]*/ 

});

ten sposób, że skończę z dodatkiem nazwy klas dla wszystkich pól formularza:

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

Źródło

2009-09-09 11:57:43

Naprawdę, robienie tego jest gorsze niż dodawanie klas do elementów we wszystkich przeglądarkach, gdy nie można użyć niektórych selektorów css. Ponadto więcej javascript w ie6 oznacza mniejszą wydajność ... :) – vvo

Vincent, brakuje ci ważnego punktu: Nie chcę żadnej dodatkowej pracy i żadnych dodatkowych niepotrzebnych kroków wykonywanych przez programistów wdrażających moje style. Programiści powinni po prostu skupić się na myśleniu: "chcę tu pole tekstowe ..." i NIE trzeba pamiętać o dodaniu dodatkowego "class =" type_text "lub podobnego. Widziałem, że tak wiele razy się nie udawało. –

Inną rzeczą, która sprawiła, że spodobał mi się ten pomysł jest to, że nie ma absolutnie żadnych modyfikacji w istniejących polach. I absolutnie nie można zapomnieć o ustawieniu nazwy klasy. –

Dlaczego nie ustawić bezużytecznego stylu CSS i sprawdzić, czy styl został zastosowany. Dodaj klasę obejścia tylko do elementów, które nie mają zastosowanego stylu.

Jedynym problemem jest to, że nie można wymyślić „bezużytecznej” stylu można użyć :-)

Źródło

2009-09-09 11:23:52

Myślę, że @conditional komentarze do IE6 mogą załatwić sprawę. (patrz moja własna odpowiedź poniżej). W ten sposób style można zastosować tylko do wszystkich pól tekstowych - i tylko wtedy, gdy przeglądarka nie obsługuje ich natywnie. W ciągu 8-10 lat, kiedy IE6 jest naprawdę wycofywany, można usunąć komentarz warunkowy @. –

To wydaje się zawierać coś jak mówisz:

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

Źródło

2009-09-09 11:24:38

Mieć spójrz na http://www.geocities.com/seanmhall2003/css3/detect.html. Powinieneś to zrobić dla każdej nieruchomości.

Źródło

2009-09-09 11:31:29

Nie ma łatwego sposobu, aby dowiedzieć się "czy ta przeglądarka obsługuje selektory CSS3". Wszystko, co możesz zrobić, to wykryć wersję przeglądarki i przeglądarki.

Modernizr nie pomoże, ponieważ nie można wykryć, czy określony selektor CSS działa w pliku .css. (Albo musisz sprawdzić, czy konkretna właściwość CSS z selektora CSS jest zastosowana i TO jest naprawdę brzydkie!)

ALE! Tutaj najłatwiej byłoby zapomnieć o selektorach CSS 2.1, takich jak [attr =] w plikach .css, ponieważ nie jest on powszechnie obsługiwany. A jeśli musisz pisać w przeglądarkach, które ich nie obsługują (np. Internet Explorer 6), po prostu nie możesz z nich korzystać.

Dodaj klasę dla wszystkich. Twój kod będzie łatwiejszy do zrozumienia, w przeciwnym razie zawsze dodasz niepotrzebny kod JavaScript.

Rozumiem, że nie odpowiadam, ale to jest b-a-d!

Źródło

2009-09-09 11:34:49 vvo

Dlaczego po prostu nie mają

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

następnie dodaj workaround_classname do wszystkich wejść tekstowych w twoim znaczniku.

Selektory można użyć są (myślę, że drugi z nich prawdopodobnie jest, że byłoby najłatwiej zrozumieć, co to był wybór dla kogoś innego odczytaniu kodu)

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

nie są potrzebne wykrywanie i ty nie będzie polegać na JavaScript, aby dodać nazwę klasy.

Źródło

2009-09-09 12:01:41

Korzystając z jQuery, jak sprawdzić, czy selektor CSS "input [type = text]" jest natywnie obsługiwany przez przeglądarkę?

Odpowiedz

Powiązane problemy