Yayınlanma tarihi: 13 Kasım 2026
Bu sitenin düzenli bir okuyucusuysanız, X, LinkedIn veya Bluesky'da Geliştiriciler için Chrome'u takip ediyorsanız ya da bu hafta Geliştirici Araçları'nda Yenilikler panelini açtıysanız bu haberi kesinlikle duymuşsunuzdur. Ancak yoğun bir şekilde çalışan herkes için Modern Web Rehberi artık kararlı 1.0 sürümü olarak kullanıma sunuldu.
Google I/O'da erken erişim sürümünü paylaştığımızdan beri birçok iyileştirme yaptık ve Modern Web Rehberi'ni Firefox ve Edge ile tarayıcılar arası bir işbirliğine dönüştürdük. Bu hafta makaleler, örnek olaylar, videolar ve dokümanlar aracılığıyla bu konuları ele aldık.
Kısaca
Öncü modeller, web geliştirme için genellikle eski kalıpları varsayılan olarak kullanır. Örneğin, CSS kaydırmaya dayalı animasyonlar yerine JavaScript animasyon kitaplığını tercih ederler veya özelleştirilebilir açılır listeler için appearance: base-select kullanmak yerine karmaşık iç içe yerleştirilmiş div canavarlar oluştururlar.
Modern Web Rehberi, isteminize göre kısa ve görev kapsamlı kılavuzlar ekleyerek bu sorunu çözer. 1.0 sürümünün getirdiği yenilikler:
- Uzmanlar tarafından incelenmiş daha fazla kılavuz: Performans, stil, erişilebilirlik, güvenlik, gizlilik, formlar ve daha fazlasını kapsar. Her beceri, teknik alan uzmanı tarafından incelenip test edildi. Becerilere rehber kataloğundan göz atabilirsiniz.
- Varsayılan olarak tarayıcılar arası: Mozilla Firefox, Microsoft Edge ve Google Chrome'u geliştiren ekiplerin ortak çalışması. Her kılavuz, Baseline uyumluluk verileri ve yedeklerle geliştirilmiştir.
- Herkese açık değerlendirme paketi: Herkese açık değerlendirme kontrol panelinde incelenebilen binlerce değerlendirme çalıştırması, geçme oranlarındaki artışları vurgular.
Çözdüğü yapay zeka bilgi eksiklikleriyle ilgili somut örnekler, temsilciler için Chrome Geliştirici Araçları ile uçtan uca iş akışları ve I/O önizlemesinden güncelleme talimatları için Modern Web Rehberi 1.0 duyuru yayınını okuyun.
Sadece bizim sözümüze güvenmeyin
Modern Web Rehberi'nin ortak geliştiricileri olarak elbette biraz taraflı yaklaşıyoruz. İş ortaklarımızın, Chrome'un yapay zeka destekli kodlama araçlarının tamamını günlük iş akışlarında test ettikten sonra bu araçlar hakkındaki düşüncelerine göz atın:
- Policybazaar ve Pensionbazaar: Oluşturma ve doğrulama döngüsünü kapatarak yeni sayfa teslim süresini ve kullanıcı arayüzü hatalarını %90'ın üzerinde azalttı. Policybazaar ise yaklaşık 30 açılış sayfasında manuel Core Web Vitals denetim çalışmalarını %92 azalttı.
- MetaMask: Yaklaşık 480 pull isteğinde üç satırlık danışmanlık PR inceleme botuna Modern Web Rehberi'ni entegre ederek 15 dakikalık ortalama geri dönüş süresiyle 43 erişilebilirlik ve semantik HTML düzeltmesi sağladı.
- WeTV: Yinelenen CLS gerilemelerinin %90'ını otomatik olarak teşhis edip düzeltmek için CI/CD'ye temsilciler için Chrome Geliştirici Araçları ve Modern Web Rehberi'ni ekleyerek hata ayıklama süresini %87 azalttı.
- note inc.: Modern Web Rehberi'ni dahili tasarım sisteminin kurallarıyla birleştirerek modern web kontrolü geçme oranlarını %61'den %94'e çıkardı ve uygun LCP resim önceliklendirmesini %28 artırdı.
Başlayın
Temsilcinizden Modern Web Rehberi'ni yüklemesini istediğinizde şansınız yaver gidebilir ancak projenizi ve temsilcinizi adım adım ayarlamak için aşağıdaki npx komutunu kullanabilirsiniz.
npx modern-web-guidance@latest install
GitHub'da alternatif yükleme seçeneklerini de inceleyebilirsiniz.
Kurulumu tamamladıktan sonra yeni kullanım alanlarını ve Modern Web Rehberi 1.0'ın arka planda nasıl çalıştığını ayrıntılı olarak inceleyebilirsiniz:
- Mevcut kod tabanlarını modernize etme:
npx modern-web-guidance@latest legacy-scan, gürültülü kayıplar olmadan teknik borçları ödemek için hızlı yerel söz dizimi kontrollerini bağlamsal temsilci incelemesiyle nasıl eşleştirir? - Kod üretiminin ötesinde: Sürekli geliştirici öğrenimi: Yapay zeka ajanlarıyla kodlama yaparken modern HTML, CSS ve Web API özelliklerini takip etmek için Modern Web Rehberi'ni etkileşimli bir öğrenme ve keşif aracı olarak nasıl kullanacağınızı öğrenin.
- Varsayılan olarak tarayıcılar arası: Baseline yedekleri nasıl çalışır?:
Kılavuzlar, progresif geliştirmeyi,
@supportssorgularını ve polyfill'leri tarayıcı hedeflerinizle eşleştirmek için canlı web-features verilerini nasıl kullanır? - Yapay zekanın web geliştirmede yanlış yaptığı en önemli 10 şey: En yeni öncü modellerin bile modern web kontrollerimizin yaklaşık yarısında başarısız olduğu 10 yaygın erişilebilirlik, kullanıcı deneyimi, performans ve güvenlik açığını keşfedin.
- Kodlama temsilcileri için yerel vektör arama: 507 MB'tan 7 satırlık bir döngüye: Modern Web Rehberi'nin, temsilcinizin bağlam penceresini doldurmadan 200'den fazla kılavuz içeren bilgi tabanından alakalı kılavuzları milisaniyeler içinde nasıl aldığını öğrenin.
Chrome ile temsilci tabanlı web geliştirmenin geleceği
Kodlama temsilcinizle Modern Web Rehberi'ni kullanarak harika bir başlangıç yapabilirsiniz. Ancak daha da ileri gidebilirsiniz (ve gitmelisiniz). Temsilcinizin bu kodu gerçek bir tarayıcıda çalıştırması, incelemesi ve doğrulaması gerekir.
Ajanlar için Chrome Geliştirici Araçları, bir yılı aşkın süredir kodlama ajanlarına canlı çalışma zamanı görünürlüğü sağlıyor. Bu araçlar, erişilebilirlik ve performans denetiminden bellek hata ayıklamaya ve animasyon kaydetmeye kadar geniş bir yelpazede yer alıyor. Böylece ajanınız bu araçları hassas bir şekilde ayarlayabiliyor.
Önümüzdeki haftalarda, temsilciler için Chrome Geliştirici Araçları'nın bir sonraki dönüm noktasını kutlayacağız. Chrome'dan temsilcinize doğru bağlamı aktarmak artık daha da kolay olacak.
Modern Web Rehberi 1.0'ı deneyin ve ne düşündüğünüzü bize bildirin. Hem Modern Web Rehberi hem de Ajanlar için Chrome Geliştirici Araçları, GitHub'da açık kaynaklı olarak geliştirilmiştir. Temsilcinizin hâlâ yanlış yaptığı bir web platformu görevi fark ederseniz veya bir sonraki adımda ne yapmamız gerektiğiyle ilgili bir fikriniz varsa sorun bildirerek bize iletin.