Informacje o funkcjach CSS

Poznaj nowe przepływy pracy w tym kompleksowym omówieniu funkcji Narzędzi deweloperskich w Chrome związanych z wyświetlanie i zmienianie CSS.

Przeczytaj artykuł Wyświetlanie i zmienianie CSS, by poznać podstawy.

Wybierz element

Panel Elementy w Narzędziach deweloperskich umożliwia wyświetlanie i zmienianie CSS tylko jednego elementu.

Na zrzucie ekranu wybrany element h1 jest zaznaczony na niebiesko w drzewie DOM. Po prawej stronie na karcie Style znajdziesz style elementu. Po lewej stronie ten element jest ale tylko dlatego, że znajduje się na nim kursor myszy w interfejsie DOM Drzewo.

Samouczek znajdziesz w sekcji 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 następnie kliknij element w 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 prawym przyciskiem myszy wynik, a następnie wybierz Pokaż w panelu Elementy.

Wyświetl CSS

Użyj menu Elementy > Karty Style i Computed zawierają reguły CSS i diagnozuj problemy z CSS.

Nawigacja za pomocą linków

Na karcie Style znajdują się linki do różnych miejsc, takich jak:

• Obok reguł CSS, do arkuszy stylów i źródeł CSS. Takie linki otwierają panel Źródła. Jeśli arkusz stylów jest zmniejszony, przeczytaj sekcję Umożliwianie odczytu zminifikowanego pliku.
• W sekcjach Odziedziczone z ... elementy nadrzędne.
• W wywołaniach funkcji var() do deklaracji właściwości niestandardowej.
• W skróconych właściwościach animation do @keyframes.
• Linki Więcej informacji w etykietkach dokumentacji.
• Więcej informacji

Oto niektóre z nich:

Linki mogą mieć różny styl. Jeśli nie masz pewności, czy coś to link, kliknij go, aby to sprawdzić.

Wyświetlanie etykietek z dokumentacją, szczegółami i wartościami właściwości niestandardowych CSS

Elementy > Style – po najechaniu kursorem na konkretny element wyświetlają się etykietki z przydatnymi informacjami.

Wyświetl dokumentację CSS

Aby wyświetlić etykietkę z krótkim opisem właściwości CSS, najedź kursorem na nazwę właściwości na karcie Style.

Kliknij Więcej informacji, aby przejść do pliku referencyjnego CSS MDN w tej usłudze.

Aby wyłączyć etykietki, zaznacz Nie pokazuj.

Aby je ponownie włączyć, kliknij Ustawienia > Ustawienia > Elementy > Pokaż etykietkę dotyczącą dokumentacji CSS.

Wyświetl szczegółowość selektora

Najedź kursorem na selektor, aby wyświetlić etykietkę z jego właściwą kategorią.

Wyświetlanie wartości właściwości niestandardowych

Najedź kursorem na element --custom-property, aby zobaczyć jego wartość w etykietce.

Wyświetlanie nieprawidłowych, zastąpionych, nieaktywnych i innych usług porównywania cen

Karta Styles (Style) rozpoznaje wiele rodzajów problemów CSS i wyróżnia je na różne sposoby.

Przeczytaj sekcję Omówienie CSS na karcie Style.

Wyświetlanie tylko kodu CSS, który został rzeczywiście zastosowany do elementu

Na karcie Style widoczne są wszystkie reguły dotyczące elementu, w tym deklaracje, zostały zastąpione. Jeśli nie interesują Cię zastąpione deklaracje, użyj interfejsu Computed aby wyświetlić tylko CSS, który jest rzeczywiście zastosowany do elementu.

1. Wybierz element.
2. W panelu Elementy otwórz kartę Obliczone.

Zaznacz pole wyboru Pokaż wszystkie, aby wyświetlić wszystkie właściwości.

Przeczytaj artykuł Omówienie CSS na karcie Obliczenia.

Wyświetl właściwości CSS w kolejności alfabetycznej

