Informacje o funkcjach CSS

Odkryj nowe przepływy pracy w tym kompleksowym opisie funkcji Narzędzi deweloperskich w Chrome związanych z wyświetlaniem i modyfikowaniem kodu CSS.

Podstawowe informacje znajdziesz w artykule Wyświetlanie i zmienianie kodu CSS.

Wybierz element

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

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

Samouczek znajdziesz w artykule Wyświetlanie kodu CSS elementu.

Element można wybrać na wiele 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) albo Control+Shift+C (Windows, Linux), a następnie kliknij element w widocznym obszarze.
• W Narzędziach deweloperskich kliknij element w drzewie DOM.
• W Narzędziach deweloperskich uruchom zapytanie takie jak document.querySelector('p') w Konsoli, kliknij wynik prawym przyciskiem myszy i wybierz Pokaż w panelu Elementy.

Wyświetl usługę porównywania cen

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

Poruszanie się po danych za pomocą linków

Na karcie Style wyświetlają się linki w różnych miejscach do różnych innych miejsc, w tym 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 zminimalizowany, przeczytaj artykuł Ułatwianie odczytu zminimalizowanego pliku.
• W sekcjach Odziedziczone z … do elementów nadrzędnych.
• W wywołaniach var() do deklaracji właściwości niestandardowej.
• W skróconych właściwościach animation na @keyframes.
• Linki Więcej informacji w etykietkach narzędzi w dokumentacji.
• Więcej informacji

Oto niektóre z nich:

Linki mogą być stylizowane inaczej. Jeśli nie masz pewności, czy coś jest linkiem, kliknij to, aby się przekonać.

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

Elementy > Style wyświetla etykietki z przydatnymi informacjami, gdy najedziesz kursorem na określone elementy.

Wyświetlanie dokumentacji CSS

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

Kliknij Więcej informacji, aby przejść do dokumentacji MDN CSS dotyczącej tej właściwości.

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

Aby ponownie je włączyć, kliknij  Ustawienia > Preferencje > Elementy >  Pokaż etykietkę z dokumentacją CSS.

Wyświetlanie specyficzności selektora

Najedź kursorem na selektor na karcie Style, w tym na selektory nadrzędne w zagnieżdżonych regułach CSS, odziedziczone reguły zagnieżdżone i reguły @nested-declarations, aby wyświetlić etykietkę z wagą specyficzności i wyróżnić pasujące elementy w widocznym obszarze.

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

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

Wyświetlanie nieprawidłowych, zastąpionych, nieaktywnych i innych stylów CSS

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

Więcej informacji znajdziesz w artykule Omówienie CSS na karcie Style.

Wyświetlanie tylko tych stylów CSS, które są faktycznie stosowane do elementu

Karta Style zawiera wszystkie reguły, które mają zastosowanie do 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 CSS, który jest faktycznie stosowany 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 Obliczone.

Wyświetlanie właściwości CSS w porządku alfabetycznym

Użyj karty Obliczone. Zobacz Wyświetlanie tylko kodu CSS, który jest faktycznie stosowany do elementu.

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

Na karcie Obliczone zaznacz pole wyboru Pokaż wszystko. Zobacz Wyświetlanie tylko kodu CSS, który jest faktycznie stosowany do elementu.

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

Wyświetlanie reguł at-rule CSS

Reguły at to instrukcje CSS, które umożliwiają kontrolowanie zachowania CSS. Elementy > Style wyświetla w osobnych sekcjach te reguły:

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

Wyświetlanie reguł @@property

@propertyReguła @ w CSS umożliwia jawne zdefiniowanie niestandardowych właściwości CSS i zarejestrowanie ich w arkuszu stylów bez uruchamiania kodu JavaScript.

Najedź kursorem na nazwę takiej właściwości na karcie Style, aby wyświetlić etykietkę z wartością właściwości, deskryptorami i linkiem do jej rejestracji w rozwijanej sekcji @property u dołu karty Style.

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

Wyświetlanie reguł @@supports

