CSS Functions - matematyka w stylu egipskich skrybów

Witaj w Nekropolii Gizy matematyki CSS! Podobnie jak starożytni egipcy używali zaawansowanej matematyki do budowy piramid, tak my możemy używać CSS Functions do tworzenia dynamicznych, responsywnych i elastycznych stylów. Poznaj funkcje matematyczne, które rewolucjonizują sposób pisania CSS!

Czym są CSS Functions?

CSS Functions to wbudowane funkcje, które wykonują obliczenia i zwracają wartości. Pozwalają na tworzenie dynamicznych stylów bez JavaScript!

Najważniejsze funkcje matematyczne:

• calc()

  - podstawowe obliczenia

• min()

  - najmniejsza wartość

• max()

  - największa wartość

• clamp()

  - wartość w zakresie

• minmax()

  - dla CSS Grid

Analogia egipska: To jak egipski skryba wykonujący precyzyjne obliczenia dla budowy piramidy - matematyka wbudowana bezpośrednio w plany!

calc() - podstawowe obliczenia

calc()

pozwala na wykonywanie matematycznych operacji z różnymi jednostkami:

Podstawowa składnia

1.element {
2  /* Dodawanie */
3  width: calc(100% - 50px);
4  
5  /* Odejmowanie */
6  height: calc(100vh - 80px);
7  
8  /* Mnożenie */
9  font-size: calc(16px * 1.5);
10  
11  /* Dzielenie */
12  padding: calc(20px / 2);
13  
14  /* Kombinacje */
15  margin: calc((100% - 960px) / 2);
16}

Ważne zasady:

• Spacje wokół + i - są WYMAGANE:

  calc(100% - 50px)

  ✅,

  calc(100%-50px)

  ❌
• Spacje wokół * i / są opcjonalne
• Można mieszać jednostki (%, px, rem, vh, etc.)
• Można zagnieżdżać calc()

Praktyczne przykłady calc()

1. Layout z sidebar

1.container {
2  display: flex;
3}
4
5.sidebar {
6  width: 250px;
7  flex-shrink: 0;
8}
9
10.main-content {
11  /* Szerokość = 100% minus sidebar minus gap */
12  width: calc(100% - 250px - 20px);
13}

2. Pełna wysokość minus header i footer

1.main {
2  /* 100vh minus wysokość header (80px) i footer (60px) */
3  min-height: calc(100vh - 80px - 60px);
4}

3. Responsywne padding

1.section {
2  /* Padding rośnie z rozmiarem ekranu */
3  padding: calc(20px + 2vw);
4  /* Na 320px: 20px + 6.4px = 26.4px */
5  /* Na 1920px: 20px + 38.4px = 58.4px */
6}

4. Grid z gap

1.grid {
2  display: grid;
3  grid-template-columns: repeat(3, calc((100% - 40px) / 3));
4  gap: 20px;
5  /* 3 kolumny, 2 gaps po 20px = 40px total gap */
6}

5. Aspect ratio box (przed aspect-ratio property)

1.aspect-16-9 {
2  width: 100%;
3  /* 9/16 = 0.5625 = 56.25% */
4  padding-bottom: calc(9 / 16 * 100%);
5  position: relative;
6}
7
8.aspect-16-9 > * {
9  position: absolute;
10  top: 0;
11  left: 0;
12  width: 100%;
13  height: 100%;
14}

min() - najmniejsza wartość

min()

zwraca najmniejszą wartość z podanych. Idealne do ustawiania maksymalnych limitów!

1.element {
2  /* Nigdy więcej niż 800px, ale może być mniejszy */
3  width: min(800px, 100%);
4  
5  /* Równoważne: */
6  width: 100%;
7  max-width: 800px;
8}

Praktyczne przykłady min()

1. Responsywny max-width

1.container {
2  /* Maksymalnie 1200px, ale 90% na małych ekranach */
3  width: min(1200px, 90%);
4  margin: 0 auto;
5}

2. Responsywny font-size

1h1 {
2  /* Maksymalnie 48px, ale skaluje się z ekranem */
3  font-size: min(48px, 5vw);
4}

3. Padding z limitem

1.section {
2  /* Padding rośnie, ale maksymalnie 80px */
3  padding: min(80px, 5vw);
4}

4. Multi-column z min()

1.grid {
2  display: grid;
3  /* Kolumny minimum 250px, maksimum równe części */
4  grid-template-columns: repeat(auto-fit, min(250px, 100%));
5  gap: 20px;
6}

max() - największa wartość

max()

zwraca największą wartość z podanych. Idealne do ustawiania minimalnych limitów!

1.element {
2  /* Nigdy mniejszy niż 200px, ale może być większy */
3  width: max(200px, 50%);
4  
5  /* Równoważne: */
6  width: 50%;
7  min-width: 200px;
8}

