Dlaczego stworzyliśmy narzędzia do tworzenia siatek CSS?
Siatka CSS to bardzo wydajny system układu CSS, który pozwala deweloperom stron internetowych tworzyć złożony układ dwuwymiarowy i określać reguły dotyczące rozmiaru, wyrównania i kolejności poszczególnych elementów podrzędnych w siatkowaniu. Sieć CSS została wprowadzona po tym, jak zyskiwał na popularności Flexbox. Razem mogą pomóc deweloperom w tworzeniu lepszego projektowania stron responsywnych bez skomplikowanych hacków do wyrównywania ani układu wspomaganego przez JavaScript.
Jest to stosunkowo nowy system układu, który również trudno prawidłowo zastosować. Jego składnia jest dość wszechstronna (wystarczy wpisać w wyszukiwarce grid cheatsheet), istnieje wiele sposobów na uzyskanie tego samego układu, a elastyczne rozmiary i ukryte ścieżki utrudniają ustalenie, dlaczego układ działa lub nie działa tak, jak powinien. Dlatego w DevTools udostępniliśmy specjalne narzędzia do obsługi CSS Grid, aby programiści mogli lepiej zrozumieć, co robi ich kod CSS i jak uzyskać odpowiedni układ.
Projektowanie narzędzi
wspólne działania zespołów Chrome i Edge.
Narzędzia CSS Grid przykuwały uwagę zarówno w Narzędziach deweloperskich w Chrome, jak i w Narzędziach deweloperskich w Edge. Od samego początku zdecydowaliśmy się na współpracę. Udostępniliśmy zasoby dotyczące produktu, inżynierii i projektu z obu zespołów oraz koordynowaliśmy ich pracę co tydzień.
Podsumowanie funkcji
Istnieją 3 główne funkcje narzędzia CSS Grid:
- Trwały nakład, który pomaga w uzyskaniu informacji o wymiarach i zamówieniu
- plakietki w drzewie DOM, które wyróżniają kontenery siatki CSS i przełączają nakładki siatki;
- panel boczny, który pozwala deweloperom personalizować wyświetlanie nakładek DOM (np. zmieniać kolor i szerokość reguł);
- Edytor siatki CSS w panelu Style
Przyjrzyjmy się im teraz bliżej.
Stałe nakładki siatki
W Narzędziach deweloperskich nakładka to zaawansowane narzędzie, które dostarcza informacji o układzie i stylu poszczególnych elementów: