Data publikacji: 21 października 2024 r.
W zeszłym tygodniu wprowadziliśmy w Narzędziach deweloperskich zupełnie nowy panel: pomoc AI, która może Ci pomóc w rozwiązywaniu problemów ze stylami za pomocą Gemini bezpośrednio w Narzędziach deweloperskich.
Chcesz się dowiedzieć, co potrafi? Poznaj 5 sposobów, w jakie nowa funkcja może ułatwić stylizację strony – od rozumienia układów po poprawianie samolotów.
1. Informacje o układach
Tworząc witryny, nie zawsze zaczynasz od zera. Często trzeba oprzeć się na istniejącym kodzie, którego nie znasz. W najgorszym przypadku nikt wokół Ciebie też go nie zna.
Zapytaj AI o rozmieszczenie elementu i dowiedz się, dlaczego jest on wyświetlany w taki sposób aż do ostatniego węzła – i dlaczego ten element overflow: hidden; jest tam obecny. 👀
Prompt to try
Give me a summary of how this element and its children are laid out and re-create the layout in ASCII.
2. programowanie w parach,
CSS stało się teraz naprawdę potężne. Przy tak wielu możliwościach czasem można się pogubić. Czy to align-items, czego potrzebuję? A może justify-items? A może justify-self lub align-content?
Czasami wiesz, co chcesz zrobić, ale nie możesz ustawić odpowiednich właściwości CSS. Gdy następnym razem znajdziesz się w takiej sytuacji, wyjaśnij problem AI i pozwól jej rozwiązać problem.
Pomoc AI przeanalizuje dotychczasowy kod i porówna go z tym, co próbujesz osiągnąć. Zaproponuje niezbędne poprawki, które możesz sprawdzić, zastosować i skopiować do kodu źródłowego.
3. Doradca ds. ułatwień dostępu
Ważne jest, aby witryna była dostępna i łatwo dostępna dla osób korzystających z technologii wspomagającej. Zadbaj o dostępność już na początku procesu tworzenia, a nie dopiero na końcu. Pamiętaj też o przestrzeganiu wytycznych Web Content Accessibility Guidelines (WCAG) na każdym etapie procesu tworzenia.
Korzystając z pomocy AI, możesz uzyskać wskazówki dotyczące tego, gdzie element <div> można zastąpić bardziej semantycznym elementem HTML, jak może być pomocny dodatkowy atrybut aria-* lub jak można poprawić kontrast kolorów.
Prompt to try
What about color contrast in this element?
4. Dodaj coś od siebie
Trendy przychodzą i odchodzą: były gradienty, cienie i ostre krawędzie, a potem płaski design, aż do dzisiejszej ery designu z jasnymi, neonowymi kolorami na ciemnym tle.
Czy nie jest czasem męczące, że wszystko w internecie wygląda tak samo? Jeśli masz jeden z takich dni, poproś o pomoc asystenta AI, aby urozmaicić sobie internet – tak jak w parku rozrywki.
Prompt to try
This element looks a little boring. Can you make it look like a pirates theme park ride?
5. Zostań mechanikiem statków powietrznych
Wyjaśnianie problemów ze stylami, pomoc w ich rozwiązywaniu, doradzanie w zakresie ułatwień dostępu i zmiana istniejących stylów – to tylko niektóre z zadań, które może wykonywać AI. Czy wiesz, że asystent AI pomaga nawet naprawiać samoloty? Nie wymagamy żadnego wcześniejszego doświadczenia. Załóż kombinezon i zacznij majsterkować w hangarze Narzędzi deweloperskich Chrome.
Podziel się z nami swoimi wrażeniami w naszym publicznym narzędziu do zgłaszania błędów.