Funkcje

bookmark_border Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

The CSS Podcast - 020: Functions

Do tej pory w tym kursie poznaliśmy kilka funkcji CSS. W module siatka poznasz elementy minmax() i fit-content(), które pomagają dopasowywać rozmiar elementów. W module kolor poznaliśmy atrybuty rgb() i hsl(), które pomagają definiować kolory.

Podobnie jak w przypadku wielu innych języków programowania, CSS ma dużo wbudowanych funkcji, do których możesz uzyskać dostęp w dowolnym momencie.

Każda funkcja CSS ma określony cel. W tej lekcji znajdziesz ogólne omówienie funkcji, dzięki któremu lepiej zrozumiesz, gdzie i jak ich używać.

Co to jest funkcja?

Funkcja to nazwany, samodzielny fragment kodu, który wykonuje określone zadanie. Funkcja ma nazwę, dzięki której możesz ją wywołać w kodzie i przekazać jej dane. Nazywamy to przekazywaniem argumentów.

Wiele funkcji CSS to funkcje czyste, co oznacza, że jeśli przekażesz im te same argumenty, zawsze zwrócą ten sam wynik, niezależnie od tego, co dzieje się w pozostałej części kodu. Te funkcje są często ponownie obliczane, gdy zmieniają się wartości w pliku CSS, podobnie jak inne elementy języka, takie jak obliczone wartości kaskadowe, np. currentColor.

W usługach porównywania cen możesz używać tylko podanych funkcji, a nie pisać własnych, ale w niektórych kontekstach funkcje mogą być zagnieżdżone w innych, co zapewnia większą elastyczność. Więcej informacji na ten temat znajdziesz w dalszej części tego modułu.

Selektory funkcjonalne

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

W module pseudoklas omówiliśmy selektory funkcjonalne, które szczegółowo opisują funkcje takie jak :is() i :not(). Argumenty przekazywane do tych funkcji to selektory CSS, które są następnie oceniane. Jeśli zostanie znaleziony element pasujący do selektora, zostanie do niego zastosowana reszta reguły CSS.

Właściwości niestandardowe i var()

:root {
    --base-color: #ff00ff;
}

.my-element {
    background: var(--base-color);
}

Właściwość niestandardowa to zmienna, która umożliwia tokenizację wartości w kodzie CSS. Na właściwości niestandardowe również wpływa kaskada, co oznacza, że można je modyfikować lub definiować w sposób kontekstowy. Własna właściwość musi mieć prefiks 2 kresek (--) i być podawana z uwzględnieniem wielkości liter.

Funkcja var() wymaga jednego argumentu: właściwości niestandardowej, która ma być zwrócona jako wartość.

W poprzednim fragmencie kodu jako argument funkcji var() przekazywana jest wartość --base-color. Jeśli element --base-color jest zdefiniowany, element var() zwróci jego wartość.

.my-element {
    background: var(--base-color, hotpink);
}

Wartość deklaracji zastępczej możesz też przekazać do funkcji var(). Oznacza to, że jeśli nie uda się znaleźć wartości --base-color, zostanie użyta przekazana deklaracja, która w tym przypadku to kolor hotpink.

Funkcje zwracające wartość

Funkcja var() to tylko jedna z funkcji CSS, które zwracają wartość. Funkcje takie jak attr() i url() mają podobną strukturę jak var() – przekazujesz co najmniej jeden argument i używasz go po prawej stronie deklaracji CSS.

a::after {
  content: attr(href);
}

Funkcja attr() pobiera zawartość atrybutu href elementu <a> i ustala ją jako content elementu pseudo-elementu ::after. Jeśli wartość atrybutu href elementu <a> uległaby zmianie, zostałaby ona automatycznie odzwierciedlona w atrybucie content.

.my-element {
    background-image: url('/path/to/image.jpg');
}

Funkcja url() przyjmuje adres URL string i służy do wczytywania obrazów, czcionek i treści. Jeśli nie zostanie przekazany prawidłowy adres URL lub nie uda się znaleźć zasobu wskazywanego przez ten adres, funkcja url() nie zwróci nic.

Funkcje kolorów

W modułach color i color.color-y.0.14.1104 znajdziesz więcej informacji o funkcjach kolorów. Jeśli jeszcze go nie czytałeś(-aś), zdecydowanie zalecamy to zrobić.

