Advertisement
  1. Web Design
  2. CSS

Erste Schritte mit CSS-Mathematikfunktionen Stufe 4

by
Read Time:12 minsLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Funktionale Notationen sind Teil des CSS Values and Units Module, das auch nützliche mathematische Funktionen wie calc() und ab Level 4 min() und max() beherbergt. Diese leistungsstarken Funktionen öffnen unglaubliche Türen für CSS-Autoren, die mathematische Logikfähigkeiten innerhalb von CSS benötigen. In diesem Artikel besprechen wir calc(), min() und max() und wie alle drei gerade bei Ihrer Arbeit nützlich sein können. Lass uns anfangen!

Was zum Teufel sind funktionale Notationen?

Funktionale Notationen ist einer von neun übergeordneten Abschnitten (Abschnitt acht, um genau zu sein) des W3C CSS Values and Units Module. Ab dem Level 4 Editor's Draft enthält Functional Notations nun weitere Unterabschnitte wie toggle(), das das Umschalten zwischen Werten ermöglicht, und Attributreferenzen durch die Verwendung von attr(). Es gibt auch einen weiteren interessanten Unterabschnitt namens "Mathematische Ausdrücke", der unsere benutzerfreundlichen mathematischen Funktionen calc(), min() und max() umfasst.

Wenden wir uns der W3C-Definition zu, um zu verstehen, was funktionale Notationen sind:

"Eine funktionale Notation ist eine Art von Komponentenwert, der komplexere Typen darstellen oder eine spezielle Verarbeitung aufrufen kann. Die Syntax beginnt mit dem Namen der Funktion, unmittelbar gefolgt von einer linken Klammer, gefolgt von den Argumenten der Notation gefolgt von einer rechten Klammer."

In Laienbegriffen heißt es, es sei ein "Funktionsname" wie calc, gefolgt vom Öffnen ( und Schließen ) von Klammern. Aber was geht zwischen ihnen?

Einführung in mathematische Ausdrücke

Wie bereits erwähnt, ist "Mathematische Ausdrücke" ein Unterabschnitt von "Funktionale Notationen", aber was sind sie und was tun sie? Wenden wir uns noch einmal dem W3C zu, wo sie wie folgt definiert sind:

"Mit den mathematischen Funktionen calc(), min() und max() können mathematische Ausdrücke mit Addition (+), Subtraktion (-), Multiplikation (*) und Division (/) als Komponentenwerte verwendet werden."

Das heißt, calc(), min() und max() sind "mathematische Funktionen", die "Ausdrücke" in Klammern erlauben, um "Werte zu berechnen". Okay, das ist jetzt klar. Der Begriff "Ausdrücke" ist nur eine ausgefallene Art zu sagen, "mathematische Logik ist in Klammern völlig erlaubt".

In Stufe 4 wurde eine neu aktualisierte Definition eingeführt, um das bisher bekannte zu ergänzen:

"Komponenten einer mathematischen Funktion können Literalwerte, andere mathematische Funktionen oder andere Ausdrücke wie attr() sein, die zu einem gültigen Argumenttyp (wie <lenght>) ausgewertet werden."

Zur weiteren Verdeutlichung sind die "anderen mathematischen Funktionen", auf die hier verwiesen wird, calc(), min() und max(), aber sie geben auch an, dass diese Funktionen ineinander verschachtelt werden können. Sie könnten calc(min()), min(calc()), calc(max(min())), calc(min(attr())) und so weiter schreiben. Mein Vorschlag ist jedoch, Ihr Bestes zu geben und den Verschachtelungswirbel zu vermeiden, auch wenn dies möglich ist, wie es die Spezifikation vorschlägt.

Sagen wir jetzt noch einmal "Hallo" zu ein paar herausragenden Mathefunktionen, die fast ihre Chance verloren haben, der CSS-Arbeitsgruppe die Hand zu schütteln.

Willkommen zurück min() und max()

