Przejścia CSS 101 | WDD

Mimo że ludzie oczekują zmian i ruchu na ekranie, CSS I HTML mają niewiele elementów sterujących umożliwiających projektowanie interaktywności, a te, które istnieją, są binarne.

Link jest albo w jednym kolorze, albo w innym. Pole tekstowe jest albo w jednym rozmiarze, albo w innym. Zdjęcie jest albo przezroczyste, albo nieprzezroczyste. Żadnych pośrednich stanów między jednym a drugim. NIE przejścia.

W rezultacie większość stron internetowych sprawia wrażenie nieregularnych, a ich elementy zmieniają się i przesuwają w sposób niespójny.

Tak, możemy użyć języka DHTML i biblioteki jQuery do przejść, ale wymagałoby to napisania dużej ilości kodu jak na coś, co powinno być bardzo proste.

Potrzebujemy szybkiego i łatwego sposobu na dodanie prostych przejść do strony, a w tym artykule znajdziesz przydatne informacje na ten temat Przejścia CSS i jak z nich korzystać.

Kilka miesięcy temu włożyłem nogę w usta, sugerując, że projektanci powinni zacząć używać nowych technik CSS 3, które pozwalają im na wykonanie niektórych podstawowych stylów, o które tak zabiegali. Jedyny problem: żadna z nich nie działała w Internet Explorerze. Nie, nawet IE8.

Niektórzy czytelnicy uznali, że proponowanie technik, których około 75% odbiorców nie będzie w stanie dostrzec, jest nierozsądne.

Do tych czytelników mówię: Trzymajcie mocno kapeluszeponieważ zamierzam przedstawić Wam kolejną nową właściwość CSS, która umożliwia dodawanie przejść do dowolnego elementu przy użyciu zaledwie kilku linijek kodu.

Przejścia CSS są wprowadzane właśnie teraz w CSS Level 3, ale zostały już dodane jako rozszerzenie do Webkit. Obecnie oznacza to, że działają tylko w przeglądarkach opartych na Webkit, w tym Apple Safari i Google Chrome.

Skąd się biorą przejścia CSS

Przejścia są już od pewnego czasu częścią Webkit i stanowią podstawę wielu fajnych funkcji interfejsu użytkownika Safari, których nie potrafią inne przeglądarki.

Jednak grupa robocza W3C CSS sprzeciwiła się dodaniu przejść do swoich oficjalnych specyfikacji. Niektórzy członkowie grupy argumentowali, że przejścia nie są właściwościami stylu i lepiej byłoby je obsługiwać za pomocą języka skryptowego.

Jednak wielu projektantów i programistów, łącznie ze mną, twierdziło, że są to w rzeczywistości style — tylko dynamiczny stylów, w przeciwieństwie do tradycyjnych, statycznych stylów, do których wielu z nas jest przyzwyczajonych.

Na szczęście argument za dynamicznymi stylami przetrwał ten dzień. W marcu ubiegłego roku przedstawiciele Apple i Mozilli zaczęli dodawać Moduł CSS Transitions do specyfikacji CSS Level 3ściśle wzorowany na tym, co Apple dodało już do Webkita.

Krótka uwaga na temat udoskonaleń projektu

Zanim przejdziemy dalej, chciałbym podkreślić jedną rzecz: nigdy nie należy opierać funkcjonalności witryny na stylach, jeśli nie są one kompatybilne z przeglądarką (czyli nie są dostępne we wszystkich popularnych przeglądarkach).

Jeszcze raz dla tych, którzy przegapili: nigdy nie polegaj na stylach w zakresie funkcjonalności witryny, jeśli style nie są kompatybilne z przeglądarką.

Powiedziawszy to, możesz używać stylów, takich jak przejścia, jako ulepszenia projektu aby poprawić doświadczenie użytkownika, nie poświęcając użyteczności dla tych, którzy ich nie widzą. Jest to w porządku, o ile można żyć bez przejść, a użytkownicy nadal mogą wykonywać swoje zadania.

Najpierw kilka pomysłów na przejście

Przejścia CSS nie zastąpią wszystkich zastosowań języka DHTML, ale oto kilka sposobów na ulepszenie projektu w przeglądarkach obsługujących przejścia, bez psucia odbioru dla pozostałych odbiorców.

Będziesz musiał wyświetlić tę stronę w Apple Safari 3+ Lub Google Chrome aby zobaczyć, jak te przejścia działają. Obie przeglądarki są dostępne w wersjach Mac i PC.

Przewroty

Najbardziej oczywistym zastosowaniem przejść jest wyróżnianie elementów (czy to linków, tabel, pól formularzy, przycisków czy czegoś innego), gdy użytkownik najedzie na nie myszką. Przejścia to świetny sposób na nadanie stronie płynniejszego wyglądu.

Przykład 1

Menu rozwijane

Łatwe do utworzenia jest tworzenie menu w czystym CSS, a przejścia pozwalają na dodanie do menu efektów przesuwania i podświetlania.

Przykład nr 2

Animacja

Możesz przenosić obiekt między dwoma punktami na stronie i używać przejść, aby animować jego ruch.

Przykład nr 3

Kliknij i przytrzymaj!

Przejścia, stany i działania

Ale zaczekaj chwilę, Tex. Zanim zagłębimy się w przejścia, musimy zrozumieć różne stany, do których może przejść element.

Stany definiują, jak konkretny element obecnie wchodzi w interakcję z użytkownikiem lub stroną, i są określone w CSS za pomocą pseudoklas. Na przykład, gdy użytkownik najedzie kursorem na element, ten element zostanie wystylizowany za pomocą pseudoklasy hover.