Użyj karty Obliczone. Przeczytaj sekcję Wyświetlanie tylko kodu CSS, który jest rzeczywiście zastosowany do elementu.

Wyświetlanie odziedziczonych właściwości CSS

Na karcie Obliczone zaznacz pole wyboru Pokaż wszystko. Patrz sekcja Wyświetlanie tylko usługi porównywania cen, która rzeczywiście zastosowane do elementu.

Możesz też przewinąć kartę Style i znaleźć sekcje o nazwie Inherited from <element_name>.

Wyświetl at-reguły CSS

Reguły AT to instrukcje CSS, które umożliwiają kontrolowanie zachowania CSS. Elementy > Kolumna Style (Style) wyświetla te reguły w poszczególnych sekcjach:

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

Wyświetl @property w regułach

Reguła @property CSS pozwala wyraźnie zdefiniować właściwości niestandardowe CSS i zarejestrować je w arkuszu stylów bez uruchamiania JavaScriptu.

Najedź kursorem na nazwę takiej właściwości na karcie Style. Pojawi się etykietka z wartością i deskryptorami właściwości oraz link do jej rejestracji w zwiniętej sekcji @property u dołu karty Style.

Aby edytować regułę @property, kliknij dwukrotnie jej nazwę lub wartość.

Wyświetl @supports w regułach

Karta Styles (Style) zawiera reguły CSS „@supports”, jeśli zostały one zastosowane do elementu. Na przykład sprawdź ten element:

Jeśli przeglądarka obsługuje funkcję lab(), element jest zielony lub fioletowy.

Wyświetl @scope w regułach

Na karcie Style widać reguły CSS @scope, jeśli zostały zastosowane do elementu.

Nowe reguły @scope są częścią specyfikacji kaskadowania i dziedziczenia CSS na poziomie 6. Te reguły umożliwiają określanie zakresu stylów CSS, co oznacza, że można bezpośrednio stosować style do konkretnych elementów.

Wyświetl regułę @scope na tym podglądzie:

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> wewnątrz elementów z klasą card.

Aby edytować regułę @scope, kliknij ją dwukrotnie.

Wyświetl @font-palette-values w regułach

Reguła CSS @font-palette-values pozwala dostosować domyślne wartości właściwości font-palette. Elementy > Opcja Style (Style) wyświetla tę regułę w specjalnej sekcji.

Wyświetl sekcję @font-palette-values w 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 czcionki kolorowej.

Aby edytować wartości niestandardowe, kliknij je dwukrotnie.

Wyświetl @position-try w regułach

Reguła CSS @position-try wraz z właściwością position-try-options pozwala zdefiniować alternatywne pozycje zakotwiczenia dla elementów. Więcej dowiesz się z artykułu Przedstawiamy interfejs CSS Anchor positioning API.

Elementy > Style – rozwiązuje i łączy te elementy:

• position-try-options do dedykowanej sekcji @position-try --name.
• position-anchor i argumenty anchor() na odpowiednie elementy z atrybutami popovertarget.

Sprawdź wartości position-try-options i sekcje @position-try na następnym podglądzie:

1. W podglądzie otwórz menu podrzędne. Kliknij kolejno TWOJE KONTO i SKLEP.
2. Sprawdź element, używając przycisku id="submenu" w podglądzie.
3. W sekcji Style znajdź właściwość position-try-options i kliknij jej wartość --bottom. Na karcie Style znajdziesz odpowiednią sekcję @position-try.
4. Kliknij link wartości position-anchor lub te same argumenty anchor(). Panel Elementy wybierze element z odpowiednim atrybutem popovertarget, a na karcie Style (Style) zostanie wyświetlony kod CSS elementu.

Aby edytować wartości, kliknij je dwukrotnie.

Wyświetlanie modelu pola elementu

Aby wyświetlić model ramki elementu, przejdź na 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ślony kod CSS właściwości ani wartości.

Aby na karcie Obliczone uwzględniać też właściwości dziedziczone, zaznacz pole wyboru Pokaż wszystkie.