Dostępne funkcje kolorów w CSS to: rgb(), hsl(), lab(), lch(), oklab(), oklch() i color(). Wszystkie mają podobną formę, w której przekazywane są argumenty konfiguracji, a zwracany jest kolor.

Wyrażenia matematyczne

Podobnie jak wiele innych języków programowania, CSS zawiera przydatne funkcje matematyczne, które ułatwiają wykonywanie różnych obliczeń.

Funkcje arytmetyczne

calc()

Funkcja calc() przyjmuje jako parametr pojedyncze wyrażenie matematyczne. To wyrażenie matematyczne może być kombinacją różnych typów, takich jak długość, liczba, kąt i częstotliwość. Jednostki mogą być mieszane.

.my-element {
    width: calc(100% - 2rem);
}

W tym przykładzie funkcja calc() służy do określenia szerokości elementu jako 100% jego nadrzędnego elementu zawierającego, a następnie do odejmowania od tej obliczonej wartości wartości 2rem.

:root {
  --root-height: 5rem;
}

.my-element {
  width: calc(calc(10% + 2rem) * 2);
  height: calc(var(--root-height) * 3);
}

Funkcja calc() może być zagnieżdżona w innej funkcji calc(). Właściwości niestandardowe możesz też przekazywać w ramach funkcji var() jako część wyrażenia.

min() i max()

Funkcja min() zwraca najmniejszą obliczoną wartość co najmniej 1 przekazanego argumentu. Funkcja max() działa odwrotnie: zwraca największą wartość z co najmniej 1 przekazanego argumentu.

.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}

W tym przykładzie szerokość powinna być najmniejszą wartością spośród 20vw (co odpowiada 20% szerokości widocznego obszaru) i 30rem. Wysokość powinna być największą wartością spośród 20vh (co odpowiada 20% wysokości widocznego obszaru) i 20rem.

clamp()

Funkcja clamp() przyjmuje 3 argumenty: minimalny rozmiar, idealny rozmiar i maksymalny rozmiar.

h1 {
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
}

W tym przykładzie element font-size będzie płynnie zmieniał swoją szerokość w zależności od szerokości widoku. Jednostka vw jest dodawana do jednostki rem, aby ułatwić powiększanie ekranu, ponieważ niezależnie od poziomu powiększenia jednostka vw będzie miała ten sam rozmiar. Pomnożenie przez jednostkę rem (na podstawie rozmiaru czcionki głównej) zapewnia funkcji clamp() względny punkt obliczeń.

Więcej informacji o funkcjach min(), max() i clamp() znajdziesz w tym artykule.

Funkcje trygonometryczne

Funkcje trygonometryczne umożliwiają znalezienie dowolnego punktu na okręgu na podstawie kąta, modelowanie zjawisk cyklicznych takich jak fale dźwiękowe, opis orbit itp. W CSS możesz używać funkcji trygonometrycznych do ustawiania właściwości na podstawie obrotu, animacji w czasie rzeczywistym, obracania elementów wokół punktu i innych zastosowań.

Więcej informacji i przykładów znajdziesz w artykule o funkcjach trygonometrycznych.

sin(), cos() i tan()

Funkcje sin(), cos() i tan() przyjmują argument kąta i zwracają odpowiednio sinus, cosinus i tangens. Funkcje sin() i cos() zwracają liczbę z zakresu od -1 do 1. Funkcja tan() zwraca liczbę z przedziału -Infinity–+Infinity. Argument angle może być dowolną obsługiwaną jednostką kąta.

:root {
  --sine-degrees: sin(45deg);     /* returns 0.7071 */
  --sine-radians: sin(0.7853rad); /* returns 0.7071 */
}

W poprzednim przykładzie --sine-degrees i --sine-radians mają tę samą wartość (w tym przypadku 0.7071).

W poprzednim przykładzie funkcje sin() i cos() służą do tworzenia animacji oscylacyjnych na osiach x i y przez pomnożenie wyniku przez określony promień. Użycie obu funkcji naraz umożliwia animację orbitowania. Aby płynnie animować kąt dla wszystkich wywołań funkcji, używamy własnej właściwości --angle.

asin(), acos() i atan()

