Опубликовано: 21 октября 2024 г.
На прошлой неделе мы представили совершенно новую панель в DevTools: помощь искусственного интеллекта может помочь вам отладить проблемы со стилем в Gemini непосредственно в DevTools.
Интересно посмотреть, на что он способен? Ознакомьтесь с этими 5 замечательными способами, с помощью которых эта новая функция может упростить стилизацию вашей страницы — от понимания макетов до ремонта самолетов .
1. Понимание макетов
Создавая веб-сайты, вы не всегда начинаете с нуля. Достаточно часто вам приходится создавать код поверх существующего кода, о котором у вас нет предварительных знаний, а в худшем случае — ни у кого из окружающих.
Спросите ИИ о макете элемента и поймите, почему он отображается именно так, вплоть до последнего узла, и почему это overflow: hidden; на элементе на самом деле существует по какой-то причине. 👀
Подскажите попробовать
Give me a summary of how this element and its children are laid out and re-create the layout in ASCII.
2. Парное программирование
CSS к настоящему времени действительно стал мощным. При таком большом количестве возможностей иногда можно запутаться: нужен ли мне align-items ? Или justify-items ? Или, скорее, justify-self или align-content ?
Иногда вы действительно знаете, что хотите сделать, но просто не можете получить правильный набор свойств CSS. В следующий раз, когда вы окажетесь в такой ситуации, объясните свою проблему ИИ, и пусть он разберется за вас.
Помощь ИИ исследует ваш существующий код и сравнит его с тем, чего вы пытаетесь достичь, предложив необходимые исправления для просмотра, применения и копирования в вашу кодовую базу.
3. Советник по доступности
Важно сделать ваш веб-сайт доступным и простым в использовании с помощью вспомогательных технологий. Рассматривайте доступность с самого начала разработки, а не второстепенную мысль, и старайтесь следовать Руководству по обеспечению доступности веб-контента (WCAG) на протяжении всего процесса разработки.
Используйте помощь ИИ , чтобы получить советы о том, где <div> можно заменить более семантическим элементом HTML, чем может быть полезен дополнительный атрибут aria-* или как можно улучшить цветовой контраст.
Подскажите попробовать
What about color contrast in this element?
4. Сделайте это своим
Тенденции приходят и уходят: были градиенты, тени и резкие границы, за ними последовал плоский дизайн, переходящий в современную эпоху дизайна с яркими неоновыми цветами на темном фоне.
Но разве иногда не утомляет то, как однообразные вещи могут выглядеть в сети? Если для вас это один из таких дней, возможно, попросите помощи искусственного интеллекта, чтобы изменить ситуацию и снова сделать Интернет немного веселее - как во время поездки в тематический парк!
Подскажите попробовать
This element looks a little boring. Can you make it look like a pirates theme park ride?
5. Стать авиамехаником
Объяснение проблем со стилем, помощь в их устранении, консультации по доступности и изменению существующих стилей — уже есть множество возможностей, с помощью которых вам может помочь искусственный интеллект, — и это даже больше! Можете ли вы поверить, что помощь ИИ даже помогает чинить самолеты? Никакого предыдущего опыта не требуется, наденьте комбинезон и испачкайте руки в ангаре Chrome DevTools !
И обязательно сообщите нам о своем собственном опыте в нашем трекере общественных проблем !