Pourquoi Safari et Chrome/Firefox diffèrent-ils dans leur gestion des sélecteurs `:not()` multi-niveaux ?

Test des sélecteurs :not() multi-navigateurs : bizarreries dans Safari par rapport à Chrome/Firefox

Dans une requête récente, un développeur a rencontré incohérences lors de l'utilisation des sélecteurs :not() dans Safari par rapport à Chrome et Firefox. En enquêtant sur le cas, nous avons découvert une divergence dans la façon dont ces navigateurs gèrent les sélecteurs multi-niveaux dans :not().

L'implémentation évolutive de :not() de Safari

Safari a a récemment implémenté la spécification de niveau 4 de :not(), qui introduit la prise en charge des sélecteurs complexes comme arguments. Cela permet une imbrication de sélecteurs plus sophistiquée, comme le ciblage d'éléments qui ne sont pas les descendants d'un parent spécifique.

Limitation de Chrome/Firefox avec multi-niveau :not()

En revanche, Chrome et Firefox ne prennent actuellement en charge que les sélecteurs à un seul niveau dans :not(). Les sélecteurs complexes, comme « p div », ne sont pas reconnus par ces navigateurs. Cela est dû aux différences dans les spécifications CSS et les implémentations du navigateur.

Rapport de bug potentiel

Observation par le développeur de différents comportements de rendu pour un :not() multi-niveaux Le sélecteur dans Safari peut être considéré comme un bug potentiel. Il est possible que Chrome et Firefox soient mis à jour pour suivre la dernière spécification CSS et prendre en charge des arguments :not() plus complexes.

Implications pour les développeurs

Les développeurs qui s'appuient sur sur les sélecteurs :not() complexes pour leurs applications Web ou feuilles de style doivent être conscients de cette incohérence entre navigateurs. Si la compatibilité avec les anciens navigateurs est requise, il peut être nécessaire d'utiliser des modèles de sélection alternatifs ou d'employer des polyfills pour garantir un rendu cohérent entre les navigateurs.

Changements anticipés

La situation est susceptible d'évoluer à mesure que les navigateurs adoptent les dernières spécifications CSS. Il est prévu que Chrome et Firefox implémentent à terme toute la puissance de :not() avec un support multi-niveaux. Cela mettra la compatibilité entre navigateurs au premier plan et permettra des sélecteurs CSS plus expressifs et efficaces.

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!