Funkcje asin(), acos() i atan() są odwrotnością funkcji sin(), cos() i tan(). Przyjmują liczbę jako argument i zwracają wartość kąta z poziomu -90deg do 90deg. Funkcja asin() i acos() akceptuje liczbę z zakresu -1–1, a funkcja atan() – liczbę z zakresu -Infinity–+Infinity.

:root {
  --degrees: asin(0.7071); /* returns 45deg */
}

atan2()

Funkcja atan2() przyjmuje 2 argumenty reprezentujące punkt względem początku układu współrzędnych i zwraca kąt reprezentujący kierunek do tego punktu. Możesz go użyć, aby obrócić elementy w kierunku określonego punktu. Argumenty mogą być liczbami, jednostkami miary lub wartościami procentowymi, ale oba argumenty muszą być tego samego rodzaju.

W tym przykładzie użyto funkcji atan2() do określenia kąta między środkiem widoku a bieżącą pozycją kursora. Zwróć uwagę, że wartość y jest pierwszym argumentem, a wartość x – drugim. Kąt ten służy do umieszczania „źrenic” względem środka „oczu”, aby te pierwsze podążały za kursorem myszy.

hypot()

Funkcja hypot() przyjmuje 2 argumenty długości reprezentujące boki trójkąta prostokątnego i zwraca długość przeciwprostokątnej. Możesz użyć tego jako skrótu do obliczenia tego za pomocą funkcji wykładniczych. Oba argumenty muszą mieć ten sam typ jednostki, a funkcja hypot() zwraca ten sam typ.

:root {
  --use-ems: hypot(3em, 4em);   /* returns 5em */
  --use-px:  hypot(30px, 40px); /* returns 50px */
}

Funkcje wykładnicze

pow() i exp()

Funkcja pow() przyjmuje 2 argumenty liczbowe: podstawę i wykładnik, a następnie podnosi podstawę do potęgi wykładnika. Oba argumenty muszą być liczbami bez jednostek. Funkcja exp() przyjmuje jeden argument i jest odpowiednikiem wywołania funkcji pow() z podstawą e.

