Informacje o funkcjach CSS

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

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

Wybierz element

W panelu Elementy w Narzędziach deweloperskich możesz wyświetlać i zmieniać CSS jednego elementu naraz.

Na zrzucie ekranu element h1 wyróżniony na niebiesko w drzewie DOM jest wybrany. Po prawej stronie na karcie Style wyświetlane są style elementu. Po lewej stronie element jest wyróżniony w widoku, ale tylko dlatego, że kursor myszy znajduje się nad nim w drzewie DOM.

Aby poznać samouczek, przeczytaj artykuł Wyświetlanie kodu CSS elementu.

Element można wybrać na kilka sposobów:

• W widoku kliknij element prawym przyciskiem myszy i kliknij Zbadaj.
• W Narzędziach deweloperskich kliknij Wybierz element albo naciśnij Command+Shift+C (Mac) lub Control+Shift+C (Windows, Linux), a potem kliknij element w widocznym obszarze.
• W narzędziach dla deweloperów kliknij element w drzewie DOM.
• W Narzędziach deweloperskich uruchom zapytanie, np. document.querySelector('p') w Konsoli, kliknij prawym przyciskiem myszy wynik i wybierz Pokaż w panelu Elementy.

Wyświetlanie kodu CSS

Na kartach Elementy > Style i Wynikowy możesz wyświetlać reguły CSS oraz diagnozować problemy z CSS.

Nawigacja za pomocą linków

Karta Style zawiera linki do różnych miejsc, m.in.:

• obok reguł CSS, arkuszy stylów i źródeł CSS. Takie linki otwierają panel Źródła. Jeśli arkusz stylów jest zoptymalizowany, zapoznaj się z artykułem Umożliwienie odczytu zoptymalizowanego pliku.
• W sekcji Odziedziczone z … do elementów nadrzędnych.
• W wywołaniach var() do deklaracji niestandardowych właściwości.
• W skróconych właściwościach animation do @keyframes.
• Więcej informacji w tooltipach w dokumentacji.
• Więcej informacji

Oto niektóre z nich:

Linki mogą mieć inny styl. Jeśli nie masz pewności, czy coś jest linkiem, kliknij, aby się przekonać.

wyświetlać etykiet z dokumentacją CSS, specyficznością i wartościami właściwości niestandardowych.

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

Wyświetlanie dokumentacji 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.

Aby otworzyć dokumentacja porównawcza CSS MND dotyczącą tej usługi, kliknij Więcej informacji.

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

Aby je ponownie włączyć, zaznacz Ustawienia > Preferencje > Elementy > Pokaż opis wtyczki dokumentacji CSS.

Wyświetlanie szczegółowości 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 --custom-property, aby wyświetlić 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 tych reguł CSS, które są faktycznie stosowane do elementu

Na karcie Style widoczne są wszystkie reguły dotyczące elementu, w tym deklaracje, które zostały zastąpione. Jeśli zastąpione deklaracje nie interesują Cię, na karcie Wynikowy możesz wyświetlić tylko usługę porównywania cen, która jest rzeczywiście stosowana do elementu.

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

Aby zobaczyć wszystkie właściwości, zaznacz pole wyboru Pokaż wszystkie.

Zobacz Informacje o CSS na karcie Wynikowy.

Wyświetlanie właściwości usługi porównywania cen 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 dziedziczonych właściwości CSS

Zaznacz pole wyboru Pokaż wszystkie na karcie Obliczone. Zobacz tylko CSS, który jest faktycznie zastosowany do elementu.

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

Wyświetlanie reguł at-rules w CSS

Reguły at są instrukcjami CSS, które umożliwiają kontrolowanie działania CSS. W sekcji Elementy > Style znajdują się te reguły at, które są podzielone na sekcje:

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

Wyświetl @property reguł at

Za pomocą atrybutu @property CSS at-rule możesz jawnie definiować właściwości niestandardowe CSS i rejestrować je w arkuszu stylów bez uruchamiania kodu JavaScript.

Aby wyświetlić nazwę takiej usługi na karcie Style, najedź kursorem na jej nazwę, aby wyświetlić w sekcji @property na dole karty Style podręczną informację z wartością, opisem i linkiem do jej rejestracji.

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

Wyświetl @supports w regułach

Karta Style zawiera reguły at-rules @supports CSS, jeśli zostały 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 wyświetlają się reguły at-rules @scope CSS, jeśli zostały zastosowane do elementu.

Nowe reguły @scope są częścią specyfikacji CSS Cascading and Inheritance Level 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 w 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 we wszystkich elementach <p> wewnątrz elementów z klasą card.

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

Wyświetl @font-palette-values reguł at

