Yayınlanma tarihi: 10 Kasım 2026
Temsilci tabanlı web geliştirmenin bu yeni döneminde web geliştiricileri, kodlama ajanlarının web için geliştirme konusunda uzman olmasını bekliyor. En yeni kodlama modelleri oldukça yetenekli ve genellikle çalışan bir kod üretebiliyor. Ancak bir web geliştiricisi yapay zekayla üretilen kodu incelemesini isterseniz neredeyse her zaman kodu daha hızlı, daha erişilebilir veya daha güvenli hale getirmenin yollarını bulabilir.
Chrome, temsilci tabanlı web geliştirmenin geleceğine büyük yatırımlar yapıyor. Bu zorluğun üstesinden gelmek için Mayıs ayında Google I/O'da Modern Web Rehberi'nin erken erişim sürümünü kullanıma sunduk. Modern Web Rehberi; web platformu uzmanlığını, en iyi uygulamaları ve tarayıcı uyumluluğu verilerini doğrudan kodlama temsilcilerinize yerleştiren bir dizi beceridir.
Bugün, Modern Web Rehberi'nin 1.0 sürümünün kararlı sürümünü duyurmaktan heyecan duyuyoruz. Bu sürümde şunlar yer alıyor:
- Temsilcinizin güvenli bir şekilde modernizasyon fırsatları bulmasına yardımcı olmak için mevcut kod tabanınızı tarayan yeni modernizasyon iş akışı.
- Genişletilmiş rehber veritabanı, uzmanlar tarafından onaylanmış, tarayıcılar arası çözümlerle yüzlerce doğrulanmış yapay zeka bilgi boşluğunu hedefliyor.
- İçerik alanındaki teknik liderlerin onayı ve kullanıcılara yönelik kılavuzlarımızda özel bir erişilebilirlik incelemesi de dahil olmak üzere her kılavuz için uzmanlar tarafından daha ayrıntılı inceleme.
- Modern Web Rehberi olmayan temsilcilere kıyasla ölçülebilir iyileştirmeleri gösteren herkese açık bir değerlendirme kontrol paneli ile tüm kılavuzlarımızda tam değerlendirme kapsamı.
1.0 sürümüyle birlikte Modern Web Rehberi'nin tarayıcılar arası bir çalışma haline geldiğini paylaşmaktan heyecan duyuyoruz. Firefox ve Edge, Chrome'a katılarak tarayıcılar arası uyumluluğu destekleyecek, iyileştirecek ve projeye katkıda bulunacak. Baseline ile ortak çalışmamızdan yola çıkarak, temsilciyle kodlama yapan herkesin modern web platformunun gücünden ve özelliklerinden tam olarak yararlanabilmesini sağlamayı amaçlıyoruz.
Kullandığınız modeller veya ajan düzenekleri ne olursa olsun, web için geliştirme yapıyorsanız Modern Web Rehberi, temsilci tabanlı iş akışınızda yer alır.
Modern Web Rehberi'ni yüklemek için proje dizininizden şu komutu çalıştırın:
npx modern-web-guidance@latest install
Daha önceki bir sürümü yüklediyseniz aşağıdaki komutu çalıştırarak 1.0 sürümüne güncelleyebilirsiniz:
npx modern-web-guidance@latest update
Ek yükleme talimatları veya daha fazla bilgi için Modern Web Rehberi belgelerine göz atın veya kısa bir genel bakış için bu videoyu izleyin:
Geliştiriciler ve işletmeler neden Modern Web Rehberi'ni kullanmalı?
Kodlama temsilcilerinin, geliştiricilerin her zamankinden daha hızlı kod yazmasına yardımcı olduğu yadsınamaz bir gerçek. Ancak herkesin kodlama temsilcileri kullandığı bir dünyada hız artık rekabet avantajı sağlamıyor.
Günümüzde, kullanılabilirlik ve deneyim kalitesi gibi temel faktörlerde fark yaratmak her zamankinden daha önemli. Modern Web Rehberi'nin yardımcı olabileceği birkaç yöntem:
Modellerin genellikle gözden kaçırdığı en iyi uygulamaları pekiştirme
Öncü kodlama modelleri birçok en iyi uygulamayı iyi anlasa da değerlendirmelerimiz, bu modellerin hâlâ yetersiz kaldığı bazı önemli alanlar olduğunu gösteriyor. Örneğin:
- Erişilebilirlik: Klavye odağı ve inert yönetimi, azaltılmış hareket desteği ve erişilebilir form doğrulama.
- Kullanıcı deneyimi: Kaydırma ve dokunma hareketleri, iletişim kutusu ve popover geçişleri ve açık/koyu tema uygulamaları.
- Performans: Ana iş parçacığı görev planlaması, ekran dışı oluşturma izolasyonu ve düzen kaymasını önleme.
- Güvenlik: Güvenli HTML temizleme, katı İçerik Güvenliği Politikaları ve geçiş anahtarı kimlik bilgisi yönetimi.
Erişilebilirlikle ilgili en iyi uygulamaları doğru şekilde uygulamak özellikle önemlidir. Çünkü kötü ARIA gibi hatalar, bir sayfayı ARIA'nın hiç kullanılmadığı duruma kıyasla daha az erişilebilir hale getirebilir. 1.0 sürümünde, kullanıcılara yönelik kılavuzlarımız, her gün bu kılavuzlardan yararlanan erişilebilirlik uzmanları tarafından gerçek yardımcı teknolojilerle incelenip test edildi.
İş için en iyi web özelliğini kullanma
Yapay zeka modelleri, JavaScript ile bir şeyin nasıl çalıştırılacağını bulma konusunda çok başarılıdır ancak çoğu durumda aynı şeyi çok daha az kodla yapabilen HTML veya CSS özellikleri vardır. Tarayıcı tarafından işlendikleri için genellikle daha iyi performans gösterirler ve erişilebilirlik olanakları sunarlar. Örneğin:
- Pop-up'ları ve iletişim kutularını canlandırma özellikleri
- Kaydırma ve kaydırma tabanlı etkileşimleri iyileştiren özellikler
- Sorunsuz ve akıcı sayfa geçişleri için daha iyi API'ler
Yeni özellikler, bir sitenin deneyimini kullanıcılar için önemli olan şekillerde de iyileştirebilir. Örneğin:
- Geçiş anahtarları ve WebAuthn: Daha hızlı ve daha güvenli giriş deneyimleri için
- Otomatik doldurma: Özel JavaScript tabanlı form kontrolleri kullanılırken genellikle başarısız olan ödeme adımlarını (özellikle mobil cihazlarda) iyileştirmek için
Modern Web Rehberi, tarayıcı destek gereksinimlerinize göre iş için en iyi özelliği önerecek şekilde tasarlanmıştır. Kılavuzlarında Baseline ve tarayıcı uyumluluğu verileri yerleşik olarak bulunur. Bu sayede önerilerini projenizin ihtiyaçlarına göre uyarlayabilir.
Kod tabanınızı tarayıp modernizasyon fırsatlarını bulma
Web geliştirme çalışmalarının çoğu yepyeni projelerde yapılmaz. Bu durum, yıllar içinde birikmiş eski geçici çözümler, gereksiz bağımlılıklar ve artık ihtiyaç duyulmayan polyfill'ler içeren mevcut kod tabanlarında görülür.
1.0 sürümü, mevcut HTML, CSS, JavaScript ve package.json kodlarınızı analiz ederek güvenli bir şekilde yükseltme fırsatlarını belirleyen ve ardından temsilcinizi değişiklikler konusunda yönlendiren yeni bir modernizasyon iş akışı ekler.
/modern-web-guidance Modernize the code in this directory
Bu ilk sürümde, modernizasyon iş akışı sınırlı sayıda kalıbı kontrol etmek için statik analiz kullanır. Öngörülebilir sonuçlar veren dar bir kapsamla başlayıp daha sonra bu kapsamı genişletmeyi tercih ettik. Zaman içinde, temsilcinizin yalnızca bilinen kalıpları eşleştirmek yerine doğrudan kodunuz hakkında akıl yürüttüğü temsilci denetimleri de dahil olmak üzere daha birçok alanı kapsama almayı planlıyoruz.
Web platformu geliştikçe güncel kalın
Web platformu sürekli değişen bir hedeftir. Her yeni sürümde tarayıcılara yeni özellikler eklenir ve daha önce kullanamadığınız mevcut özellikler her yeni tarayıcı sürümüyle Baseline'a eklenir.
Modern Web Rehberi, Baseline uyumluluk verileri üzerine inşa edildiğinden ve önerileri tarayıcı mühendisleri, web standartları uzmanları ve erişilebilirlik uzmanları tarafından yönetildiğinden bu öneriler platformla birlikte gelişir ve artık projeniz de gelişebilir.
Yeni web özellikleri ve en iyi uygulamalar hakkında bilgi edinin
Modern Web Rehberi öncelikle temsilciler için bir araç olarak geliştirilmiş olsa da birçok geliştirici, bu rehberin tek başına bir öğrenme kaynağı olarak oldukça yararlı olduğunu belirtti.
Temsilci tabanlı kodlama çağında bile alan uzmanlığı kazanmak hâlâ değerlidir. Modern Web Rehberi, rehberleri okuyarak veya kullanım alanlarını aramak ve projenizle alakalı olabilecek yeni teknikleri keşfetmek için CLI'yi kullanarak bunu yapmanıza yardımcı olabilir.
Modern Web Rehberi'ni temsilciler için Chrome Geliştirici Araçları ile eşleme
Temsilci tabanlı web geliştirmede kod yazmak, iş akışının yalnızca bir parçasıdır. Ayrıca, beklendiği gibi çalıştığından emin olmak için bu kodu çalıştırmanız gerekir. Bu nedenle, geliştiricilerin Modern Web Rehberi'ni temsilciler için Chrome Geliştirici Araçları ile birlikte kullanmasını öneririz.
- Modern Web Rehberi, temsilcinize modern en iyi uygulamalara uygun kod yazmak için gereken uzmanlığı önceden sağlar.
- Ajanlar için Chrome Geliştirici Araçları, temsilcinize çalışma zamanı görünürlüğü sağlar. Böylece temsilciniz, bu kodu çok çeşitli cihaz özellikleri, kullanıcı tercihleri ve ağ koşullarında doğrulayabilir, hatalarını ayıklayabilir ve optimize edebilir.
Bunlar, temsilcinizin daha az adımda daha iyi bir çözüme ulaşmasına yardımcı olur. Aşağıda, bu araçları birlikte kullanarak verimliliği nasıl en üst düzeye çıkarabileceğinize dair birkaç örnek verilmiştir:
Performans hedefinize ulaşana kadar optimizasyon yapın.
Modern Web Rehberi, temsilcinize ana iş parçacığını engelleyen uzun süreli JavaScript görevlerini etkili bir şekilde nasıl böleceğini öğretebilir ancak bu JavaScript görevlerinin ana iş parçacığını gerçekte ne kadar süreyle engellediğini görmek için kodunuzu test edemez.
Ajanlar için Chrome Geliştirici Araçları ile simüle edilmiş düşük kaliteli bir CPU'da performans izleme işlemi yaparak sorun olup olmadığını görebilirsiniz. Ardından, kodunuz ana iş parçacığını 50 milisaniyeden uzun süre engellemeyene kadar (böylece kötü INP'ye katkıda bulunmaz) yineleme yapmak için Modern Web Rehberi'ndeki performans önerilerini kullanabilirsiniz.
Animasyonlarınızı test etme ve hassaslaştırma
Modern Web Rehberi, temsilcinize kalıcı iletişim kutuları, ipuçları ve popover menüleri gibi özellikleri doğru ve performanslı bir şekilde nasıl canlandıracağını gösterebilir. Ancak bu rehberliğe rağmen, animasyonların uygulamanızın tamamında kullanıldığında gerçekten çalıştığını ve iyi göründüğünü doğrulamanız gerekir.
Ajanlar için Chrome Geliştirici Araçları, kodunuzu çalıştırabilir, sayfayla etkileşime geçebilir ve animasyonun ekran kaydedicisini alabilir. Ardından, animasyonun hem çalıştığından hem de sitenin geri kalanının tarzına ve havasına uyduğundan emin olmak için kaydı inceleyebilir.
prefers-reduced-motion ayarlandığında bileşenin kullanıcının tercihlerine uyduğunu doğrulamak için ajanlar için Chrome Geliştirici Araçları'nı da kullanabilirsiniz.
Bellek sızıntısı olmadan görünümleri önbelleğe alma
Modern Web Rehberi, temsilcinize görünümleri bellekte oluşturup önbelleğe alarak SPA geçişlerinin anında gerçekleşmesini sağlamayı ve aynı zamanda bunları erişilebilirlik ağacından düzgün bir şekilde gizlemeyi öğretebilir.
Ancak bunu yaparken, kullanıcı sayfada uzun süre kalırsa bellek sızıntısı olmaması için kullanılmayan görünümleri düzgün bir şekilde temizlediğinizden emin olmanız önemlidir. Ajanlar için Chrome Geliştirici Araçları'nda bellek hata ayıklama araçları bulunur. Böylece temsilciniz, bellek kullanımının sınırsız bir şekilde artmadığından emin olabilir.
Modern Web Rehberi ve ajanlar için Chrome Geliştirici Araçları'nı birlikte nasıl kullanacağınızı daha yakından incelemek için bu videoyu izleyin:
Başarı öyküleri
Dünyanın dört bir yanındaki mühendislik ekipleri, kod kalitesini artırmak, teslimatı hızlandırmak ve manuel hata ayıklama darboğazlarını ortadan kaldırmak için Modern Web Rehberi ve ajanlar için Chrome Geliştirici Araçları'nı kullanıyor:
Pensionbazaar ve Policybazaar
Hindistan merkezli finansal teknoloji şirketi Paisabazaar tarafından kullanıma sunulan yeni emeklilik planlama platformu Pensionbazaar, yeni sayfalar oluşturup doğrulamak için Modern Web Rehberi'ni temsilciler için Chrome Geliştirici Araçları ile eşleştirdi. Bu sayede, geri dönüş süresini %90'dan fazla (yaklaşık dört günden birkaç saate) ve yeni ekranlardaki kullanıcı arayüzü hatalarını %90'dan fazla azalttı. 97 milyondan fazla kayıtlı müşterisiyle Hindistan'ın önde gelen sigorta platformlarından biri olan kardeş platformu Policybazaar, yaklaşık 30 yüksek trafikli açılış sayfasında performans denetimlerini otomatikleştirmek için ajanlar için Chrome Geliştirici Araçları'nı kullanarak manuel denetim çabasını %92 oranında azalttı:
"Pensionbazaar için önceliğimiz, daha sonra teknik borçtan kaçınmak için ilk günden itibaren kaliteli kod oluşturmaktı. Modern Web Rehberi, kodlama temsilcimizi modern web standartlarını ve performansla ilgili en iyi uygulamaları benimsemeye yönlendirirken belirli tarayıcı uyumluluğu hedeflerimizi de göz önünde bulundurdu. Bu sayede ön uç kod incelemelerimiz önemli ölçüde kolaylaştı ve hızlandı. Sonuç olarak geliştirme sürecimiz kısaldı."
—Aman Soni, Mühendislik Müdürü, Policybazaar
WeTV
Tencent'in uluslararası video akış platformu WeTV, CI/CD ardışık düzenine bir yapay zeka kodlama aracısı ekledi. Bu aracı, performans düşüşlerini teşhis etmek için aracılar için Chrome Geliştirici Araçları'nı, bunları modern web platformu özelliklerini kullanarak düzeltmek için ise Modern Web Rehberi'ni kullanıyor. Temsilci artık başarısız performans kontrollerinin %90'ını otomatik olarak teşhis edip çözüyor. Böylece hata ayıklama ve çözüm süresini %87 oranında azaltıyor (manuel değerlendirme dahil dört saatten 30 dakikaya):
"Hem hız hem de kalite açısından çok etkili sonuçlar elde ettik. Ajanlar için Chrome Geliştirici Araçları ve Modern Web Rehberi'nin sağladığı teşhis analizleri, karmaşık düzen sorunlarını düzeltmek için güvenilir referanslar sağladı. Her düzeltmeden sonra sıkı bir doğrulama süreci uyguluyoruz. Mevcut başarı oranı ve kararlılık, sürüm güvenimizi önemli ölçüde artırdı."
—Yangjie Zheng, Mühendislik Müdürü, WeTV (Tencent)
note inc.
Aylık 90 milyondan fazla etkin kullanıcısıyla Japonya'nın en büyük içerik üretici ve medya platformlarından biri olan note inc., Next.js ön ucunu modernize etmeye yönelik devam eden çalışmalar kapsamında Modern Web Rehberi'ni kendi tasarım sistemiyle birlikte kullandı. Modern Web Rehberi, üretim kod tabanında 180 çalıştırmalık bir değerlendirme boyunca temsilcileri kaydırma animasyonları, ipuçları ve akordeonlar için özel JavaScript yerine yerel HTML ve CSS özelliklerini kullanmaya yönlendirerek modern web kontrollerindeki geçiş oranlarını %61'den %94'e yükseltti. Ayrıca, 431 birleştirilmiş PR'de LCP resimlerinin doğru şekilde önceliklendirilmesini %28 artırdı:
"note olarak misyonumuz 'Başla ve Üretmeye Devam Et' olduğundan platformumuzun her içerik üretici ve okuyucu için hızlı ve erişilebilir olması gerekiyor. Kodlarımızın daha büyük bir kısmı yapay zeka kodlama temsilcileriyle yazıldıkça Modern Web Rehberi, bu temsilcilerin eski JavaScript kalıplarına geri dönmek yerine modern, standartlara dayalı çözümlere ulaşmasına yardımcı olur. Ayrıca, resim yükleme önceliği ve form erişilebilirliği gibi kolayca gözden kaçabilecek ayrıntılara da dikkat çeker. Tasarım sistemimizle birleştirildiğinde, kullanıcı arayüzümüzün tutarlılığını korurken notları iyileştirmeye devam etmemizi sağlıyor."
Takehiko Itabashi, Teknoloji Başkan Yardımcısı, note inc.
MetaMask
Yaklaşık 190 ülkede 100 milyondan fazla indirme sayısına sahip, emanetçi olmayan bir finansal platform olan MetaMask, açık kaynaklı tarayıcı uzantısına yönelik her pull isteğinde Modern Web Rehberi'ni otomatik inceleme botu olarak çalıştırıyor. Bu bot, yalnızca üç satırlık bir istemle yapılandırılıyor. Bot, ilk beş haftasında yaklaşık 480 pull isteğini inceledi ve 64'üne yorum yaptı. Bu sayede mühendisler, yorumdan düzeltmeye kadar geçen ortalama 15 dakikalık bir sürede 43 bulguyu (çoğunlukla linter'ların yakalayamadığı erişilebilirlik, HTML semantiği ve form sorunları) düzeltti:
"Yorumlar çok faydalı. Bu sayede, ilgi alanı tetikleyiciler ve Popover API gibi modern API'leri keşfedip mühendislerimizin bu API'leri öğrenmesini sağladık. PR inceleme sürelerini artırmadı, aksine muhtemelen azalttı. MWG'nin tespit ettiği sorunlar, aksi takdirde bu modern web tekniklerini bilen bir inceleme uzmanı gerektirirdi."
—Francis Nepomuceno, UX Mühendisi, MetaMask
Ekosistem ve topluluk desteği
Modern Web Rehberi, Chrome bünyesinde bir girişim olarak başladı ancak 1.0 sürümüne ulaşmak, web topluluğundaki çok sayıda uzmanın ortak çalışmasıyla mümkün oldu.
Her bir web platformu alanını denetleyen içerik alanı teknik liderlerine, Firefox ve Edge'deki tarayıcı iş ortaklarımıza, kılavuzları yazıp test eden bağımsız web standartları ve erişilebilirlik uzmanlarına ve bu sürümün şekillenmesine yardımcı olan GitHub'daki tüm açık kaynak katkıda bulunanlara teşekkür ederiz.
Kodlama temsilcilerinin web hakkında bildikleriyle ilgili bir eksiklik fark ederseniz veya mevcut bir kılavuzun iyileştirilmesine yardımcı olmak isterseniz katkı kılavuzuna göz atarak katkıda bulunabilirsiniz.
Modern Web Rehberi'ni kullanmaya başlama
Modern Web Rehberi'ni projenize eklemek için proje dizininizden CLI yükleyicisini çalıştırın:
npx modern-web-guidance@latest install
Daha önceki bir sürümü yüklediyseniz aşağıdaki komutu çalıştırarak 1.0 sürümüne güncelleyebilirsiniz:
npx modern-web-guidance@latest update
Modern Web Rehberi'ni KSA'nın yanı sıra Claude Code, Codex, İmleç, Antigravity, Copilot, WebStorm, Kimi Code ve Grok Build gibi en popüler kodlama ajan eklentisi pazar yerlerinden doğrudan yükleyip güncelleyebilirsiniz.
Daha fazla bilgi için şu kaynaklara göz atın: