Yayınlanma tarihi: 21 Ekim 2024
Geçtiğimiz hafta, Geliştirici Araçları'na yepyeni bir panel ekledik: Yapay zeka desteği, Gemini ile doğrudan Geliştirici Araçları'nda stil sorunlarını gidermenize yardımcı olabilir.
Özelliğin neler yapabileceğini merak mı ediyorsunuz? Bu yeni özelliğin, sayfa düzenini anlamaktan uçakları tamir etmeye kadar sayfanızın stilini daha kolay hale getirebileceği şu 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. Genellikle, daha önce hiçbir şeye aşina olmadığınız mevcut kodun üzerine geliştirme yapmanız gerekir. En kötü durumda da çevrenizde hiç kimse bu kodu bilmez.
Yapay zekaya bir öğenin düzeni hakkında soru sorun, neden son düğüme kadar gösterildiği şekilde gösterildiğini ve bir öğedeki overflow: hidden; öğesinin neden gerçekten bir nedeni olduğunu öğrenin. 👀
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 olasılık varken bazen kafam karışabilir.
İhtiyacım olan şey align-items mi? 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 daha böyle bir durumla karşılaştığınızda, sorununuzu yapay zekaya açıklayın ve sizin için bir şeyler belirlemesine izin verin.
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ı
Yardımcı teknolojilerden yararlanarak web sitenizi erişilebilir ve kolay kullanılabilir hale getirmek çok ö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 Yönergeleri'ni (WCAG) uygulamayı hedefleyin.
<div> öğesinin nerede daha semantik bir HTML öğesiyle değiştirilebileceği, ilave 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 AI 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.
Deneme istemi
This element looks a little boring. Can you make it look like a pirates theme park ride?
5. Uçak tamircisi 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? Önceki deneyim gerekmez. İş önlüğünüzü giyin ve Chrome Geliştirici Araçları Hangarı'nda ellerinizi kirletin.
Herkese açık sorun izleyicimizde kendi deneyiminiz hakkında bilgi vermeyi unutmayın.