Publié le 21 octobre 2024
La semaine dernière, nous avons lancé un tout nouveau panneau dans les outils de développement: l'assistance basée sur l'IA peut vous aider à déboguer les problèmes de style avec Gemini directement dans les outils de développement.
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 un site 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 examinera votre code existant et le comparera à ce que vous essayez d'obtenir, en vous suggérant les correctifs nécessaires à examiner, à appliquer et à copier dans votre codebase.
3. Conseiller en accessibilité
Il est important de rendre votre site Web accessible et facile à utiliser grâce aux technologies d'assistance. Tenez compte de l'accessibilité dès le début du développement, et non en tant que réflexion après coup. Veillez à suivre les Consignes d'accessibilité des contenus Web (WCAG) tout au long de votre processus de développement.
Utilisez l'assistance IA pour savoir où remplacer un <div> par un élément HTML plus sémantique, comment un attribut aria-* supplémentaire peut être utile ou comment améliorer le contraste des couleurs.
Invite à essayer
What about color contrast in this element?
4. À vous de choisir
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 faites partie de ces moments pour vous, demandez l'aide de l'IA pour changer les choses et rendre le Web un peu plus amusant, par exemple 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, aider à les résoudre, fournir des conseils sur l'accessibilité et modifier les styles existants : l'assistance IA peut déjà vous aider dans de nombreux domaines, et ce n'est pas tout ! 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'oubliez pas de nous faire part de votre expérience dans notre Issue Tracker public !