Dziękujemy za zainteresowanie konferencją Google I/O. Oglądanie treści na żądanie.

Ta strona została przetłumaczona przez Cloud Translation API.

Funkcje

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 każdej chwili.

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.

Schemat funkcji zgodnie z opisem powyżej

Wiele funkcji CSS to funkcje czyste, co oznacza, że jeśli przekażesz do nich te same argumenty, zawsze zwrócą one 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łaściwość niestandardowa musi mieć prefiks 2 kresek (--) i być wpisana z uwzględnieniem wielkości liter.

Funkcja var() wymaga jednego argumentu: właściwości niestandardowej, której wartość ma być zwracana. W powyższym fragmencie kodu funkcja var() ma jako argument funkcję --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 1 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 koloru

W modułach color i color.color-y.0.14 dowiesz się wszystkiego 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(), rgba(), hsl(), hsla(), hwb(), lab() i lch(). 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ń.

calc()

Browser Support

Source

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 ustawienia szerokości elementu na 100% jego nadrzędnego elementu, a następnie do odjęcia od tej 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()`

Browser Support

Source

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.

Uwaga: jednostki takie jak vw i vh omawiamy w module rozmiarów.

clamp()

Browser Support

Source

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

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

W tym przykładzie font-size będzie płynnie zmieniać się 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.

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żna 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

Browser Support

Source

Możesz obrócić element, używając funkcji rotate(), która obraca 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.

Browser Support

Source

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

Browser Support

Source

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(), istnieją też funkcje scaleX(), scaleY() i scaleZ(), które służą do skalowania elementu wzdłuż określonej osi.

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

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

Tłumacz

Browser Support

Source

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łcania, 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 X, Y i Z w jednej funkcji.

Skewing

Browser Support

Source

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

Browser Support

Source

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 poczucie odległości i może być wykorzystane do tworzenia głębi w Twoich 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ą animate 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, omówiono je w połączonych modułach. Wszystkie mają podobną strukturę jak funkcje omówione w tym module.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o funkcjach

Jakie znaki wskazują funkcje CSS?

[]

Te znaki są używane w tablicach w JavaScript.

{}

Te znaki kończą reguły w CSS.

()

Funkcje używają tych znaków do otaczania argumentów.

::

Te znaki są używane w CSS do pseudoelementów.

:

Te znaki są używane w CSS do pseudoklas.

Czy CSS ma wbudowane funkcje matematyczne?

Prawda

Jest ich dużo, a coraz więcej jest dodawanych do specyfikacji i przeglądarek.

Fałsz

Spróbuj jeszcze raz.

Funkcję calc() można umieścić w innej funkcji calc(), np. font-size: calc(10px + calc(5px * 3));

Prawda

🎉

Fałsz

Spróbuj jeszcze raz.

Które z tych elementów są funkcjami kształtu w CSS?

ellipse()

🎉

square()

Spróbuj jeszcze raz.

circle()

🎉

rect()

Spróbuj jeszcze raz.

inset()

🎉

polygon()

🎉

Funkcje

The CSS Podcast - 020: Functions

Co to jest funkcja?

Selektory funkcjonalne

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

Funkcje zwracające wartość

Funkcje koloru

Wyrażenia matematyczne

calc()

min() i max()

clamp()

Kształty

Przekształcenia

Obrót

Skaluj

Tłumacz

Skewing

Perspektywa

Funkcje animacji, gradienty i filtry

Sprawdź swoją wiedzę

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

`min()` i `max()`