.my-element {
  width: calc(10px * pow(4, 2); /* 10px * (4 * 4) == 160px */
}

sqrt()

Funkcja sqrt() przyjmuje argument liczbowy i zwraca jego pierwiastek kwadratowy. Argument nie może zawierać jednostek.

:root {
  --root: sqrt(25); /* returns 5 */
}

log()

Funkcja log() zwraca logarytm wartości liczbowej. Jeśli przekazany zostanie 1 argument, zwróci logarytm naturalny. Jeśli podany zostanie drugi argument, funkcja log() użyje go jako podstawy logarytmu.

:root {
  --log2: log(16, 2); /* returns 4      */
  --logn: log(16);    /* returns 2.7725 */
}

Funkcje związane z znakiem

abs()

Funkcja abs() przyjmuje argument liczbowy i zwraca bezwzględną (dodatnią) wartość argumentu.

.my-element {
  color: rgba(0, 0, 0, abs(-1));
}

W poprzednim przykładzie wartość alpha -1 spowodowałaby przezroczysty tekst, ale funkcja abs() zwraca wartość bezwzględną 1, co powoduje całkowicie nieprzezroczysty tekst.

sign()

Funkcja sign() przyjmuje argument liczbowy i zwraca jego znak. Wartości dodatnie zwracają 1, a ujemne – -1. Wartości 0 zwracają 0.

.my-element {
  top: calc(50vh + 25vh * sign(var(--value));
}

W poprzednich przykładach, jeśli --value jest dodatnia, najwyższą wartością będzie 75vh. Jeśli jest ujemna, najwyższą wartością będzie 25vh. Jeśli jest równa 0, najwyższa wartość będzie wynosić 50vh.

Kształty

Właściwości clip-path, offset-path i shape-outside w arkuszu CSS używają kształtów, aby wizualnie przyciąć pole lub nadać kształt treściom.

Istnieją funkcje kształtu, które można stosować w przypadku obu tych właściwości. Proste kształty takie jak circle(), ellipse() i inset() przyjmują argumenty konfiguracji, aby określić ich rozmiar. Bardziej złożone kształty, takie jak polygon(), wymagają par wartości osi X i Y rozdzielonych przecinkami, aby utworzyć kształty niestandardowe.

.circle {
  clip-path: circle(50%);
}

.polygon {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

Podobnie jak funkcja polygon(), istnieje też funkcja path(), która przyjmuje jako argument regułę wypełnienia SVG. Dzięki temu możesz tworzyć bardzo złożone kształty, które możesz narysować w programie graficznym, takim jak Illustrator lub Inkscape, a potem skopiować do pliku CSS.

Przekształcenia

Na koniec tego przeglądu funkcji CSS omówimy funkcje transformacji, które służą do zniekształcania, zmiany rozmiaru i głębi elementu. Wszystkie podane niżej funkcje są używane w przypadku właściwości transform.

Obrót

Możesz obrócić element, używając funkcji rotate(), która obróci element wokół jego osi środkowej. Możesz też użyć funkcji rotateX(), rotateY() i rotateZ(), aby obrócić element wokół określonej osi. Aby określić poziom obrotu, możesz podać jednostki miary: stopień, obrót i radian.

.my-element {
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

Funkcja rotate3d() przyjmuje 4 argumenty.

Pierwsze 3 argumenty to liczby określające współrzędne X, Y i Z. Czwarty argument to obrót, który podobnie jak inne funkcje obrotu akceptuje stopnie, kąty i obroty.

.my-element {
  transform: rotate3d(1, 1, 1, 10deg);
}

Skaluj

Możesz zmienić skalowanie elementu za pomocą funkcji transform i scale(). Funkcja ta przyjmuje jako wartość 1 lub 2 liczby, które określają dodatnie lub ujemne przeskalowanie. Jeśli zdefiniujesz tylko 1 argument liczbowy, obie osie X i Y będą miały ten sam format. Zdefiniowanie obu osi jest skrótem dla osi X i Y. Podobnie jak w przypadku funkcji rotate(), możesz użyć funkcji scaleX(), scaleY() i scaleZ(), aby zmienić rozmiar elementu wzdłuż konkretnej osi.

.my-element {
  transform: scaleX(1.2) scaleY(1.2);
}

Podobnie jak funkcja rotate, funkcja scale3d(). Jest to funkcja podobna do funkcji scale(), ale ma 3 argumenty: współczynniki skalowania X, Y i Z.

Tłumacz

Funkcje translate() przesuwają element, który zachowuje swoją pozycję w przepływie dokumentu. Jako argumenty przyjmują one wartości długości i procentów. Funkcja translate() przekształca element na osi X, jeśli zdefiniowany jest jeden argument, oraz na osiach X i Y, jeśli zdefiniowane są oba argumenty.

.my-element {
  transform: translatex(40px) translatey(25px);
}

Podobnie jak w przypadku innych funkcji przekształcenia, możesz używać określonych funkcji na określonej osi, korzystając z funkcji translateX, translateY i translateZ. Możesz też użyć funkcji translate3d, która umożliwia zdefiniowanie przesunięcia w osi X, Y i Z w ramach jednej funkcji.

Skewing

Element możesz zniekształcić, używając funkcji skew(), które akceptują kąty jako argumenty. Funkcja skew() działa bardzo podobnie do funkcji translate(). Jeśli zdefiniujesz tylko jeden argument, będzie on miał wpływ tylko na oś X. Jeśli zdefiniujesz oba, będą one miały wpływ na osie X i Y. Możesz też użyć elementów skewX i skewY, aby wpływać na każdą oś niezależnie.

.my-element {
  transform: skew(10deg);
}

Perspektywa

Na koniec możesz użyć właściwości perspective, która należy do rodziny właściwości transformacji, aby zmienić odległość między użytkownikiem a płaszczyzną Z. Daje to wrażenie odległości i może być wykorzystane do tworzenia głębi ostrości w projektach.

Ten przykład autorstwa Davida Desandro, pochodzący z bardzo przydatnego artykułu, pokazuje, jak można go używać wraz z właściwościami perspective-origin-x i perspective-origin-y, aby tworzyć prawdziwie trójwymiarowe wrażenia.

Funkcje animacji, gradienty i filtry

CSS zawiera też funkcje, które ułatwiają animowanie elementów, stosowanie do nich gradientów oraz używanie graficznych filtrów do manipulowania ich wyglądem. Aby ten moduł był jak najbardziej zwięzły, te zagadnienia omówiono w powiązanych modułach. Wszystkie mają podobną strukturę jak funkcje omówione w tym module.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o funkcjach