Na karcie Style zobaczysz reguły at-rule @supports CSS, jeśli są one stosowane do elementu. Sprawdź na przykład ten element:

Jeśli Twoja przeglądarka obsługuje funkcję lab(), element jest zielony, a jeśli nie – fioletowy.

Wyświetlanie reguł @scope

Karta Style pokazuje reguły @scope@ w CSS, jeśli są one 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, czyli wyraźne stosowanie stylów do określonych 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 dla wszystkich elementów <p> wewnątrz elementów z klasą card.

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

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

Reguła at-rule CSS @font-palette-values umożliwia dostosowanie domyślnych wartości właściwości font-palette. Elementy > Style wyświetla tę regułę @ w osobnej sekcji.

Wyświetl sekcję @font-palette-values w następnym podglądzie:

1. Sprawdź drugą linię tekstu w 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świetlanie reguł @position-try

Reguła CSS @position-try wraz z właściwością position-try-options umożliwia zdefiniowanie alternatywnych pozycji kotwicy dla elementów. Więcej informacji znajdziesz w artykule Przedstawiamy interfejs API pozycjonowania kotwicy CSS.

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

• wartości usługi position-try-options w osobnej sekcji @position-try --name.
• Wartości właściwości position-anchor i argumenty anchor() do odpowiednich elementów z atrybutami popovertarget.

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

1. W podglądzie otwórz podmenu, czyli kliknij kolejno TWOJE KONTO i STRONA SKLEPU.
2. Zbadaj element z identyfikatorem id="submenu" w podglądzie.
3. W sekcji Style znajdź właściwość position-try-options i kliknij jej wartość --bottom. Karta Style przeniesie Cię do odpowiedniej sekcji @position-try.
4. Kliknij link do wartości position-anchor lub te same argumenty anchor(). W panelu Elementy wybierany jest element z odpowiednim atrybutem popovertarget, a na karcie Style wyświetlany jest kod CSS elementu.

Aby edytować wartości, kliknij je dwukrotnie.

Wyświetlanie modelu pudełkowego elementu

Aby wyświetlić model pudełkowy elementu, otwórz kartę Style i na pasku działań kliknij przycisk Pokaż pasek boczny.

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

Wyszukiwanie i filtrowanie kodu CSS elementu

Użyj pola Filtr na kartach Style i Obliczone, aby wyszukać konkretne selektory CSS (w tym selektory nadrzędne w regułach zagnieżdżonych), właściwości lub wartości.

Aby wyszukiwać też odziedziczone właściwości na karcie Obliczone, zaznacz pole wyboru Pokaż wszystko.

Aby poruszać się po karcie Obliczone, pogrupuj przefiltrowane właściwości w rozwijane kategorie, zaznaczając opcję Grupuj.

Emuluj zaznaczoną stronę

Jeśli przełączysz fokus ze strony na Narzędzia deweloperskie, niektóre elementy nakładki, które są wywoływane przez fokus, zostaną automatycznie ukryte. Na przykład listy rozwijane, menu lub selektory daty. Opcja check_box Emuluj zaznaczoną stronę umożliwia debugowanie elementu tak, jakby był zaznaczony.

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

1. Zaznacz element wejściowy. Pod nim pojawia się kolejny element.
2. Otwórz Narzędzia deweloperskie. Okno narzędzi dla deweloperów jest teraz aktywne zamiast strony, więc element ponownie znika.
3. W sekcji Elementy > Style kliknij :hov, zaznacz pole wyboru check_box Emuluj stronę z fokusem i upewnij się, że element wejściowy jest zaznaczony. Teraz możesz sprawdzić element pod nim.

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

Więcej sposobów na zamrażanie elementów znajdziesz w artykule Zamrażanie 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 faktycznie najechany kursorem.

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

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

Dodatkowo niektóre elementy mogą mieć własne pseudoklasy. Gdy wybierzesz taki element, 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 artykule Dodawanie do zajęć stanu pozornego.

Wyświetlanie odziedziczonych pseudoelementów wyróżnienia

