Odkryj nowe przepływy pracy w kompleksowym poradniku o funkcjach Narzędzi deweloperskich w Chrome związanych z wyświetlaniem i zmienianiem kodu CSS.
Aby poznać podstawy, przeczytaj artykuł Wyświetlanie i zmienianie kodu CSS.
Wybierz element
Panel Elementy w Narzędziach deweloperskich umożliwia wyświetlanie i zmienianie kodu CSS pojedynczego elementu.
Na zrzucie ekranu wybrany jest element h1
zaznaczony na niebiesko w drzewie DOM.
Po prawej stronie na karcie Style znajdziesz style elementu. Po lewej stronie element jest wyróżniony w widocznym obszarze, ale tylko dlatego, że najedziesz na niego kursorem myszy w drzewie DOM.
Samouczek znajdziesz w artykule Wyświetlanie kodu CSS elementu.
Element można wybrać na kilka sposobów:
- W widocznym obszarze kliknij element prawym przyciskiem myszy i wybierz Zbadaj.
- W Narzędziach deweloperskich kliknij Wybierz element lub naciśnij Command + Shift + C (Mac) lub Control + Shift + C (Windows, Linux), a potem kliknij element w widocznym obszarze.
- W Narzędziach deweloperskich kliknij element w drzewie DOM.
- W Narzędziach deweloperskich uruchom w konsoli zapytanie takie jak
document.querySelector('p')
, kliknij wynik prawym przyciskiem myszy i wybierz Pokaż w panelu Elementy.
Wyświetl CSS
Na kartach Elementy > Style i Wynikowy możesz wyświetlać reguły CSS i diagnozować problemy z CSS.
Nawigowanie za pomocą linków
Na karcie Style są wyświetlane linki do wielu innych miejsc, takich jak:
- Obok reguł CSS, obok arkuszy stylów i źródeł CSS. Takie linki otwierają panel Źródła. Jeśli arkusz stylów jest zmniejszony, przeczytaj sekcję Tworzenie zminifikowanego pliku do odczytu.
- W sekcjach Odziedziczone z ... do elementów nadrzędnych.
- W wywołaniach
var()
odpowiada deklaracjom właściwości niestandardowych. - W skróconych właściwościach usługi
animation
do@keyframes
. - Linki Więcej informacji w etykietkach dokumentacji.
- Więcej informacji
Oto niektóre z nich:
Linki mogą mieć inny styl. Jeśli nie masz pewności, czy to link, kliknij go, aby to sprawdzić.
Wyświetl etykietki z dokumentacją CSS, właściwościami i wartościami właściwości niestandardowych
Elementy > Style – po najechaniu kursorem na określone elementy wyświetlają się etykietki z przydatnymi informacjami.
Wyświetl dokumentację CSS
Aby wyświetlić etykietkę z krótkim opisem CSS, najedź kursorem na nazwę właściwości na karcie Style.
Kliknij Dowiedz się więcej, aby przejść do dokumentacji CSS MDN dotyczącej tej usługi.
Aby wyłączyć etykietki, zaznacz pole Nie pokazuj.
Aby je włączyć ponownie, kliknij Ustawienia > Preferencje > Elementy > Pokaż etykietkę dokumentacji CSS.
Szczegółowość selektora
Najedź kursorem na selektor, aby wyświetlić etykietkę z wagą szczegółowości.
Wyświetlanie wartości właściwości niestandardowych
Najedź kursorem na element --custom-property
, aby zobaczyć jego wartość w etykietce.
Wyświetl nieprawidłowe, zastąpione, nieaktywne i inne usługi porównywania cen
Karta Style rozpoznaje różnego rodzaju problemy z CSS i wyróżnia je na różne sposoby.
Zapoznaj się z artykułem Omówienie arkusza CSS na karcie Style.
Wyświetlanie tylko kodu CSS zastosowanego do elementu
Na karcie Style znajdziesz wszystkie reguły dotyczące elementu, w tym deklaracje, które zostały zastąpione. Jeśli nie interesują Cię zastąpione deklaracje, użyj karty Obliczone, aby wyświetlić tylko ten CSS, który jest faktycznie stosowany do elementu.
- Wybierz element.
- W panelu Elementy otwórz kartę Obliczone.
Zaznacz pole wyboru Pokaż wszystkie, aby zobaczyć wszystkie właściwości.
Zapoznaj się z artykułem Omówienie arkusza CSS na karcie Obliczone.
Wyświetl właściwości CSS w kolejności alfabetycznej
Użyj karty Obliczone. Zobacz Wyświetlanie tylko kodu CSS, który został zastosowany do elementu.
Wyświetl dziedziczone właściwości CSS
Zaznacz pole wyboru Pokaż wszystkie na karcie Obliczone. Patrz sekcja Wyświetlanie tylko kodu CSS, który został zastosowany do elementu.
Możesz też przewinąć kartę Style i odnaleźć sekcje o nazwie Inherited from <element_name>
.
Wyświetl reguły CSS
Reguły AT to instrukcje CSS, które umożliwiają kontrolowanie działania tych elementów. Elementy > Style – w odpowiednich sekcjach zobaczysz te elementy z regułami:
Wyświetl reguły typu @property
Reguła CSS @property
umożliwia jawne definiowanie niestandardowych właściwości CSS i rejestrowanie ich w arkuszu stylów bez uruchamiania JavaScriptu.
Najedź kursorem na nazwę takiej właściwości na karcie Style. W tej zwijanej sekcji @property
na dole karty Style zobaczysz etykietkę z wartością właściwości, deskryptorami oraz linkiem do jej rejestracji.
Aby edytować regułę @property
, kliknij dwukrotnie jej nazwę lub wartość.
Wyświetl reguły typu @supports
Karta Style zawiera reguły CSS @supports
, jeśli zostały one zastosowane do elementu. Możesz na przykład sprawdzić ten element:
Jeśli przeglądarka obsługuje funkcję lab()
, element jest zielony, a w przeciwnym razie jest fioletowy.
Wyświetl reguły typu @scope
Na karcie Style widać reguły CSS @scope
, jeśli są one stosowane do elementu.
Nowe reguły @scope
są częścią specyfikacji kaskadowej i dziedziczenia CSS 6. Te reguły pozwalają określić zakres stylów CSS, czyli bezpośrednio stosować style do konkretnych elementów.
Wyświetl regułę @scope
na podglądzie tego podglądu:
- Sprawdź tekst na karcie w podglądzie.
- Na karcie Style znajdź regułę
@scope
.
W tym przykładzie reguła @scope
zastępuje globalną deklarację CSS background-color
w przypadku wszystkich elementów <p>
w elementach z klasą card
.
Aby edytować regułę @scope
, kliknij ją dwukrotnie.
Wyświetl reguły typu @font-palette-values
Reguła CSS @font-palette-values
pozwala dostosować wartości domyślne właściwości font-palette
. Elementy > Style – wyświetla tę regułę w osobnej sekcji.
Wyświetl sekcję @font-palette-values
na następnym podglądzie:
- Sprawdź drugi wiersz tekstu na podglądzie.
- W sekcji Style znajdź sekcję
@font-palette-values
.
W tym przykładzie wartości palety czcionek --New
zastępują domyślne wartości kolorowej czcionki.
Aby edytować wartości niestandardowe, kliknij je dwukrotnie.
Wyświetl reguły typu @position-try
Reguła CSS @position-try
wraz z właściwością position-try-options
umożliwia określanie alternatywnych pozycji zakotwiczenia elementów. Więcej informacji znajdziesz w artykule Przedstawiamy interfejs API pozycjonowania zakotwiczonego pozycjonowania CSS.
Elementy > Style otwiera wartości position-try-options
i łączy każdą opcję z oddzielną sekcją @position-try --name
.
Sprawdź wartości position-try-options
i sekcje @position-try
w następnym podglądzie:
- W podglądzie otwórz menu podrzędne, czyli kliknij TWOJE KONTO, a następnie SKLEP.
- Sprawdź element, używając na podglądzie
id="submenu"
. - W sekcji Style znajdź właściwość
position-try-options
i kliknij jej wartość--bottom
. Na karcie Style pojawi się odpowiednia sekcja@position-try
.
Aby edytować wartości w sekcji, kliknij je dwukrotnie.
Wyświetl model pudełka elementu
Aby wyświetlić model pola elementu, otwórz kartę Style i kliknij przycisk Pokaż pasek boczny na pasku działań.
Aby zmienić wartość, kliknij ją dwukrotnie.
Wyszukiwanie i filtrowanie kodu CSS elementu
Użyj pola Filtr na kartach Style i Wynikowy, aby wyszukać określone właściwości lub wartości CSS.
Aby na karcie Obliczone przeszukiwać także właściwości dziedziczone, zaznacz pole wyboru Pokaż wszystkie.
Aby poruszać się po karcie Obliczone, pogrupuj odfiltrowane właściwości w kategorie zwijane, zaznaczając opcję Grupa.
Emuluj zaznaczoną stronę
Po przełączeniu zaznaczenia ze strony na Narzędzia deweloperskie niektóre elementy nakładek zostaną automatycznie ukryte, jeśli zostaną aktywowane po zaznaczeniu. Mogą to być na przykład listy, menu lub selektory daty. Opcja check_box Emuluj zaznaczoną stronę pozwala debugować taki element, jakby był on zaznaczony.
Spróbuj emulować zaznaczoną stronę na tej stronie demonstracyjnej:
- Aktywuj element wprowadzania. Pod nią pojawi się kolejny element.
- Otwórz Narzędzia deweloperskie. Okno Narzędzi deweloperskich jest teraz aktywne, a nie strona, więc element ponownie znika.
- W sekcji Elementy > Style kliknij :hov, zaznacz check_box Emuluj zaznaczoną stronę i upewnij się, że element wejściowy jest zaznaczony. Możesz teraz zobaczyć znajdujący się pod nim element.
Tę samą opcję znajdziesz też w panelu Renderowanie.
Przełącz pseudoklasę
Aby przełączyć pseudoklasę, na przykład :active
, :focus
, :focus-within
, :target
, :hover
, :visited
lub focus-visible
:
- Wybierz element.
- W panelu Elementy kliknij kartę Style.
- Kliknij :hov.
- Zaznacz pseudoklasę, którą chcesz włączyć.
W widocznym obszarze widać, że Narzędzia deweloperskie stosują do elementu deklarację background-color
, mimo że w rzeczywistości ten element nie został najechany na nie kursorem.
Interaktywny samouczek znajdziesz w artykule Dodawanie pseudostanu do klasy.
Wyświetl dziedziczone pseudoelementy podświetlenia
Pseudoelementy pozwalają zmieniać styl konkretnych części elementów. Pseudoelementy to fragmenty dokumentu, które mają stan „wybrane” i są oznaczone jako „wyróżnione”, aby wskazać użytkownikowi ten stan. Przykładami takich pseudoelementów są ::selection
, ::spelling-error
, ::grammar-error
i ::highlight
.
Jak wspomnieliśmy w specyfikacji, w przypadku konfliktu różnych stylów element kaskadowy określa zwycięski styl.
Aby lepiej zrozumieć dziedziczenie i priorytet reguł, możesz zobaczyć dziedziczone pseudoelementy podświetlenia:
-
Odziedziczyłem styl pseudoelementu wyróżnionego mojego rodzica. Wybierz mnie
Zaznacz fragment powyższego tekstu.
Na karcie Style przewiń w dół do sekcji
Inherited from ::selection pseudo of...
.
Wyświetl warstwy kaskadowe
Warstwy kaskadowe zapewniają ściślejszą kontrolę nad plikami CSS, co pozwala uniknąć konfliktów związanych ze stylem. Jest to przydatne w przypadku dużych baz kodu, systemów projektowania i zarządzania stylami innych firm w aplikacjach.
Aby wyświetlić warstwy kaskadowe, inspect następny element i kliknij Elementy > Style.
Na karcie Style wyświetl 3 warstwy kaskadowe oraz ich style: page
, component
i base
.
Aby wyświetlić kolejność warstw, kliknij jej nazwę lub przycisk Przełącz widok warstw CSS.
Warstwa page
ma największą dokładność, dlatego tło elementu jest zielone.
Wyświetlanie strony w trybie drukowania
Aby wyświetlić stronę w trybie drukowania:
- Otwórz menu poleceń.
- Zacznij pisać
Rendering
i wybierzShow Rendering
. - W menu Emuluj multimedia CSS wybierz drukuj.
Wyświetlanie używanych i nieużywanych usług porównywania cen na karcie Pokrycie
Karta Pokrycie pokazuje, z jakiej usługi porównywania cen faktycznie korzysta strona.
- Gdy Narzędzia deweloperskie są w przeglądarce, naciśnij Command + Shift + P (Mac) lub Control + Shift + P (Windows, Linux, ChromeOS), aby otworzyć menu poleceń.
Zacznij pisać
coverage
.Wybierz Pokaż zasięg. Pojawi się karta Zasięg.
Kliknij Załaduj ponownie. Strona załaduje się ponownie, a na karcie Stan zobaczysz, ile CSS (i JavaScript) jest używany w poszczególnych plikach wczytywanych przez przeglądarkę.
Zielony oznacza użyty kod CSS. Czerwony oznacza nieużywany kod CSS.
Kliknij plik CSS, aby na podglądzie powyżej zobaczyć poszczególne wiersze użytego w nim kodu CSS.
Na zrzucie ekranu linie od 55 do 57 i 65–67 z
devsite-google-blue.css
są nieużywane, a wiersze od 59 do 63.
Wymuś tryb podglądu wydruku
Zobacz Wymuś przejście z narzędzi deweloperskich na tryb podglądu wydruku.
Kopiuj CSS
Z jednego menu na karcie Style możesz skopiować osobne reguły, deklaracje, właściwości i wartości CSS.
Dodatkowo możesz kopiować właściwości CSS w składni JavaScript. Ta opcja jest przydatna, jeśli korzystasz z bibliotek CSS-in-JS.
Aby skopiować CSS:
- Wybierz element.
- Na karcie Elementy > Style kliknij prawym przyciskiem myszy właściwość CSS.
Wybierz w menu jedną z tych opcji:
- Skopiuj deklarację. Kopiuje właściwość i jej wartość w składni CSS:
css property: value;
- Kopiuj właściwość. Kopiuje tylko nazwę
property
. - Skopiuj wartość. Kopiuje tylko
value
. - Kopiuj regułę. Kopiuje całą regułę CSS:
css selector[, selector] { property: value; property: value; ... }
- Skopiuj deklarację jako JS. Kopiuje właściwość i jej wartość w składni JavaScriptu:
js propertyInCamelCase: 'value'
- Skopiuj wszystkie deklaracje. Kopiuje wszystkie właściwości i ich wartości w regule CSS:
css property: value; property: value; ...
Skopiuj wszystkie deklaracje jako JS. Kopiuje wszystkie właściwości i ich wartości w składni JavaScript: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...
Skopiuj wszystkie zmiany CSS. Kopiuje zmiany wprowadzone na karcie Style we wszystkich deklaracji.
Wyświetl obliczoną wartość. Otwiera kartę Computed (Obliczone).
- Skopiuj deklarację. Kopiuje właściwość i jej wartość w składni CSS:
Zmień CSS
W tej sekcji opisujemy wszystkie sposoby zmiany kodu CSS w sekcji Elementy > Style.
Dodatkowo możesz:
- Zastępuj kod CSS po wczytaniu stron.
- Zapisz zmodyfikowany kod CSS w źródłach lokalnych w obszarze roboczym.
Dodawanie deklaracji CSS do elementu
Kolejność deklaracji wpływa na styl elementu, więc możesz je dodawać na różne sposoby:
- Dodaj deklarację w tekście. Odpowiednik dodania atrybutu
style
do kodu HTML elementu. - Dodaj deklarację do reguły stylu.
Którego przepływu pracy użyjesz? W większości przypadków najlepiej użyć przepływu pracy deklaracji wbudowanej. Deklaracje wbudowane mają większą szczegółowość niż deklaracje zewnętrzne, dlatego wbudowany przepływ pracy sprawia, że zmiany są wprowadzane w elemencie zgodnie z oczekiwaniami. Więcej informacji o szczegółach znajdziesz w sekcji Typy selektorów.
Jeśli debugujesz style elementu i chcesz dokładnie sprawdzić, co się dzieje, gdy deklaracja jest zdefiniowana w różnych miejscach, użyj innego przepływu pracy.
Dodaj deklarację w tekście
Aby dodać deklarację w tekście:
- Wybierz element.
- Na karcie Style kliknij nawiasy klamrowe sekcji element.style. Kursor zostanie ustawiony, aby umożliwić wprowadzenie tekstu.
- Wpisz nazwę właściwości i naciśnij Enter.
Wpisz prawidłową wartość właściwości i naciśnij Enter. W drzewie DOM widać, że do elementu został dodany atrybut
style
.Na zrzucie ekranu do wybranego elementu zastosowano właściwości
margin-top
ibackground-color
. W drzewie DOM deklaracje są odzwierciedlone w atrybuciestyle
elementu.
Dodawanie deklaracji do reguły stylu
Aby dodać deklarację do istniejącej reguły stylu:
- Wybierz element.
- Na karcie Style kliknij nawiasy między nawiasami reguły stylu, do których chcesz dodać deklarację. Kursor zostanie zaznaczony, co umożliwi wprowadzenie tekstu.
- Wpisz nazwę właściwości i naciśnij Enter.
- Wpisz prawidłową wartość właściwości i naciśnij Enter.
Na zrzucie ekranu reguła stylu pobiera nową deklarację border-bottom-style:groove
.
Zmienianie nazwy lub wartości deklaracji
Aby zmienić nazwę lub wartość deklaracji, kliknij dwukrotnie. W artykule Zmienianie wartości wyliczeniowych za pomocą skrótów klawiszowych znajdziesz skróty do szybkiego zwiększania lub zmniejszania wartości o 0, 1, 1, 10 lub 100 jednostek.
Zmienianie wartości wyliczeniowych za pomocą skrótów klawiszowych
Podczas edytowania wartości liczbowej deklaracji, np. font-size
, możesz używać tych skrótów klawiszowych, aby zwiększać wartość o stałą wartość:
- Naciśnij Option+W górę (Mac) lub Alt+W górę (Windows, Linux) – aby zwiększyć o 0,1.
- W górę, by zmienić wartość o 1 lub o 0,1, jeśli obecna wartość mieści się w przedziale od -1 do 1.
- Shift + strzałka w górę, aby zwiększyć o 10.
- Shift + Command + strzałka w górę (Mac) lub Control+Shift + Page Up (Windows, Linux), aby zwiększyć wartość o 100.
Zmniejszanie też działa. Wystarczy, że zastąp każdą wypowiedź górę wybranym poleceniem strzałka w dół.
Zmień wartości długości
Za pomocą wskaźnika możesz zmienić dowolną właściwość dotyczącą długości, np. szerokość, wysokość, dopełnienie, margines czy obramowanie.
Aby zmienić jednostkę długości:
- Najedź kursorem na nazwę jednostki. Zwróć uwagę, że jest podkreślona.
Kliknij nazwę jednostki, aby wybrać ją z listy.
Aby zmienić długość:
- Najedź kursorem na wartość jednostki – wskaźnik zmieni się w poziomą strzałkę z podwójnym grotem.
Przeciągnij w poziomie, aby zwiększyć lub zmniejszyć wartość.
Aby zmienić wartość o 10, podczas przeciągania przytrzymaj Shift.
Dodawanie klasy do elementu
Aby dodać klasę do elementu:
- Wybierz element w drzewie DOM.
- Kliknij .cls.
- Wpisz nazwę zajęć w polu Dodaj nowe zajęcia.
- Naciśnij Enter.
Emuluj preferencje jasnego i ciemnego motywu oraz włącz automatyczny tryb ciemny
Aby włączyć automatyczny tryb ciemny lub emulować preferencję użytkownika dotyczącą jasnych bądź ciemnych motywów:
- Na karcie Elementy > Style kliknij Przełącz typowe emulacje renderowania.
Wybierz na liście jedną z tych opcji:
- prefers-color-scheme: jasny. Wskazuje, że użytkownik woli korzystać z jasnego motywu.
- prefers-color-scheme: ciemny. Wskazuje, że użytkownik woli ciemny motyw.
- Automatyczny tryb ciemny. Wyświetla stronę w trybie ciemnym, nawet jeśli nie został on wdrożony przez Ciebie. Dodatkowo automatycznie ustawia
prefers-color-scheme
nadark
.
To menu zawiera skróty do opcji Emuluj funkcję multimediów CSS prefers-color-scheme
i Włącz automatyczny tryb ciemny na karcie Renderowanie.
Przełącz zajęcia
Aby włączyć lub wyłączyć klasę w elemencie:
- Wybierz element w drzewie DOM.
- Otwórz sekcję Klasy elementu. Zobacz Dodawanie klasy do elementu. Poniżej pola Dodaj nową klasę znajdują się wszystkie klasy, które są stosowane do tego elementu.
- Zaznacz pole wyboru obok zajęć, które chcesz włączyć lub wyłączyć.
Dodaj regułę stylu
Aby dodać nową regułę stylu:
- Wybierz element.
- Kliknij Nowa reguła stylu . Narzędzia deweloperskie wstawiają nową regułę pod regułę element.style.
Na zrzucie ekranu po kliknięciu Nowa reguła stylu Narzędzia deweloperskie dodają regułę stylu h1.devsite-page-title
.
Wybierz arkusz stylów, do którego chcesz dodać regułę
Gdy dodajesz nową regułę stylu, kliknij i przytrzymaj Nowa reguła stylu , aby wybrać arkusz stylów, do którego chcesz dodać tę regułę.
Przełącz deklarację
Aby włączyć lub wyłączyć pojedynczą deklarację:
- Wybierz element.
- Na karcie Style najedź kursorem na regułę definiującą deklarację. Obok każdej deklaracji pojawiają się pola wyboru.
- Zaznacz lub odznacz pole wyboru obok deklaracji. Gdy usuwasz deklarację, Narzędzia deweloperskie przekreślają ją, aby wskazać, że nie jest już aktywna.
Na zrzucie ekranu w przypadku wybranego elementu właściwość color
jest wyłączona.
Edytowanie pseudoelementów ::view-transition
podczas animacji
Odpowiednią sekcję znajdziesz w artykule Animacje.
Więcej informacji znajdziesz w artykule Płynne i proste przechodzenie dzięki interfejsowi View Transitions API.
Wyrównywanie elementów siatki i ich zawartości z edytorem siatki
Zapoznaj się z odpowiednią sekcją w siatce Sprawdź kod CSS.
Zmienianie kolorów za pomocą selektora kolorów
Przeczytaj artykuł Sprawdzanie i debugowanie kolorów HD i innych za pomocą selektora kolorów.
Zmiana wartości kąta za pomocą zegara kątowego
Zegar kątowy stanowi GUI do zmiany wartości <angle>
w wartościach właściwości CSS.
Aby otworzyć Zegar kątowy:
- Wybierz element z deklaracją kąta.
Na karcie Style znajdź deklarację
transform
lubbackground
, którą chcesz zmienić. Kliknij pole Podgląd pod kątem obok wartości kąta.Małe zegary na lewo od
-5deg
i0.25turn
to podglądy pod kątem.Kliknij podgląd, aby otworzyć Zegar kątowy.
Aby zmienić wartość kąta, kliknij okrąg Zegar kątowy, lub przewiń myszą, aby zwiększyć lub zmniejszyć wartość kąta o 1.
Dostępne są inne skróty klawiszowe do zmiany wartości kąta. Więcej informacji znajdziesz w skrótach klawiszowych w panelu Style.
Zmieniaj pola i cienie tekstu za pomocą edytora cieni
Edytor Cienia udostępnia GUI do zmiany deklaracji CSS text-shadow
i box-shadow
.
Aby zmienić cienie za pomocą edytora cieni:
Wybierz element z deklaracją cienia. Na przykład wybierz następny element.
Na karcie Style znajdź ikonę cienia obok deklaracji
text-shadow
lubbox-shadow
.Kliknij ikonę cienia, aby otworzyć edytor cieni.
Zmień właściwości cienia:
- Typ (tylko dla
box-shadow
). Wybierz Outset lub Inset. - Odsunięcia X i Y. Przeciągnij niebieski punkt lub określ wartości.
- Rozmycie. Przeciągnij suwak lub określ wartość.
- Rozłóż (tylko dla
box-shadow
). Przeciągnij suwak lub określ wartość.
- Typ (tylko dla
Obserwuj zmiany zastosowane do elementu.
Edytuj animacje i czasy przejść za pomocą edytora wygładzania
Edytor wygładzania udostępnia graficzny interfejs użytkownika do zmiany wartości zdarzeń transition-timing-function
i animation-timing-function
.
Aby otworzyć edytor wygładzania:
- Wybierz element z deklaracją funkcji czasu, np.
<body>
na tej stronie. - Na karcie Style znajdź fioletową ikonę obok deklaracji
transition-timing-function
,animation-timing-function
lub skrótutransition
. - Kliknij ikonę, aby otworzyć Edytor wygładzania:
Dostosuj czas za pomocą gotowych ustawień
Aby dostosować czas jednym kliknięciem, użyj gotowych ustawień w Edytorze wygładzania:
- Aby ustawić wartość słowa kluczowego w edytorze wygładzania, kliknij jeden z przycisków selektora:
- liniowy
- ease-in-out ,
- ease-in
- ease-out
W przełączniku gotowych ustawień kliknij przycisk lub , aby wybrać jedną z tych wartości:
- Gotowe ustawienia liniowe:
elastic
,bounce
lubemphasized
. - Gotowe ustawienia sześcianu Beziera:
- Gotowe ustawienia liniowe:
Słowo kluczowe „czas” | Gotowe ustawienie | Sześcienny Bezier |
---|---|---|
wolno-normalnie-wolno | Wejście, sinus | cubic-bezier(0.45, 0.05, 0.55, 0.95) |
Wyjście, kwadratowe | cubic-bezier(0.46, 0.03, 0.52, 0.96) |
|
Wyjście, sześcian | cubic-bezier(0.65, 0.05, 0.36, 1) |
|
Szybkie tempo, zwolnione tempo | cubic-bezier(0.4, 0, 0.2, 1) |
|
Wejście, z tyłu | cubic-bezier(0.68, -0.55, 0.27, 1.55) |
|
wolno-normalnie | Wejście, sinus | cubic-bezier(0.47, 0, 0.75, 0.72) |
Przychodzące, kwadratowe | cubic-bezier(0.55, 0.09, 0.68, 0.53) |
|
W środku, sześcienne | cubic-bezier(0.55, 0.06, 0.68, 0.19) |
|
Do wewnątrz, z tyłu | cubic-bezier(0.6, -0.28, 0.74, 0.05) |
|
Szybkie odtwarzanie, wejście liniowe | cubic-bezier(0.4, 0, 1, 1) |
|
normalnie-wolno | Na zewnątrz, sinus | cubic-bezier(0.39, 0.58, 0.57, 1) |
Wyjście, kwadratowe | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
|
Bez, sześcian | cubic-bezier(0.22, 0.61, 0.36, 1) |
|
Wyjście liniowe, spowolnione | cubic-bezier(0, 0, 0.2, 1) |
|
Na zewnątrz, z powrotem | cubic-bezier(0.18, 0.89, 0.32, 1.28) |
Skonfiguruj niestandardowe czasy
Aby ustawić niestandardowe wartości dla funkcji czasu, użyj punktów kontrolnych na liniach:
W przypadku funkcji liniowych kliknij w dowolnym miejscu linii, aby dodać punkt kontrolny, a następnie go przeciągnij. Kliknij dwukrotnie, aby usunąć punkt.
Aby skorzystać z funkcji Beziera sześciennego, przeciągnij jeden z punktów kontrolnych.
Każda zmiana powoduje uruchomienie animacji kuli w górnej części edytora w sekcji Podgląd.
(Funkcja eksperymentalna) Kopiowanie zmian CSS
Po włączeniu tego eksperymentu zmiany na karcie Style są zaznaczone na zielono.
Aby skopiować pojedynczą deklarację CSS, najedź kursorem na podświetloną deklarację i kliknij przycisk Kopiuj.
Aby skopiować wszystkie zmiany CSS jednocześnie w deklaracjach, kliknij dowolną deklarację prawym przyciskiem myszy i wybierz Skopiuj wszystkie zmiany CSS.
Dodatkowo możesz śledzić zmiany wprowadzane na karcie Zmiany.