Przewodnik po nowych i eksperymentalnych narzędziach CSS DevTools w Firefoksie

W ciągu ostatnich kilku lat nasz zespół w Firefoksie pracował nad nowymi narzędziami CSS, które rozwiązują zarówno najnowocześniejsze techniki, jak i odwieczne frustracje. Jesteśmy zespołem Layout Tools, podzbiorem narzędzi dla programistów Firefoksa, a naszym celem jest ulepszenie współczesnego przepływu pracy w projektowaniu stron internetowych.

Sieć przeszła niesamowitą ewolucję w ciągu ostatniej dekady: nowe funkcje HTML/CSS, ulepszenia przeglądarki i techniki projektowania. Nasz zespół poświęca się tworzeniu narzędzi, które pasują do tej innowacji, aby projektanci i programiści mogli wykorzystać większą wydajność i kreatywność, które są teraz możliwe.

W tym przewodniku przedstawimy przegląd naszych siedmiu nowych narzędzi wraz z historiami z procesu projektowania i praktycznymi krokami w celu wypróbowania każdego narzędzia.

1. Inspektor sieci

Wszystko zaczęło się trzy lata temu, kiedy Jen Simmons, nasz ekspert ds. układów CSS i adwokat, współpracował z członkami Firefox DevTools nad stworzeniem narzędzia, które pomogłoby użytkownikom w badaniu układów CSS Grid.

Jako jedna z najpotężniejszych nowych funkcji współczesnego Internetu, CSS Grid szybko zyskał przyzwoitą adopcję w przeglądarkach, ale nadal miał niską adopcję witryny. Krzywa uczenia się jest stroma i nadal potrzebujesz rozwiązań awaryjnych dla niektórych przeglądarek. Dlatego częścią naszego celu była pomoc w spopularyzowaniu sieci Grid poprzez udostępnienie programistom bardziej praktycznego sposobu na jej nauczenie się.

Rdzeniem narzędzia jest zarys siatki nałożony na stronę, który pomaga twórcom wizualizować, w jaki sposób siatka pozycjonuje ich elementy i jak zmienia się układ, gdy zmieniają swoje style. Dodaliśmy ponumerowane etykiety, aby zidentyfikować każdą linię siatki, możliwość wyświetlania do trzech siatek jednocześnie oraz dostosowywanie kolorów nakładek. Niedawno dodaliśmy również obsługę subgrid, zupełnie nowej specyfikacji CSS zaimplementowanej w Firefoksie i mamy nadzieję, że wkrótce w większej liczbie przeglądarek.

Grid Inspector był inspiracją dla wszystkich późniejszych narzędzi. To było nawet inspiracją dla nowego zespołu: Layout Tools! Utworzony pod koniec 2017 roku, działamy w czterech strefach czasowych i współpracujemy z wieloma innymi osobami w Mozilli, takimi jak nasi programiści silników renderujących i dobrzy ludzie z MDN.

Wypróbuj Inspektora sieci

1. W przeglądarce Firefox odwiedź naszą witrynę z przykładami siatki.
2. Otwórz Inspektora za pomocą Cmd + Shift + C .
3. Włącz nakładkę siatki na jeden z trzech sposobów:
• Panel układu :
  W sekcji Siatka zaznacz pole wyboru obok .content.grid-content ;
• Widok znaczników :
  Przełącz plakietkę „siatka” obok <div class="content grid-content"> ;
• Widok reguł :
  Kliknij przycisk obok display:grid; wewnątrz #page-intro .grid-content ;
4. Eksperymentuj z Grid Inspector:
• Zmień fioletowy kolor nakładki na czerwony;
• Przełącz „Numery linii” lub „Wydłużaj linie w nieskończoność”;
• Włącz więcej nakładek siatki;
• Zobacz, co się stanie, gdy wyłączysz przerwę w grid-gap: 15px w Regułach.

Od czasu Grid staramy się poszerzyć możliwości tego, czym może być narzędzie CSS przeglądarki.

“

2. Edytor ścieżki kształtu

Kolejnym projektem, nad którym pracowaliśmy, był Shape Path Editor: nasze pierwsze narzędzie do edycji wizualnej.

CSS Shapes umożliwia definiowanie kształtów, wokół których będzie przepływał tekst: okręgu, trójkąta lub wieloboku wielobocznego. Może być używany z właściwością clip-path , która umożliwia przycinanie elementów do dowolnego z tych samych kształtów. Te dwie techniki razem otwierają możliwość tworzenia bardzo unikalnych układów inspirowanych projektami graficznymi.

Jednak tworzenie tych czasami skomplikowanych kształtów może być trudne. Wpisywanie wszystkich współrzędnych ręcznie i używanie odpowiednich jednostek CSS jest podatne na błędy i dalekie od kreatywnego sposobu myślenia, na który pozwala Shapes. Dlatego stworzyliśmy narzędzie, które umożliwia edycję kodu poprzez bezpośrednie klikanie i przeciąganie kształtów na stronie.

Ten rodzaj funkcji — edycja wizualna — był nowością dla nas i ogólnie dla narzędzi przeglądarki. Jest to przykład tego, jak możemy wyjść poza inspekcję i debugowanie do sfery projektowania.

Wypróbuj edytor ścieżek kształtów

1. W przeglądarce Firefox odwiedź tę stronę w witrynie An Event Apart.
2. Otwórz Inspektora za pomocą Cmd + Shift + C i wybierz pierwszy okrągły obraz.
3. W Regułach kliknij ikonę obok właściwości shape-outside .
4. Na stronie kliknij punkty kształtu i zobacz, co się stanie, gdy przeciągniesz, aby kształt był duży lub mały. Zmień go na rozmiar, który dobrze Ci odpowiada.

Edycja wizualna jest przykładem tego, jak możemy wyjść poza kontrolę i debugowanie i wejść w sferę projektowania.

“

3. Edytor czcionek

Od lat mamy panel Czcionki w Firefoksie, który pokazuje pouczającą listę wszystkich czcionek używanych w witrynie. Kontynuując nasz temat projektowania w przeglądarce, zdecydowaliśmy się przekształcić go w edytor czcionek do precyzyjnego dostosowywania właściwości czcionki.

Siłą napędową tego projektu był nasz cel, aby wspierać czcionki zmienne w tym samym czasie, gdy zespół silnika renderującego Firefoksa dodawał dla niego obsługę. Czcionki zmienne umożliwiają projektantom czcionek oferowanie drobnoziarnistych wariacji wzdłuż osi, takich jak grubość, w jednym pliku czcionki. Obsługuje również niestandardowe osie, co zapewnia zarówno twórcom czcionek, jak i projektantom stron internetowych niesamowitą elastyczność. Nasze narzędzie automatycznie wykrywa te niestandardowe osie i umożliwia ich dostosowanie i wizualizację. W przeciwnym razie wymagałoby to wyspecjalizowanych stron internetowych, takich jak Axis-Praxis.

Dodatkowo dodaliśmy funkcję, która umożliwia najechanie kursorem na nazwę czcionki, aby zaznaczyć, gdzie ta konkretna czcionka jest używana na stronie. Jest to przydatne, ponieważ sposób, w jaki przeglądarki wybierają czcionkę używaną do renderowania fragmentu tekstu, może być złożony i zależny od komputera. Niektóre znaki mogą zostać nieoczekiwanie zamienione na inną czcionkę z powodu podustawienia czcionki.

Wypróbuj edytor czcionek

1. W przeglądarce Firefox odwiedź tę witrynę demonstracyjną czcionek zmiennych.
2. Otwórz Inspektora za pomocą Cmd + Shift + C i wybierz słowo „zmienna” w tytule (selektor elementu to .title__variable-web__variable ).
3. W trzecim okienku Inspektora przejdź do panelu Czcionki:
• Najedź kursorem na nazwę czcionki Output Sans Regular , aby zobaczyć, co zostanie podświetlone;
• Wypróbuj wagi i skośne suwaki;
• Spójrz na gotowe odmiany czcionek w menu rozwijanym Instancje .

4. Inspektor Flexbox

