Publicado em 21 de outubro de 2024
Na semana passada, apresentamos um painel totalmente novo ao DevTools: a assistência por IA pode ajudar você a depurar problemas de estilo com o Gemini diretamente no DevTools.
Quer saber o que ele pode fazer? Confira cinco maneiras incríveis de usar esse novo recurso para estilizar sua página, desde a compreensão de layouts até a correção de aviões.
1. Entender os layouts
Ao criar sites, nem sempre você começa do zero. Muitas vezes, é necessário criar com base em um código que você não conhece e, na pior das hipóteses, ninguém ao seu redor também tem.
Pergunte à IA sobre o layout de um elemento e entenda por que ele é exibido da maneira
que é até o último nó e por que esse overflow: hidden; em um elemento está
presente por um motivo. 👀
Comando para testar
Give me a summary of how this element and its children are laid out and re-create the layout in ASCII.
2. Programação em pares
O CSS ficou muito poderoso. Com tantas possibilidades, é normal se
confundir às vezes: é align-items que eu preciso? Ou justify-items? Ou
justify-self ou align-content?
Às vezes, você realmente sabe o que quer fazer, mas não consegue obter o conjunto certo de propriedades CSS. Na próxima vez que você estiver nessa situação, explique seu problema para a IA e deixe que ela resolva as coisas para você.
A assistência de IA investigará o código existente e o comparará com o que você está tentando alcançar, sugerindo as correções necessárias para analisar, aplicar e copiar para sua base de código.
3. Consultor de acessibilidade
É importante tornar seu site acessível e fácil de usar com tecnologia assistiva. Considere a acessibilidade desde o início do desenvolvimento, não apenas como algo secundário, e procure seguir as Diretrizes de Acessibilidade para Conteúdo Web (WCAG, na sigla em inglês) durante todo o processo de desenvolvimento.
Use a assistência de IA para receber dicas sobre onde um <div> pode ser substituído por um
elemento HTML mais semântico, como um atributo aria-* adicional pode ser útil
ou como o contraste de cores pode ser melhorado.
Comando para tentar
What about color contrast in this element?
4. Personalizar um relatório
As tendências vêm e vão: houve gradientes, sombras e bordas rígidas, seguidos por design plano, que deu lugar à era atual do design com cores de néon brilhantes em segundos planos escuros.
Mas a uniformidade das coisas na Web não é cansativa? Se você estiver com vontade de mudar um pouco, peça para a assistência por IA mudar as coisas e tornar a Web um pouco mais divertida, como em um parque temático!
Comando para tentar
This element looks a little boring. Can you make it look like a pirates theme park ride?
5. Torne-se um mecânico de aeronaves
Explicar problemas de estilo, ajudar a corrigi-los, dar conselhos sobre acessibilidade e mudar estilos existentes: já há muitas coisas que a assistência por IA pode ajudar você, e ainda há mais! Você sabia que a assistência por IA ajuda a consertar aviões? Não é necessário ter experiência anterior. Coloque seu uniforme e coloque a mão na massa no Hangar do Chrome DevTools.
Conte sua experiência no nosso Issue Tracker público.