Die Funktionen min() und max() sind zwei mathematische Funktionen, die ihre Spuren hinterlassen haben, aber erst nachdem sie fast aus dem Editor-Entwurf für Werte und Einheiten Level 4 entfernt wurden. Dank Lea Verou hat der Wind der Veränderung Einzug gehalten und ich könnte nicht glücklicher sein.

"Vielleicht ist es jetzt, da die Werte 3 zu CR gegangen sind, an der Zeit, die Hinzufügung von min() und max() wieder zu den Werten 4 zu überdenken?

Autoren machen mit calc() extrem seltsame Hacks, um sie in font-size und line-height zu emulieren, die sie "CSS-Sperren" nennen. Wenn Sie CSS-Sperren googeln, werden Sie sehen, wie weit verbreitet diese Hacks werden, was auf einen eindeutigen Autorenbedarf hinweist.

Darüber hinaus wird der Bedarf an min() und max() mit zunehmender Verbreitung von CSS-Variablen noch größer. Ich erinnere mich, dass einige der Probleme, die uns vor 6 Jahren dazu veranlassten, sie fallen zu lassen, jetzt mit dem von Variables eingeführten Konzept ungültig bei berechneter Zeit gelöst werden können." – Lea Verou

Seit Leas Vorschlag auf GitHub wurden min() und max() offiziell wieder in den Editor's Draft von CSS Level 4 Values and Units eingefügt, einschließlich einer frühen Übernahme durch WebKit. Entwickler können mit WebKit Nightly (ab 24.10.2017) selbst experimentieren und erkunden. Hier ist der einzelne WebKit-Commit für die seltsam Neugierigen, bei denen Unterstützung für min() und max() auf magische Weise gewährt wurde.

Ein flüchtiger Blick auf clamp()

Ein weiterer faszinierender Klatsch in demselben GitHub-Thread, der von Lea Verou gestartet wurde, war der Kommentar, in dem Tab Atkins eine tatsächliche Funktion clamp() vorschlägt. clamp() würde einen Wert buchstäblich zwischen Grenzwerten "clamp".

"... Ich stimme zu, dass clamp() zwar technisch überflüssig ist, aber oft genug nützlich ist, um wahrscheinlich zu existieren."

Oh mein! Dies wäre eine ziemliche Ergänzung zu mathematischen Ausdrücken. Eine Funktion wie clamp() ist definitiv ein Gewinn für die heutigen Anforderungen und wäre sicherlich ein willkommener Freund der Sprache.

Aktuelle Diskussionen drehen sich um diese Art von Syntax oben und ich bin zufällig einer, der dem Vorschlag zustimmt; es macht Sinn und liest sich logisch. Ich frage mich nur, was mit der Verwendung von min() und max() passieren wird, wenn clamp() in Zukunft tatsächlich auftaucht.

Wenn unser Wasserkühler-Geplapper aus dem Weg geräumt ist, können wir uns auf die tatsächlichen mathematischen Funktionen konzentrieren, die wir hier besprochen haben; calc(), min() und max().

Jetzt lernen wir calc() kennen

Dies ist eine meiner bevorzugten mathematischen Funktionen, um CSS zu zieren, und kann alle Arten von Zauberei ausführen. Die Syntax ist auch nicht zu grob, wenn Sie einmal den Dreh raus haben, und der Support ist hervorragend.

In diesem Beispiel oben haben wir den Funktionsnamen (calc) gefolgt von unseren Klammern, die "Ausdrücke" enthalten, oder mit anderen Worten… mathematische Logik.

"Mit der Funktion calc() können mathematische Ausdrücke mit Addition (+), Subtraktion (-), Multiplikation (*) und Division (/) als Komponentenwerte verwendet werden." – W3C

Auch dies ist schick, wenn man sagt, dass man in Klammern rechnen kann.