Nasze narzędzia Grid, Shapes i Variable Fonts mogą razem wspomagać bardzo zaawansowany projekt graficzny w Internecie, ale wciąż są nieco nowatorskie w oparciu o obsługę przeglądarek. (Prawie już są, ale nadal wymagają rozwiązań awaryjnych). Nie chcieliśmy pracować tylko nad nowymi funkcjami — przyciągnęły nas problemy, z którymi na co dzień boryka się większość twórców stron internetowych.

Rozpoczęliśmy więc prace nad Flexbox Inspector. Pod względem designu był to nasz najbardziej ambitny projekt i zaowocował kilkoma nowymi strategiami badania użytkowników dla naszego zespołu.

Podobnie jak Grid, CSS Flexbox ma dość stromą krzywą uczenia się, kiedy zaczynasz. Potrzeba czasu, aby naprawdę to zrozumieć, a wielu z nas ucieka się do prób i błędów, aby osiągnąć pożądane układy. Na początku projektu nasz zespół nie był nawet pewien, czy sami rozumiemy Flexbox i nie wiedzieliśmy, jakie są główne wyzwania. Dlatego podnieśliśmy poziom naszej wiedzy i przeprowadziliśmy ankietę, aby dowiedzieć się, czego ludzie najbardziej potrzebują, jeśli chodzi o Flexbox.

Wyniki miały duży wpływ na nasze plany, uzasadniając skomplikowane wizualizacje, takie jak wzrost/zmniejszenie i min/maks. Kontynuowaliśmy współpracę ze społecznością przez cały czas trwania projektu, włączając opinie do ewoluujących prototypów wizualnych i kompilacji Nightly.

Narzędzie składa się z dwóch głównych części: zakreślacza, który działa podobnie do Inspektora siatki, oraz szczegółowego narzędzia Flexbox wewnątrz Inspektora. Rdzeniem narzędzia jest elastyczny diagram elementów z informacjami o rozmiarze.

Z pomocą inżynierów układu Gecko byliśmy w stanie pokazać krok po kroku decyzje dotyczące rozmiaru silnika renderującego, aby dać użytkownikom pełny obraz tego, dlaczego i jak element elastyczny otrzymał określony rozmiar.

Uwaga : poznaj pełną historię naszego procesu projektowania w „Projektowanie Inspektora Flexbox”.

Wypróbuj Inspektora Flexbox

1. W Firefoksie odwiedź Bugzillę Mozilli.
2. Otwórz Inspektora za pomocą Cmd + Shift + C i wybierz element div.inner (tuż w pasku nagłówka).
3. Włącz nakładkę Flexbox na jeden z trzech sposobów:
• Panel układu :
  W sekcji Flex Container włącz przełącznik;
• Widok znaczników :
  Przełącz znaczek „flex” obok <div class="inner"> ;
• Widok reguł :
  Kliknij przycisk obok display:flex .
4. Użyj panelu Flex Container, aby przejść do elementu Flex o nazwie nav#header-nav .
• Zwróć uwagę na rozmiary pokazane na schemacie i w tabeli rozmiarów;
• Zwiększ i zmniejsz szerokość przeglądarki i zobacz, jak zmienia się diagram.

Interludium: Podwojenie badań

Jako mały zespół bez formalnego wsparcia badań użytkowników, często uciekamy się do projektowania opartego na testach wewnętrznych: opieramy nasze opinie na własnych doświadczeniach w korzystaniu z narzędzi. Ale po naszym sukcesie z ankietą Flexbox wiedzieliśmy, że chcemy być lepsi w zbieraniu danych, które nas poprowadzą. Przeprowadziliśmy nową ankietę, aby pomóc w określeniu naszych dalszych kroków.

Zebraliśmy listę 20 największych wyzwań, przed którymi stoją twórcy stron internetowych, i poprosiliśmy naszą społeczność o uszeregowanie ich w formacie max-diff.

Kiedy stwierdziliśmy, że największym zwycięzcą wyzwań było debugowanie układu CSS, przeprowadziliśmy ankietę uzupełniającą na temat konkretnych błędów CSS, aby odkryć największe problemy. Ankiety te uzupełniliśmy o wywiady z użytkownikami i testy użytkowników.