Aby przejść do karty Obliczone, pogrupuj filtrowane właściwości w kategorie zwijane, zaznaczając Grupa.

Emuluj zaznaczoną stronę

Gdy przełączysz zaznaczenie ze strony na Narzędzia deweloperskie, niektóre elementy nakładane zostaną automatycznie ukryte, jeśli zostaną aktywowane przez zaznaczenie. Na przykład listy rozwijane, menu lub selektory dat. Opcja check_box Emuluj zaznaczoną stronę umożliwia debugowanie takiego elementu tak, jakby był zaznaczony.

Spróbuj emulować zaznaczoną stronę na tej stronie demonstracyjnej:

1. Zaznacz element wejściowy. Pod spodem pojawi się kolejny element.
2. Otwórz Narzędzia deweloperskie. Okno Narzędzi deweloperskich jest teraz zaznaczone na pierwszym planie, a nie na stronie, więc element ponownie znika.
3. W sekcji Elementy > Style – kliknij :hov, zaznacz check_box Emul a selected page (Emuluj zaznaczoną stronę) i upewnij się, że jest wybrany element wejściowy. Możesz teraz przyjrzeć się elementowi znajdującemu się pod nim.

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 otwórz kartę Style.
3. Kliknij :hov.
4. Zaznacz pseudoklasę, którą chcesz włączyć.

W widocznym obszarze możesz zobaczyć, że Narzędzia deweloperskie stosują do elementu deklarację background-color, mimo że element nie jest na nim najeżdżany kursorem.

Interaktywny samouczek znajdziesz w sekcji Dodawanie pseudostanu do klasy.

Wyświetlanie dziedziczonych pseudoelementów wyróżnienia

Pseudoelementy umożliwiają określanie stylu określonych części elementów. Podświetlone pseudoelementy to fragmenty dokumentu ze znakiem „zaznaczone” stanu i mają styl „wyróżnione”. , aby poinformować użytkownika o tym stanie. Na przykład takie pseudoelementy to ::selection, ::spelling-error, ::grammar-error i ::highlight.

Jak wspomnieliśmy w specyfikacji, gdy wiele stylów jest w konflikcie, styl kaskadowy określa zwycięski styl.

Aby lepiej zrozumieć dziedziczenie i priorytety reguł, możesz wyświetlić odziedziczone pseudoelementy wyróżniające:

1. Sprawdź tekst poniżej.

   Dziedziczono styl pseudoelementu wyróżnienia elementu nadrzędnego. Wybierz mnie!

2. Zaznacz fragment tekstu powyżej.

3. Na karcie Style przewiń w dół, aby znaleźć sekcję Inherited from ::selection pseudo of....

Wyświetlanie warstw kaskadowych

Warstwy kaskadowe dają dokładniejszą kontrolę nad plikami CSS, co pozwala zapobiegać konfliktom związanym ze stylami. Jest to przydatne w przypadku dużych baz kodu, systemów projektowania oraz zarządzania stylami innych firm w aplikacjach.

Aby wyświetlić warstwy kaskadowe, sprawdź następny element i otwórz Elementy > Style.

Na karcie Style wyświetl 3 warstwy kaskadowe wraz z ich stylami: page, component i base.

Aby wyświetlić kolejność warstw, kliknij jej nazwę lub przycisk Przełącz widok warstw CSS.

Największa precyzja ma warstwa page, 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 CSS Media wybierz drukowanie.

Wyświetl używany i nieużywany kod CSS na karcie Pokrycie

Karta Pokrycie pokazuje, z jakich usług porównywania cen rzeczywiście korzysta strona.

1. Naciśnij Command + Shift + P (Mac) lub Control + Shift + P (Windows, Linux, ChromeOS), a Narzędzia deweloperskie: aby otworzyć menu poleceń.

2. Zacznij pisać: coverage.

   

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

   

4. Kliknij Załaduj ponownie. Strona zostanie załadowana ponownie, a karta Pokrycie zawiera informacje o zawartości CSS (i JavaScriptu) używane z każdego pliku wczytanego przez przeglądarkę.

   

   Zielony oznacza używany kod CSS. Czerwony oznacza nieużywany kod CSS.

