Unterstützung für CSS Vergleichsfunktionen min() , max()und clamp()erschien in Firefox auf 8. April 2020. Dies bedeutet, dass diese Funktionen jetzt in allen gängigen Browsern unterstützt werden. Diese CSS-Funktionen erweitern unsere Fähigkeit, dynamische Layouts zu erstellen und flexiblere Komponenten als zuvor zu entwerfen. Sie können verwendet werden, um die Größe von Containerelementen, Schriftarten, Einrückungen und mehr anzupassen. Ein Webdesigner, der Seitenlayouts unter Berücksichtigung der Möglichkeit der Verwendung dieser erstaunlichen Funktionen erstellt, muss möglicherweise lernen, neu zu denken. Heute möchte ich über die Merkmale dieser Funktionen sprechen, alles erklären, was in ihnen möglicherweise unverständlich ist, und praktische Beispiele für ihre Verwendung geben.
Browser-Unterstützung
Zunächst möchte ich auf die Browserunterstützung für Funktionen eingehen min(), max()und clamp(). Trotzdem erschienen sie vor relativ kurzer Zeit. Es ist zu beachten, dass die Funktionen min()und max()die gleiche Stufe der Browserunterstützung verwenden.Unterstützung für die Funktion min () (die Support-Informationen für max () sehen ebenfalls so aus)Nachfolgend finden Sie Informationen zur Unterstützung der Funktionclamp().Unterstützung der Clamp () - FunktionCSS-Vergleichsfunktionen
Die CSS-Spezifikation sagt uns, dass es Vergleichsfunktionen gibt min() , max()und clamp()ermöglicht es uns, die Werte von Ausdrücken zu vergleichen und eine davon darzustellen. Der von einer Funktion zurückgegebene Wert hängt von ihren Funktionen ab. Entdecken Sie diese Funktionen.Min () Funktion
Eine Funktion min()nimmt einen oder mehrere durch Komma getrennte Werte an und gibt den kleinsten zurück. Diese Funktion wird verwendet, um die Werte von CSS-Eigenschaften auf einen genau festgelegten Maximalwert zu beschränken.Betrachten Sie das folgende Beispiel. Die maximale Breite des Elements darf nicht überschritten werden 500px..element {
width: min(50%, 500px);
}
Bei einer Ansichtsfensterbreite von 1150 Pixel, die größer als 1000 Pixel ist, hat das Element eine Breite von 500 Pixel. DerBrowser muss den kleinsten Wert aus50%undauswählen500px. Die Breite des Ansichtsfensters wirkt sich auf das Auswahlergebnis aus. Wenn 50% der Breite des Ansichtsfensters größer als sind500px, wird dieser Wert ignoriert und die Funktion wird zurückgegeben500px.Wenn andernfalls 50% der Breite des Ansichtsfensters kleiner sind500px, wird der resultierende Wert zum Anpassen der Breite des Elements verwendet. Was denkst du, bei welcher Breite des Betrachtungsbereichs werden 50% seiner Breite nicht überschreiten500px? Das ist offensichtlich1000px. Mit dieser Breite sind beide an die Funktion übergebenen Werte gleich. Wenn die Breite des Ansichtsfensters geringer ist1000pxDann wird die Breite des Elements angepasst.Wenn die Breite des Ansichtsfensters weniger als 1000 Pixel beträgt, werden 50% dieser Breite zum Anpassen der Breite des Elements verwendet.Ich hoffe, dass ich dies alles klar erklären konnte. Ich habe lange über die Funktion nachgedachtmin()und versucht, in ihre Essenz einzudringen. Deshalb möchte ich sehr gerne klar darüber sprechen. Hier ist ein Video, das die Ergebnisse der Verwendung dieser Funktion zeigt.Die Artikelbreite ist auf 500 Pixel begrenzt.Hier ist ein interaktives Beispiel für die Aufnahme des obigen Videos. min()Versuchen Sie, die Größe des Browserfensters zu ändern, umdie Funktionin Aktion zu sehen.Funktion max ()
Die Funktion max()nimmt einen oder mehrere durch Kommas getrennte Werte an und gibt den größten zurück. Diese Funktion wird verwendet, um den Mindestwert festzulegen, den eine CSS-Eigenschaft annehmen kann.Im folgenden Beispiel muss die Elementbreite mindestens betragen 500px..element {
width: max(50%, 500px);
}
Wenn 50% der Breite des Ansichtsfensters größer als 500 Pixel sind, wird dieser Wert zum Anpassen der Breite des Elements verwendet. DerBrowser muss den Maximalwert aus50%undauswählen500px. Die Auswahl hängt von der Breite des Ansichtsfensters ab. Wenn 50% der Breite des Ansichtsfensters kleiner als sind500px, ignoriert der Browser diesen Wert und verwendet den Wert500px.Wenn 50% der Breite des Ansichtsfensters größer sind500px, wird die Breite des Elements auf diesen Wert gesetzt. Wie Sie sehen können, ist eine Funktionmax()das Gegenteil einer Funktionmin().Schauen Sie sich diese interaktive Demoan, um dies besser zu verstehen.Clamp () Funktion
Mit dieser Funktion clamp()können Sie den Variationsbereich eines bestimmten Werts begrenzen, indem Sie dessen untere und obere Grenze festlegen. Es werden drei Parameter benötigt: der Minimalwert, der berechnete (empfohlene) Wert und der Maximalwert. Wenn der berechnete Wert die durch die an die Funktion übergebenen Minimal- und Maximalwerte begrenzten Grenzwerte nicht überschreitet, wird dieser Wert zurückgegeben.Hier ist ein Beispiel..element {
width: clamp(200px, 50%, 1000px);
}
Hier passen wir die Breite des Elements an, die nicht immer kleiner 200pxwerden sollte 1000px. Wenn der Wert in 50%diese Grenzen nicht überschreitet, wird dieser Wert verwendet. So sieht es aus.Wenn 50% der Breite des Ansichtsfensters in den Bereich von 200 x 1000 Pixel fallen, wird dieser Wert zum Festlegen der Breite des Elements verwendet. In diesem Fall ist es 575px.Lassen Sie uns dieses Beispiel untersuchen:- Die Breite eines Elements wird niemals kleiner sein
200px. - Der zweite Parameter der Funktion, festgelegt als
50%, wird nur verwendet, wenn die Breite des Ansichtsfensters größer 400pxund kleiner ist 2000px. - Die Breite des Artikels wird nicht überschritten
1000px.
Infolgedessen können wir sagen, dass Sie mit der Funktion clamp()den Bereich angeben können, in dem sich der an sie übertragene berechnete Wert ändern kann.Hier können Sie mit der Seite experimentieren, die mit dieser Funktion stilisiert wurde.▍Wie werden die Ergebnisse der Funktion clamp () berechnet?
Sie können Informationen finden MDN , dass , wenn eine Funktion als Wert einer CSS - Eigenschaft verwendet wird clamp(), um es in die Konstruktion entspricht , in der die max()und Funktionen angewandt werden min(). Schauen Sie sich das folgende Beispiel an:.element {
width: clamp(200px, 50%, 1000px);
width: max(200px, min(50%, 1000px));
}
Der Wert 50%hängt von der Breite des Browser-Anzeigebereichs ab. Stellen Sie sich vor, die Breite des Ansichtsfensters ist 1150px..element {
width: max(200px, min(50%, 1000px));
width: max(200px, min(575px, 1000px));
width: max(200px, 575px);
width: 575px;
}
▍Kontext ist wichtig
Der berechnete Wert hängt vom Kontext ab. Wenn Sie einen berechneten Wert angeben, können Sie verschiedene Maßeinheiten verwenden: %, em, rem, vw/vh. Selbst wenn der Wert als Prozentsatz ausgedrückt wird, kann bei der Berechnung entweder die Breite des Ansichtsfensters verwendet werden - wenn sich das Element im Tag befindet <body>, oder die Breite eines anderen Elements, das der Container des Elements ist.AthMath Ausdrücke
Es ist erwähnenswert, dass Sie bei der Verwendung einer Funktion clamp()mathematische Ausdrücke an diese übergeben können, sodass wir keine Funktion verwenden müssen calc(). Die Spezifikation sagt uns, dass clamp()vollständige mathematische Ausdrücke in jedem der Argumente verwendet werden können . Daher sind keine verschachtelten Funktionen erforderlich calc(). Wenn Sie außerdem mehrere Einschränkungen auf den Endwert anwenden müssen, können Sie mehr als zwei Argumente an die Funktion übergeben.Schauen Sie sich das folgende Beispiel an:.type {
font-size: clamp(12px, 10 * (1vw + 1vh) / 2, 100px);
}
Was werden CSS-Vergleichsfunktionen bei der Gestaltung von Seitenlayouts ändern?
Es kommt häufig vor, dass sich ein Designer beim Entwerfen einer Seite sowohl auf mobile Geräte als auch auf Desktop-Geräte konzentriert und dabei auf zwei Szenarien setzt. Bei der Arbeit an einigen Projekten müssen mehr Szenarien berücksichtigt werden.Ich sehe diese Situation wie unten gezeigt.Im Obergeschoss werden Seiten heute so gestaltet. Im Folgenden sehen Sie, was Sie in Zukunft erwarten können.Oben in der Abbildung sehen Sie, wie die Seiten heutzutage gestaltet sind. Hier sehen Sie mehrere Schritte, die verschiedene Anzeigebereiche darstellen, auf denen die Seite gestaltet werden soll. Diese Schritte können beispielsweise den Wert einer Eigenschaft darstellen. Der untere Teil der Abbildung zeigt einen kontinuierlichen Wertebereich, der durch Begrenzen dieses Werts auf ein bestimmtes Minimum und Maximum erhalten werden kann. Ich glaube, dass Designer beispielsweise in Zukunft beim Festlegen der Schriftgröße etwas Ähnliches wie das unten gezeigte tun werden.Die minimalen, empfohlenen und maximalen Werte der Immobilie.Für mich ist das einfach wunderbar. Ich bewundere die Idee, an Projekten zu arbeiten, deren Komponenten etwas Flexibilität benötigen. Natürlich müssen nicht alle Komponenten dynamisch sein, aber einige von ihnen können sehr gut sein.Anwendungsfälle
▍ Seitenleiste und Hauptseitenbereich
Links ist die Seitenwand. Auf der rechten Seite befindet sich der Hauptbereich der Seite.Normalerweise haben die Seitenwände der Seiten eine feste Breite, und die Breite der Hauptbereiche passt sich flexibel an den Anzeigebereich an. Wir können die Funktionen der Seitenleiste erweitern und dynamischer gestalten, sodass sie mit einem ausreichend großen Anzeigebereich mehr Platz beansprucht. Um dies zu erreichen, müssen Sie die Größe der Mindestbreite der Seitenleiste mithilfe der Funktion begrenzenmax().Betrachten Sie das folgende Beispiel..wrapper {
display: flex;
}
aside {
flex-basis: max(30vw, 150px);
}
main {
flex-grow: 1;
}
Die Mindestbreite des Elements asidebeträgt 150px. Es wird größer, 30vwwenn die Breite des Ansichtsfensters größer ist 500px(500 * 30% = 150).→ Hier ist ein Beispiel▍ Schriftgröße der Kopfzeile
Flexible Anpassung der Header-SchriftgrößeEin hervorragendes Skript für die Verwendung der Funktionclamp()ist die flexible Anpassung der Header-Schriftgröße. Stellen Sie sich vor, wir benötigen die minimale Schriftgröße des Headers16pxund die maximale -50px. Dank der Verwendung der Funktion könnenclamp()wir die Schriftgröße innerhalb dieser Werte einstellen, ohne sie zu verringern oder zu erhöhen..title {
font-size: clamp(16px, 5vw, 50px);
}
Funktion clamp()ist die perfekte Lösung für das oben genannte Problem. Sie können die Schriftgröße so einstellen, dass der Text in verschiedenen Größen des Anzeigebereichs zugänglich und leicht lesbar bleibt. Wenn Sie hier beispielsweise die Funktion verwenden min(), verlieren wir die Kontrolle über die Schriftgröße auf der Seite, die in kleinen Anzeigebereichen angezeigt wird..title {
font-size: min(3vw, 24px);
}
Das Folgende ist eine Illustration dieser Idee.Wenn Sie die Funktion min () verwenden, wird der Text auf dem kleinen Bildschirm zu klein angezeigt.Auf dem Bildschirm des Mobilgeräts ist die Schriftgröße zu klein. Daher wird nicht empfohlen, nur eine Funktion zum Einstellen der Schriftgrößen zu verwendenmin(). Natürlich kann die Schriftgröße mithilfe einer Medienabfrage neu konfiguriert werden, aber dann geht die Bedeutung der Verwendung von CSS-Vergleichsfunktionen vollständig verloren.Wie bereits erwähnt, kann eine Funktionmin()innerhalb einer Funktion verwendet werdenmax(). Auf diese Weise können Sie die Funktionen der Funktion reproduzierenclamp()..title {
font-size: max(16px, min(10vw, 50px));
}
Hier können Sie mit einem Beispiel experimentieren.Ich möchte darauf hinweisen, dass sich nach der Diskussion auf Twitter herausstellte, dass es nicht ganz richtig ist, die 10vwSchriftgröße als berechneten Wert zu verwenden. Wir sprechen nämlich über die Tatsache, dass dies zu Zugänglichkeitsproblemen führen wird, wenn der Benutzer den Browser vergrößert.Daher ist es besser, dies zu tun:.title {
font-size: clamp(16px, (1rem + 5vw), 50px);
}
Hier wird der Ausdruck als berechnete Schriftgröße angegeben (1rem + 5vw). Dies löst das Problem.▍Dekorative Überschriften
Dekorative durchscheinende Überschrift, die mit einer sehr großen Schrift angezeigt wird.Sehen Sie einen großen durchscheinenden Text unter der Überschrift? Dies ist ein dekorativer Titel, dessen Abmessungen mit der Größe des Ansichtsfensters übereinstimmen sollten. Um einen solchen Header zu bilden, können Sie die Funktionmax()mit einem Wert verwenden, der in an sie übergebenen Maßeinheiten ausgedrückt wirdvw. Dadurch kann sichergestellt werden, dass die Schriftgröße nicht unter dem angegebenen Wert liegt..section-title:before {
content: attr(data-test);
font-size: max(13vw, 50px);
}
→ Hier ist ein Arbeitsbeispiel▍ Glatte Farbverläufe in verschiedenen Anzeigebereichen ausgeben
Wenn Sie Farbverläufe mithilfe von CSS anpassen, müssen Sie sie möglicherweise dynamisch anpassen, damit Farbverläufe auf mobilen Bildschirmen flüssiger angezeigt werden. Schauen Sie sich das folgende Beispiel an. Es gibt einen solchen Gradienten:.element {
background: linear-gradient(135deg, #2c3e50, #2c3e50 60%, #3498db);
}
Der Farbverlauf auf dem mobilen Bildschirm ist durch einen zu scharfen Übergang zwischen den Farben gekennzeichnet.Bitte beachten Sie, dass auf dem mobilen Bildschirm der Rand der Farbtrennung deutlich sichtbar ist. Das ist schlecht. Sie können die Situation mit Hilfe einer guten alten Medienanfrage korrigieren. (Ups, es scheint, dass ich Medienabfragen bereits als "gute alte Technologie" betrachte.)@media (max-width: 700px) {
.element {
background: linear-gradient(135deg, #2c3e50, #2c3e50 25%, #3498db)
}
}
Obwohl dies ein normaler Weg ist, um das Problem zu lösen, können wir in einer ähnlichen Situation die CSS-Funktion verwenden min()..element {
background: linear-gradient(135deg, #2c3e50, #2c3e50 min(20vw, 60%), #3498db);
}
Das Ergebnis ist das, was unten gezeigt wird.Der Farbverlauf sieht auf jedem Bildschirm glatt aus→ Hier ist eine Demonstration dieser Idee▍ Durchscheinender Gradient
Wenn Sie Text auf ein Foto legen müssen, sollte darunter ein Farbverlauf "eingefügt" werden. Dies erleichtert das Lesen von Text. Wie im vorherigen Beispiel sollten die Verlaufsparameter von der Größe des Ansichtsfensters abhängen. Schauen Sie sich die folgende Abbildung an.Flexible Verlaufseinstellungen auf Bildschirmen unterschiedlicher Größe.element {
background: linear-gradient(to top, #000 0, transparent max(20%, 20vw));
}
Dank dieser kleinen Verbesserung sieht der Gradient auf Mobilgeräten viel besser aus als zuvor. Wenn die Verlaufsgröße auf dem Desktop-Bildschirm 50% des übergeordneten Elements entspricht, sollte sie auf dem mobilen Gerät bereits im Bereich von 30% liegen. Mit der Funktion können Sie den Mindestwert der Verlaufsgröße einstellen max().→ Hier ist ein Beispiel▍Dynamische Außenränder
Anpassen der EinrückungSie können Einheiten verwenden, die den Merkmalen des Ansichtsfensters zugeordnet sind, um die dynamische Einrückung von Elementen anzupassen. Dieser Ansatz zeigt sich jedoch nicht immer gut. Tatsache ist, dass der Benutzer die Seite auf dem gedrehten Bildschirm eines mobilen Geräts mit einer sehr großen vertikalen Höhe anzeigen kann. So lösen Sie dieses Problem mithilfe von Medienabfragen:h1, h2, h3, h4, h5 {
margin: 7vh 0 1.05rem;
}
@media (max-height: 2000px) {
h1, h2, h3, h4, h5 {
margin: 2.75rem 0 1.05rem;
}
}
Obwohl dieser Code korrekt funktioniert, kann der gleiche Effekt mit nur einer Codezeile erzielt werden:h1, h2, h3, h4, h5 {
margin: min(7vh, 2.75rem) 0 1.05rem;
}
Mit der Funktion setzen min()wir den maximalen Einrückungswert auf 2.75rem. Wie Sie sehen können, ist es sehr einfach und bequem.→ Hier ist ein Arbeitsbeispiel▍ Behälterbreite
Dynamische Anpassung der Breite eines ContainersAngenommen, wir benötigen ein Containerelement, dessen Breite 80% der Breite des übergeordneten Elements betragen sollte. Die Breite des Behälters sollte nicht überschreiten780px. Wie erstelle ich einen ähnlichen Container? Normalerweise machen sie in dieser Situation so etwas:.container {
max-width: 780px;
width: 80%;
}
Mit der Funktion min()können Sie jedoch die maximale Breite des Containers wie folgt begrenzen:.container {
max-width: min(80%, 780px);
}
→ Hier ist ein Arbeitsbeispiel▍ Vertikaler Einzug
clamp()Ich mag die Funktion insofern, als sie ideal ist, um die Größe der Einrückung von Seitenabschnitten zu begrenzen. Schauen Sie sich das folgende Beispiel an, das die Konfiguration oben auf der Seite zeigt (Heldenabschnitt).Festlegen der Einrückung des Abschnitts oben auf der Seite Sie könnendie Einrückung eines solchen Abschnitts mit nur einer Zeile CSS-Code flexibel anpassen..hero {
padding: clamp(2rem, 10vmax, 10rem) 1rem;
}
→ Hier ist ein Beispiel▍Grenzen und Schatten
Hier ist ein Video, das ein Element zeigt, das einen breiten Rand hat.Element mit breitem RandIn einigen Fällen werden bei der Gestaltung von Seiten Elemente mit breitem Rand und Radien mit großem Radius verwendet. Wenn solche Elemente auf mobilen Bildschirmen angezeigt werden, müssen ihre Grenzen verkleinert werden. Gleiches gilt für Eckradien. Mit der Funktionclamp()können Sie die Rahmenparameter dynamisch anpassen und an die Breite des Anzeigebereichs binden..element {
box-shadow: 0 3px 10px 0 red;
border: min(1vw, 10px) solid #468eef;
border-radius: clamp(7px, 2vw, 20px);
box-shadow: 0 3px clamp(5px, 4vw, 50px) 0 rgba(0, 0, 0, 0.2);
}
Hier können Sie mit einem Arbeitsbeispiel experimentieren.▍ Abstand zwischen Zellen des Rasterlayouts
RasterlayoutEine interessante Möglichkeit, die Funktion zu verwenden,clamp()besteht darin, die Eigenschaftgrid-gapin Rasterlayouts festzulegen. Insbesondere sprechen wir über die Tatsache, dass auf mobilen Bildschirmen der Abstand zwischen den Gitterzellen geringer wäre als auf Desktop-Zellen..wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: clamp(1rem, 2vw, 24px);
}
Wenn Sie beim Entwerfen von Rasterlayouts CSS-Vergleichsfunktionen verwenden möchten, lesen Sie diesen guten Artikel.→ Hier ist ein Beispiel für diesen Abschnitt▍Verwenden Sie CSS-Funktionen zum Vergleichen von Werten ohne Einheiten
Während des Experimentierens mit CSS-Funktionen habe ich mich entschlossen herauszufinden, was passiert, wenn Sie Funktionen clamp()als Mindestwert übergeben 0. So sieht es im Code aus:.element {
width: clamp(0, 10vmax, 10rem);
}
Das ist schlechtes CSS. Ich glaube, Tatsache ist, dass Zahlen ohne Maßeinheiten hier nicht verwendet werden sollten.▍ Redundante Mechanismen für Browser, die min (), max () und clamp () nicht unterstützen
Wie bei allen anderen neuen CSS - Funktionen ist, die Anwendung Funktionen min(), max()und clamp()müssen Sie kümmern sich um die Sicherungsmechanismen nehmen. Um diese Mechanismen zu erstellen, können Sie einen der folgenden Ansätze verwenden.1. Manuelle Konfiguration des Sicherungsmechanismus
Unter manueller Konfiguration versteht man hier das Hinzufügen einer Eigenschaft zum Code, die eine breite Browserunterstützung bietet. Diese Eigenschaft muss vor der Eigenschaft platziert werden, die CSS-Vergleichsfunktionen verwendet. So könnte es aussehen:.hero {
padding: 4rem 1rem;
padding: clamp(2rem, 10vmax, 10rem) 1rem;
}
Hier werden unterstützende Browser clamp()den ersten Ausdruck ignorieren. Und diejenigen, die diese Funktion nicht unterstützen, verwenden den ersten Weg, um die Einrückung anzupassen.2. Verwenden der CSS-Direktive unterstützt
Eine Direktive @supportszum Testen der Browserunterstützung für verschiedene Technologien kann verwendet werden, um herauszufinden, ob der Browser mit CSS-Vergleichsfunktionen arbeiten kann. Ich bevorzuge diese Lösung anstelle der im ersten Absatz beschriebenen manuellen. Tatsache ist, dass jeder Browser, der Vergleichsfunktionen unterstützt, auch die Direktive unterstützen muss @supports..hero {
padding: 4rem 1rem;
}
@supports (width: min(10px, 5vw)) {
.hero {
padding: clamp(2rem, 10vmax, 10rem) 1rem;
}
}
▍Über die Verfügbarkeit von Inhalten
Während CSS-Vergleichsfunktionen uns eine neue Möglichkeit bieten, mit ihnen flexiblere Webseiten zu erstellen, muss vorsichtig vorgegangen werden. Beispielsweise reicht min()es font-sizenicht aus , nur eine Funktion zum Festlegen einer Eigenschaft zu verwenden . Tatsache ist, dass auf Mobilgeräten eine Schriftart, deren Größe nur mit dieser Funktion festgelegt wird, möglicherweise zu klein ist. Denken Sie beim Einrichten besonders wichtiger Seiteninhalte daran, die minimalen und maximalen Einstellungen zu beschränken. Andernfalls kann sich die Benutzererfahrung bei der Arbeit mit dem Projekt verschlechtern.Haben Sie CSS - Funktionen verwenden min(), max()und clamp()?