Poprosiliśmy również ludzi, aby ocenili swoje frustracje za pomocą narzędzi programistycznych przeglądarki. Najważniejszym problemem było przeniesienie zmian CSS z powrotem do edytora. To stał się naszym kolejnym projektem.

5. Panel zmian

Trudność w przeniesieniu własnej pracy z narzędzia programistycznego przeglądarki do edytora to jeden z tych odwiecznych problemów, do których wszyscy właśnie się przyzwyczailiśmy. Byliśmy podekscytowani stworzeniem prostego i natychmiast użytecznego rozwiązania.

Edge i Chrome DevTools najpierw wyszły z wariantami tego narzędzia. Nasz koncentruje się na wspieraniu szerokiego zakresu przepływów pracy CSS: uruchom DevTools, zmień dowolne style, a następnie wyeksportuj swoje zmiany, kopiując pełny zestaw zmian (do współpracy) lub tylko jedną zmienioną regułę (do wklejenia do kodu).

Poprawia to niezawodność całego przepływu pracy, w tym naszych innych narzędzi do tworzenia układu. A to dopiero początek: wiemy, że przypadkowe odświeżenie i nawigacja ze strony to duże źródło utraty danych, dlatego ważnym kolejnym krokiem będzie zapewnienie trwałości narzędzia.

Wypróbuj panel zmian

1. W przeglądarce Firefox przejdź do dowolnej witryny.
2. Otwórz Inspektora za pomocą Cmd + Shift + C i wybierz element.
3. Wprowadź kilka zmian w CSS:
• Modyfikuj style w panelu Reguły;
• Dostosuj czcionki w panelu Czcionki.
4. W prawym okienku Inspektora przejdź do karty Zmiany i wykonaj następujące czynności:
• Kliknij opcję Kopiuj wszystkie zmiany , a następnie wklej ją w edytorze tekstu, aby wyświetlić dane wyjściowe;
• Najedź kursorem na nazwę selektora i kliknij Kopiuj regułę , a następnie wklej ją, aby wyświetlić wynik.

6. Nieaktywny CSS

Nasza funkcja nieaktywnego CSS rozwiązuje jeden z głównych problemów z naszej ankiety dotyczącej debugowania układu dotyczącej określonych błędów CSS:

„Dlaczego ta właściwość CSS nic nie robi?”

Z punktu widzenia projektowania ta funkcja jest bardzo prosta — wyszarza CSS, który nie ma wpływu na stronę, i pokazuje podpowiedź wyjaśniającą, dlaczego właściwość nie ma wpływu. Wiemy jednak, że może to zwiększyć wydajność i zmniejszyć frustrację. Wzmocniły nas badania przeprowadzone przez Sarah Lim i jej współpracowników, którzy zbudowali podobne narzędzie. W swoich badaniach odkryli, że początkujący programiści byli o 50% szybsi w budowaniu za pomocą CSS, gdy używali narzędzia, które pozwalało im ignorować nieistotny kod.

W pewnym sensie jest to nasz ulubiony rodzaj funkcji: nisko wiszący owoc UX, który ledwo rejestruje się jako funkcja, ale poprawia cały przepływ pracy bez konieczności odkrywania lub uczenia się.

Nieaktywny CSS jest uruchamiany w Firefoksie 70, ale można go teraz używać w przedpremierowych wersjach Firefoksa, w tym Developer Edition, Beta i Nightly.

Wypróbuj nieaktywny CSS

1. Pobierz wersję programistyczną Firefoksa;
2. Otwórz Firefoksa i przejdź do wikipedia.org;
3. Otwórz Inspektora za pomocą Cmd + Shift + C i wybierz środkowy obszar zawartości, zwany central-featured ;
4. Zwróć uwagę na wyszarzoną deklarację vertical-align ;
5. Najedź kursorem na ikonę informacji i kliknij „Dowiedz się więcej”, jeśli Cię to interesuje.

7. Panel dostępności

Po drodze otrzymaliśmy funkcje ułatwień dostępu opracowane przez oddzielny zespół, który składa się głównie z jednej osoby — Yurę Zenevicha, w tym roku ze swoim stażystą Maliha Islam.