5. Kliknij plik CSS, aby zobaczyć na podglądzie powyżej, w jaki sposób poszczególne pliki CSS są używane.

   

   Na zrzucie ekranu wiersze 55–57 i 65–67 pola devsite-google-blue.css są nieużywane, a wiersze od 59 do 63.

Wymuś tryb podglądu wydruku

Patrz Wymuszanie przejścia w trybie podglądu wydruku w Narzędziach deweloperskich.

Kopiuj CSS

Z jednego menu na karcie Style możesz skopiować osobne reguły CSS, deklaracje, właściwości i wartości.

Możesz też kopiować właściwości CSS w składni JavaScript. Ta opcja jest przydatna, jeśli korzystasz z bibliotek CSS-in-JS.

Aby skopiować kod CSS:

1. Wybierz element.
2. W sekcji 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ę pola 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 JavaScript: js propertyInCamelCase: 'value'
   • Skopiuj wszystkie deklaracje. Kopiuje wszystkie właściwości i ich wartości z reguły 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: 'wartość', propertyInCamelCase: 'wartość', ...

   • Skopiuj wszystkie zmiany w kodzie CSS. Kopiuje zmiany wprowadzone na karcie Style we wszystkich deklaracjach.

   • Wyświetl obliczoną wartość. Otwiera kartę Obliczone.

Zmień CSS

W tej sekcji znajdziesz informacje o wszystkich sposobach zmiany CSS w sekcji Elementy > Style.

Dodatkowo możesz:

• Zastępuj kod CSS podczas ładowania strony.
• 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 dodawać deklaracje w różne sposoby:

• Dodaj deklarację wbudowaną. Odpowiednik dodania atrybutu style do kodu HTML elementu.
• Dodaj deklarację do reguły stylu.

Który przepływ pracy należy zastosować? W większości przypadków warto użyć wbudowanego procesu deklaracji. Deklaracje wbudowane mają większą szczegółowość niż zewnętrzne deklaracje, dlatego W procesie masz pewność, że zmiany w elemencie zaczną obowiązywać w sposób zgodny z oczekiwaniami. Zobacz selektor Typy, aby uzyskać bardziej szczegółowe informacje.

Jeśli debugujesz style elementu i chcesz dokładnie sprawdzić, co się dzieje, gdy tag jest zdefiniowana w innych miejscach, użyj innego przepływu pracy.

Dodaj deklarację wbudowaną

Aby dodać deklarację wbudowaną:

1. Wybierz element.
2. Na karcie Style (Style) kliknij między nawiasami sekcji element.style. Kursor umożliwia zaznaczenie tekstu, co umożliwia wpisywanie tekstu.
3. Wpisz nazwę właściwości i naciśnij Enter.

4. Wpisz prawidłową wartość tej właściwości i naciśnij Enter. W drzewie DOM możesz: zobaczysz, że do elementu został dodany atrybut style.

   

   Na zrzucie ekranu właściwości margin-top i background-color zostały zastosowane do wybranego elementu. W drzewie DOM możesz zobaczyć deklaracje odzwierciedlone w atrybucie style elementu.

Dodaj deklarację do reguły stylu

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

1. Wybierz element.
2. Na karcie Style kliknij między nawiasami reguły stylu, do której chcesz dodać element. deklaracja. Kursor zostanie zaznaczony i będzie można wpisać tekst.
3. Wpisz nazwę właściwości i naciśnij Enter.
4. Wpisz prawidłową wartość tej właściwości i naciśnij Enter.

Na zrzucie ekranu reguła stylu pobiera nową deklarację border-bottom-style:groove.

Zmień nazwę lub wartość deklaracji

Aby zmienić nazwę lub wartość deklaracji, kliknij dwukrotnie jej nazwę. Zobacz sekcję Zmienianie wartości wyliczeniowych za pomocą: skróty klawiszowe – skróty do szybkiego zwiększania lub zmniejszania wartości o 0,1, 1, 10 lub 100 jednostek.

