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 pomóc Ci 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 błędó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 – oraz dlaczego ten element overflow: hidden; jest tam widoczny. 👀
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 par
Usługi porównywania cen zyskały już ogromną popularność. Jest tak wiele możliwości, że można się czasem pomylić.
Czyżby to align-items było mi potrzebne? A może justify-items? A może justify-self lub align-content?
Czasem naprawdę wiesz, co chcesz zrobić, ale nie masz odpowiedniego zestawu 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 sprawdzi istniejący 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
Zadbaj o to, by Twoja witryna była dostępna i łatwa w obsłudze dzięki technologii wspomagających osoby z niepełnosprawnością. Zadbaj o dostępność już na początku procesu tworzenia, a nie dopiero na końcu. Pamiętaj też, aby w trakcie całego procesu tworzenia stosować wytyczne dotyczące dostępności treści internetowych (WCAG).
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ż wreszcie nadszedł czas na współczesny design 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 stylem, pomoc w ich rozwiązywaniu, doradztwo w zakresie ułatwień dostępu i zmiana dotychczasowych stylów – jest już wiele, w czym może Ci pomóc AI, a nie tylko. Czy wiesz, że asystent AI pomaga nawet naprawiać samoloty? Nie wymagamy żadnego wcześniejszego doświadczenia. Zakładaj 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.