Informacje o funkcjach CSS

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

Poznaj nowe metody pracy dzięki temu obszernemu przewodnikowi po funkcjach Chrome DevTools związanych z wyświetlaniem i modyfikowaniem kodu CSS.

Aby poznać podstawy, przeczytaj artykuł Wyświetlanie i zmienianie kodu CSS.

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 wiele sposobów:

• W widoku kliknij prawym przyciskiem myszy element i wybierz Zbadaj.
• W DevTools kliknij Wybierz element lub naciśnij Command + Shift + C (Mac) lub Control + Shift + C (Windows, Linux), a następnie kliknij element w widoku.
• W narzędziach dla deweloperów kliknij element w drzewie DOM.
• W Narzędziach deweloperskich uruchom zapytanie takie jak 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.

Poruszanie się za pomocą linków

Na karcie Style znajdują się linki do różnych miejsc, m.in. do:

• obok reguł CSS, arkuszy stylów i źródeł CSS. Takie linki otwierają panel Źródła. Jeśli arkusz stylów jest zoptymalizowany, przeczytaj artykuł Umożliwienie odczytu zoptymalizowanego pliku.
• W sekcji Odziedziczone z … do elementów nadrzędnych.
• W wywołaniach var() do deklaracji usługi niestandardowej.
• W przypadku właściwości animation w skrótach to @keyframes.
• Dowiedz się więcej – linki 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 wyświetla etykiety z przydatnymi informacjami, gdy najedziesz kursorem na określone elementy.

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.

Uwaga: Narzędzia deweloperskie pobierają opisy etykiet z danych niestandardowych VS Code.

Kliknij Więcej informacji, aby przejść do dokumentacji CSS MND dotyczącej tej usługi.

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 wagą specyficzności.

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

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

Wyświetlanie nieprawidłowego, zastąpionego, nieaktywnego i innego kodu CSS

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

Zapoznaj się z artykułem Zrozumieć CSS na karcie Style.

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

Na karcie Style widać 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 kod 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 Wynikowy.

Wyświetlanie właściwości usługi porównywania cen w kolejności alfabetycznej

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

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

Zaznacz pole wyboru Pokaż wszystkie na karcie Obliczenia. 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 mają dedykowane sekcje:

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

Wyświetl @property reguł at

Za pomocą atrybutu @property w regułach CSS 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 zobaczyć w sekcji @property na dole karty Style podręczną informację z wartością i opisem usługi oraz link do jej rejestracji.

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

Wyświetl @supports reguł at

Na karcie Style wyświetlają się reguły at @supports w CSS, jeśli zostały 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.

Uwaga: w momencie pisania tego artykułu tylko Safari obsługuje przestrzeń barw CIELAB.

Wyświetl @scope reguł at

Na karcie Style wyświetlają się reguły at-rules CSS @scope, jeśli zostały zastosowane do elementu.

Nowe reguły @scope są częścią specyfikacji CSS z poziomu 6 dotyczącą kaskadowania i dziedziczenia. Te reguły umożliwiają określenie zakresu stylów CSS, czyli wyraźne zastosowanie stylów do konkretnych elementów.

Uwaga: funkcja @scope at-rule jest funkcją eksperymentalną. Aby przetestować tę funkcję, włącz flagę Eksperymentalne funkcje platformy internetowej w chrome://flags/#enable-experimental-web-platform-features. W przeciwnym razie następny podgląd nie zadziała.

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 jest wyświetlana w dedykowanej sekcji.

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

1. W podglądzie sprawdź drugą linię tekstu.
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 reguł at

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 rozwiązuje i łączy te elementy:

• wartości właściwości position-try-options do specjalnej 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 sekcje @position-try w następnym podglądzie:

Demonstracja korzystania z ankiety popover

1. W podglądzie otwórz menu podrzędne, czyli kliknij kolejno TWÓJ KONTO i STOREFRONT.
2. Sprawdź element z 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 pudełka 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

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

Uwaga: gdy ta opcja jest włączona, parametr document.visibilityState ma wartość visible, a zdarzenie visibilitychange nie jest wywoływane. Więcej informacji znajdziesz w artykule Interfejs Page Visibility API.

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

1. Wyróżnij element wejściowy. Pod nim pojawi się kolejny element.
2. Otwórz Narzędzia deweloperskie. Okno Narzędzi deweloperskich jest teraz w centrum uwagi zamiast strony, więc element zniknie ponownie.
3. W sekcji Elementy > Style kliknij :hov, zaznacz pole wyboru check_box Naśladuj stronę z aktywnym polem tekstowym i upewnij się, że element z polem tekstowym jest zaznaczony. Teraz możesz sprawdzić element znajdujący się pod nim.

Tę samą opcję znajdziesz też w panelu Wyświetlanie.

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

Przełączanie pseudoklasy

Aby włączyć lub wyłą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 DevTools stosuje do elementu deklarację background-color, mimo że nie jest on podświetlony.

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 zajęć.

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 wyróżnione, aby wskazać użytkownikowi ten stan. Takie pseudoelementy to na przykład ::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.

Uwaga: aby włączyć tę funkcję, uruchom Chrome z flagą --enable-blink-features=HighlightInheritance.

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

1. Sprawdź tekst poniżej.

   Odziedziczyłem styl pseudoelementu podświetlenia 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 i zarządzania stylami innych firm w aplikacjach.

Aby wyświetlić kaskadowe warstwy, przejrzyj kolejny element i otwórz Elementy > Style.

Na karcie Style możesz zobaczyć 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 pisać Rendering i wybierz Show Rendering.
3. W menu Emuluj media CSS kliknij print.

Wyświetlanie użytego 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 ponownie załadowana, a karta Pokrycie zawiera przegląd ilości kodu CSS (i JavaScriptu) używanego z każdego pliku wczytywanego 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.

Wymuszenie trybu podglądu wydruku

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

Kopiowanie kodu CSS

W jednym menu na karcie Style możesz kopiować oddzielne 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ć kod 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:

   • Kopiowanie deklaracji. Kopiuje właściwość i jej wartość w składni CSS:css property: value;
   • Kopiowanie właściwości. Skopiuj tylko nazwę property.
   • Kopiowanie wartości. Skopiuje tylko value.
   • Kopiowanie reguły. Skopiuj całe 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ładniku 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. Otworzy się karta Obliczone.

Zmień kod CSS

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

Dodatkowo możesz:

• Zastąp kod CSS na różnych stronach.
• 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 tekście. To działanie jest równoważne dodaniu 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ć wbudowanego procesu deklaracji. Deklaracje wbudowane mają większą specyficzność niż zewnętrzne, więc dzięki temu procesowi zmiany wbudowane zaczną obowiązywać 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 skupia się na tekście, umożliwiając jego wpisywanie.
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.

Dodawanie deklaracji do reguły dotyczącej stylu

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

1. Wybierz element.
2. Na karcie Style kliknij między nawiasami reguły stylu, do której chcesz dodać deklarację. Kursor się skupia, umożliwiając 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.

Na zrzucie ekranu widać regułę stylu z nową deklaracją border-bottom-style:groove.

Zmiana nazwy lub wartości deklaracji

Aby zmienić nazwę lub wartość deklaracji, kliknij ją dwukrotnie. Aby dowiedzieć się, jak szybko zwiększać lub zmniejszać wartości o 0,1, 1, 10 lub 100 jednostek, przeczytaj artykuł Zmiana wartości zbioru za pomocą skrótów klawiszowych.

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

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

• 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ść jest z zakresu od -1 do 1.
• Shift + 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 wspomnianego wcześniej elementu Up elementem Down.

Zmiana wartości długości

Wycofana: ta funkcja została wycofana w Chrome 123. Aby tymczasowo włączyć tę funkcję, usuń zaznaczenie z ustawień Ustawienia > Eksperymenty > check_box Wycofaj narzędzie do tworzenia CSS <length> na karcie Style. Prześlij opinię na stronie crbug/1522657.

Możesz użyć wskaźnika, aby 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, aby zobaczyć, ż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 ostrzem.

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 na drzewie DOM.
2. Kliknij .cls.
3. Wpisz nazwę zajęć w polu Dodaj nowe zajęcia.
4. Naciśnij Enter.

Emuluj ustawienia jasnego i ciemnego motywu oraz włącz 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: 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 go nie wdrożyłeś; Dodatkowo automatycznie ustawia wartość prefers-color-scheme na dark.

To menu to skrót do opcji Emulate CSS media feature (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 na drzewie DOM.
2. Otwórz sekcję Klasy elementów. Zobacz Dodawanie zajęć do elementu. Pod polem Dodaj nową klasę znajdują się wszystkie klasy stosowane do tego elementu.
3. Zaznacz pole wyboru obok klasy, którą chcesz włączyć lub wyłączyć.

Dodawanie reguły dotyczącej stylu

Aby dodać nową regułę stylu:

1. Wybierz element.
2. Kliknij Nowa reguła stylu . Narzędzia dla deweloperów wstawia 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.

Wybieranie arkusza 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.

Włączanie i wyłą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 obok deklaracji. Gdy usuniesz deklarację, DevTools przekreśli 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.

Dopasowywanie 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ą okna Kątowy

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

Aby otworzyć zegar 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 -5deg i 0.25turn to podgląd kąta.

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. Istnieje więcej skrótów klawiszowych, które umożliwiają zmianę wartości kąta. Więcej informacji znajdziesz w panelu Styl (skróty klawiszowe).

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

Edytor cienia udostępnia interfejs graficzny do zmiany deklaracji text-shadow i box-shadow w kodzie CSS.

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 (dotyczy tylko box-shadow). Wybierz Na zewnątrz lub Wewnątrz.
   • Odsunięcia X i Y. Przeciągnij niebieski punkt lub podaj wartości.
   • Rozmycie. Przeciągnij suwak lub określ wartość.
   • Spread (tylko w przypadku box-shadow). Przeciągnij suwak lub podaj wartość.

5. Sprawdź zmiany zastosowane do elementu.

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

Edytor wypełnienia zawiera interfejs graficzny do zmiany wartości transition-timing-function i animation-timing-function.

Aby otworzyć Edytor łagodnego przejścia:

1. Wybierz element z deklaracją funkcji czasowej, np. element <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 czasów za pomocą wstępnie ustawionych wartości

Aby dostosować czasy jednym kliknięciem, użyj wstępnie ustawionych wartości w Edytorze wygaszania:

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

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.
   • Krzywe Beziera trzeciego stopnia:

Słowo kluczowe określające czas	Gotowe ustawienia	Bezier trzeciorzędowy
wolno-normalnie-wolno	In Out, Sine	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	In Out, Quadratic	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	In Out, Cubic	cubic-bezier(0.65, 0.05, 0.36, 1)
	Szybkie wyjście, powolne wejście	cubic-bezier(0.4, 0, 0.2, 1)
	Wstecz, Wstecz, Wstecz	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)
	Wstecz, Wstecz	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	Szybkie wyjście, wejście liniowe	cubic-bezier(0.4, 0, 1, 1)
normalnie-wolno	Out, Sine	cubic-bezier(0.39, 0.58, 0.57, 1)
	Out, Quadratic	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Pozdrawiam	cubic-bezier(0.22, 0.61, 0.36, 1)
	Liniowe wyjście, powolny wstęp	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 powoduje animację kulki w sekcji Podgląd u góry edytora.

(Eksperymentalnie) Kopiowanie zmian w pliku CSS

Uwaga: aby włączyć tę funkcję eksperymentalną, zaznacz opcję Synchronizuj zmiany w CSS na karcie Style w sekcji Ustawienia > Eksperymenty i ponownie załaduj DevTools.

Gdy ten eksperyment jest włączony, 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 w deklaracjach naraz, kliknij prawym przyciskiem myszy dowolną deklarację i kliknij Skopiuj wszystkie zmiany CSS.

Dodatkowo możesz śledzić wprowadzone zmiany na karcie Zmiany.