Podcast CSS – 020: funkcje
.
Do tej pory w tym kursie zetknęliśmy się z kilkoma funkcjami CSS.
W module siatka
poznaliśmy usługi minmax()
i fit-content()
,
które pomagają określać rozmiar elementów.
W module color
poznaliśmy narzędzia rgb()
i hsl()
, które ułatwiają określanie kolorów.
Podobnie jak wiele innych języków programowania, CSS ma wiele wbudowanych funkcji zawsze i w razie potrzeby.
Każda funkcja CSS ma określone przeznaczenie, Podczas tej lekcji omówimy ogólne co pozwoli Ci znacznie lepiej zrozumieć, 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ć do niej dane. Nazywamy to argumentami przekazującymi.
Wiele funkcji CSS to funkcje czyste,
co oznacza, że jeśli przekażesz do nich te same argumenty,
że wyniki będą zawsze takie same,
niezależnie od tego, co się dzieje w pozostałej części kodu.
Funkcje te są często obliczane ponownie w miarę zmiany wartości w kodzie CSS,
podobnie jak inne elementy języka,
np. obliczonych wartości kaskadowych, takich jak currentColor
.
W CSS możesz używać tylko podanych funkcji, zamiast pisać własne, ale w pewnych kontekstach funkcje mogą być zagnieżdżone w siebie, co daje im większą elastyczność. Omówimy to szczegółowo w dalszej części tego modułu.
Funkcjonalne selektory
.post :is(h1, h2, h3) {
line-height: 1.2;
}
Omówiliśmy funkcjonalne selektory
moduł pseudoklas
które szczegółowe funkcje
: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,
będzie stosowana reszta reguły CSS.
Właściwości niestandardowe a 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.
Wpływ na właściwości niestandardowe też ma kaskada
co oznacza, że można je modyfikować i zmieniać kontekstowo.
Usługa niestandardowa musi mieć przedrostek 2 myślników (--
) i wielkość liter ma znaczenie.
var()
funkcja przyjmuje jeden wymagany argument:
właściwość niestandardową, którą chcesz zwrócić jako wartość.
W powyższym fragmencie kodu funkcja var()
otrzymała --base-color
jako argument.
Jeśli zdefiniowano atrybut --base-color
, var()
zwraca wartość.
.my-element {
background: var(--base-color, hotpink);
}
Możesz też przekazać wartość deklaracji zastępczej do funkcji var()
.
Oznacza to, że jeśli nie można znaleźć pliku --base-color
,
zostanie użyta przekazana deklaracja, którą w tym przykładzie jest kolor hotpink
.
Funkcje, które zwracają wartość
Funkcja var()
to tylko jedna z funkcji CSS, która zwraca wartość.
Funkcje takie jak
attr()
i
url()
mają strukturę podobną do struktury var()
–
wystarczy przekazać co najmniej 1 argument i użyć go po prawej stronie deklaracji CSS.
a::after {
content: attr(href);
}
Funkcja attr()
pobiera zawartość atrybutu href
elementu <a>
i ustawiłem go 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 ciągu znaków i służy do wczytywania obrazów, czcionek oraz treści.
Jeśli nie zostanie przekazany prawidłowy adres URL lub nie można znaleźć zasobu, do którego prowadzi adres URL,
funkcja url()
nie zwróci żadnych danych.
Funkcje kolorów
Znasz już funkcje kolorów w module color. Jeśli nie znasz jeszcze tej książki, zdecydowanie zalecamy jej przeczytanie.
Niektóre funkcje kolorów w CSS to:
rgb()
, rgba()
, hsl()
, hsla()
, hwb()
, lab()
i lch()
.
Wszystkie mają podobną formę, w której przekazywane są argumenty konfiguracyjne, z których zwrócony jest kolor.
Wyrażenia matematyczne
Podobnie jak wiele innych języków programowania, CSS udostępnia przydatne funkcje matematyczne, które wspomagają różne rodzaje obliczeń.
calc()
calc()
jako parametr przyjmuje pojedyncze wyrażenie matematyczne.
To wyrażenie matematyczne może być mieszanką typów,
np. długość, liczba, kąt i częstotliwość. Jednostki mogą być też mieszane.
.my-element {
width: calc(100% - 2rem);
}
W tym przykładzie do określania szerokości elementu używana jest funkcja calc()
jako 100% swojego elementu nadrzędnego,
a następnie usuwa 2rem
z 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 ramach funkcji var()
w ramach wyrażenia.
min()
i max()
min()
funkcja zwraca najmniejszą obliczoną wartość z co najmniej jednego przekazanego argumentu.
max()
funkcja wykonuje w ten sposób działanie odwrotne: uzyskaj 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 20vw
– czyli 20% szerokości widocznego obszaru – i 30rem
.
Wysokość powinna być największą wartością w przedziale 20vh
– czyli 20% wysokości widocznego obszaru – i 20rem
.
ograniczanie()
clamp()
funkcja przyjmuje trzy argumenty: minimalny rozmiar,
między rozmiarem optymalnym a maksymalną.
h1 {
font-size: clamp(2rem, 1rem + 3vw, 3rem);
}
W tym przykładzie pole font-size
będzie elastyczne w zależności od szerokości widocznego obszaru.
Jednostka vw
jest dodawana do jednostki rem
w celu ułatwienia powiększania ekranu.
bo bez względu na poziom powiększenia jednostka vw
ma taki sam rozmiar.
Mnożenie przez jednostkę rem
(na podstawie głównego rozmiaru czcionki)
udostępnia funkcję clamp()
ze względnym punktem obliczeniowym.
Więcej informacji o funkcjach min()
, max()
i clamp
() znajdziesz w artykule
tym artykule.
Kształty
clip-path
offset-path
i
shape-outside
Właściwości CSS korzystają z kształtów, aby wizualnie wycinać pole lub nadać kształt, wokół którego przesuwa się treść.
Obie te właściwości można stosować w przypadku funkcji kształtu.
Proste kształty, takie jak
circle()
ellipse()
i
inset()
aby określić rozmiar
przy użyciu argumentów konfiguracji.
Bardziej złożone kształty, takie jak
polygon()
użyj rozdzielonych przecinkami par 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()
, istnieje również funkcja path()
, która wykorzystuje regułę wypełnienia SVG jako argument.
Umożliwia to generowanie bardzo złożonych kształtów, które można narysować za pomocą narzędzia graficznego
np. z programu Illustrator lub Inkscape, a następnie skopiowany do CSS.
Przekształcenia
Ostatnim przeglądem funkcji CSS są funkcje przekształcania,
które przechylają element,
zmieniają jego rozmiar, a nawet głębokość.
Wszystkie poniższe funkcje są używane z właściwością transform
.
Obrót
Aby obrócić element, użyj funkcji
rotate()
która spowoduje obrót elementu wokół jego środkowej osi.
Możesz też użyć usługi
rotateX()
rotateY()
i
rotateZ()
aby obracać element wokół określonej osi.
Możesz przekazywać jednostki stopni, obrotu i radianów, aby określić poziom obrotu.
.my-element {
transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}
rotate3d()
funkcja przyjmuje cztery argumenty.
Pierwsze 3 argumenty to liczby, które definiują współrzędne X, Y i Z. Czwarty argument to rotacja, która podobnie jak inne funkcje obrotu, akceptują stopnie, kąty i obroty.
.my-element {
transform: rotate3d(1, 1, 1, 10deg);
}
Skaluj
Skalowanie elementu możesz zmienić za pomocą tagów transform
oraz
funkcji scale()
.
Funkcja akceptuje jedną lub dwie liczby jako wartości określające skalę dodatnią lub ujemną.
Jeśli zdefiniujesz tylko jeden argument liczbowy,
Oś X i Y będą miały jednakową skalę.
Tak jak rotate()
,
jest
scaleX()
,
scaleY()
oraz
scaleZ()
aby skalować element na określonej osi.
.my-element {
transform: scaleX(1.2) scaleY(1.2);
}
Podobnie jak w przypadku funkcji rotate
, istnieje
funkcji scale3d()
.
Jest to podobne do scale()
, ale wymaga 3 argumentów: współczynnika skali X, Y i Z.
Tłumacz
translate()
funkcje przesuwają element przy zachowaniu jego pozycji w przepływie dokumentu.
Jako argumenty przyjmują wartości długości i procentu.
Jeśli zdefiniowany jest 1 argument, funkcja translate()
tłumaczy element wzdłuż osi X,
i przekłada element wzdłuż osi X i Y, jeśli są określone oba argumenty.
.my-element {
transform: translatex(40px) translatey(25px);
}
Tak samo jak w przypadku innych funkcji przekształcania możesz użyć określonych funkcji na konkretnej osi,
za pomocą
translateX
translateY
i
translateZ
.
Możesz też użyć
translate3d
co pozwala zdefiniować przesunięcie X, Y i Z w jednej funkcji.
Skośne
Możesz pochylić element, korzystając z funkcji
skew()
, które przyjmują kąty jako argumenty.
Funkcja skew()
działa bardzo podobnie do funkcji translate()
.
Jeśli zdefiniujesz tylko jeden argument, będzie to miało wpływ tylko na oś X, a jeśli zdefiniujesz obie,
i wpłynie na oś X i Y.
Możesz też użyć
skewX
i
skewY
, aby wpływać na każdą osie z osobna.
.my-element {
transform: skew(10deg);
}
Perspektywa
Możesz też użyć funkcji
Usługa perspective
– która jest częścią rodziny właściwości przekształcenia – aby zmienić odległość między użytkownikiem a płaszczyzną Z.
Daje to poczucie odległości i umożliwia uzyskanie głębi pola w projektach.
Ten przykładowy artykuł Davida Desandro z bardzo przydatnego artykułu pokazuje, jak wykorzystać
wraz z usługami perspective-origin-x
i perspective-origin-y
, aby tworzyć niesamowite 3D.
Funkcje animacji, gradienty i filtry
CSS udostępnia też funkcje, które pomagają animować elementy, stosować do nich gradienty i używać filtrów graficznych, aby zmieniać ich wygląd. Aby ten moduł był jak najbardziej zwięzły, omawiamy w powiązanych modułach. Wszystkie mają podobną strukturę do funkcji przedstawionych w tym module.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o funkcjach
Jakimi znakami można rozpoznać funkcje CSS?
[]
:
{}
()
::
CSS ma wbudowane funkcje matematyczne?
Funkcję calc()
można umieścić wewnątrz innego elementu calc()
, takiego jak font-size: calc(10px + calc(5px * 3));
Które z tych funkcji to funkcje CSS kształtu?
square()
ellipse()
polygon()
inset()
rect()
circle()