Za pomocą atrybutu CSS @font-palette-values możesz dostosować domyślne wartości właściwości font-palette. W sekcji Elementy > Style ta reguła at jest wyświetlana w dedykowanej sekcji.

W następnym podglądzie wyświetl sekcję @font-palette-values:

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 umożliwia definiowanie alternatywnych pozycji kotwicy dla elementów. Więcej informacji znajdziesz w artykule [EN] Wprowadzenie do interfejsu CSS anchor positioning API.

Elementy > Style wykrywają i łączą te elementy:

• position-try-options do dedykowanej sekcji @position-try --name.
• wartości właściwości position-anchor i argumentów anchor() do odpowiednich elementów z atrybutami popovertarget.

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

1. W podglądzie otwórz menu podrzędne, czyli kliknij TWÓJ KONTO, a potem STOREFRONT.
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 otworzy się odpowiednia sekcja @position-try.
4. Kliknij link do wartości position-anchor lub te same argumenty anchor(). Panel Elementy wybiera element z odpowiednim atrybutem popovertarget, a karta Style zawiera kod CSS elementu.

Aby edytować wartości, kliknij je dwukrotnie.

Wyświetlanie modelu pola elementu

Aby wyświetlić model pudełka elementu, otwórz kartę Style i kliknij przycisk Pokaż pasek boczny na pasku czynności.

Aby zmienić wartość, kliknij ją dwukrotnie.

Wyszukiwanie i filtrowanie kodu CSS elementu

Aby wyszukać konkretne właściwości lub wartości CSS, użyj pola Filtr na kartach Style i Obliczone.

Aby na karcie Wynikowy wyszukiwać też właściwości dziedziczone, zaznacz pole wyboru Pokaż wszystkie.

Aby poruszać się po karcie Obliczone, możesz grupować przefiltrowane właściwości w kategorie, które można rozwijać, zaznaczając pole Grupuj.

Emulowanie zaznaczonej strony

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 nim pojawi się kolejny element.
2. Otwórz Narzędzia deweloperskie. Teraz w centrum uwagi jest okno Narzędzi deweloperskich, a nie strona, więc element zniknie.
3. W sekcji Elementy > Style kliknij :hov, zaznacz pole wyboru check_box Naśladuj stronę z aktywnym polem tekstowym i upewnij się, że element do wprowadzania danych jest zaznaczony. Teraz możesz sprawdzić element znajdujący się pod nim.

Tę samą opcję znajdziesz też w panelu Renderowanie.

Więcej sposobów na zamrożenie elementu znajdziesz w artykule Zatrzymywanie ekranu i sprawdzanie znikających elementów.

Przełączanie pseudoklasy

Aby przełączyć pseudoklasę:

1. Wybierz element.
2. W panelu Elementy otwórz kartę Style.
3. Kliknij :hov.
4. Zaznacz pseudoklasę, którą chcesz włączyć.

W tym przykładzie widać, że Narzędzia deweloperskie stosują do elementu deklarację background-color, mimo że element nie jest na nim najeżdżany kursorem.

Na karcie Style dla wszystkich elementów wyświetlane są te pseudoklasy:

• :active
• :focus
• :focus-within
• :target
• :hover
• focus-visible

Dodatkowo niektóre elementy mogą mieć własne pseudoklasy. Po wybraniu takiego elementu na karcie Style pojawi się sekcja Wymuś konkretny stan elementu, którą możesz rozwinąć i włączyć pseudoklasy specyficzne dla tego elementu.

Interaktywny samouczek znajdziesz w sekcji Dodawanie pseudostanu do klasy.

Wyświetlanie odziedziczonych pseudoelementów wyróżnień

Pseudoelementy umożliwiają stylizowanie konkretnych części elementów. Podświetlone pseudoelementy to fragmenty dokumentu ze stanem „wybrany”. Są one stylizowane jako „podświetlone”, aby wskazać użytkownikowi ten stan. Przykładami takich pseudoelementów są ::selection, ::spelling-error, ::grammar-error i ::highlight.

Jak wspomniano w specyfikacji, gdy występuje konflikt między wieloma stylami, styl kaskadowy określa styl zwycięski.

Aby lepiej zrozumieć dziedziczenie i priorytety reguł, możesz wyświetlić dziedziczone 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ół do sekcji Inherited from ::selection pseudo of....

Wyświetlanie warstw kaskadowych

Warstwy kaskadowe umożliwiają bardziej wyraźną kontrolę nad plikami CSS, aby 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ć kaskadowe warstwy, przejrzyj kolejny 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 nazwę warstwy 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 media CSS kliknij print.

Wyświetlanie używanego i nieużywanego kodu CSS na karcie Zakres