Praktyczne przykłady max()

1. Responsywny min-width

1.card {
2  /* Minimum 300px, ale może rosnąć */
3  width: max(300px, 30%);
4}

2. Font-size z minimum

1body {
2  /* Minimum 16px, ale rośnie z ekranem */
3  font-size: max(16px, 1vw);
4}

3. Spacing z minimum

1.section {
2  /* Minimum 20px padding, nawet na małych ekranach */
3  padding: max(20px, 3vw);
4}

4. Grid columns z minimum

1.grid {
2  /* Kolumny minimum 200px */
3  grid-template-columns: repeat(auto-fit, minmax(max(200px, 25%), 1fr));
4}

clamp() - wartość w zakresie

clamp()

to najpo tężniejsza funkcja - zwraca wartość ograniczoną do zakresu!

Składnia:

clamp(minimum, preferowana, maksimum)

1.element {
2  /* Minimum 16px, preferowane 2vw, maksimum 32px */
3  font-size: clamp(16px, 2vw, 32px);
4}

Jak działa:

1. Jeśli preferowana < minimum → zwróć minimum
2. Jeśli preferowana > maksimum → zwróć maksimum
3. W przeciwnym razie → zwróć preferowaną

Praktyczne przykłady clamp()

1. Fluid typography - NAJLEPSZE UŻYCIE

1h1 {
2  /* Font size od 24px do 64px, skaluje się płynnie */
3  font-size: clamp(24px, 4vw + 1rem, 64px);
4}
5
6h2 {
7  font-size: clamp(20px, 3vw + 1rem, 48px);
8}
9
10h3 {
11  font-size: clamp(18px, 2.5vw + 1rem, 36px);
12}
13
14p {
15  font-size: clamp(16px, 1vw + 0.5rem, 20px);
16}
17
18/* Jeden system typografii dla wszystkich ekranów! */

2. Container width

1.container {
2  /* Od 320px do 1200px, płynnie skaluje */
3  width: clamp(320px, 90%, 1200px);
4  margin: 0 auto;
5}

3. Spacing system

1:root {
2  /* Płynne spacing od małych do dużych ekranów */
3  --spacing-xs: clamp(0.5rem, 1vw, 1rem);
4  --spacing-sm: clamp(1rem, 2vw, 1.5rem);
5  --spacing-md: clamp(1.5rem, 3vw, 2.5rem);
6  --spacing-lg: clamp(2rem, 4vw, 4rem);
7  --spacing-xl: clamp(3rem, 6vw, 6rem);
8}
9
10.section {
11  padding: var(--spacing-lg);
12  margin-bottom: var(--spacing-md);
13}

4. Line height

1p {
2  font-size: clamp(16px, 1vw + 0.5rem, 20px);
3  /* Line height też płynny! */
4  line-height: clamp(1.5, 0.5vw + 1.3, 1.8);
5}

5. Grid gap

1.grid {
2  display: grid;
3  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
4  /* Płynny gap */
5  gap: clamp(1rem, 2vw, 3rem);
6}

6. Button padding

1.button {
2  /* Padding rośnie z rozmiarem ekranu */
3  padding: clamp(0.5rem, 1vw, 1rem) clamp(1rem, 2vw, 2rem);
4  font-size: clamp(14px, 1.5vw, 18px);
5}

Zaawansowane kombinacje

calc() + min/max/clamp

1.element {
2  /* Szerokość z dynamicznym padding */
3  width: calc(min(1200px, 100%) - 2rem);
4  
5  /* Wysokość z minimum i dynamicznym offset */
6  height: calc(max(400px, 50vh) - 80px);
7  
8  /* Padding proporcjonalny z limitami */
9  padding: calc(clamp(1rem, 3vw, 3rem) * 0.5);
10}

Zagnieżdżone funkcje

1.container {
2  /* Maksymalnie 1400px, ale minimum 90%, z padding */
3  width: calc(min(1400px, 90%) - clamp(1rem, 3vw, 3rem) * 2);
4}

CSS Variables + Functions

1:root {
2  --base-spacing: 1rem;
3  --multiplier: 2;
4  --max-spacing: 4rem;
5}
6
7.element {
8  /* Dynamiczne spacing z variables */
9  padding: clamp(
10    var(--base-spacing),
11    calc(var(--base-spacing) * var(--multiplier)),
12    var(--max-spacing)
13  );
14}

Kompletny system Fluid Typography