Zmienianie wartości wyliczanych za pomocą skrótów klawiszowych

Podczas edytowania wyliczalnej wartości deklaracji (np. font-size) możesz użyć tych skrótów klawiszowych, aby zwiększyć wartość o stałą kwotę:

• Option + strzałka w górę (Mac) lub Alt + strzałka w górę (Windows, Linux) na przyrost wartości o 0,1.
• W górę, aby zmienić wartość o 1 lub o 0,1, jeśli bieżąca wartość mieści się w zakresie od -1 do 1.
• Shift + strzałka w górę, aby zwiększyć o 10.
• Shift + Command + Up (Mac) lub Control + Shift + Page Up (Windows, Linux), aby zwiększyć wartość o 100.

Zmniejszanie też działa. Po prostu zastąp każde wystąpienie Up wspomnianego wcześniej W dół.

Zmień wartości długości

Za pomocą wskaźnika możesz zmienić dowolną właściwość długości, np. szerokość, wysokość, dopełnienie, marginesy czy obramowanie.

Aby zmienić jednostkę długości:

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

2. Kliknij nazwę jednostki, aby wybrać jednostkę z menu.

Aby zmienić wartość długości:

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

2. Przeciągnij ją w poziomie, aby zwiększyć lub zmniejszyć wartość.

Aby dostosować 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 i włączaj automatyczny tryb ciemny

Aby włączyć automatyczny tryb ciemny albo emulować preferencje użytkownika dotyczące motywu jasnego lub ciemnego:

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

