Safari と Chrome/Firefox では、マルチレベル `:not()` セレクターの処理が異なるのはなぜですか?

クロスブラウザーでの :not() セレクターのテスト: Safari と Chrome/Firefox の互換性

最近のクエリで、開発者が次のような問題に遭遇しました。 Chrome や Firefox と比較して、Safari で :not() セレクターを使用する場合の不一致。この件を調査したところ、これらのブラウザが :not() 内のマルチレベル セレクターを処理する方法に矛盾があることが判明しました。

Safari の進化する :not() 実装

Safari では、最近、:not() のレベル 4 仕様が実装され、引数としての複雑なセレクターのサポートが導入されました。これにより、特定の親の子孫ではない要素をターゲットにするなど、より高度なセレクターのネストが可能になります。

マルチレベル :not() に関する Chrome/Firefox の制限

対照的に、Chrome と Firefox は現在、:not() 内の単一レベルのセレクターのみをサポートしています。 「p div」などの複雑なセレクターは、これらのブラウザーでは認識されません。これは、CSS 仕様とブラウザ実装の違いによるものです。

潜在的なバグ レポート

マルチレベル :not() の異なるレンダリング動作に関する開発者の観察Safari のセレクターは潜在的なバグであると考えられます。最新の CSS 仕様に従い、より複雑な :not() 引数をサポートするには、Chrome と Firefox を更新する必要がある可能性があります。

開発者への影響

依存する開発者Web アプリケーションまたはスタイルシートの複雑な :not() セレクターでは、このブラウザー間の不一致を認識する必要があります。古いブラウザとの互換性が必要な場合は、ブラウザ間で一貫したレンダリングを確保するために、代替セレクター パターンを使用するか、ポリフィルを採用する必要がある場合があります。

予想される変更

状況は次のとおりです。ブラウザが最新の CSS 仕様を採用するにつれて進化する可能性があります。 Chrome と Firefox は最終的に、マルチレベルのサポートを備えた :not() の全機能を実装することが期待されています。これにより、ブラウザ間の互換性が最前線に導入され、より表現力豊かで効率的な CSS セレクターが可能になります。

以上がSafari と Chrome/Firefox では、マルチレベル `:not()` セレクターの処理が異なるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。