1:root {
2  /* Viewport units dla skalowania */
3  --fluid-min-width: 320;
4  --fluid-max-width: 1920;
5  
6  /* Font sizes */
7  --fluid-xs: clamp(0.75rem, 0.5vw + 0.5rem, 0.875rem);
8  --fluid-sm: clamp(0.875rem, 0.75vw + 0.625rem, 1rem);
9  --fluid-base: clamp(1rem, 1vw + 0.75rem, 1.125rem);
10  --fluid-md: clamp(1.125rem, 1.5vw + 0.75rem, 1.5rem);
11  --fluid-lg: clamp(1.5rem, 2vw + 1rem, 2rem);
12  --fluid-xl: clamp(2rem, 3vw + 1.25rem, 3rem);
13  --fluid-2xl: clamp(2.5rem, 4vw + 1.5rem, 4rem);
14  --fluid-3xl: clamp(3rem, 5vw + 2rem, 5rem);
15}
16
17body {
18  font-size: var(--fluid-base);
19  line-height: clamp(1.5, 0.3vw + 1.4, 1.7);
20}
21
22h1 {
23  font-size: var(--fluid-3xl);
24  line-height: 1.1;
25}
26
27h2 {
28  font-size: var(--fluid-2xl);
29  line-height: 1.2;
30}
31
32h3 {
33  font-size: var(--fluid-xl);
34  line-height: 1.3;
35}
36
37.small {
38  font-size: var(--fluid-sm);
39}
40
41.large {
42  font-size: var(--fluid-lg);
43}

Inne użyteczne CSS Functions

attr() - pobierz atrybut

1.tooltip::after {
2  content: attr(data-tooltip);
3  /* Użyj wartości atrybutu jako content */
4}

var() - CSS Variables

1:root {
2  --primary-color: #3498db;
3  --spacing: 20px;
4}
5
6.element {
7  color: var(--primary-color);
8  padding: var(--spacing);
9  
10  /* Z fallback */
11  background: var(--secondary-color, #2ecc71);
12}

rgb(), rgba(), hsl(), hsla()

1.element {
2  /* RGB */
3  color: rgb(52, 152, 219);
4  
5  /* RGBA z alpha */
6  background: rgba(52, 152, 219, 0.5);
7  
8  /* HSL (Hue, Saturation, Lightness) */
9  color: hsl(204, 70%, 53%);
10  
11  /* HSLA */
12  background: hsla(204, 70%, 53%, 0.5);
13}

url() - zasoby zewnętrzne

1.element {
2  background-image: url('pyramid.jpg');
3  list-style-image: url('hieroglyph.svg');
4}

Performance i wsparcie przeglądarek

Wsparcie przeglądarek:

• calc()

  - wszędzie (od 2013)

• min()

  ,

  max()

  - Chrome 79+, Firefox 75+, Safari 11.1+ (2020)

• clamp()

  - Chrome 79+, Firefox 75+, Safari 13.1+ (2020)

Performance:

• ✅ Funkcje są obliczane TYLKO gdy wartości się zmieniają
• ✅ Lepsze niż JavaScript dla prostych obliczeń
• ✅ GPU-accelerated gdy używane z transform

Fallbacks dla starych przeglądarek:

1.element {
2  /* Fallback */
3  font-size: 20px;
4  
5  /* Modern browsers */
6  font-size: clamp(16px, 2vw, 32px);
7}
8
9/* Lub z @supports */
10@supports (font-size: clamp(16px, 2vw, 32px)) {
11  .element {
12    font-size: clamp(16px, 2vw, 32px);
13  }
14}

Best Practices

1. Używaj clamp() dla fluid typography - jeden system dla wszystkich ekranów
2. Kombinuj z CSS Variables - łatwiejsze utrzymanie
3. Testuj na różnych rozdzielczościach - szczególnie edge cases
4. Dodawaj fallbacks - dla starszych przeglądarek
5. Dokumentuj zakresy - komentarze pomocne dla innych

1/* ✅ Dobrze udokumentowane */
2h1 {
3  /* 24px @ 320px → 64px @ 1920px */
4  font-size: clamp(24px, 1.5rem + 2.5vw, 64px);
5}

Podsumowanie

CSS Functions - zastosowania:

• calc() - podstawowe obliczenia, mixing units
• min() - maksymalne limity (max-width bez max-width)
• max() - minimalne limity (min-width bez min-width)
• clamp() - wartości w zakresie, fluid typography ⭐

Zalety:

• ✅ Dynamiczne wartości bez JavaScript
• ✅ Automatyczna responsywność
• ✅ Mniej media queries
• ✅ Płynne skalowanie

Najlepsze use cases:

• Fluid typography system
• Responsive spacing
• Container widths
• Layout calculations

Pamiętaj: CSS Functions to jak matematyka egipskich skrybów - precyzyjne obliczenia wbudowane bezpośrednio w arkusze stylów, pozwalające na tworzenie dynamicznych, responsywnych designów bez JavaScript!