Informacje o funkcjach CSS

Odkryj nowe przepływy pracy w tym obszernym przewodniku po funkcjach Narzędzi deweloperskich w Chrome związanych z wyświetlaniem i modyfikowaniem CSS.

Podstawowe informacje znajdziesz w artykule Wyświetlanie i zmienianie usługi porównywania cen.

Wybierz element

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

Na zrzucie ekranu element h1 wyróżniony na niebiesko w drzewie DOM jest wybranym elementem. Po prawej stronie style elementu są widoczne na karcie Style. Po lewej stronie element jest podświetlony w obszarze wyświetlania, 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 widoku 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 obszarze wyświetlania.
• W narzędziach deweloperskich kliknij element w drzewie DOM.
• W Narzędziach deweloperskich uruchom zapytanie, np. document.querySelector('p'), w konsoli, kliknij prawym przyciskiem myszy wynik, a następnie wybierz Pokaż w panelu Elementy.

Wyświetlanie CSS

Użyj kart Elementy > Style i Obliczone, aby wyświetlić reguły CSS i zdiagnozować problemy z CSS.

Poruszanie się za pomocą linków

Na karcie Style wyświetlają się linki w różnych miejscach do różnych innych miejsc, w tym:

• 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ł Uczyń zminimalizowany plik czytelnym.
• W sekcjach Odziedziczone z ... do elementów nadrzędnych.
• W wywołaniach var() do deklaracji właściwości niestandardowej.
• W animationwłaściwościach skróconych@keyframes.
• Linki Więcej informacji w etykietkach narzędzi w dokumentacji.
• Więcej informacji

Oto niektóre z nich:

Link może mieć inny styl. 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: po najechaniu kursorem na poszczególne elementy wyświetlają się etykietki z przydatnymi informacjami.

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 pole  Nie pokazuj.

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

Wyświetlanie specyficzności selektora

Najedź kursorem na selektor, aby wyświetlić etykietkę z jego wagą specyficzności.

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

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

Wyświetlanie nieprawidłowych, zastąpionych, nieaktywnych i innych reguł CSS

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

Zobacz Informacje o CSS na karcie Style.

Wyświetlanie tylko CSS, który jest faktycznie stosowany 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. Otwórz kartę Obliczone w panelu Elementy.

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 CSS w kolejności alfabetycznej

Użyj karty Obliczone. Zobacz Wyświetlanie tylko tych stylów CSS, które są rzeczywiście stosowane do elementu.

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

Na karcie Obliczone zaznacz pole wyboru Pokaż wszystkie. Zobacz Wyświetlanie tylko tych stylów CSS, które są faktycznie stosowane do elementu.

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

Wyświetlanie reguł @ CSS

Reguły @ to instrukcje CSS, które umożliwiają kontrolowanie działania CSS. Elementy > Style wyświetla te reguły w odpowiednich sekcjach:

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

Wyświetlanie reguł @property

@property reguł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

Karta Style wyświetla reguły @supports CSS at-rules, jeśli są one zastosowane do elementu. Sprawdź na przykład ten element:

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

Wyświetlanie reguł @scope

Karta Style pokazuje reguły CSS @scope, 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 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 dla wszystkich elementów <p> w elementach z klasą card.

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

Wyświetlanie reguł @font-palette-values

@font-palette-valuesReguła @ w CSS umożliwia dostosowywanie 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

@position-try reguła CSS wraz z właściwością position-try-options umożliwia zdefiniowanie alternatywnych pozycji elementu zakotwiczonego. Więcej informacji znajdziesz w artykule Introducing the CSS anchor positioning API (Wprowadzenie do interfejsu CSS API do pozycjonowania elementów zakotwiczonych).

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

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

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

1. W podglądzie otwórz podmenu, czyli kliknij kolejno TWOJE KONTO i SKLEP.
2. Sprawdź element za pomocą 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

W polu Filtr na kartach Style i Obliczone możesz wyszukiwać konkretne właściwości lub wartości CSS.

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

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

Emulowanie zaznaczonej strony

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

Wypróbuj emulowanie zaznaczonej strony na tej stronie demonstracyjnej:

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

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

Więcej sposobów na zamrożenie elementu 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ą deklarację background-color do elementu, mimo że w rzeczywistości nie jest on najechany.

Na karcie Style wyświetlają się te pseudoklasy wszystkich elementów:

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

Niektóre elementy mogą też 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 danego elementu.

Interaktywny samouczek znajdziesz w artykule Dodawanie stanu pozornego do zajęć.

Wyświetlanie dziedziczonych pseudoelementów wyróżnienia

Pseudoelementy umożliwiają stylizowanie określonych części elementów. Podświetlone pseudoelementy to części dokumentu o stanie „wybrany”, które są stylizowane jako „podświetlone”, aby wskazać ten stan użytkownikowi. Przykładami takich pseudoelementów są ::selection, ::spelling-error, ::grammar-error i ::highlight.

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

Aby lepiej zrozumieć dziedziczenie i priorytet reguł, możesz wyświetlić odziedziczone pseudoelementy podświetlenia:

1. Sprawdź tekst poniżej.

   Przejęłam 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 precyzyjną kontrolę nad plikami CSS, co pozwala uniknąć konfliktów związanych 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 wydruku

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 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ż pokrycie. Wyświetli się karta Zasięg.

   

