Dlaczego stworzyliśmy siatkę CSS?
Siatka CSS to bardzo zaawansowany system układu CSS, który pozwala programistom stron internetowych na tworzenie złożonych dwuwymiarowych układów i określanie reguł określających wielkość, wyrównanie i kolejność elementów podrzędnych siatki. Siatka CSS została wprowadzona po popularności Flexbox. Razem pomagają programistom tworzyć lepsze elastyczne projekty bez skomplikowanych sposobów wyrównywania i układu wspomaganego JavaScriptem.
Ponieważ siatka CSS jest stosunkowo nowym systemem układów, ciężko jest dopasować ją tak, jak powinna. Jej składnia jest bardzo uniwersalna (wyszukaj tylko ściągawkę z siatki), istnieje wiele sposobów na osiągnięcie tego samego układu, a elastyczne określanie rozmiaru i sugerowane ścieżki sprawiają, że trudniej jest ustalić, dlaczego układ jest lub nieprawidłowy. Właśnie dlatego zdecydowaliśmy się udostępnić specjalne narzędzia CSS Grid w Narzędziach deweloperskich, aby deweloperzy mogli lepiej zrozumieć działanie swojego kodu CSS i uzyskać odpowiedni układ.
Projektowanie narzędzi
Połączenie Chrome i Edge
Narzędzia CSS Grid przykuły uwagę zarówno z Narzędzi deweloperskich w Chrome, jak i Edge DevTools. Od samego początku zdecydowaliśmy się na współpracę. Udostępniliśmy nasze usługi, zasoby techniczne i projektowe z obu zespołów, a potem co tydzień koordynowaliśmy te materiały.
Podsumowanie funkcji
Siatka CSS ma 3 główne funkcje:
- Trwała, zależna od siatki nakładka, która ułatwia informacje o wymiarach i kolejności
- Plakietki w drzewie DOM, które wyróżniają kontenery siatki CSS i przełączanie nakładek siatki
- Panel paska bocznego, który umożliwia programistom personalizację wyświetlania nakładek DOM (np. zmiana koloru i szerokości reguł)
- Edytor siatki CSS w panelu Style.
Przyjrzyjmy się im dokładniej.
Nakładki trwałe siatki
W Narzędziach deweloperskich nakładka jest zaawansowanym narzędziem, które zapewnia informacje o układzie i stylu poszczególnych elementów:
Te dodatkowe informacje są nałożone na element, który Cię interesuje. Wcześniej po najechaniu kursorem na siatkę z otwartymi Narzędziami deweloperskimi nakładka wyświetlała informacje o modelu pola, ale podświetlanie treści ograniczało się do elementów siatki bez wyjaśnienia, dlaczego tak się dzieje. Chcemy dodać dwie główne elementy do nakładek siatki CSS:
- chcemy wyświetlać bardziej przydatne informacje o siatkach, na przykład wymiary i przerwy autorskie.
- Chcemy, aby nakładki były przyklejone, co pozwoli nam jednocześnie oglądać wiele siatek i mieć wgląd w nakładki z aktualizacją informacji o siatce, gdy zmieniamy style elementów.
Przyjrzyjmy się temu, jak osiągnęliśmy oba te cele.
Rozmiary utworzone przez autora a rozmiary obliczone
Jedną z trudniejszych części debugowania siatki CSS jest możliwość definiowania rozmiarów ścieżek siatki na wiele sposobów. Możesz na przykład użyć kombinacji wartości pikseli, wartości procentowych, ułamków, funkcji powtarzania i funkcji minmax, aby utworzyć uniwersalne rozmiary ścieżek:
.grid-cards {
display: grid;
width: 200px;
height: 300px;
grid-template-rows: 20% 0.3fr 100px minmax(100px, auto);
grid-template-columns: repeat(3, minmax(200px, 1fr));
}
Trudno byłoby jednak zmapować autorskie rozmiary ścieżek do obliczonych rozmiarów ścieżek obliczonych przez przeglądarkę. Aby wypełnić tę lukę, w nakładce umieszczamy obok siebie te 2 rodzaje informacji:
Ciąg znaków przed kropką oznacza autorską wartość, a ciąg po kropce – rzeczywistą wartość obliczoną.
Wcześniej Narzędzia deweloperskie nie umożliwiały pobierania utworzonych wartości. Teoretycznie moglibyśmy jakoś przeanalizować wartości wygenerowane w Narzędziach deweloperskich i obliczyć je zgodnie ze specyfikacją CSS Grid. Wymagałoby to wielu skomplikowanych scenariuszy i w zasadzie duplikowanie wysiłków Blink. Dlatego we współpracy z zespołem ds. stylów firmy Blink otrzymaliśmy nowy interfejs API z wyszukiwarki stylów, który ujawnia „wartości kaskadowe”. Wartość kaskadowa to ostateczna, efektywna wartość właściwości CSS (po kaskadzie CSS). Jest to wartość, która zostaje wygrywana po skompilowaniu wszystkich arkuszy przez mechanizm stylów, ale przed obliczeniem jakichkolwiek wartości, takich jak procent, ułamki itp.
Używamy teraz tego interfejsu API do wyświetlania utworzonych wartości w nakładkach siatki.
Trwałe nakładki
Przed użyciem narzędzi CSS Grid działanie nakładek w Narzędziach deweloperskich było proste: wystarczy najechać kursorem na element w panelu DOM Tree w Narzędziach deweloperskich lub bezpośrednio na sprawdzanej stronie, aby zobaczyć nakładkę z opisem tego elementu. Najedź kursorem na kursor myszy, a nakładka zniknie. W przypadku nakładek siatki chcieliśmy zrobić coś innego: można jednocześnie podświetlić wiele siatek, a warstwy siatki mogą pozostawać włączone, podczas gdy zwykłe nakładki wyświetlane po najechaniu kursorem wciąż działają.
Na przykład:
Jednak nakładka w Narzędziach deweloperskich nie została zaprojektowana z myślą o tym wieloelementowym, trwałym mechanizmie (została ona utworzona wiele lat temu). Aby to działało, musieliśmy zrefaktoryzować projekt nakładki. Dodaliśmy nowy element GridHighlightTool do dotychczasowego pakietu narzędzi do wyróżniania, który później przekształcił się w globalny PersistentTool do wyróżniania wszystkich trwałych nakładek w tym samym czasie. Dla każdego rodzaju trwałych nakładek (Grid, Flex itp.) przechowujemy odpowiednie pole konfiguracji w narzędziu trwałym. Za każdym razem, gdy zakreślacz w nakładce sprawdza, co narysować, uwzględnia też te konfiguracje.
Aby narzędzia deweloperskie mogły kontrolować elementy, które mają być wyróżnione, utworzyliśmy nowe polecenie CDP dla trwałej nakładki siatki:
# Highlight multiple elements with the CSS Grid overlay.
command setShowGridOverlays
parameters
# An array of node identifiers and descriptors for the highlight appearance.
array of GridNodeHighlightConfig gridNodeHighlightConfigs
gdzie każdy GridNodeHighlightConfig zawiera informacje o tym, który węzeł i jak to zrobić. Dzięki temu możemy dodać trwały mechanizm z wieloma elementami bez przerywania bieżącego działania po najechaniu kursorem.
Odznaki siatki czasu rzeczywistego
Aby ułatwić deweloperom łatwe włączanie i wyłączanie nakładek siatki, dodaliśmy małe plakietki obok kontenerów siatki w drzewie DOM. Plakietki mogą też pomóc programistom w rozpoznawaniu kontenerów siatki w swoich strukturach DOM.
Zmiany w drzewie DOM
Plakietki Grid nie są jedynymi plakietkami, które chcemy wyświetlać w drzewie DOM, dlatego chcemy ułatwić ich dodawanie. ElementsTreeElement, klasa odpowiedzialna za tworzenie poszczególnych elementów DOM Tree i zarządzanie nimi w Narzędziach deweloperskich, została zaktualizowana o kilka nowych publicznych metod konfigurowania plakietek. Jeśli element obejmuje wiele plakietek, są one posortowane według kategorii, a jeśli należą do tej samej kategorii, ich nazwy są posortowane alfabetycznie. Dostępne kategorie to m.in. Security, Layout, a Grid należy do kategorii Layout.
Ułatwienia dostępu od samego początku są wbudowane w system. Każda plakietka interaktywna musi zawierać domyślną i aktywną wartość aria-label, podczas gdy nazwy plakietek tylko do odczytu są nazywane aria-label.
Jak możemy aktualizować styl w czasie rzeczywistym?
Wiele zmian DOM jest odzwierciedlanych w drzewie DOM Narzędzi deweloperskich w czasie rzeczywistym. Na przykład nowo dodane węzły natychmiast pojawiają się w drzewie DOM, a nazwy usuniętych klas również natychmiast znikają. Chcemy, aby status plakietki Grid także odzwierciedlał te same aktualne informacje. Wdrożenie tego rozwiązania okazało się jednak trudne, ponieważ narzędzia deweloperskie nie mogły otrzymywać powiadomień o tym, że elementy wyświetlone w drzewie DOM otrzymują aktualizacje stylu. Jedynym istniejącym sposobem na sprawdzenie, kiedy element staje się lub przestaje być kontenerem siatki, jest ciągłe zapytanie przeglądarki o aktualne informacje o stylu każdego elementu. Byłoby to nieprawidłowo kosztowne.
Aby ułatwić interfejsowi orientację o zmianie stylu elementu, dodaliśmy nową metodę CDP do odpytywania o zmiany stylu. Aby pobierać aktualizacje stylu węzłów DOM, zaczynamy od poinformowania przeglądarki, które deklaracje CSS mają być śledzone. W przypadku plakietek w siatce prosimy przeglądarkę, aby śledziła:
{
"display": "grid",
"display": "inline-grid",
}
Następnie wysyłamy żądanie odpytywania. Gdy w panelu Elements pojawiają się aktualizacje stylu śledzonych węzłów DOM, przeglądarka wysyła do Narzędzi deweloperskich listę zaktualizowanych węzłów i rozpatruje istniejące żądanie odpytywania. Za każdym razem, gdy Narzędzia deweloperskie będą chciały otrzymywać powiadomienia o aktualizacjach stylu, mogą wysłać to żądanie odpytywania, zamiast stale odpytywać backend z każdego węzła. Narzędzia deweloperskie mogą też zmienić śledzone deklaracje CSS przez wysłanie nowej listy do przeglądarki.
Panel układu
Chociaż plakietki DOM Tree pomagają w wykrywaniu siatek CSS, czasami chcemy zobaczyć listę wszystkich siatek CSS na określonej stronie i łatwo włączać i wyłączać ich trwałe nakładki, aby debugować ich układy. Dlatego postanowiliśmy utworzyć specjalny panel paska bocznego przeznaczony wyłącznie do narzędzi układu. Daje nam to specjalne miejsce na przechowywanie wszystkich kontenerów siatki i konfigurowanie wszystkich opcji nakładek siatki. Panel Układ umożliwia nam też umieszczenie w nim przyszłych narzędzi skoncentrowanych na układzie (np. Flexbox czy Zapytania dotyczące kontenerów).
Znajdź elementy według stylów obliczonych
Aby wyświetlić listę kontenerów siatki CSS w panelu Układ, musimy znaleźć węzły DOM według stylów obliczonych. Okazało się, że nie jest to proste, ponieważ nie wszystkie węzły DOM są dostępne dla narzędzi deweloperskich, gdy są otwarte. Zamiast tego narzędzia deweloperskie zna tylko mały podzbiór węzłów, zwykle na najwyższym poziomie hierarchii DOM, tylko po to, aby uruchomić drzewo DOM w Narzędziach deweloperskich. Ze względu na wydajność inne węzły będą pobierane tylko po otrzymaniu dalszego żądania. Oznacza to, że potrzebujemy nowego polecenia CDP, aby zebrać wszystkie węzły na stronie i odfiltrować je według stylów obliczonych:
# Finds nodes with a given computed style in a subtree.
experimental command getNodesForSubtreeByStyle
parameters
# Node ID pointing to the root of a subtree.
NodeId nodeId
# The style to filter nodes by (includes nodes if any of properties matches).
array of CSSComputedStyleProperty computedStyles
# Whether or not iframes and shadow roots in the same target should be traversed when returning the
# results (default is false).
optional boolean pierce
returns
# Resulting nodes.
array of NodeId nodeIds
Dzięki temu interfejs Narzędzi deweloperskich może pobrać listę kontenerów siatki CSS na stronie, co być może przepuszcza elementy iframe i obiekty główne, a następnie wyrenderuje je w panelu Układ.
Podsumowanie
Narzędzie CSS Grid to jeden z pierwszych projektów związanych z narzędziami do projektowania w Narzędziach deweloperskich, który obsługuje funkcję platformy internetowej. Zadebiutowała wiele podstawowych narzędzi dostępnych w Narzędziach deweloperskich, takich jak trwałe nakładki, plakietki DOM Tree czy panel Układ, oraz przetarła szlak dla przyszłych narzędzi do tworzenia układu w Narzędziach deweloperskich w Chrome, takich jak Flexbox i Container. Umożliwił on również korzystanie z edytorów Grid i Flexbox, które pozwalają programistom na interaktywną zmianę wyrównania siatki i Flexbox. Omówimy je w przyszłości.
Pobieranie kanałów podglądu
Jako domyślnej przeglądarki programistycznej możesz użyć Chrome Canary, Dev lub Beta. Te kanały podglądu dają dostęp do najnowszych funkcji Narzędzi deweloperskich, testują nowoczesne interfejsy API platform internetowych oraz wykrywają problemy w witrynie, zanim zrobią to użytkownicy.
Kontakt z zespołem Narzędzi deweloperskich w Chrome
Użyj tych opcji, aby omówić nowe funkcje i zmiany w poście lub wszelkich innych sprawach związanych z Narzędziami dla programistów.
- Sugestię lub opinię możesz przesłać na stronie crbug.com.
- Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji
> Pomoc > Zgłoś problemy z Narzędziami deweloperskimi. - zatweetować na @ChromeDevTools.
- Komentarze do filmów o narzędziach dla deweloperów w YouTube lub filmach w YouTube ze wskazówkami dotyczącymi Narzędzi deweloperskich.