Karta Zakres pokazuje, jakiego kodu CSS używa dana strona.

1. Naciśnij Command + Shift + P (Mac) lub Control + Shift + P (Windows, Linux, ChromeOS), aby otworzyć menu polecenia.

2. Zacznij pisać: coverage.

   

3. Kliknij Pokaż pokrycie. Pojawi się karta Zasięg.

   

4. Kliknij  Odśwież. Strona zostanie załadowana ponownie, a karta Pokrycie zawiera omówienie ilości kodu CSS (i JavaScript) wykorzystywanego w poszczególnych plikach wczytywanych przez przeglądarkę.

   

   Zielony kolor oznacza użyty styl CSS. Czerwony kolor oznacza nieużywany kod CSS.

5. Kliknij plik CSS, aby zobaczyć w powyższym podglądzie poszczególne wiersze kodu CSS.

   

   Na zrzucie ekranu linie 55–57 i 65–67 w elementach devsite-google-blue.css są nieużywane, a linie 59–63 są używane.

Wymuś tryb podglądu wydruku

Zobacz Wymuszanie trybu podglądu wydruku w Narzędziach dla programistów.

Kopiowanie kodu CSS

W jednym menu na karcie Styl możesz kopiować oddzielne reguły, deklaracje, właściwości i wartości CSS.

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

Aby skopiować kod 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:

   • Kopiowanie deklaracji. 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ść. Skopiuj tylko value.
   • Kopiowanie reguły. Skopiuj całą regułę CSS:css selector[, selector] { property: value; property: value; ... }
   • Skopiuj deklarację jako kod JS. Skopiuj właściwości i ich wartości w składni JavaScript:js propertyInCamelCase: 'value'
   • Skopiuj wszystkie deklaracje. Skopiuj 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 w pliku CSS. Kopiuje zmiany wprowadzone na karcie Style we wszystkich deklaracjach.

   • Wyświetlanie obliczonej wartości. 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, dlatego możesz dodawać deklaracje na różne sposoby:

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

Którego procesu używać? W większości przypadków prawdopodobnie zechcesz użyć procesu deklaracji wbudowanej. Deklaracje wbudowane mają większą specyficzność niż zewnętrzne, więc dzięki temu procesowi zmiany wchodzą w życie w elemencie zgodnie z oczekiwaniami. Więcej informacji o szczegółowości znajdziesz w sekcji Typy selektorów.

Jeśli debugujesz style elementu i chcesz sprawdzić, co się dzieje, gdy deklaracja jest zdefiniowana w różnych miejscach, użyj innego procesu.

Dodawanie deklaracji w tekście

Aby dodać deklarację w tekście:

1. Wybierz element.
2. Na karcie Style kliknij między nawiasami w sekcji element.style. Kursor zostanie aktywowany, aby można było 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. W drzewie DOM możesz zobaczyć, ż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łę stylu, do której chcesz dodać deklarację. 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 widać regułę stylu z nową deklaracją border-bottom-style:groove.

Zmienianie nazwy lub wartości deklaracji

Aby zmienić nazwę lub wartość deklaracji, kliknij ją dwukrotnie. Instrukcje szybkiego zwiększania lub zmniejszania wartości o 0, 1, 1, 10 lub 100 jednostek znajdziesz w sekcji Zmiana wartości wyliczeniowych za pomocą skrótów klawiszowych.

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 + W górę (Mac) lub Alt + W górę (Windows, Linux) – aby zwiększyć 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+W górę (Mac) lub Control+Shift+Page Up (Windows, Linux), aby zwiększyć wartość o 100.

Obniżanie też działa. Wystarczy zastąpić każde wystąpienie Up (w górę) wspomniane wcześniej przez Down (w dół).

Zmiana wartości długości

Za pomocą wskaźnika możesz zmienić dowolną właściwość z długością, taką jak szerokość, wysokość, wypełnienie, margines lub 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, a wskaźnik zmieni się w poziomą strzałkę z podwójnym ostrzem.

2. Przeciągnij 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 na 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 lub emulować preferencje użytkownika dotyczące jasnego lub ciemnego motywu:

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

2. Na liście wybierz jedną z tych opcji:

   • prefers-color-scheme: światło. Wskazuje, że użytkownik preferuje jasny motyw.
   • prefers-color-scheme: dark. Wskazuje, że użytkownik woli ciemny motyw.
   • Automatyczny tryb ciemny. wyświetla stronę w trybie ciemnym, nawet jeśli go nie wdrożyłeś; Dodatkowo automatycznie ustawia wartość 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 elementów. Zobacz Dodawanie klasy do elementu. Pod polem Dodaj nową klasę znajdują się 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 dla deweloperów wstawiają nową regułę pod regułą element.style.