Pseudoelementy umożliwiają stylizowanie określonych części elementów. Pseudoelementy wyróżnienia to fragmenty dokumentu ze stanem „wybrane”, które są stylizowane na „wyróżnione”, aby wskazać ten stan użytkownikowi. Takimi pseudoelementami są na przykład ::selection, ::spelling-error, ::grammar-error i ::highlight.

Jak wspomnieliśmy w specyfikacji, gdy wiele stylów jest ze sobą sprzecznych, kaskadowość określa, który styl zostanie zastosowany.

Aby lepiej zrozumieć dziedziczenie i priorytet reguł, możesz wyświetlić odziedziczone pseudoelementy wyróżnienia:

1. Sprawdź tekst poniżej.

   Przejęłam styl pseudoelementu zaznaczenia 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 precyzyjną kontrolę nad plikami CSS, aby zapobiegać konfliktom związanym ze specyficznością stylów. 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, zbadaj następny element i otwórz Elementy > Style.

Na karcie Style zobaczysz 3 warstwy kaskadowe i ich style: page, component i base.

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

Warstwa page ma najwyższą specyficzność, 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 wpisywać Rendering i wybierz Show Rendering.
3. W menu Emuluj media CSS wybierz print.

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

Karta Pokrycie pokazuje, jakich arkuszy CSS strona faktycznie używa.

1. Naciśnij Command+Shift+P (Mac) lub Control+Shift+P (Windows, Linux, ChromeOS), gdy narzędzia deweloperskie są aktywne, aby otworzyć menu poleceń.

2. Zacznij pisać coverage.

   

3. Kliknij Pokaż zasięg. Wyświetli się karta Pokrycie.

   

4. Kliknij  Odśwież. Strona zostanie ponownie załadowana, a na karcie Pokrycie pojawi się przegląd informacji o tym, ile kodu CSS (i JavaScriptu) jest używane z każdego pliku wczytywanego przez przeglądarkę.

   

   Kolor zielony oznacza używany kod CSS. Czerwony kolor oznacza nieużywany kod CSS.

5. Kliknij plik CSS, aby zobaczyć w podglądzie powyżej szczegółowe informacje o tym, jakich arkuszy CSS używa.

   

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

Wymuszaj tryb podglądu wydruku

Zobacz Wymuszanie trybu podglądu wydruku w Narzędziach deweloperskich.

Kopiowanie kodu CSS

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

Możesz też kopiować właściwości CSS w składni JavaScriptu. 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 jedną z tych opcji w menu:

   • Kopiuj deklarację. Kopiuje właściwość i jej wartość w składni CSS:css property: value;
   • Skopiuj usługę. Kopiuje tylko nazwę property.
   • Kopiuj wartość. Kopiuje tylko value.
   • Skopiuj 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 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 do wszystkich deklaracji.

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

Zmień CSS

W tej sekcji znajdziesz wszystkie sposoby zmiany CSS w Elementach > Stylach.

Możesz też:

• Zastępowanie kodu CSS podczas wczytywania strony.
• Zapisywanie zmodyfikowanego kodu CSS w źródłach lokalnych w obszarze roboczym

Zmienianie CSS za pomocą uzupełniania kodu

Aby eksperymentować ze złożonymi kombinacjami właściwości CSS, takimi jak gradienty czy cienie pól, bez konieczności zapamiętywania ich dokładnej składni lub aby szybko tworzyć układy siatki i elastyczne, korzystając z wielu powiązanych właściwości, możesz zacząć wpisywać właściwość CSS i użyć funkcji autouzupełniania kodu.

Dodawanie deklaracji CSS do elementu

Kolejność deklaracji wpływa na styl elementu, dlatego możesz dodawać deklaracje na różne sposoby:

• Dodaj deklarację w tekście. Odpowiada to dodaniu atrybutu style do kodu HTML elementu.
• Dodawanie deklaracji do reguły stylu

