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

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.

Diagram funkcji w opisany powyżej sposób

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()

Obsługa przeglądarek

Źródło

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()`

Obsługa przeglądarek

Źródło

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.

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

ograniczanie()

Obsługa przeglądarek

Źródło

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

Obsługa przeglądarek

Źródło

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.

Obsługa przeglądarek

Źródło

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

Obsługa przeglądarek

Źródło

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

Obsługa przeglądarek

Źródło

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

Obsługa przeglądarek

Źródło

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

Obsługa przeglądarek

Źródło

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?

[]

Te znaki dotyczą tablic w JavaScripcie.

{}

Te znaki zawijają reguły w CSS.

()

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

::

Te znaki są przeznaczone dla pseudoelementów w CSS.

:

Te znaki są przeznaczone dla pseudoklas w CSS.

CSS ma wbudowane funkcje matematyczne?

Prawda

Jest ich mnóstwo, a kolejne dodajemy do specyfikacji i przeglądarek.

Fałsz

Spróbuj jeszcze raz.

Funkcję calc() można umieścić wewnątrz innego elementu calc(), takiego jak font-size: calc(10px + calc(5px * 3));

Prawda

🎉

Fałsz

Spróbuj jeszcze raz.

Które z tych funkcji to funkcje CSS kształtu?

ellipse()

🎉

square()

Spróbuj jeszcze raz.

circle()

🎉

rect()

Spróbuj jeszcze raz.

inset()

🎉

polygon()

🎉

Funkcje

Podcast CSS – 020: funkcje .

Co to jest funkcja?

Funkcjonalne selektory

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

Funkcje, które zwracają wartość

Funkcje kolorów

Wyrażenia matematyczne

calc()

min() i max()

ograniczanie()

Kształty

Przekształcenia

Obrót

Skaluj

Tłumacz

Skośne

Perspektywa

Funkcje animacji, gradienty i filtry

Sprawdź swoją wiedzę

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

`min()` i `max()`