Heim >Web-Frontend >CSS-Tutorial >CSS-Containerabfragen, die Sie vielleicht nicht kennen! !

CSS-Containerabfragen, die Sie vielleicht nicht kennen! !

青灯夜游
青灯夜游nach vorne
2021-06-11 11:43:163411Durchsuche

CSS-Containerabfragen, die Sie vielleicht nicht kennen! !

Bei der Frontend-Entwicklung ist es häufig erforderlich, das Design entsprechend unterschiedlicher Bildschirmgrößen zu gestalten, um die Reaktionsfähigkeit von PCs und Mobilgeräten zu erreichen. Im Allgemeinen verwenden wir CSS-Medienabfragen, um die Breite oder Höhe des Ansichtsfensters zu ermitteln und dann das Design basierend auf diesem Muster zu ändern. So werden Weblayouts seit 10 Jahren gestaltet.

CSS-Containerabfrage, eine Funktion, die von Webentwicklern schon seit langem gefordert wird, wird bald in CSS erscheinen. Im neuesten Chrome Canary können wir chrome://flags/#enable-container übergeben -queries Aktiviert die Funktion „Containerabfragen“. In diesem Artikel beschreibe ich, was es ist, wie es Ihren Arbeitsablauf als Designer verändern wird und vieles mehr. chrome://flags/#enable-container-queries 开启 Container Queries 功能。在本文中,我将介绍它是什么,它将如何改变作为设计师的工作流,等等。

当前响应设计状态

当前,我们实现响应式,一般需要 UI 设计三个样式,分别是移动,平板电脑和桌面等。

CSS-Containerabfragen, die Sie vielleicht nicht kennen! !

在上图中,UI设计了三种版本,因此开发人员可以很好的实现它,这是很 nice的(这怕偷懒的 UI 只提供PC版本,这就很蛋疼)。

现在我们来看看使用媒体查询来看看怎么实现它。

CSS-Containerabfragen, die Sie vielleicht nicht kennen! !

上图是同一个组件,它有三个变体,即defaultCardFeatured。在CSS中,开发人员需要创建此组件的三个变体,其中每个组成均是唯一的。

