Yayınlanma tarihi: 21 Ekim 2024
Geçtiğimiz hafta, DevTools'a yepyeni bir panel ekledik: Yapay zeka desteği, Gemini ile doğrudan DevTools'ta stil sorunlarını gidermenize yardımcı olabilir.
Bu özelliğin neler yapabileceğini merak ediyor musunuz? Bu yeni özelliğin, düzenleri anlamaktan uçak düzeltmeye kadar sayfanızı biçimlendirmeyi kolaylaştırabileceği 5 harika yönteme göz atın.
1. Düzenleri anlama
Web sitesi oluştururken her zaman sıfırdan başlamazsınız. Çoğu zaman, hakkında hiçbir bilginiz olmayan mevcut bir kodun üzerine kod yazmanız gerekir. En kötü durumda, etrafınızdaki hiç kimse de bu kod hakkında bilgi sahibi değildir.
Yapay zekaya bir öğenin düzeni hakkında soru sorabilir, öğenin neden son düğüme kadar bu şekilde görüntülendiğini ve öğedeki overflow: hidden; işaretinin neden orada olduğunu anlayabilirsiniz. 👀
Deneyebileceğiniz istemler
Give me a summary of how this element and its children are laid out and re-create the layout in ASCII.
2. Eşli programlama
CSS artık çok güçlü. Bu kadar çok seçenek arasında bazen kafanızın karışması normaldir: align-items seçeneğini mi kullanmam gerekiyor? Veya justify-items? Yoksa justify-self veya align-content?
Bazen ne yapmak istediğinizi gerçekten biliyorsunuzdur ancak doğru CSS özelliklerini kullanamıyorsunuzdur. Bir dahaki sefere bu durumda olduğunuzda sorununuzu yapay zekaya açıklayın ve sizin için çözüm bulmaya bırakın.
Yapay zeka yardımı, mevcut kodunuzu inceleyip ulaşmaya çalıştığınız hedefle karşılaştırır. İncelemeniz, uygulamanız ve kod tabanınıza kopyalamanız gereken gerekli düzeltmeleri önerir.
3. Erişilebilirlik danışmanı
Web sitenizi yardımcı teknolojilerle erişilebilir ve kullanımı kolay hale getirmek önemlidir. Erişilebilirliği, sonradan aklınıza gelen bir şey olarak değil, geliştirmenin başından itibaren göz önünde bulundurun ve geliştirme süreciniz boyunca Web İçeriği Erişilebilirlik Kuralları'na (WCAG) uymayı hedefleyin.
<div> öğesinin daha anlamlı bir HTML öğesiyle nerede değiştirilebileceği, ek bir aria-* özelliğinin nasıl yararlı olabileceği veya renk kontrastının nasıl iyileştirilebileceği hakkında ipuçları almak için yapay zeka yardımını kullanın.
Deneyebileceğiniz istemler
What about color contrast in this element?
4. İstediğiniz gibi düzenleyin
Trendler gelip geçer: Önce degradeler, gölgeler ve sert kenarlıklar vardı, ardından düz tasarım geldi ve koyu arka planlarda parlak neon renklerin kullanıldığı günümüz tasarım çağına geçtik.
Ancak bazen web'de her şeyin tekdüze görünmesi can sıkıcı olmuyor mu? Böyle bir gün geçiriyorsanız yapay zeka asistanından biraz değişiklik yapmasını ve web'i eğlence parkı gibi biraz daha eğlenceli hale getirmesini isteyebilirsiniz.
Deneyebileceğiniz istemler
This element looks a little boring. Can you make it look like a pirates theme park ride?
5. Uçak teknisyeni olmak
Stil sorunlarını açıklama, düzeltme konusunda yardımcı olma, erişilebilirlik konusunda tavsiye verme ve mevcut stilleri değiştirme gibi konularda yapay zeka desteğinden yararlanabilirsiniz. Yapay zeka desteğinin uçakları onarmanıza bile yardımcı olabileceğine inanabiliyor musunuz? Önceden deneyim sahibi olmanız gerekmez. İş önlüğünüzü giyin ve Chrome Geliştirici Araçları Hangarı'nda ellerinizi kirletin.
Herkese açık sorun izleyicimizde kendi deneyiminizi de bizimle paylaşın.