Na zrzucie ekranu widać, że po kliknięciu Nowa reguła stylu DevTools 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, do którego chcesz 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ę. Obok każdej deklaracji widoczne są pola wyboru.
3. Zaznacz lub odznacz pole wyboru obok deklaracji. Gdy usuniesz deklarację, Narzędzia deweloperskie przekreślą ją, aby wskazać, że nie jest już aktywna.

Na zrzucie ekranu widać, że właściwość color dla wybranego elementu jest wyłączona.

Edytowanie pseudoelementów ::view-transition podczas animacji

Zobacz odpowiednią sekcję w artykule Animacje.

Więcej informacji znajdziesz w artykule Płynne i proste przejścia za pomocą interfejsu View Transitions API.

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

Zobacz odpowiednią sekcję w siatce Inspect CSS.

Zmienianie kolorów za pomocą selektora kolorów

Zobacz, jak sprawdzać i debugować kolory HD i nie HD za pomocą Selektora kolorów.

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

Zegar kątowy udostępnia interfejs graficzny do zmiany wartości właściwości CSS.<angle>

Aby otworzyć zegarek w aplikacji Angle:

1. Wybierz element z deklaracją kąta.

2. Na karcie Style odszukaj 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 okrąg Kąt zegara, lub przewiń mysz, aby zwiększyć lub zmniejszyć 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 sekcji Skróty klawiszowe w panelu Style.

Zmienianie cieni pól i tekstu 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. Wybierz na przykład ten element.

2. Na karcie Style odszukaj 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 w przypadku box-shadow). Wybierz Outset (Wyjście) lub Inset (Wstaw).
   • Przesunięcia X i Y. Przeciągnij niebieski punkt lub podaj wartości.
   • Rozmycie. Przeciągnij suwak lub podaj wartość.
   • Spread (tylko w przypadku box-shadow). Przeciągnij suwak lub podaj wartość.

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

Edytowanie ustawień czasu animacji i przejść za pomocą Edytora wygładzania

Edytor łagodnego przejścia udostępnia interfejs graficzny 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 odszukaj fioletową ikonę  obok deklaracji transition-timing-function, animation-timing-function lub właściwości transition.
3. Kliknij ikonę, aby otworzyć Edytor łagodnego przejścia:

Dostosowywanie ustawień domyślnych do czasu trwania

Aby dostosować czasy jednym kliknięciem, użyj gotowych ustawień w Edytorze wygładzania:

1. Aby w Edytorze wykładniczych ustawić wartość słowa kluczowego, kliknij jeden z przycisków selektora:
   • liniowy
   • Wolno-normalnie-wolno
   • ease-in
   • ease-out

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

   • Wstępnie ustawione wartości linearne: elastic, bounce lub emphasized.
   • Predefiniowane krzywe Beziera trzeciego stopnia:

Słowo kluczowe określające czas	Gotowe ustawienia	Sześcienny Bezier
wolno-normalnie-wolno	Wdech, sinus	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	In Out, Quadratic	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	Odlot, sześcienna	cubic-bezier(0.65, 0.05, 0.36, 1)
	Szybkie wyjście, powolne wejście	cubic-bezier(0.4, 0, 0.2, 1)
	Wdech, z powrotem	cubic-bezier(0.68, -0.55, 0.27, 1.55)
wolno-normalnie	In, Sine	cubic-bezier(0.47, 0, 0.75, 0.72)
	In, Quadratic	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	In, Cubic	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)
	Szybkie wyjście, linia wejścia	cubic-bezier(0.4, 0, 1, 1)
normalnie-wolno	Out, Sine	cubic-bezier(0.39, 0.58, 0.57, 1)
	Wyjście, kwadratowe	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Wysunięte, sześcienne	cubic-bezier(0.22, 0.61, 0.36, 1)
	Wyjście liniowe, wejście powolne	cubic-bezier(0, 0, 0.2, 1)
	Out, Back	cubic-bezier(0.18, 0.89, 0.32, 1.28)

Konfigurowanie niestandardowych ustawień czasu

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

• W przypadku funkcji liniowych kliknij dowolne miejsce na linii, aby dodać punkt kontrolny, a następnie przeciągnij go. Kliknij dwukrotnie, aby usunąć punkt.

  

• W przypadku funkcji sześciennej Béziera przeciągnij jeden z punktów kontrolnych.

  

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

(Eksperymentalnie) Kopiowanie zmian w pliku CSS

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

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

Aby skopiować wszystkie zmiany CSS w deklaracjach naraz, kliknij prawym przyciskiem myszy dowolną deklarację i kliknij Skopiuj wszystkie zmiany CSS.

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