Razem przekształcili nowy panel ułatwień dostępu w Firefoksie w potężne narzędzie do inspekcji i audytu. Oprócz wyświetlania drzewa i właściwości ułatwień dostępu, możesz teraz uruchamiać różne rodzaje kontroli na stronie. Jak dotąd weryfikacja obejmuje kontrast kolorów, etykiety tekstowe i styl fokusu klawiatury.

Teraz w Nightly możesz wypróbować nowy symulator ślepoty barw, który wykorzystuje naszą nadchodzącą technologię WebRender.

Wypróbuj panel ułatwień dostępu

1. Pobierz wersję programistyczną Firefoksa;
2. Przejdź do meetup.com;
3. W narzędziach programistycznych przejdź do zakładki Dostępność i kliknij przycisk "Włącz funkcje ułatwień dostępu";
4. Kliknij menu rozwijane obok „Sprawdź problemy” i wybierz „Wszystkie problemy”;
5. Przyjrzyj się różnym problemom z kontrastem, klawiaturą i etykietami tekstowymi, a następnie kliknij łącza „Dowiedz się więcej”, jeśli jesteś zainteresowany.

Następna w górę

Obecnie ciężko pracujemy nad narzędziem do sprawdzania zgodności przeglądarek, które wykorzystuje informacje z MDN do pokazywania problemów związanych z przeglądarką dla wybranego elementu. Możesz śledzić na GitHub, aby dowiedzieć się więcej.

Przyszłość

Zależy nam na wspieraniu nowoczesnej sieci, a to oznacza ciągłe zmiany i rozwój.

Nowe specyfikacje są cały czas wdrażane przez dostawców przeglądarek. Wskazówki i najlepsze praktyki dotyczące progresywnego ulepszania, responsywności i dostępności nieustannie ewoluują. My, twórcy narzędzi, również musimy się rozwijać.

A co z długotrwałymi, stale obecnymi problemami w tworzeniu sieci? Jakie codzienne interfejsy użytkownika należy przemyśleć na nowo? Oto niektóre z pytań, które nas napędzają!

A co z lepszym sposobem poruszania się po drzewie DOM strony? Ta część DevTools pozostała zasadniczo niezmieniona od czasów Firebuga.

Eksperymentowaliśmy z funkcjami, takimi jak przyciski wstecz i do przodu, które ułatwiłyby nawigację między ostatnio odwiedzanymi elementami.

Bardziej radykalną zmianą, o której mówimy, jest dodanie kompaktowego widoku DOM, który używa składni podobnej do silników szablonów HTML. Należy skupić się na najczęstszym przypadku użycia — nawigowaniu do CSS — zamiast na przeglądaniu/edycji źródła.

Zastanawialiśmy się też nad lepszym selektorem elementów. Wiemy, jak bardziej produktywna może być praca wewnątrz strony, przy mniejszym przeskakiwaniu tam iz powrotem do DevTools. Moglibyśmy uczynić selektor elementów potężniejszym i bardziej trwałym. Być może mógłby wybrać białe znaki na stronie i powiedzieć, co powoduje tę przestrzeń, lub rzucić światło na relacje między różnymi elementami.

To tylko dwa z wielu pomysłów, które mamy nadzieję dalej badać z pomocą społeczności.

Potrzebujemy Twojego wkładu!

Chcemy nadal tworzyć niesamowite narzędzia, które ułatwią Ci życie jako programista lub projektant.

Oto prosty sposób na pomoc: Pobierz Firefox Developer Edition i spróbuj użyć go do niektórych prac w przyszłym tygodniu.

Następnie powiedz nam, co myślisz, wypełniając naszą 1-stronicową ankietę.

Zawsze interesują nas pomysły na ulepszenia, szczególnie nisko wiszące owoce, które mogą nas wszystkich uchronić przed regularną frustracją. Wykonujemy naszą pracę na otwartej przestrzeni, więc możesz śledzić i dołączać. Będziemy Cię informować na bieżąco na @FirefoxDevTools.

Dziękuję Patrickowi Brossetowi za jego wkład w ten artykuł.