4. Kliknij  Odśwież. Strona zostanie ponownie załadowana, a na karcie Pokrycie znajdziesz przegląd ilości używanego kodu CSS (i JavaScriptu) z każdego pliku wczytanego przez przeglądarkę.

   

   Kolor zielony oznacza używany kod CSS. Kolor czerwony oznacza nieużywany kod CSS.

5. Kliknij plik CSS, aby wyświetlić w podglądzie powyżej szczegółowe zestawienie tego, jakich elementów CSS używa.

   

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

Wymuszanie trybu 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 JavaScript. Ta opcja jest przydatna, jeśli używasz bibliotek CSS-in-JS.

Aby skopiować CSS:

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

3. W menu wybierz jedną z tych opcji:

   • Skopiuj 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 JavaScriptu:```jspropertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

   • Skopiuj wszystkie zmiany CSS. Kopiuje zmiany wprowadzone na karcie Style do wszystkich deklaracji.

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

Zmiana kodu CSS

W tej sekcji znajdziesz wszystkie sposoby zmiany CSS w panelu Elementy > Style.

Dodatkowo możesz:

• Zastępowanie CSS przy wczytywaniu stron
• Zapisz zmodyfikowany plik CSS w lokalnych źródłach w obszarze roboczym.

Zmienianie CSS za pomocą uzupełniania kodu

Aby eksperymentować z bardziej 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 flexbox, korzystając z wielu powiązanych właściwości, możesz zacząć wpisywać właściwość CSS i użyć funkcji uzupełniania kodu.

Dodawanie deklaracji CSS do elementu

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

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

Jakiego przepływu pracy użyć? W większości przypadków warto używać przepływu pracy z deklaracją wbudowaną. Deklaracje wbudowane mają wyższą specyficzność niż deklaracje zewnętrzne, więc przepływ pracy wbudowany zapewnia, że zmiany zostaną zastosowane w elemencie zgodnie z oczekiwaniami. Więcej informacji o specyficzności znajdziesz w sekcji Typy selektorów.

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

Dodawanie deklaracji w wierszu

Aby dodać deklarację w tekście:

1. Wybierz element.
2. Na karcie Style kliknij między nawiasami w sekcji element.style. Kursor zostaje zaznaczony, co umożliwia wpisywanie tekstu.
3. Wpisz nazwę usługi 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 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ę usługi 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

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

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

Podczas edytowania wartości wyliczeniowej 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), aby zwiększyć wartość 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+strzałka w górę (Mac) lub Control+Shift+Page Up (Windows, Linux), aby zwiększyć wartość o 100.

Działa też dekrementacja. Wystarczy, że zastąpisz każde wystąpienie słowa W górę słowem W dół.

Zmiana wartości długości

Za pomocą wskaźnika możesz zmieniać dowolną właściwość o określonej 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. Zauważ, że wskaźnik zmieni się w poziomą dwustronną strzałkę.

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

Aby dostosować 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. W polu Dodaj nowe zajęcia wpisz nazwę zajęć.
4. Naciśnij Enter.

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

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

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

2. Z listy wybierz jedną z tych opcji:

   • prefers-color-scheme: light. Wskazuje, że użytkownik woli 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ę multimedialną CSSprefers-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. Pod polem Dodaj nową klasę znajdują się wszystkie klasy, które są stosowane do tego elementu.
3. Zaznacz pole wyboru obok klasy, którą 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 Narzędzia deweloperskie dodają regułę stylu h1.devsite-page-title po kliknięciu Nowa reguła stylu.

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łę.

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

Na zrzucie ekranu właściwość color wybranego elementu jest wyłączona.

Edytowanie pseudoelementów ::view-transition podczas animacji

Więcej informacji znajdziesz w odpowiedniej sekcji 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

Zapoznaj się z odpowiednią sekcją w artykule Sprawdzanie siatki CSS.

Zmiana 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

Angle Clock to interfejs GUI, który umożliwia zmianę jednostek <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 -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 zegara kątowego lub przewijając 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 sekcji 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. 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 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 wpisz wartość.
   • Rozpiętość (tylko w przypadku box-shadow). Przeciągnij suwak lub wpisz wartość.

5. Obserwuj zmiany zastosowane do elementu.

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

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

Aby otworzyć edytor funkcji przejścia:

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

Dostosowywanie czasu za pomocą gotowych ustawień

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

1. W edytorze funkcji wygładzania, aby ustawić wartość słowa kluczowego, 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 liniowe: 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)
	Wygaszanie i narastanie 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)
	In Out, Back	cubic-bezier(0.68, -0.55, 0.27, 1.55)
wolno-normalnie	In, Sine	cubic-bezier(0.47, 0, 0.75, 0.72)
	Kwadratowe	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	In, Cubic	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	Wstecz	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	Out, Sine	cubic-bezier(0.39, 0.58, 0.57, 1)
	Wygaszanie kwadratowe	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Out, Cubic	cubic-bezier(0.22, 0.61, 0.36, 1)
	Liniowe wyjście, powolne wejście	cubic-bezier(0, 0, 0.2, 1)
	Na zewnątrz, z powrotem	cubic-bezier(0.18, 0.89, 0.32, 1.28)

Konfigurowanie niestandardowych czasów

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, a następnie 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 animację piłki w sekcji Podgląd u góry edytora.

(Eksperymentalnie) Kopiowanie zmian CSS

Gdy ten eksperyment jest włączony, karta Style wyróżnia na zielono zmiany w CSS.

Aby skopiować pojedynczą zmianę 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 wybierz Skopiuj wszystkie zmiany CSS.

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