Którego przepływu pracy użyć? W większości przypadków najlepiej jest użyć procesu deklaracji wbudowanej. Deklaracje wbudowane mają wyższą specyficzność niż zewnętrzne, więc przepływ pracy wbudowanej zapewnia, że zmiany zostaną wprowadzone 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 przetestować, co się stanie, gdy deklaracja zostanie zdefiniowana w różnych miejscach, użyj innego przepływu pracy.

Dodaj deklarację w tekście

Aby dodać deklarację wbudowaną:

1. Wybierz element.
2. Na karcie Style kliknij między nawiasami w sekcji element.style. Kursor zostanie zaznaczony, co umożliwi wpisanie 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 zobaczysz, ż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 możesz zobaczyć deklaracje 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 między nawiasami reguły stylu, do której chcesz dodać deklarację. Kursor zostanie zaznaczony, co umożliwi wpisanie 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.

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

Zmienianie nazwy lub wartości deklaracji

Kliknij dwukrotnie nazwę lub wartość deklaracji, aby ją zmienić. Skróty umożliwiające szybkie zwiększanie lub zmniejszanie wartości o 0, 1, 1, 10 lub 100 jednostek znajdziesz w sekcji Zmienianie wartości wyliczeniowych za pomocą skrótów klawiszowych.

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

Podczas edytowania wartości wyliczeniowej deklaracji, np. font-size, możesz używać tych skrótów klawiszowych, aby zwiększać wartość o stałą wielkość:

• Option+Up (Mac) lub Alt+Up (Windows, Linux), aby zwiększyć o 0,1.
• Zwiększ 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ć wartość o 10.
• Shift+Command+Up (Mac) lub Control+Shift+Page Up (Windows, Linux), aby zwiększyć wartość o 100.

Możesz też zmniejszać wartości. Wystarczy zastąpić każde wystąpienie Up (w górę) wspomniane wcześniej słowem Down (w dół).

Zmiana wartości długości

Za pomocą wskaźnika możesz zmienić dowolną właściwość z długością, np. szerokość, wysokość, dopeł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ć ją z menu.

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

1. Najedź kursorem na wartość jednostki i zwróć uwagę, że wskaźnik zmieni się w poziomą strzałkę z dwoma grotami.

2. Przeciągnij poziomo, aby zwiększyć lub zmniejszyć wartość.

Aby zmienić wartość o 10, podczas przeciągania przytrzymaj klawisz 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.

Emulowanie preferencji dotyczących jasnego i ciemnego motywu oraz włączanie automatycznego trybu ciemnego

Aby przełączać 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. Wybierz z listy jedną z tych opcji:

   • prefers-color-scheme: light. Wskazuje, że użytkownik preferuje jasny motyw.
   • prefers-color-scheme: dark. Wskazuje, że użytkownik preferuje ciemny motyw.
   • Automatyczny tryb ciemny. Wyświetla stronę w trybie ciemnym, nawet jeśli nie został on wdrożony. Dodatkowo automatycznie ustawia wartość prefers-color-scheme na dark.

To menu to skrót do opcji Emuluj funkcję mediów CSS prefers-color-scheme i Włącz automatyczny tryb ciemny na karcie Renderowanie.

Przełączanie zajęć

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. Poniżej pola Dodaj nową klasę znajdują się wszystkie klasy zastosowane do tego elementu.
3. Zaznacz pole wyboru obok zajęć, które chcesz włączyć lub wyłączyć.

Dodawanie reguły stylu

Aby dodać nową regułę stylu:

1. Wybierz element.
2. Kliknij Nowa reguła stylu . Narzędzia deweloperskie wstawią nową regułę pod regułą element.style.

Na zrzucie ekranu widać, że 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łę.

Podczas dodawania nowej reguły stylu kliknij i przytrzymaj Nowa reguła stylu , aby wybrać arkusz, do którego chcesz dodać regułę.

Przełączanie deklaracji

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 pojawią się pola wyboru.
3. Zaznacz lub odznacz pole wyboru obok deklaracji. Gdy wyczyścisz deklarację, Narzędzia deweloperskie przekreślą ją, aby wskazać, że nie jest już aktywna.

Na zrzucie ekranu właściwość color dla aktualnie 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 dzięki interfejsowi View Transitions API.

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

Zobacz odpowiednią sekcję w artykule Sprawdzanie siatki CSS.

Zmienianie kolorów za pomocą selektora kolorów

Zobacz 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 udostępnia interfejs graficzny do zmiany wartości <angle> we właściwościach 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 -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 Zegar kąta, lub przewiń myszą, aby zwiększyć lub zmniejszyć wartość kąta o 1.

5. Dostępnych jest więcej skrótów klawiszowych do zmiany wartości kąta. Więcej informacji znajdziesz w artykule Skróty klawiszowe w panelu Style.

Zmienianie cieni pól i tekstu za pomocą edytora cieni

Edytor cieni udostępnia interfejs GUI do zmiany deklaracji CSS text-shadow i box-shadow.

Aby zmienić cienie za pomocą Edytora cieni:

1. Wybierz element z deklaracją cienia. Możesz na przykład wybrać 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 w przypadku box-shadow). Wybierz Outset lub Inset.
   • 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 wpisz wartość.

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

Edytowanie czasu animacji i przejść za pomocą edytora wygładzania

Edytor wygładzania udostępnia interfejs graficzny do zmiany wartości transition-timing-function i animation-timing-function.

Aby otworzyć edytor funkcji przejścia:

1. Wybierz element z deklaracją funkcji czasu, np. element <body> na tej stronie.
2. Na karcie Style znajdź fioletową ikonę  obok deklaracji transition-timing-function, animation-timing-function lub właściwości skróconej transition.
3. Kliknij ikonę, aby otworzyć edytor wygładzania:

Dostosowywanie czasu za pomocą gotowych ustawień

Aby dostosować czas trwania kliknięciem, użyj gotowych ustawień w edytorze krzywych:

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ć jedno z tych gotowych ustawień:

   • Gotowe ustawienia linearne: elastic, bounce lub emphasized.
   • Gotowe ustawienia krzywej Beziera trzeciego stopnia:

Słowo kluczowe dotyczące czasu	Gotowe ustawienia	Krzywa Beziera trzeciego stopnia
wolno-normalnie-wolno	In Out, Sine	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	Narastanie i wygaszanie, kwadratowe	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	Narastanie i wygaszanie, sześcienne	cubic-bezier(0.65, 0.05, 0.36, 1)
	Szybkie wyjście, powolne wejście	cubic-bezier(0.4, 0, 0.2, 1)
	W górę i w dół, do tyłu	cubic-bezier(0.68, -0.55, 0.27, 1.55)
wolno-normalnie	In, Sine	cubic-bezier(0.47, 0, 0.75, 0.72)
	Narastanie, kwadratowe	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	In, Cubic	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	Wewnątrz, tył	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	Szybkie wyjście, liniowe wejście	cubic-bezier(0.4, 0, 1, 1)
normalnie-wolno	Zanikanie, sinus	cubic-bezier(0.39, 0.58, 0.57, 1)
	Wygaszanie, kwadratowe	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Wygaszanie, sześcienne	cubic-bezier(0.22, 0.61, 0.36, 1)
	Liniowe wyjście, powolne wejście	cubic-bezier(0, 0, 0.2, 1)
	Do końca i z powrotem	cubic-bezier(0.18, 0.89, 0.32, 1.28)

Konfigurowanie niestandardowych ustawień czasu

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

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

  

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

  

Każda zmiana powoduje uruchomienie animacji piłki w podglądzie u góry edytora.

(Eksperymentalne) Kopiowanie zmian CSS

Po włączeniu tego eksperymentu na karcie Style zmiany w kodzie CSS są wyróżnione na zielono.

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

Aby skopiować wszystkie zmiany CSS we wszystkich deklaracjach naraz, kliknij prawym przyciskiem dowolną deklarację i wybierz Skopiuj wszystkie zmiany CSS.

Możesz też śledzić zmiany, które wprowadzasz, na karcie Zmiany.