Informacje o funkcjach CSS

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.

1. Wybierz element.
2. 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:

• @property
• @supports
• @scope
• @font-palette-values

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:

1. Sprawdź tekst na karcie w podglądzie.
2. 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:

1. Sprawdź drugi wiersz tekstu na podglądzie.
2. 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 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:

1. Aktywuj element wprowadzania. Pod nią pojawi się kolejny element.
2. Otwórz Narzędzia deweloperskie. Okno Narzędzi deweloperskich jest teraz aktywne, a nie strona, więc element ponownie znika.
3. 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:

1. Wybierz element.
2. W panelu Elementy kliknij kartę Style.
3. Kliknij :hov.
4. 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:

1. Sprawdź tekst poniżej

   Odziedziczyłem styl pseudoelementu wyróżnionego mojego rodzica. Wybierz mnie

2. Zaznacz fragment powyższego tekstu.

3. 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:

1. Otwórz menu poleceń.
2. Zacznij pisać Rendering i wybierz Show Rendering.
3. 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.

1. 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ń.

2. Zacznij pisać coverage.

   

3. Wybierz Pokaż zasięg. Pojawi się karta Zasięg.

   

4. 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.

5. 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:

1. Wybierz element.
2. Na karcie Elementy > Style kliknij prawym przyciskiem myszy właściwość CSS.

3. 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).

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:

1. Wybierz element.
2. Na karcie Style kliknij nawiasy klamrowe sekcji element.style. Kursor zostanie ustawiony, aby umożliwić wprowadzenie tekstu.
3. Wpisz nazwę właściwości i naciśnij Enter.

4. 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 i background-color. W drzewie DOM deklaracje są odzwierciedlone w atrybucie style elementu.

Dodawanie deklaracji do reguły stylu

Aby dodać deklarację do istniejącej reguły stylu:

1. Wybierz element.
2. 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.
3. Wpisz nazwę właściwości i naciśnij Enter.
4. 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:

1. Najedź kursorem na nazwę jednostki. Zwróć uwagę, że jest podkreślona.

2. Kliknij nazwę jednostki, aby wybrać ją z listy.

Aby zmienić długość:

1. Najedź kursorem na wartość jednostki – wskaźnik zmieni się w poziomą strzałkę z podwójnym grotem.

2. 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:

1. Wybierz element w drzewie DOM.
2. Kliknij .cls.
3. Wpisz nazwę zajęć w polu Dodaj nowe zajęcia.
4. 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:

1. Na karcie Elementy > Style kliknij Przełącz typowe emulacje renderowania.

2. 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 na dark.

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:

1. Wybierz element w drzewie DOM.
2. 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.
3. Zaznacz pole wyboru obok zajęć, które chcesz włączyć lub wyłączyć.

Dodaj regułę stylu

Aby dodać nową regułę stylu:

1. Wybierz element.
2. 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ę:

1. Wybierz element.
2. Na karcie Style najedź kursorem na regułę definiującą deklarację. Obok każdej deklaracji pojawiają się pola wyboru.
3. 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:

1. Wybierz element z deklaracją kąta.

2. Na karcie Style znajdź deklarację transform lub background, którą chcesz zmienić. Kliknij pole Podgląd pod kątem obok wartości kąta.

   

   Małe zegary na lewo od -5deg i 0.25turn to podglądy pod kątem.

3. Kliknij podgląd, aby otworzyć Zegar kątowy.

   

4. Aby zmienić wartość kąta, kliknij okrąg Zegar kątowy, lub przewiń myszą, aby zwiększyć lub zmniejszyć wartość kąta o 1.

5. 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:

1. Wybierz element z deklaracją cienia. Na przykład wybierz następny element.

2. Na karcie Style znajdź ikonę cienia obok deklaracji text-shadow lub box-shadow.

   

3. Kliknij ikonę cienia, aby otworzyć edytor cieni.

   

4. 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ść.

5. 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:

1. Wybierz element z deklaracją funkcji czasu, np. <body> na tej stronie.
2. Na karcie Style znajdź fioletową ikonę obok deklaracji transition-timing-function, animation-timing-function lub skrótu transition.
3. 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:

1. Aby ustawić wartość słowa kluczowego w edytorze wygładzania, kliknij jeden z przycisków selektora:
   • liniowy
   • ease-in-out ,
   • ease-in
   • ease-out

2. W przełączniku gotowych ustawień kliknij przycisk lub , aby wybrać jedną z tych wartości:

   • Gotowe ustawienia liniowe: elastic, bounce lub emphasized.
   • Gotowe ustawienia sześcianu Beziera:

Słowo kluczowe „czas”	Wstępnie zdefiniowana	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.