JQuery prend-il vraiment en charge tous les sélecteurs CSS3 ? Le mystère de :nth-last-child() et au-delà.

Démêler la prise en charge du sélecteur CSS3 de jQuery : démystifier :nth-last-child() et au-delà

Alors que jQuery prend en charge un éventail de CSS sélecteurs, ses capacités CSS3 peuvent vous laisser perplexe. Un tel exemple est le sélecteur :nth-last-child(), apparemment opérationnel dans les navigateurs modernes comme Firefox, Chrome et IE 9 mais curieusement absent dans la documentation officielle.

L'architecture du sélecteur de jQuery

L'implémentation du sélecteur de jQuery repose sur une approche à deux volets. Il tente initialement d'utiliser la méthode native document.querySelectorAll(), offrant une compatibilité avec les derniers sélecteurs CSS. Si cette approche échoue, jQuery se rabat sur sa propre bibliothèque de sélection, Sizzle.

Cette stratégie présente une explication de la fonctionnalité apparente de :nth-last-child() dans certains navigateurs. En tant que sélecteur CSS valide, les navigateurs prenant en charge document.querySelectorAll() (tels que Firefox, Chrome et IE 9) peuvent le traiter directement et renvoyer la liste de nœuds appropriée, contournant ainsi Sizzle.

Dévoilement du Sélecteurs CSS3 pris en charge

À partir de jQuery 1.9, Sizzle (la bibliothèque de sélecteurs de jQuery) prend en charge pratiquement tous les sélecteurs CSS3 définis dans la norme Selectors niveau 3, à quelques exceptions notables près :

• Pseudo-éléments : Les sélections explicites ne sont pas possibles en raison de leur incarnation basée sur CSS en tant qu'abstractions de l'arborescence du document.
• Pseudo-classes dynamiques : Basées sur les événements les pseudo-classes comme :hover, :active et :focus ne sont pas prises en charge. Au lieu de cela, des gestionnaires d'événements doivent être utilisés pour exécuter du code lorsque les éléments entrent et quittent ces états.
• Préfixes d'espace de noms : jQuery ne gère pas l'espace de noms en CSS.

Sélecteurs introduits dans jQuery 1.9

Avec jQuery 1.9, une gamme de sélecteurs de niveau 3 est devenue disponible, notamment :

• :target
•  : racine
• :nth-last-child()
• :nth-of-type()
• :nth-last-of-type()
• :first-of-type
• :last-of-type
• :only-of-type

Mises en garde concernant la compatibilité

jQuery 1.8 et les versions antérieures ne prennent pas en charge les sélecteurs ci-dessus, ainsi que :lang(), un sélecteur CSS2.

Le cas de :nth-last-child()

Dans votre exemple avec :nth-last-child(), le sélecteur est traité avec succès par Firefox, Chrome et IE 9 car ces navigateurs prennent en charge document.querySelectorAll(). Cependant, le mode d'émulation d'IE 8 échoue car il ne prend pas en charge :nth-last-child(). Étant donné que jQuery/Sizzle n'implémente pas non plus ce sélecteur, il n'y a pas de mécanisme de secours, ce qui entraînerait un échec.

Combler l'écart

Dans les cas où il n'est pas possible de passer à jQuery 1.9 ou version ultérieure, vous pouvez envisager d'implémenter les pseudo-classes manquantes à l'aide des extensions de sélecteur personnalisées de jQuery. Il convient de noter que jQuery 1.9 offre une compatibilité avec les anciennes versions d'IE tout en ajoutant la prise en charge des sélecteurs mentionnés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!