2. Wybierz jedną z tych opcji na liście:

   • prefers-color-scheme: światło. Wskazuje, że użytkownik woli jasny motyw.
   • prefers-color-scheme: dark (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ła przez Ciebie zaimplementowana. Dodatkowo automatycznie ustawia prefers-color-scheme na dark.

To menu to skrót 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 sekcji Dodaj nowe Pole Class (Klasa) zawiera wszystkie klasy, które zostały zastosowane 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ą makro nową regułę pod regułą element.style.

Na zrzucie ekranu Narzędzia deweloperskie po kliknięciu Nowa reguła stylu dodaje regułę stylu h1.devsite-page-title.

Wybierz arkusz stylów, do którego chcesz dodać regułę

Podczas dodawania nowej reguły stylu kliknij i przytrzymaj Nowa reguła stylu. , aby wybrać arkusz stylów aby dodać regułę stylu.

Przełącz deklarację

Aby włączyć lub wyłączyć pojedynczą deklarację:

1. Wybierz element.
2. Na karcie Style najedź kursorem na regułę, która definiuje deklarację. Pola wyboru pojawiają się obok do każdej deklaracji.
3. Zaznacz lub odznacz pole wyboru obok deklaracji. Gdy wyczyścisz deklarację, Narzędzia deweloperskie przekreśla je, aby wskazać, że nie jest on już aktywny.

Na zrzucie ekranu wyłączono właściwość color dla obecnie wybranego elementu.

Edytowanie pseudoelementów ::view-transition podczas animacji

Zapoznaj się z odpowiednią sekcją w artykule Animacje.

Więcej informacji znajdziesz w artykule Płynne i proste przejścia dzięki interfejsowi View Migrates API.

Wyrównywanie elementów siatki i ich zawartości za pomocą edytora siatki

Zapoznaj się z odpowiednią sekcją w sekcji Sprawdź siatkę CSS.

Zmiana kolorów za pomocą selektora kolorów

Zapoznaj się z sekcją Sprawdzanie i debugowanie kolorów w rozdzielczości HD i inne niż HD za pomocą selektora kolorów.

Zmiana wartości kąta za pomocą zegara kątowego

Zegar kątowy zawiera interfejs GUI do zmiany parametrów <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 kąta obok wartości kąta.

   

   Małe zegary po lewej stronie od -5deg i 0.25turn to podglądy kątów.

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

   

4. Zmień wartość kąta, klikając kółko Zegar kątowy lub przewiń mysz do zwiększ / zmniejsz wartość kąta o 1.

5. Dostępnych jest więcej skrótów klawiszowych, które umożliwiają zmianę wartości kąta. Więcej informacji znajdziesz w panelu Style skróty klawiszowe.

Zmiana cieni w polu i tekście za pomocą edytora cieni

Edytor Shadow zawiera graficzny interfejs użytkownika, który służy do zmieniania 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 obok deklaracji text-shadow lub box-shadow znajdź ikonę cienia .

   

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

   

4. Zmień właściwości cienia:

   • Type (Typ) (tylko w przypadku box-shadow). Wybierz Początek lub Wstaw.
   • Odsunięcia X i Y. Przeciągnij niebieską kropkę lub określ wartości.
   • Rozmycie. Przeciągnij suwak lub podaj wartość.
   • Rozpowszechniane (tylko w przypadku box-shadow). Przeciągnij suwak lub podaj wartość.

5. Zwróć uwagę na zmiany zastosowane do elementu.

Edytowanie animacji i czasów przejść w edytorze wygładzania

Edytor wygładzania zawiera interfejs GUI do zmiany wartości 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 fioletową ikonę znajdziesz obok deklaracji transition-timing-function, animation-timing-function lub skróconej właściwości transition.
3. Kliknij ikonę, aby otworzyć edytor wygładzania:

Dostosuj czasy za pomocą gotowych ustawień

Aby dostosować czasy 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 wyboru:
   • liniowy
   • ease-in-out
   • ease-in
   • ease-out

2. W przełączniku gotowych ustawień kliknij przyciski lub , aby wybrać jedno z tych gotowych ustawień:

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

Słowo kluczowe czasu	Gotowe ustawienia	Sześcienny Bezier
wolno-normalnie-wolno	Wdech, sinus	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	Wyjście, kwadratowe	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	Odlot, sześcienna	cubic-bezier(0.65, 0.05, 0.36, 1)
	Szybko uciekaj, wolniej	cubic-bezier(0.4, 0, 0.2, 1)
	Wdech, z powrotem	cubic-bezier(0.68, -0.55, 0.27, 1.55)
wolno-normalnie	W środku, sinus	cubic-bezier(0.47, 0, 0.75, 0.72)
	W, kwadrat	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	W, sześcienna	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	Do środka, z tyłu	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	Przyspieszenie, wejście liniowe	cubic-bezier(0.4, 0, 1, 1)
normalnie-wolno	Wyjście, sinus	cubic-bezier(0.39, 0.58, 0.57, 1)
	Wyjście, kwadratowe	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Wylot, sześcienna	cubic-bezier(0.22, 0.61, 0.36, 1)
	Wyjście liniowe, zwolnione	cubic-bezier(0, 0, 0.2, 1)
	Na zewnątrz, z powrotem	cubic-bezier(0.18, 0.89, 0.32, 1.28)

Skonfiguruj niestandardowe kody czasowe

Aby ustawić niestandardowe wartości dla funkcji czasowych, użyj punktów kontrolnych na liniach:

• W przypadku funkcji liniowych kliknij w dowolnym miejscu linii, aby dodać punkt kontrolny, i przeciągnij go. Kliknij dwukrotnie, aby usunąć punkt.

  

• W przypadku funkcji sześciennych beziera przeciągnij jeden z punktów kontrolnych.

  

Każda zmiana aktywuje animację kulki w sekcji Podgląd u góry edytora.

(Funkcja eksperymentalna) Kopiowanie zmian CSS

Po włączeniu tego eksperymentu karta Style (Style) jest podświetlona na zielono.

Aby skopiować pojedynczą zmianę deklaracji CSS, najedź kursorem na wyróżnioną deklarację i kliknij przycisk Kopiuj.

Aby skopiować wszystkie zmiany CSS między deklaracjami, kliknij dowolną deklarację prawym przyciskiem myszy i wybierz Kopiuj wszystkie zmiany CSS.

Możesz też śledzić zmiany wprowadzane na karcie Zmiany.