Publié le 21 octobre 2024
La semaine dernière, nous avons lancé un tout nouveau panneau dans DevTools: l'assistance IA peut vous aider à déboguer les problèmes de style avec Gemini directement dans DevTools.
Vous souhaitez en savoir plus sur ses fonctionnalités ? Découvrez cinq façons géniales d'utiliser cette nouvelle fonctionnalité pour styliser plus facilement votre page, de la compréhension des mises en page à la correction des avions.
1. Comprendre les mises en page
Lorsque vous créez des sites Web, vous ne partez pas toujours de zéro. Il arrive souvent que vous deviez vous appuyer sur du code existant dont vous n'avez aucune connaissance préalable, et dans le pire des cas, personne autour de vous n'en a non plus.
Demandez à l'IA pourquoi la mise en page d'un élément est telle qu'elle est, jusqu'au dernier nœud, et pourquoi cet élément overflow: hidden;
est présent pour une raison. 👀
Invite à essayer
Give me a summary of how this element and its children are laid out and re-create the layout in ASCII.
2. Programmation en binôme
Le CSS est devenu vraiment puissant. Avec autant de possibilités, il est normal de se sentir parfois confus: est-ce que j'ai besoin de align-items
? Ou justify-items
? Ou plutôt justify-self
ou align-content
?
Parfois, vous savez exactement ce que vous voulez faire, mais vous ne parvenez pas à trouver le bon ensemble de propriétés CSS. La prochaine fois que vous vous trouverez dans cette situation, expliquez votre problème à l'IA et laissez-la vous aider.
L'assistance IA examine votre code existant et le compare à ce que vous essayez d'accomplir. Elle vous suggère les corrections requises que vous pouvez examiner, appliquer et copier dans votre codebase.
3. Conseiller en accessibilité
Il est important de rendre votre site Web accessible et facile à utiliser avec les technologies d'assistance. Tenez compte de l'accessibilité dès le début du développement, plutôt que de l'ajouter en dernier, et veillez à suivre les Consignes d'accessibilité des contenus Web (WCAG) tout au long de votre processus de développement.
Utilisez l'assistance de l'IA pour obtenir des conseils sur les cas où un élément <div>
peut être remplacé par un élément HTML plus sémantique, sur l'utilité d'un attribut aria-*
supplémentaire ou sur l'amélioration du contraste des couleurs.
Invite à essayer
What about color contrast in this element?
4. Personnaliser votre rapport
Les tendances vont et viennent: il y a eu les dégradés, les ombres et les bordures vives, suivis du design plat, puis de l'ère actuelle du design avec des couleurs néon vives sur des arrière-plans sombres.
Mais n'est-il pas parfois fatigant de voir à quel point les choses peuvent être uniformes sur le Web ? Si vous avez envie de vous amuser, demandez à l'assistance IA de changer les choses et de rendre le Web un peu plus amusant, comme dans un parc d'attractions.
Invite à essayer
This element looks a little boring. Can you make it look like a pirates theme park ride?
5. Devenir mécanicien aéronautique
Expliquer les problèmes de style, vous aider à les résoudre, vous conseiller sur l'accessibilité et modifier les styles existants : l'assistance par IA peut déjà vous aider dans de nombreux domaines, et il y en a encore plus ! Pouvez-vous croire que l'assistance IA peut même vous aider à réparer des avions ? Aucune expérience préalable n'est requise. Enfilez votre combinaison et mettez-vous au travail dans le hangar des outils pour les développeurs Chrome.
N'hésitez pas à nous faire part de votre expérience dans notre outil public de suivi des problèmes.