Lassen Sie die Containeranfragen nicht vergessen

Die CSS -Container -Abfrage war schon immer eines der Merkmale, die Entwickler nachdrücklich verbessert haben. Es ist eine allgemeine Ansicht, dass wir nicht so viele globale Medienabfragen basierend auf der Seitengröße schreiben müssen, wenn wir Containerabfragen haben. Denn das, was wir wirklich kontrollieren möchten, ist ein lokalerer Container, und jetzt können wir es nur mit Medienabfragen implementieren, einfach weil es das beste Tool in CSS ist. Ich stimme dem vollkommen zu.

Es gibt aber auch eine Ansicht, die von Zeit zu Zeit erscheint: "Entwickler glauben, dass Containerfragen benötigt werden, aber sie sind es nicht." Ich stimme dieser Aussage nicht zu. Wenn die Containerabfrage verfügbar ist, können wir offensichtlich viele nützliche Dinge damit tun, wobei die wichtigste das Schreiben von saubererem, leichter zu portieren und leichter zu verstehen. Es scheint ein Konsens zu sein, heute komponentenbasierte Benutzeroberflächen zu erstellen, was die Nachfrage nach Containerfragen noch offensichtlicher macht.

Derzeit gibt es einige moderne JavaScript -Methoden, mit denen wir heute Containerabfragen verwenden können. Dies bedeutet jedoch nicht, dass diese Technologie im JavaScript -Bereich bleiben muss. Es macht in CSS mehr Sinn.

Hier sind einige meiner Gedanken zu diesem Thema Ende 2019:

• Philip Waltons "Responsive Komponenten: Lösungen zur Lösung von Problemen mit Containerabfragen" zeigt eine gute Möglichkeit, JavaScripts RESIZEOBSERVERVER zur Lösung des aktuellen Problems zu verwenden. Es funktioniert gut und funktioniert überall. Die Demo -Website ist die beste, da sie die Anforderungen reaktionsschneller Komponenten hervorhebt (obwohl es andere dokumentierte Anwendungsfälle gibt). Philip sagt sogar, reine CSS -Lösungen wären idealer.
• Vor ungefähr einem Jahr verursachte CSS Nisting einen Wahnsinn. Diskussionen scheinen zu zeigen, dass das Nisten machbar ist. Als langjähriger Verfechter rationaler Sass -Nisting stimme ich dem zu. Das frage mich, ob die Syntax der Containerabfrage etwas Ähnliches nutzen kann. Vielleicht ist der Umfang verschachtelter Anfragen auf den übergeordneten Selektor beschränkt? Oder verwenden Sie ein Ampersand als Präfix, um Medienanweisungen darzustellen, wie die aktuelle Spezifikation bei Nachkommenswählern?
• Andere vorgeschlagene Syntaxe beinhalten normalerweise die Verwendung eines Dickdarms, wie .container:media(max-width: 400px) { } . Ich mag das auch. Einzelkolon -Selektoren (Pseudo -Selektoren) sind philosophisch "Elemente unter diesen Bedingungen auswählen" - zum Beispiel :hover ,: :nth-child usw. - Also macht der Medienbereich Sinn.
• Ich denke nicht, dass Syntax das größte Hindernis für diese Funktion ist. Es ist seine Implementierungsleistung. Soweit ich es zuletzt weiß, ist es noch eher ein Leistungsproblem, es stört den gesamten Rendering -Prozess der Funktionsweise des Browsers. Dies scheint ein großes Hindernis zu sein. Aber ich will es immer noch nicht vergessen. Es gibt viele Innovationen im Internet, und nur weil es nicht klar ist, wie man es heute erreicht, heißt das nicht, dass morgen niemand einen praktikablen Weg nach vorne findet.

Das obige ist der detaillierte Inhalt vonLassen Sie die Containeranfragen nicht vergessen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!