5.1 Funktion calc()
CSS-Funktionen bieten effektive Werkzeuge, um verschiedene Operationen direkt in Stylesheets auszuführen. Die Funktionen calc(), min(), max() und clamp() sind besonders nützlich für die Erstellung von responsiven und flexiblen Designs, da sie mathematische Operationen und bedingte Berechnungen von Werten ermöglichen.
Die Funktion calc() wird verwendet, um mathematische Operationen in CSS durchzuführen. Sie ermöglicht es, verschiedene Maßeinheiten wie Pixel (px), Prozent (%), em, rem und andere in einem Ausdruck zu kombinieren.
Syntax:
selektor {
eigenschaft: calc(ausdruck);
}
Beispielanwendung
In diesem Beispiel wird die Breite des Blocks als 50% der Breite des Elternelements minus 20 Pixel berechnet:
/* Breite des Blocks - die Hälfte des Elternelements minus 20px */
.block {
width: calc(50% - 20px);
}
5.2 Funktionen min(), max() und clamp()
Funktionen min(), max() und clamp() in CSS
Funktion min()
Die Funktion min() nimmt mehrere Werte und gibt den kleinsten von ihnen zurück. Nützlich für die Erstellung flexibler Größen, die sich je nach Kontext ändern.
Syntax:
selektor {
eigenschaft: min(wert1, wert2);
}
Beispiel
In diesem Beispiel beträgt die Breite des Containers 50% oder 300 Pixel, je nachdem, was kleiner ist:
.container {
width: min(50%, 300px);
}
Funktion max()
Die Funktion max() nimmt mehrere Werte und gibt den größten von ihnen zurück. Nützlich für die Festlegung minimaler Größen und zur Gewährleistung von Anpassungsfähigkeit.
Funktion clamp()
Die Funktion clamp() nimmt drei Werte: minimalen, bevorzugten und maximalen. Sie beschränkt den Wert zwischen minimal und maximal, indem sie zum bevorzugten Wert strebt.
5.3 Vorteile der Verwendung von CSS-Funktionen
Vorteile bei der Verwendung von CSS-Funktionen:
- Flexibilität. CSS-Funktionen ermöglichen es, flexiblere und anpassungsfähigere Styles zu erstellen, da sie die dynamische Berechnung von Werten erlauben.
- Vereinfachung des Responsive Designs. Die Funktionen
min(),max()undclamp()vereinfachen die Erstellung von responsiven Designs erheblich, indem sie die Werte innerhalb bestimmter Grenzen einschränken. - Reduzierung des Bedarfs an Media Queries. Der Einsatz dieser Funktionen kann die Anzahl der erforderlichen Media Queries zur Anpassung der Styles für verschiedene Bildschirmgrößen verringern.
5.4 Beispiel für eine vollständige Implementierung
.container {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
}
.block {
background-color: #3498db;
color: white;
padding: 10px;
text-align: center;
}
.block:nth-child(1) {
width: calc(50% - 20px);
}
.block:nth-child(2) {
width: min(300px, 100%);
}
.block:nth-child(3) {
width: max(200px, 50%);
}
.text {
font-size: clamp(12px, 2vw, 24px);
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beispiel für die Verwendung von CSS-Funktionen</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="block">Block mit Breite calc(50% - 20px)</div>
<div class="block">Block mit Breite min(300px, 100%)</div>
<div class="block">Block mit Breite max(200px, 50%)</div>
<p class="text">Text mit Schriftgröße clamp(12px, 2vw, 24px)</p>
</div>
</body>
</html>
GO TO FULL VERSION