Dans mon CSS, j'ai une règle qui doit être appliquée à tous les champs de texte (à l'aide du sélecteur CSS3 J'utilise aussi JQuery . Certains navigateurs comme Internet Explorer 6 ne supportent pas ce formulaire pour le sélecteur CSS. Donc, ma solution de contournement doit ajouter un nom de classe supplémentaire dans CSS: et via jQuery ajoutez ensuite la classe CSS: La question est la suivante: comment puis-je vous assurer Cette règle seulement est appelée lorsque les sélecteurs CSS3 ne sont pas pris en charge de manière native? entrée [type = texte] .
6 Réponses :
Pourquoi ne pas définir un style CSS inutile et vérifier si le style a été appliqué. Ajoutez seulement la classe de contournement aux éléments qui ne disposent pas de ce style appliqué.
seul problème est que je ne peux pas trouver un style "inutile" que vous pouvez utiliser: -)
Je pense que les commentaires @conitionnels pour IE6 peuvent faire le tour. (Voir ma propre réponse ci-dessous). De cette façon, les styles ne peuvent être appliqués que sur tous les champs de texte - et uniquement si le navigateur ne le supporte pas de manière native. En 8-10 ans, lorsque IE6 est vraiment supprimé, le commentaire @conitive peut être supprimé.
Cela semble incorporer quelque chose comme vous parlez de:
http: // www.w3avenue.com/2009/07/02/detect-support-for-css3-html5-with-Modernizr/
regarder http://www.geocities.com/seanmhall2003/csss3 /Detect.html . Vous devriez le faire pour chaque propriété.
Il n'y a pas de moyen facile de savoir "ce navigateur prend en charge les sélecteurs CSS3". Tout ce que vous pouvez faire est de détecter la version du navigateur et du navigateur.
modernizr ne vous aidera pas comme vous ne pouvez pas détecter si un sélecteur CSS particulier fonctionne dans un fichier .CSS. (Ou vous devez vérifier si une propriété CSS particulière de votre sélecteur CSS est appliquée et c'est vraiment laid!)
mais! Ici, le moyen le plus simple serait d'oublier les sélecteurs CSS 2.1 tels que [attr =] dans les fichiers .CSS, car il n'est pas largement pris en charge. Et si vous devez écrire pour les navigateurs qui ne les soutiennent pas (comme Internet Explorer 6), vous ne pouvez tout simplement pas les utiliser.
Alors, ajoutez une classe pour tout le monde. Votre code sera plus facile à comprendre, sinon vous ajouterez toujours un code JavaScript inutile.
Je comprends que je ne vous réponds pas, mais c'est B-A-D!
J'ai fini par utiliser des commentaires conditionnels dans mon fichier JavaScript. De cette façon, je pourrais aborder IE6 et appliquer la classe CSS
.type_text{}
.type_radio{}
.type_checkbox{}
.type_password{}
Vraiment, cela est effectivement pire que d'ajouter des classes aux éléments de tous les navigateurs lorsque vous ne pouvez pas utiliser certains sélecteurs CSS. En outre, plus JavaScript dans IE6 signifie moins de performances ... :)
Vincent, vous manquez un point important: je ne veux pas de travail supplémentaire et aucune étape supplémentaire inutile n'est effectuée par les développeurs qui mettent en œuvre mes styles. Les développeurs devraient simplement se concentrer sur la pensée: «Je veux un champ de texte ici ...» et ne pas avoir à vous rappeler d'ajouter un supplémentaire = "type_text" ou similaire. J'ai vu ça mal autant de fois.
Une autre chose qui m'a fait favoriser cette idée est qu'il n'ya absolument aucune modification aux champs existants. Et absolument aucun moyen d'oublier de définir le nom de classe.
Pourquoi pas seulement avoir
$('input:text')
// or
$('input:text.workaround_classname')
// or
$('input.workaround_classname')
Je pensais juste que je vous laisserais savoir que
[attr = val] n'est pas un sélecteur CSS3, il est 2.1 et pris en charge par tous les navigateurs modernes. Quoi de neuf dans CSS3 est[attr ^ = val] et des sélecteurs similaires de type Regex.@Vincent: J'ai dit moderne, n'est-ce pas: p
@Peirix: Merci d'avoir clarifié! CSS2.1 Les règles n'étaient apparemment pas au centre de l'équipe IE en 2001 :)