In Bezug auf Ausdrücke können Autoren generische Werte wie 50%, 2em, 40 übergeben und calc() überall dort verwenden, wo <length>, <frequency>, <angle>, <time>, <percentage>, <number>, oder <integer>-Werte sind zulässig. Meine Lieblingseinheiten, die ich in freier Wildbahn verwenden und untersuchen möchte, sind Ansichtsfenster-Einheiten (vh, vw, vmin, vmax). Dies sind die Werte für die Bildschirmabmessungen, die bei Typografie und Layout besonders praktisch sind, wie wir gleich sehen werden.

calc() In freier Wildbahn

Das obige Beispiel ist nur eine Möglichkeit, mit responsiver Typografie umzugehen. Mit einer Kombination aus Media Queries, Sass, calc() und Viewport-Einheiten beweist Mike uns, wie responsive Typografie perfekt zwischen bestimmten Pixelwerten skalieren kann.

Hier ist eine weitere atemberaubende Typografie-Demo mit calc() und Viewport-Einheiten von Tim Brown. Diese Demo wurde für seinen Artikel über CSS-Locks verwendet, den ich Ihnen empfehle, zu lesen, wenn Sie sich für Typografie interessieren.

Viewport-Einheiten und calc() können auch dabei helfen, einige unserer beliebtesten Layoutmuster zu erstellen. In der obigen Demo wird calc() verwendet, um die Höhe der Fußzeile von der Höhe des Ansichtsfensters (vh) zu subtrahieren. Eine clevere Lösung von Chris Coyier für unseren so oft nachgefragten alten Freund "The Sticky Footer". Diese Demo funktioniert auch hervorragend, wenn sie auch mit CSS-Variablen kombiniert wird.

Es gibt sicherlich noch andere Fälle, wenn es um Anwendungen und dynamische Zustände in dieser Demo von David Khourshid geht. David verwendet calc() für Hintergründe, Offsetwerte, Transformationen, Filter, Deckkraft und gerade Breite. Dies ist auch eine großartige Demo für diejenigen, die zusammen mit CSS-Variablen in React eintauchen möchten.

Werfen wir nun einen Blick auf zwei zusätzliche mathematische Funktionen, die Ihnen sicherlich gefallen werden, derzeit bekannt als min() und max().

min() und max(): Definieren von Einschränkungen

Wie bereits erwähnt, stecken diese Funktionen noch in den Kinderschuhen, daher sind Demos mit Anwendungsfällen düster, aber lassen Sie sich davon nicht abschrecken. Um min() und max() zu untersuchen, müssen Sie WebKit jede Nacht herunterladen. Nach dem Herunterladen können Sie Nightly (schwarzes Symbol) öffnen und mit der Arbeit beginnen.

Erinnern Sie sich, als wir lernten, was Ausdrücke waren? Es war nur eine schicke Art, "mathematische Logik" zu sagen. Beispielsweise:

Jeder Ausdruck wird durch Kommas getrennt, wobei ein zusätzlicher Ausdruck folgt. Wir können uns auch der Spezifikation zuwenden, die diese Regel ausdrücklich festlegt:

"Der berechnete Wert einer min()- oder max()-Funktion ist die durch Kommas getrennte Liste von Ausdrücken" – W3C

Falls Sie diesen sehr wichtigen Teil der Erklärung übersehen haben, die Spezifikation hat nur eine durch Kommas getrennte Liste von Ausdrücken angegeben, genau wie wir es zuvor im Code-Snippet getan haben.

"Eine min()- oder max()-Funktion stellt die kleinste (am negativsten) bzw. die größte (am positivsten) enthaltene kommaseparierte Berechnung dar." – W3C

Hast du das alles erwischt? Sie sagten nur am kleinsten (am negativsten) oder am größten (am positivsten). Das W3C hat uns gerade die Erlaubnis erteilt, negative Zahlen als Teil unserer Ausdrücke zu schreiben.

Nehmen wir uns jetzt die Zeit, um zu sehen, wie sich min() und max() in einer funktionierenden Demo bewähren; halte dich an deinen Hüten fest.

min() und max() im wirklichen Leben

Hier ist eine Demo, die einige Anwendungsfälle für min() und max() anhand der width und font-size der Komponenten zeigt. Die width hat eine minimale Einschränkung und eine maximale Einschränkung, während die font-size unserer Komponente ebenfalls mit einem minimalen und maximalen Wert begrenzt ist. Denken Sie daran, dass dies zum jetzigen Zeitpunkt nur in WebKit Nightly funktioniert; Wenn Sie eine Animation davon in Aktion sehen möchten, sehen Sie sich dieses GIF an (ehrlich gesagt zu schwer, um in die Seite eingebettet zu werden).

Im obigen Beispiel beginne ich damit, die width einzuschränken und dies in einer Zeile zu tun.

Mit dem obigen Ansatz kann ich eine mittlere Einschränkung im Vergleich zu nur einem Minimum und Maximum einschließen. Diese Codezeile sagt dem Browser: "Versuchen Sie, die Breite auf 70vw einzustellen, aber lassen Sie sie nicht niedriger als 200px (100px * 2) oder höher als 500px." Es gibt auch einen anderen Weg, den Sie gehen können, um ein ähnliches Ergebnis zu erzielen.

Genauer gesagt entspricht dies einem minimalen, einem mittleren und schließlich einem maximalen Constraint-Wert. Das Verschachteln von max() innerhalb von min() hilft dabei, zwischen den gewünschten Beschränkungen zu klemmen.

Wenn wir min-width und max-width verwenden würden, würden wir mit min() und max() ein äquivalentes Ziel erreichen. Ich bin gespannt, ob Eigenschaften wie min-width in den kommenden Jahren zugunsten mathematischer Funktionen wie min() und max() obsolet werden.

In Bezug auf font-size verwende ich den gleichen Min/Max-Ansatz, um eine ansprechende und sperrende Typografie zu erstellen.

Ich sage dem Browser: "Versuchen Sie, die Schriftgröße auf 4vw einzustellen, aber lassen Sie sie nicht niedriger als 1rem oder höher als 2rem." Leider gibt es kein Äquivalent wie min-font-size und max-font-size wie bei der Breite, aber ab der Spezifikation des CSS Fonts Module Level 4 könnte dies Realität werden.

Dies sind sicherlich aufregende Neuigkeiten und Autoren sind genauso begeistert, wenn es um die Einschränkung von Werten in CSS geht.

Suchmaschine verwenden, um CSS-Sperren zu jagen, finden Sie viele Artikel und Demos. CodePen zeigt auch eine Vielzahl von Stiften unter einer anderen CSS-Locks-Suche an. Für diejenigen, die neu in der Idee von CSS Locks sind, lassen Sie mich im Detail erklären.. "Flexible Typografie mit CSS-Locks", aber diese Technik wurde zuerst von Mike Riethmuller in seinem Artikel "Precise control over responsive typography" eingeführt.> calc() und Ansichtsfenstereinheiten für Überschriften und Textkörperkopien verwendet werden, die je nach den Abmessungen des Bildschirms nach oben oder unten skaliert werden. Diese Art der Einschränkung ist das, was wir als "CSS-Locks" kennenlernen..
  • Viewport Unit Based Typography von Zell Lieww
  • Die Mathematik der CSS-Locks von Florens Verscheldee
  • CSS "locks" von Chris Coyierr
  • Fluid Typography von Geoff Grahamm
  • Responsive und flüssige Typografie mit vh und vw Einheiten von Michael Riethmullerr
  • Fluid Responsive Typography Mit CSS Poly Fluid Sizing von Jake Wilsonn
font-size mit JavaScript am Steuer zu klemmen, während CSS auf dem Rücksitz sitzt. Ich lasse Sie selbst entscheiden, wie Sie sich fühlen, wenn JavaScript sich mit CSS mischt..
calc() verwenden oder mit min() und max() experimentiert haben, teilen Sie uns dies bitte in den Kommentaren mit. Glückliche Codierung!!
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.