.c-media {
  /* the default styles */
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

@media (min-with: 400px) {
  .c-media--card {
    display: block;
  }

  .c-media--card img {
    margin-bottom: 1rem;
  }
}

@media (min-with: 1300px) {
  .c-media--featured {
    position: relative;
    /* other styles */
  }

  .c-media--featured .c-media__content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}

上面的变体取决于媒体查询或视口宽度。 这意味着,我们无法根据其父宽度控制它们。 现在你可能会想,这里有什么问题? 喔或,这是一个很好的问题。

问题是,只有当视口宽度大于特定值时,开发人员才会使用组件的变体。例如,如果我在平板中使用 featured 也就是 PC 的样式,它不能工作,为什么?因为它的媒体查询宽度是大于1300px

CSS-Containerabfragen, die Sie vielleicht nicht kennen! !

不仅如此,当内容低于预期时,我们还会面临一个问题。有时,UP主可能只会添加一篇文章,而设计是包含其中的三篇。在这种情况下,要么我们将有一个空的空间,要么项目将扩展以填满可用的空间。考虑下图:

CSS-Containerabfragen, die Sie vielleicht nicht kennen! !

在第一种情况下(Case 1),文章太宽,会导致封面变形。第二种情况下(Case 2)也是一样的问题

如果使用容器查询,我们可以通过查询父组件来决定如何显示特定组件来解决这些问题。考虑下图,它展示了我们如何使用容器查询来修复这个问题。

CSS-Containerabfragen, die Sie vielleicht nicht kennen! !

这样的话,如果我们把思路转向组件的父组件呢?换句话说,如果我们查询父组件,并根据父组件的宽度或高度来决定组件应该是什么样子的呢?我们来看下容器查询的概念。

什么是容器查询

首先,让我定义容器。 它就包含另一个元素的元素,一般我们叫它 wrapper

最新的 Chrome Canary 中,我们可以通过 chrome://flags/#enable-container-queries 开启 Container Queries 功能。

当一个组件被放置在一个项中,它就被包含在该项中。这意味着,我们可以查询父元素的宽度并据此修改它。考虑下图

CSS-Containerabfragen, die Sie vielleicht nicht kennen! !

注意,每个卡片都有一个黄色的轮廓线,代表每个组件的父组件。使用CSS容器查询,我们可以根据父组件的宽度修改组件。

<div class="o-grid">
  <div class="o-grid__item">
    <article class="c-media"></article>
  </div>
  <!-- + more items -->
</div>

该组件是具有类.c-media的项,它的父级是.o-grid__item元素。 在CSS中,我们可以执行以下操作:

.o-grid__item {
  contain: layout inline-size style;
}

.c-media {
  /* Default style */
}

@container (min-width: 320px) {
  .c-media {
    /* The styles */
  }
}

@container (min-width: 450px) {
  .c-media {
    /* The styles */
  }
}

首先,我们告诉浏览器,每个带有class .o-grid

Aktueller Responsive-Design-Status

Derzeit müssen wir bei der Implementierung von Responsivität im Allgemeinen drei UI-Stile entwerfen, nämlich Mobilgeräte, Tablets und Desktops.

CSS-Containerabfragen, die Sie vielleicht nicht kennen! !CSS-Containerabfragen, die Sie vielleicht nicht kennen! !

🎜at Im Bild oben ist die Benutzeroberfläche in drei Versionen gestaltet, sodass Entwickler sie sehr gut implementieren können, was sehr schön ist (ich befürchte, dass die Lazy-Benutzeroberfläche nur die PC-Version bereitstellt, was sehr ärgerlich ist). 🎜🎜Jetzt schauen wir uns die Verwendung von Medienabfragen an, um zu sehen, wie man sie implementiert. 🎜🎜CSS-Containerabfragen, die Sie vielleicht nicht kennen! !🎜🎜Up Diagramm ist dieselbe Komponente, die drei Varianten hat, nämlich default, Card und Featured. In CSS müssen Entwickler drei Variationen dieser Komponente erstellen, wobei jede Komposition einzigartig ist. 🎜
// HTML
<div class="content">
  <aside>
    <ul>
      <li>
        <img src="shadeed.jpg" alt="Ahmad Shadeed" />
        <span class="name">Ahmad Shadeed</span>
      </li>
    </ul>
  </aside>
  <main>
    <h2>Main content</h2>
  </main>
</div>
🎜Die oben genannten Variationen hängen von Medienabfragen oder der Breite des Ansichtsfensters ab. Das bedeutet, dass wir sie nicht anhand ihrer übergeordneten Breite steuern können. Jetzt denken Sie vielleicht: Was ist hier das Problem? Oh oder, das ist eine gute Frage. 🎜🎜Das Problem besteht darin, dass Entwickler Varianten von Komponenten nur dann verwenden, wenn die Breite des Ansichtsfensters größer als ein bestimmter Wert ist. Wenn ich beispielsweise feature im PC-Stil verwende, funktioniert es nicht. Warum ist die Medienabfragebreite größer als 1300px? 🎜🎜CSS-Containerabfragen, die Sie vielleicht nicht kennen! !🎜🎜Nicht Daher stehen wir auch vor einem Problem, wenn der Inhalt hinter den Erwartungen zurückbleibt. Manchmal fügt der UP-Eigentümer möglicherweise nur einen Artikel hinzu, das Design muss jedoch drei davon umfassen. In diesem Fall haben wir entweder einen leeren Raum oder das Projekt wird erweitert, um den verfügbaren Raum zu füllen. Betrachten Sie das folgende Bild: 🎜🎜CSS-Containerabfragen, die Sie vielleicht nicht kennen! !🎜🎜Im ersten Fall (Fall 1) ist der Artikel zu breit, was zu einer Verformung der Hülle führt. Das gleiche Problem tritt im zweiten Fall (Fall 2) auf. 🎜🎜Wenn wir Containerabfragen verwenden, können wir diese Probleme lösen, indem wir die übergeordnete Komponente abfragen, um zu entscheiden, wie eine bestimmte Komponente angezeigt werden soll. Betrachten Sie das folgende Diagramm, das zeigt, wie wir Containerabfragen verwenden können, um dieses Problem zu beheben. 🎜🎜CSS-Containerabfragen, die Sie vielleicht nicht kennen! !🎜🎜Dies Was wäre also, wenn wir unsere Gedanken auf die übergeordnete Komponente der Komponente richten würden? Mit anderen Worten, was wäre, wenn wir die übergeordnete Komponente abfragen und anhand der Breite oder Höhe der übergeordneten Komponente bestimmen würden, wie diese aussehen soll? Schauen Sie sich das Konzept „Containerabfrage“ an. 🎜

🎜Was ist eine Containerabfrage?🎜

🎜Lassen Sie mich zunächst einen Container definieren. Es enthält ein Element eines anderen Elements, normalerweise nennen wir es wrapper. 🎜🎜Im neuesten Chrome Canary können wir die Funktion „Containerabfragen“ über chrome://flags/#enable-container-queries aktivieren. 🎜🎜Wenn eine Komponente in einem Artikel platziert wird, ist sie in diesem Artikel enthalten. Das bedeutet, dass wir die Breite des übergeordneten Elements abfragen und entsprechend ändern können. Betrachten Sie das Bild unten 🎜🎜CSS-Containerabfragen, die Sie vielleicht nicht kennen! ! 🎜🎜Beachten Sie, dass jede Karte einen gelben Umriss hat, der die übergeordnete Komponente jeder Komponente darstellt. Mithilfe von CSS-Containerabfragen können wir eine Komponente basierend auf der Breite ihrer übergeordneten Komponente ändern. 🎜
// CSS
.content {
  display: grid;
  grid-template-columns: 0.4fr 1fr;
}

aside {
  contain: layout inline-size style;
}

@container (min-width: 180px) {
  .name {
    display: block;
  }
}
🎜Diese Komponente ist ein Element mit der Klasse .c-media und ihr übergeordnetes Element ist das Element .o-grid__item. In CSS können wir Folgendes tun: 🎜rrreee🎜Zuerst teilen wir dem Browser mit, dass jedes Element mit einem Element der Klasse .o-grid ein Container ist. Anschließend teilen Sie dem Browser mit, dass das übergeordnete Element anders angezeigt werden soll, wenn die Breite mindestens 500 Pixel beträgt. Das Gleiche gilt für die 700px-Abfrage. So funktionieren CSS-Containerabfragen. 🎜🎜 Darüber hinaus können wir sie definieren, wo immer wir wollen, was bedeutet, dass wir bei Bedarf den Container der obersten Ebene abfragen können. Nachdem Sie nun die Grundidee der CSS-Containerabfrage verstanden haben, werfen wir einen Blick auf das Bild unten, um das Bild zu vertiefen. 🎜🎜🎜🎜

Auf der linken Seite ist dies ein Ansichtsfenster, dessen Größe geändert wird. Rechts eine Komponente, die sich je nach Breite der übergeordneten Komponente ändert. Dies ist die Funktion und Verwendung von Containerabfragen.

Design unter Berücksichtigung von Containerabfragen

Als Benutzeroberfläche müssen Sie sich an diese revolutionäre CSS-Funktion anpassen, da sie die Art und Weise, wie wir für das Web entwerfen, verändern wird. Wir entwerfen nicht nur für die Bildschirmgröße, sondern überlegen auch, wie sich die Komponente anpassen soll, wenn sich die Breite des Containers ändert.

Designsysteme werden heutzutage immer beliebter. Das Designteam erstellt eine Reihe von Regeln und Komponenten, damit andere Mitglieder die Seite darauf aufbauen können. Mit der Einführung von CSS-Containerabfragen werden wir auch entwerfen, wie sich eine Komponente basierend auf der Breite ihrer übergeordneten Komponente anpassen soll.

Berücksichtigen Sie die folgenden Designs:

CSS-Containerabfragen, die Sie vielleicht nicht kennen! !

Bitte beachten Sie, dass wir Schlagzeilen, Artikelabschnitte, Zitate und Newsletter haben. Jeder von ihnen sollte in die Breite der übergeordneten Ansicht passen.

Ich kann diese Komponenten in die folgenden Teile unterteilen

  • Viewport (Medienabfrage)
  • Parent (Containerabfrage)
  • Allgemein: Nicht betroffene Komponenten wie Schaltflächen, Beschriftungen, Absätze.

Für die Beispiel-Benutzeroberfläche sehen Sie hier, wie wir die Komponenten aufteilen.

CSS-Containerabfragen, die Sie vielleicht nicht kennen! !

Wenn wir beim Entwerfen einer Benutzeroberfläche mit dieser Denkweise denken, können wir beginnen, über verschiedene Variationen von Komponenten nachzudenken, die von der Breite ihrer übergeordneten Komponente abhängen.

Beachten Sie im Bild unten, dass jede Variation der Post-Komponente mit einer bestimmten Breite beginnt.

CSS-Containerabfragen, die Sie vielleicht nicht kennen! !

Als Designer mag es zunächst etwas seltsam sein, über die Elternbreite nachzudenken, aber so geht es weiter. Wir stellen Frontend-Entwicklern Details und Versionen jeder Komponente zur Verfügung, die sie verwenden können.

Darüber hinaus haben wir möglicherweise auch eine Variante einer Komponente, die nur in einem bestimmten Kontext angezeigt werden soll. Zum Beispiel die Seite mit der Ereignisliste. In diesem Fall ist es wichtig zu wissen, wo diese Variante eingesetzt werden kann.

Das Problem besteht darin, dem Designer mitzuteilen, wo er diese Komponenten verwenden soll.

Mit Entwicklern kommunizieren

Gute Kommunikation ist ein wichtiger Faktor für den Projekterfolg. Als Designer sollten wir Hinweise geben, wo Komponentenvarianten verwendet werden sollten. Dabei kann es sich um ein vollständiges Seitendesign oder ein einfaches Diagramm handeln, das die Verwendung der einzelnen Komponenten zeigt.

1CSS-Containerabfragen, die Sie vielleicht nicht kennen! !

Beachten Sie, wie ich jede Variante einem bestimmten Kontext und nicht einem Ansichtsfenster zugeordnet habe. Um dies weiter zu veranschaulichen, schauen wir uns an, wie sich unsere Komponenten bei Verwendung mit CSS Grid unterschiedlich verhalten.

In einem CSS-Raster können wir dem Browser mitteilen, dass Spalten erweitert werden sollen, wenn die Anzahl der Spalten geringer als erwartet ist, indem wir das Schlüsselwort „Auto-Fit“ verwenden (mehr darüber können Sie hier lesen). Diese Funktion ist sehr leistungsstark, da sie uns dabei hilft, verschiedene Variationen auf demselben Hintergrund darzustellen.

1CSS-Containerabfragen, die Sie vielleicht nicht kennen! !

Es ist sehr nützlich, eine Komponente auf die Breite ihres übergeordneten Elements reagieren zu lassen. Wie Sie gerade gesehen haben, besuchen wir die Seite in Desktop-Größe noch einmal und es gibt verschiedene Abschnitte mit jeweils einer unterschiedlichen Anzahl von Spalten.

Vermeiden Sie Komplexität beim Entwerfen reaktionsfähiger Komponenten

Es ist wichtig, sich daran zu erinnern, dass die internen Teile einer Komponente genau wie ein Lego-Spiel sind. Wir können sie nach aktuellen Änderungen sortieren, aber alles hat eine Grenze. Manchmal ist es für einen Frontend-Entwickler besser, an einer völlig neuen Komponente zu arbeiten, als Containerabfragen zum Erstellen von Variationen zu verwenden.

Bedenken Sie Folgendes. 🎙 Es gibt mehrere Variationen, wie unten gezeigt.

1CSS-Containerabfragen, die Sie vielleicht nicht kennen! !

CSS-Container-Abfrage-Anwendungsfälle
  • Lassen Sie uns einige Anwendungsfälle untersuchen, die mit CSS-Container-Abfrage implementiert werden können.
  • Chat-Liste
  • Ich sehe dieses Muster im Facebook-Messenger. Die Chatliste ändert sich je nach Breite des Ansichtsfensters. Dies können wir mithilfe von CSS-Containerabfragen erreichen.

1CSS-Containerabfragen, die Sie vielleicht nicht kennen! !Wenn genügend Platz vorhanden ist, wird die Liste erweitert und der Name jedes Benutzers angezeigt. Das übergeordnete Element der Chat-Liste kann ein Element mit dynamischer Größenänderung sein (z. B. mithilfe von CSS-Ansichtsfenstereinheiten oder CSS-Vergleichsfunktionen).

// HTML
<div class="content">
  <aside>
    <ul>
      <li>
        <img src="shadeed.jpg" alt="Ahmad Shadeed" />
        <span class="name">Ahmad Shadeed</span>
      </li>
    </ul>
  </aside>
  <main>
    <h2>Main content</h2>
  </main>
</div>
// CSS
.content {
  display: grid;
  grid-template-columns: 0.4fr 1fr;
}

aside {
  contain: layout inline-size style;
}

@container (min-width: 180px) {
  .name {
    display: block;
  }
}

aside 宽度是0.4f,所以它是动态宽度。另外,我添加了contain属性。然后,如果容器宽度大于180px,将显示用户名。

另一个类似的用例是侧导航。我们可以切换导航项标签的位置,从在新行或旁边的图标。

1CSS-Containerabfragen, die Sie vielleicht nicht kennen! !

当容器很小时,导航项标签是如何从一个新行切换的,当有足够的空间时,导航项标签是如何靠近导航图标的。

示例地址:https://codepen.io/shadeed/pen/Popmryw?editors=0100

英文原文地址:https://ishadee.com/article/contner-queries-for-designers/

作者:AAhmad Shadeed

更多编程相关知识,请访问:编程视频!!

Das obige ist der detaillierte Inhalt vonCSS-Containerabfragen, die Sie vielleicht nicht kennen! !. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen