Funkcje

Podcast dotyczący CSS – 020: funkcje

Omówiliśmy już kilka funkcji CSS. W module siatki omówiliśmy minmax() i fit-content(), które pomagają dobierać rozmiar elementów. W module color omówiliśmy rgb() i hsl(), które pomagają definiować kolory.

Podobnie jak wiele innych języków programowania CSS ma wiele wbudowanych funkcji, do których można zawsze uzyskać dostęp.

Każda funkcja CSS ma określony cel. W tej lekcji przedstawimy ogólne omówienie, z którego dowiesz się, 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 czemu można ją wywołać w kodzie i przekazywać do niej dane. Jest to tzw. argumenty przekazywane.

Wiele funkcji CSS to funkcje czyste, co oznacza, że jeśli przekażesz do nich te same argumenty, zawsze uzyskasz taki sam wynik, niezależnie od tego, co dzieje się w pozostałej części kodu. Funkcje te często obliczają się ponownie wraz ze zmianą wartości w kodzie CSS, podobnie jak w przypadku innych elementów w języku, np. obliczonych wartości kaskadowych, np. currentColor.

W CSS można używać tylko podanych funkcji zamiast tworzyć własne, ale w niektórych kontekstach można je zagnieżdżać, co zapewnia większą elastyczność. Omówimy to bardziej szczegółowo w dalszej części tego modułu.

Selektory funkcji

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

Selektory funkcjonalne zostały omówione w module pseudoklasy, który zawiera szczegółowe informacje o funkcjach takich jak :is() i :not(). Argumenty przekazywane do tych funkcji to selektory arkusza CSS, które są następnie oceniane. Jeśli występuje dopasowanie do elementów, zostanie do nich 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. Kaskada ma również wpływ na właściwości niestandardowe, co oznacza, że można ich zmieniać kontekstowo lub ponownie definiować. Właściwość niestandardowa musi być poprzedzona dwoma myślnikami (--). Wielkość liter ma znaczenie.

Funkcja var() przyjmuje jeden wymagany argument: właściwość niestandardową, którą chcesz zwrócić jako wartość. W powyższym fragmencie kodu funkcja var() przekazała jako argument argument --base-color. Jeśli zasada --base-color jest zdefiniowana, funkcja var() zwraca wartość.

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

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

Funkcje, które zwracają wartość

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

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

Funkcja attr() pobiera zawartość atrybutu href elementu <a> i ustawia ją jako content pseudoelementu ::after. Jeśli wartość atrybutu href elementu <a> ulegnie zmianie, zostanie to automatycznie odzwierciedlone w tym atrybucie content.

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

Funkcja url() pobiera adres URL z ciągu znaków i służy do wczytywania obrazów, czcionek oraz treści. Jeśli prawidłowy URL nie zostanie przekazany lub nie uda się znaleźć zasobu, do którego prowadzi ten adres, funkcja url() nie zwróci żadnych danych.

Funkcje związane z kolorami

W module color omówiliśmy wszystkie funkcje związane z kolorami. Jeśli jeszcze nie znasz tej funkcji, zdecydowanie zalecamy jej przeczytanie.

Niektóre funkcje kolorów dostępne w CSS to rgb(), rgba(), hsl(), hsla(), hwb(), lab() i lch(). Wszystkie one mają podobną postać – przekazywane są argumenty konfiguracji i zwracany jest kolor.

Wyrażenia matematyczne

Podobnie jak wiele innych języków programowania CSS udostępnia przydatne funkcje matematyczne do różnych rodzajów obliczeń.

calc()

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

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

W tym przykładzie funkcja calc() służy do określania szerokości elementu na poziomie 100% jego elementu nadrzędnego, a potem usuwa 2rem z tej obliczonej wartości.

: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 funkcji var() w ramach wyrażenia.

min() i max()

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

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

W tym przykładzie szerokość powinna być najmniejszą wartością z przedziału od 20vw – czyli 20% szerokości widocznego obszaru, a 30rem. Wysokość powinna być największą wartością z zakresu od 20vh – czyli 20% wysokości widocznego obszaru – do 20rem.

ogranicz()

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

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

W tym przykładzie pole font-size ma postać elastyczną w zależności od szerokości widocznego obszaru. Jednostka vw jest dodawana do jednostki rem, by ułatwić powiększanie ekranu, ponieważ niezależnie od poziomu powiększenia jednostka vw ma ten sam rozmiar. Mnożenie przez jednostkę rem (na podstawie rozmiaru czcionki głównej) powoduje, że funkcja clamp() ma względny punkt obliczeniowy.

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

Kształty

Właściwości clip-path, offset-path i shape-outside używają kształtów, aby wizualnie przyciąć Twoją ramkę lub kształtować zawartość, która będzie się wokół niej otaczać.

Istnieją funkcje kształtu, których można używać z obydwoma tymi właściwościami. Proste kształty, np. circle(), ellipse() i inset(), określają odpowiedni rozmiar argumentów konfiguracji. Bardziej złożone kształty, np. polygon(), przyjmują rozdzielone przecinkami pary wartości osi X i Y, aby utworzyć niestandardowe kształty.

.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 polygon(), dostępna jest też funkcja path(), która jako argument przyjmuje regułę wypełnienia SVG. Umożliwia to tworzenie bardzo złożonych kształtów, które można rysować w narzędziu graficznym, takim jak Illustrator lub Inkscape, a potem kopiować do arkusza CSS.

Transformacje

Ostatnim omówieniem funkcji CSS są funkcje przekształcania, które przechylają i zmieniają rozmiar elementu, a nawet jego głębokość. Wszystkie te funkcje są używane z właściwością transform.

Rotacja

Za pomocą funkcji rotate() możesz obracać element względem osi środkowej. Możesz też użyć funkcji rotateX(), rotateY() i rotateZ(), aby obrócić element wokół określonej osi. Można przekazywać jednostki stopni, kątów skrętu i radianów, aby określić poziom obrotu.

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

Funkcja rotate3d() przyjmuje 4 argumenty.

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

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

Skaluj

Skalowanie elementu możesz zmienić za pomocą funkcji transform i funkcji scale(). Ta funkcja może przyjmować jako wartość jedną lub dwie liczby, które określają skalę dodatnią lub ujemną. Jeśli zdefiniujesz tylko jeden argument liczbowy, zarówno oś X, jak i oś Y będą skalowane tak samo, a zdefiniowanie obu będzie skrótem dla osi X i Y. Tak jak w przypadku rotate(), scaleX(), scaleY() i scaleZ() umożliwiają skalowanie elementu w określonej osi.

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

Podobnie jak funkcja rotate, istnieje funkcja scale3d(). Funkcja jest podobna do funkcji scale(), ale wymaga 3 argumentów: współczynnika skali X, Y i Z.

Tłumacz

Funkcja translate() przenosi element, pozostając w tym samym miejscu w przepływie dokumentu. Mogą one akceptować długość i wartość procentową jako argumenty. Funkcja translate() tłumaczy element wzdłuż osi X, jeśli zdefiniowany jest jeden argument, lub wzdłuż osi X i Y, jeśli zdefiniowano oba argumenty.

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

Tak jak w przypadku innych funkcji przekształcania, możesz używać określonych funkcji dla konkretnej osi za pomocą translateX, translateY i translateZ. Możesz też użyć właściwości translate3d, która pozwala zdefiniować przesunięcie X, Y i Z w jednej funkcji.

Skośnienie

Możesz zniekształcić element za pomocą 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, a jeśli zdefiniujesz oba – na oś X i Y. Możesz też używać właściwości skewX i skewY, aby niezależnie wpływać na każdą oś.

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

Perspektywa

Możesz też użyć właściwości perspective, która wchodzi w skład rodziny przekształconych usług, aby zmienić odległość między użytkownikiem a płaszczyzną Z. Daje to poczucie odległości i pozwala stworzyć głębię w projektach.

Ten przykład Davida Desandro z jego bardzo przydatnego artykułu pokazuje, jak można go wykorzystać, wraz z właściwościami perspective-origin-x i perspective-origin-y, aby tworzyć naprawdę trójwymiarowe obiekty.

Funkcje animacji, gradienty i filtry

CSS udostępnia też funkcje, które pomagają animować elementy, stosować do nich gradienty i zmieniać ich wygląd za pomocą graficznych filtrów. Aby ten moduł był jak najbardziej zwięzły, są one omówione w powiązanych modułach. Wszystkie elementy mają strukturę podobną do funkcji przedstawionych w tym module.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o funkcjach