Przejścia działają poprzez zmianę stylu w okresie czasu pomiędzy różnymi stanami elementu. Na przykład wartość koloru domyślnego stanu elementu przejdzie przez kolory pośrednie w spektrum, zanim pojawi się jako wartość koloru dla stanu najechania kursorem.

Proste przejście

Rozważmy proste przejście z jednego koloru do drugiego, gdy użytkownik najedzie kursorem na link. Podobnie jak każda inna właściwość CSS, przejścia są dodawane bezpośrednio do selektora, do którego mają być zastosowane. Właściwość może następnie przyjąć jedną z następujących czterech wartości.

Właściwość CSS
Właściwość, która ma zostać zmieniona (na przykład kolor). Zobacz poniższą tabelę, aby uzyskać listę wszystkich właściwości CSS, które można przekształcić.

Czas trwania
Jak długo będzie trwało przejście, zazwyczaj w sekundach (na przykład 0,25 s).

Funkcja pomiaru czasu
Umożliwia kontrolowanie, jak czas trwania jest mierzony. Zamiast używać prostego liniowego odliczania, możesz przyspieszyć lub spowolnić przejście, a nawet określić uderzenie lub odliczanie (na przykład liniowe). Więcej na ten temat w dalszej części artykułu.

Opóźnienie
Jak długo czekać między akcją a początkiem przejścia, zwykle wyrażony w sekundach (np. .1s). Wartość tę można pominąć, jeśli nie chcesz opóźnienia.

Ponieważ właściwość transition pierwotnie była rozszerzeniem Webkit, musimy uwzględnić zarówno właściwość transition, jak i -webkit-transition, aby zachować wsteczną kompatybilność.

Najpierw dodajmy obie te właściwości do pseudoklasy :hover:

[css]

a:hover { kolor: czerwony; -webkit-transition: kolor .25s liniowy; transition: kolor .25s liniowy; }
[/css]

Teraz po najechaniu kursorem na link zamiast zmieniać jego kolor z niebieskiego na czerwony, będzie on przez ćwierć sekundy przechodził pomiędzy kolorami pośrednimi.

Oczywiście, chcemy także powrócić do domyślnego koloru łącza, więc dodamy przejście do pseudoklas :link (i prawdopodobnie :visited), z bardzo krótkim opóźnieniem (jedną dziesiątą sekundy) przed jego zniknięciem:

[css]

a:link, a:visited { kolor: niebieski; -webkit-transition: kolor .25s liniowy .1s; przejście: kolor .25s liniowy .1s; }
[/css]

Dodawanie wielu przejść

Ponieważ przejście jest właściwością CSS, jeśli dodasz wiele wystąpień właściwości przejścia w tej samej regule, to ostatnie z nich zastąpi poprzednie, zamiast je dodawać. Tak więc w poniższej regule jedynym przejściem będzie kolor tła:

[css]

a:hover { kolor: czerwony; kolor-tła: rgb(235,235,185); -webkit-transition: kolor .25s liniowy; przejście: kolor .25s liniowy; przejście: kolor-tła .15s liniowy .1; }
[/css]

Wiele przejść dodawanych jest jako lista rozdzielona przecinkami w tej samej definicji właściwości przejścia:

[css]

a:hover { kolor: czerwony; kolor-tła: rgb(235,235,185); -webkit-transition: kolor .25s liniowy, kolor-tła .15s liniowy .1s; przejście: kolor .25s liniowy, kolor-tła .15s liniowy .1s; }
[/css]

Spowoduje to utworzenie przejścia między kolorami i kolorami tła.

Co można zmienić?

Prawie każda właściwość CSS, która ma komponent koloru, długości lub pozycji, w tym wiele nowych właściwości CSS 3, może otrzymać przejście. Jednym godnym uwagi wyjątkiem wydaje się być box-shadow.

Prosto ze specyfikacji Transitions W3C, oto lista właściwości CSS, którym można nadać przejście, wraz z aspektami, które są przekształcane. Podkreśliłem kilka bardziej przydatnych właściwości.

Czas przejścia i opóźnienie

Dzięki przejściom możesz zmieniać tempo liczenia, licząc wolniej na początku i szybciej na końcu, odwrotnie lub cokolwiek pomiędzy. Przejścia CSS zawierają pięć słów kluczowych dla czasu przejścia i pozwalają określić wartości dla własnej krzywej czasu.

Uniwersalna transformacja?

Przejścia staną się wkrótce standardową procedurą operacyjną dla wszystkich witryn internetowych, poprawiając odbiór interfejsu użytkownika.

Aby dodać wszechobecne przejścia w całej witrynie, jedną z opcji jest dodanie przejścia do uniwersalnego selektora, podobnego do resetowania CSS. Stosuje to domyślne przejście do wszystkich elementów na stronie, umożliwiając zachowanie spójnego przejścia:

[css]

*:link, *:visited, *:hover, *:active, *:focus { -webkit-transition: kolor .25s liniowy, kolor tła .25s liniowy, kolor obramowania .25s liniowy; transition: kolor .25s liniowy, kolor tła .25s liniowy, kolor obramowania .25s liniowy; }
[/css]

Jednym z argumentów przeciwko uniwersalnemu przejściu, a w zasadzie przeciwko używaniu uniwersalnego selektora do resetowania CSS w ogóle, jest to, że stosowanie stylu do każdy element na stronie może spowolnić renderowanie strony. Jednak nigdy nie znalazłem żadnych dowodów na to, że tak jest. Ktoś wie coś innego?

Jason Cranford Teague jest autorem ponad 13 książek na temat mediów cyfrowych, w tym Mówienie w stylach: podstawy CSS dla projektantów stron internetowychAby uzyskać więcej informacji na temat CSS i typografii internetowej, zapoznaj się z nową książką Jasona, Płynna typografia internetowa. Obserwuj Jasona na Twitterze: @jasonspeaking.