Dlaczego opracowaliśmy narzędzia siatki CSS?
Siatka CSS to bardzo zaawansowany system układów CSS, który umożliwia programistom stron internetowych tworzenie złożonego, dwuwymiarowego układu i ustalanie reguł dotyczących rozmiaru, wyrównania i kolejności każdego elementu podrzędnego w siatce. Technologia CSS Grid została wprowadzona, gdy pakiet Flexbox stał się popularny. Dzięki nim deweloperzy mogą wspólnie z innymi programistami uzyskać lepszy projekt responsywny bez złożonych trików wyrównywania lub układów wspomaganych przez JavaScript.
Jest to stosunkowo nowy system układu, dlatego siatka CSS również nie jest dobrze dobrana. Jego składnia jest dość wszechstronna (wystarczy wyszukać ściągawkę siatki), istnieje wiele sposobów na uzyskanie tego samego układu, a elastyczne rozmiary i ścieżki niejawne utrudniają rozumowanie, dlaczego układ jest lub nie działa poprawnie. W związku z tym postanowiliśmy udostępnić w Narzędziach deweloperskich specjalne narzędzia CSS Grid, aby deweloperzy mogli lepiej zrozumieć działanie swojego kodu CSS i ustalić, jak wybrać odpowiedni układ.
Projektowanie narzędzi
Wspólna praca Chrome i Edge
Narzędzia CSS Grid przyciągały uwagę zarówno z Narzędzi deweloperskich w Chrome, jak i Edge DevTools. Od samego początku zdecydowaliśmy się współpracować. Udostępnialiśmy nasze zasoby dotyczące usług, inżynierów i projektów od obu zespołów i koordynowaliśmy działania, aby tak się stało.
Podsumowanie funkcji
W narzędziach siatki CSS są 3 główne funkcje:
- Stała nakładka zależna od siatki, która pomaga kształtować informacje o wymiarach i kolejności
- Plakietki w drzewie DOM, które wyróżniają kontenery siatki CSS i przełączają nakładki siatki
- Panel paska bocznego, który umożliwia deweloperom personalizację wyświetlania nakładek DOM (np. zmianę koloru i szerokości reguł)
- Edytor siatki CSS w panelu Style.
Przyjrzyjmy się im dokładniej.
Trwałe nakładki siatki
W Narzędziach deweloperskich nakładka to zaawansowany instrument, który dostarcza informacji o układzie i stylu poszczególnych elementów:
Te dodatkowe informacje są nałożone na interesujący element. Wcześniej po najechaniu kursorem na siatkę z otwartymi Narzędziami deweloperskimi nakładka wyświetlała informacje o modelu prostokąta, ale wyróżniona zawartość ograniczała się do elementów siatki bez wyjaśnienia, dlaczego tak się stało. Oto 2 główne kwestie, które chcemy dodać w przypadku nakładek siatki CSS:
- Chcemy pokazywać bardziej przydatne informacje o siatkach, np.wymiary i luki autoryzowane.
- Chcemy, aby nakładki były przyklejone, dzięki czemu można przeglądać wiele siatki jednocześnie, a gdy zmieniamy style elementów, możemy zobaczyć nakładki aktualizujące informacje o siatce.
Przyjrzyjmy się, jak udało nam się osiągnąć oba te cele.
Rozmiary własne a rozmiary obliczone
Jednym z trudnych elementów debugowania siatki CSS jest wiele sposobów definiowania rozmiarów ścieżek siatki. Możesz na przykład użyć kombinacji wartości w pikselach, 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ć te autorskie rozmiary ścieżek do obliczonych rozmiarów ścieżek obliczonych przez przeglądarkę. Aby wypełnić tę lukę, umieściliśmy na nakładce obok siebie te 2 informacje:
Ciąg przed kropką jest wartością utworzoną przez Ciebie, a ciąg po kropce reprezentuje rzeczywistą obliczoną wartość.
Wcześniej Narzędzia deweloperskie nie umożliwiały pobierania wartości utworzonych przez Ciebie. Teoretycznie moglibyśmy sami przeanalizować utworzone wartości w Narzędziach deweloperskich i obliczyć je zgodnie ze specyfikacją siatki CSS. To wiązałoby się z wieloma skomplikowanymi scenariuszami i byłoby po prostu duplikatem działań Blink. Dlatego z pomocą zespołu ds. stylu Blink otrzymaliśmy nowy interfejs API z mechanizmu stylu reklam, który udostępnia „wartości kaskadowe”. Wartość kaskadowa to ostateczna wartość efektywna dla właściwości CSS, po kaskadzie CSS. Jest to wartość, która wygrywa po skompilowaniu wszystkich arkuszy stylów, ale przed obliczeniem jakichkolwiek wartości, np. wartości procentowej, ułamków itp.
Obecnie używamy tego interfejsu API do wyświetlania utworzonych przez Ciebie wartości w nakładkach siatki.
Trwałe nakładki
Przed korzystaniem z narzędzi siatki CSS w Narzędziach deweloperskich nakładka była prosta: najedź na element w panelu drzewa DOM w Narzędziach deweloperskich lub bezpośrednio na sprawdzanej stronie, a pojawi się nakładka z opisem tego elementu. Po najechaniu kursorem na mapę zniknie nakładka. W przypadku nakładek na siatkę zależało nam na tym: wiele siatki może być podświetlonych jednocześnie, a nakładki siatki mogą pozostać aktywne, podczas gdy zwykłe nakładki wyświetlane po najechaniu kursorem są nadal aktywne.
Na przykład:
Jednak nakładka w Narzędziach deweloperskich nie została opracowana z myślą o tym wieloelementowym, trwałym mechanizmie (opracowano go wiele lat temu). Aby to działało, musieliśmy zmienić projekt nakładki. Dodaliśmy nową GridHighlightTool do istniejącego zestawu 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 stałych nakładek (Siatka, Flex itp.) zachowujemy odpowiednie pole konfiguracji w trwałym narzędziu. Za każdym razem, gdy znacznik wyróżniający nakładki sprawdza, co ma zostać narysowany, będzie też zawierać te konfiguracje.
Aby umożliwić Narzędziom deweloperskim kontrolę nad tym, co należy zaznaczyć, stworzyliśmy nowe polecenie CDP dla stał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 element GridNodeHighlightConfig zawiera informacje o tym, który węzeł należy narysować i jak go narysować. Dzięki temu możemy dodać trwały mechanizm obejmujący wiele elementów bez zakłócania bieżącego działania po najechaniu kursorem.
Odznaki siatki w czasie rzeczywistym
Aby ułatwić programistom włączanie i wyłączanie nakładek siatki, obok kontenerów siatki w drzewie DOM dodaliśmy małe plakietki. Te plakietki mogą też pomóc deweloperom rozpoznawać kontenery siatki w strukturach DOM.
Zmiany w drzewie DOM
Plakietki Grid nie są jedynymi plakietkami, które chcemy pokazać w drzewie DOM, dlatego chcemy maksymalnie uprościć dodawanie odznak. ElementsTreeElement, klasa odpowiedzialna za tworzenie poszczególnych elementów drzewa DOM w Narzędziach deweloperskich i zarządzanie nimi, została zaktualizowana o kilka nowych publicznych metod konfigurowania plakietek. Jeśli dla jednego elementu dostępnych jest kilka plakietek, zostaną one posortowane według kategorii plakietek, a następnie w kolejności alfabetycznej, jeśli należą do tej samej kategorii. Dostępne kategorie to m.in. Security i Layout, a Grid należy do kategorii Layout.
Poza tym od samego początku aplikacja zapewnia obsługę ułatwień dostępu. Każda plakietka interaktywna musi zawierać domyślną i aktywną aria-label, natomiast plakietki tylko do odczytu wykorzystują nazwy identyfikatorów jako aria-label.
Skąd otrzymaliśmy informacje o stylu w czasie rzeczywistym?
Wiele zmian DOM jest odzwierciedlanych w drzewie DOM w Narzędziach deweloperskich w czasie rzeczywistym. Na przykład nowo dodane węzły natychmiast pojawiają się w drzewie DOM, a usunięte nazwy klas od razu znikają. Zależy nam, aby stan plakietki z siatką odzwierciedlał aktualne informacje. Okazało się to jednak trudne do wdrożenia, ponieważ Narzędzia deweloperskie nie mogły otrzymywać powiadomień o zmianach stylu elementów widocznych w drzewie DOM. Jedynym sposobem na ustalenie, kiedy element staje się lub przestaje być kontenerem siatki, jest ciągłe wysyłanie do przeglądarki zapytań o aktualne informacje o stylu każdego elementu. Byłoby to niedozwolone.
Aby ułatwić interfejsowi wykrywanie, kiedy styl elementu został zaktualizowany, dodaliśmy nową metodę CDP do odpytywania aktualizacji stylu. Aby uzyskać aktualizacje stylu węzłów DOM, zaczynamy od poinformowania przeglądarki, które deklaracje CSS mają być śledzone. W przypadku plakietek w postaci siatki prosimy przeglądarkę, aby śledziła:
{
"display": "grid",
"display": "inline-grid",
}
Następnie wysyłamy żądanie sondowania, a gdy w panelu Elements znajdują się śledzone aktualizacje stylu węzłów DOM, przeglądarka wysyła do Narzędzi deweloperskich listę zaktualizowanych węzłów i rozwiązuje bieżące żądanie sondowania. Za każdym razem, gdy Narzędzia deweloperskie wymagają ponownego powiadamiania o aktualizacjach stylu, mogą wysłać to żądanie sondowania, zamiast nieustannie odpytywać backend z każdego węzła. Narzędzia deweloperskie mogą też zmieniać śledzone deklaracje CSS, wysyłając nową listę do przeglądarki.
Panel układu
Plakietki drzewa DOM ułatwiają wykrywanie siatki CSS, ale czasami chcemy zobaczyć listę wszystkich siatki CSS na określonej stronie i łatwo włączać i wyłączać ich trwałe nakładki, aby debugować układy. Dlatego postanowiliśmy utworzyć panel boczny tylko na potrzeby narzędzi układu. Zyskujemy w ten sposób specjalne miejsce na zbieranie wszystkich kontenerów siatki i konfigurowanie wszystkich opcji nakładek siatki. Panel Układ umożliwia nam także umieszczanie w nim narzędzi, które w przyszłości będą wymagały dużo pracy (np. Flexbox czy Zapytania dotyczące kontenerów).
Znajdź elementy według obliczonych stylów
Aby wyświetlić listę kontenerów siatki CSS w panelu Układ, musimy znaleźć węzły DOM według obliczonych stylów. Okazało się też, że nie jest to proste, ponieważ nie wszystkie węzły DOM są znane narzędziom deweloperskim, gdy są one otwarte. Zamiast tego zna tylko niewielki podzbiór węzłów, zwykle na najwyższym poziomie hierarchii DOM, na potrzeby uruchomienia drzewa DOM Devtools. Ze względu na wydajność inne węzły będą pobierane tylko na żądanie. Oznacza to, że potrzebujemy nowego polecenia CDP, aby zebrać wszystkie węzły na stronie i przefiltrować je według ich obliczonych stylów:
# 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 frontend narzędzi deweloperskich może uzyskać listę kontenerów siatki CSS na stronie, co może przebijać przez elementy iframe i rdzenie główne, a następnie renderować je w panelu układu.
Podsumowanie
Narzędzia CSS Grid były jednym z pierwszych projektów narzędzi do projektowania w Narzędziach deweloperskich obsługujących funkcję platformy internetowej. Debiutował w Narzędziach deweloperskich wiele podstawowych narzędzi, takich jak trwałe nakładki, plakietki DOM i panel Układ. Utorowała też drogę dla przyszłych narzędzi układu w Narzędziach deweloperskich w Chrome, takich jak Flexbox i Container Container. Stanowiła również podstawę dla edytorów Grid i Flexbox, dzięki którym programiści mogą w interaktywny sposób zmieniać wyrównania siatki i Flexbox. Omówimy je w przyszłości.
Pobierz kanały podglądu
Zastanów się, czy nie ustawić Chrome w wersji Canary, Dev lub beta jako domyślnej przeglądarki do programowania. Te kanały wersji testowej dają dostęp do najnowszych funkcji Narzędzi deweloperskich, umożliwiają testowanie najnowocześniejszych interfejsów API platformy internetowej i wykrywanie problemów w witrynie, zanim użytkownicy ją zobaczą.
Kontakt z zespołem ds. Narzędzi deweloperskich w Chrome
Skorzystaj z poniższych opcji, aby porozmawiać o nowych funkcjach i zmianach w poście lub o innych kwestiach związanych z Narzędziami deweloperskimi.
- Prześlij nam sugestię lub opinię na crbug.com.
- Aby zgłosić problem z Narzędziami deweloperskimi, kliknij Więcej opcji
> Pomoc > Zgłoś problemy z Narzędziami deweloperskimi. - Opublikuj tweeta na stronie @ChromeDevTools.
- Napisz komentarz pod filmem dotyczącym nowości w Narzędziach deweloperskich w Narzędziach deweloperskich w YouTube lub filmach w YouTube ze wskazówkami dotyczącymi Narzędzi deweloperskich.