Die oft genannten Gründe, die Container-Abfragen schwierig oder unmöglich machen, sind Dinge wie Endlosschleifen – z. B. die Änderung der Breite eines Elements, die eine Container-Abfrage ungültig macht, die wiederum die Breite ändert, wodurch die Container-Abfrage wirksam wird usw. Aber das wurde mit Containment gelöst. Ein „Elternselektor“ oder :has, wie er jetzt offiziell genannt wird (ich mag ihn, so hat es jQuery gemacht, obwohl Adrian auf einen Tweet hinwies, der bemerkte, dass er vielseitiger ist), hatte traditionell ähnliche Probleme. Dinge wie die Notwendigkeit eines „Mehrfach-Pass“-Renderings, das zu langsam ist, um akzeptabel zu sein.
Hauptsächlich ist es selbst ohne
:has()ziemlich schwierig, die Performance-Garantien von CSS zu erfüllen, wo alles weiterhin „live“ mit 60 Bildern pro Sekunde ausgewertet und gerendert wird. Wenn man mathematisch darüber nachdenkt, wie viel Arbeit konzeptionell in die Anwendung von Hunderten oder Tausenden von Regeln fließt, während sich das DOM ändert (einschließlich während des Parsens), ist es an sich schon eine ziemliche Leistung.
Engines haben herausgefunden, wie sie dies basierend auf cleveren Mustern und Beobachtungen optimieren können, die die konzeptionell notwendige Arbeit vermeiden – und vieles davon basiert auf diesen Subjektinvarianten, diehas()scheinbar über Bord wirft.
Die Tatsache, dass es jetzt eine Spezifikation gibt, ist sehr ermutigend, und dass Igalia ein Auge darauf hat. Anscheinend wurden einige der Performance-Probleme entweder überwunden oder durch Tests als vernachlässigbar genug eingestuft, um eine versendbare Funktion zu bleiben.
Das Team von Igalia hat an einigen bemerkenswerten Web-Engine-Funktionen gearbeitet, wie CSS Grid und Container-Abfragen, daher besteht die Chance, dass der
:has-Selektor das Licht der Welt erblickt, aber es ist noch ein langer Weg.Was macht relationale Selektoren zu einer der am häufigsten nachgefragten Funktionen in den letzten Jahren, und wie umgehen Entwickler den fehlenden Selektor? In diesem Artikel werden wir diese Fragen beantworten und die frühe Spezifikation des
:has-Selektors untersuchen und sehen, wie er den Styling-Workflow nach seiner Veröffentlichung verbessern soll.
Drücken wir die Daumen. Ich beobachte das seit 10 Jahren und versuche, Anwendungsfälle zu dokumentieren.
RIESIGER Anwendungsfall
Durch die Kombination von
:has()und der allgegenwärtigen (live) reaktiven Natur von CSS können Regeln geschrieben werden, um dynamisch geladene Daten mit Kindselektoren und/oder Attributen zu „antizipieren“ und dann darauf zu reagieren, *ohne JavaScript zu verwenden*.Dies fördert das Prinzip der geringsten Macht und eine sauberere Entkopplung und Trennung der Belange.
Einfaches Beispiel… Nur wenn diese CSS-Regel wahr wird, verschwindet die Ladeanimation und der übergeordnete Container gleitet auf den Bildschirm.
Ich habe das Gefühl, dass jede Woche ein neuer Artikel über den :has-Selektor hier gepostet wird, und es gibt nie neue Informationen. Soweit ich weiß, ist es keine Gedanken wert, bis ich es in Canary sehe.