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. Kodlama temsilcilerinizi eski kalıplardan uzaklaştırıp modern web platformunun gücünden ve özelliklerinden yararlanan çözümlere yönlendirmenize yardımcı olur.
Kurulum
Modern Web Rehberi, becerileri destekleyen tüm kodlama temsilcileriyle yüklenip kullanılabilir.
modern-web-guidance CLI (önerilir)
Önerilen yükleme yöntemi, Chrome ekibi tarafından oluşturulan modern-web-guidance KSA'yı kullanmaktır. Modern Web Rehberi'ni modern-web-guidance CLI üzerinden yüklediğinizde otomatik güncellemeler etkinleştirilir. modern-web-guidance KSA'dan şu şekilde yükleyebilirsiniz:
npx modern-web-guidance@latest install
İsteğe bağlı olarak, Chrome uzantıları geliştiriyorsanız aşağıdaki komutu kullanmanızı öneririz:
npx modern-web-guidance@latest install --choose
Bu komut, becerileri tercihlerinize göre yüklemek için etkileşimli bir sihirbaz çalıştırır.
Modern Web Rehberi'ni modern-web-guidance CLI'yı kullanmadan yüklemek istiyorsanız aşağıdaki temsilciye özel talimatları inceleyin. Bu seçeneklerin çoğunun otomatik güncellemeleri desteklemediğini unutmayın.
Antigravity
Antigravity'yi indirin ve yükleme akışı sırasında veya Ayarlar sayfanızdaki Özelleştirmeler'in altındaki Build with Google Eklentileri'nden "modern-web-guidance"ı etkinleştirin.
Antigravity CLI
agy plugin install https://github.com/GoogleChrome/modern-web-guidance
Gemini CLI
gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update
JetBrains WebStorm
Modern Web Rehberi'ni Ayarlar > Yapay Zeka Asistanı > Beceriler bölümündeki Beceri Yöneticisi'nde bulabilirsiniz. Bir beceri seçerek ayrıntılar sayfasını açın. Beceriyi yüklemek için Install (Yükle) düğmesini tıklayarak mevcut IDE örneğine uygulayın.
GitHub CLI
gh skill install GoogleChrome/modern-web-guidance
npx skills
npx skills add GoogleChrome/modern-web-guidance
Claude Code
claude plugin install modern-web-guidance@claude-plugins-official
Claude Code CLI
Claude Code CLI ile kullanmak üzere Modern Web Rehberi'ni yüklemek için üç adım gerekir:
1. Pazar yerini ekleyin:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Eklentiyi Marketplace'ten yükleyin:
/plugin install modern-web-guidance@googlechrome
3. Eklentileri yeniden yükleme:
/reload-plugins
Codex
codex plugin marketplace add GoogleChrome/modern-web-guidance
codex plugin add modern-web-guidance@googlechrome
Copilot CLI
Modern Web Rehberi'ni Copilot ile kullanmak için iki adımda yükleyebilirsiniz:
1. Pazar yerini ekleyin:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. Eklentiyi Marketplace'ten yükleyin:
/plugin install modern-web-guidance@googlechrome
Kaz
goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update
Grok
grok plugin install https://github.com/GoogleChrome/modern-web-guidance --trust
Kimi Code
/plugins install https://github.com/GoogleChrome/modern-web-guidance
Yüklemeden önce keşfedin
Yüklemeden önce Modern Web Rehberi kitaplığını değerlendirmek için sorguyla arama yapın veya rehberlerimizi kimliğe göre alın. Bunun için CLI'nin search komutunu kullanarak bir istemle kullanım alanı kimliğini bulun:
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
Bu işlem, terminalinizde bir JSON nesnesi oluşturur:
[{"id":"light-dismiss-a-dialog","description":"Create a modal dialog that can be closed via light dismiss (i.e. clicking or tapping outside of the dialog)","category":"ui-behaviors","featuresUsed":["<dialog closedby>"],"tokenCount":1085,"similarity":0.7076},
{"id":"animate-to-from-top-layer","description":"Animate elements such as dialogs, popovers, and tooltips as they're entering/exiting the top layer.","category":"ui-behaviors","featuresUsed":["::backdrop","<dialog>","overlay","Popover","@starting-style","transition-behavior"],"tokenCount":1541,"similarity":0.6842},
{"id":"declarative-dialog-popover-control","description":"Toggle the visibility of a dialog or popover from a button without writing JavaScript.","category":"ui-behaviors","featuresUsed":["Invoker commands","Popover","<dialog>"],"tokenCount":2684,"similarity":0.5685},
{"id":"html","description":"Action-oriented guidelines for modern HTML architecture, semantics, native interactive APIs (Dialog, Popover, Details), focus management, and resource prioritization. Use this guide when structuring web documents, implementing native overlays, or optimizing resource loading order.","category":"html","tokenCount":5484,"similarity":0.5471},
{"id":"accessibility","description":"Actionable coding guidelines for building accessible web applications, covering semantic HTML, focus management, forms, media, and testing. Use this skill when auditing or implementing accessibility features, keyboard navigation, or ARIA.","category":"accessibility","tokenCount":7129,"similarity":0.5102}]
description değerlerini okuyarak hedefinizi en iyi yansıtan id değerini seçebilir ve retrieve komutunu kullanabilirsiniz:
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
Bu durumda, terminalde animate-to-from-top-layer kullanım alanı için Markdown kılavuzu gösterilir. Diğer kılavuzlar için animate-to-from-top-layer yerine geçerli bir kılavuz kimliği girin.
Modern Web Rehberi'ni neden kullanmalısınız?
Modern Web Rehberi, üç farklı nedenden dolayı web geliştiricilerine desteklenmeyen yapay zeka modellerine kıyasla avantaj sağlar:
- Yapay zeka kodlama temsilcileri, modern web geliştirme sorunları için genellikle eski ve güncelliğini yitirmiş çözümleri kullanır. Bu çözümler genellikle, modern CSS ve HTML API'leri tarafından daha iyi çözülen sorunlara işlevsellik sağlamak için JavaScript içerir.
- Yapay zeka modelleri, geçmişte en yeni web platformu özelliklerinden haberdar değildi veya bu özellikler hakkında yanlış bilgilere sahipti.
- Son olarak, yapay zeka modelleri, belirli bir projenin Baseline gereksinimlerine göre uyarlanmış rehberlik sunmak yerine, proje gereksinimlerini veya tarayıcı destek ölçütlerini dikkate almayan güncel olmayan önerilerde bulunma eğilimindedir.
Modern Web Rehberi bu eksiklikleri giderir ve yapay zeka destekli kodlama iş akışınızın, daha yeni web platformu özelliklerini ilk olarak ve yedekleri göz önünde bulundurarak benimseyecek araçlara sahip olmasını sağlar.
Modern Web Rehberi'nde neler var?
Modern Web Rehberi, çeşitli temel disiplinlerde 100'den fazla web geliştirme kullanım alanıyla ilgili en iyi uygulamaları içerir. Arka planda, kodlama temsilcinize kullanım alanınız için en iyi rehberliği bulup almak üzere modern-web-guidance CLI'yı nasıl çağıracağını bildiren bir temsilci becerisidir.
- Kullanıcı deneyimi: Görüntüleme geçişleri, CSS
scrollbar-colorstili ve giriş ve çıkış animasyonları. - CSS: Kapsayıcı sorguları,
oklchgibi modern renk uzayları, CSS alt ızgara düzeni,text-wrapve tipografi satır yüksekliği kırpma. - Performans: Interaction to Next Paint (INP) teşhisi, uzun süren görevleri bölmek için
scheduler.yield, arka plan görev planlaması ve resim yükleme önceliklendirmesi. - Formlar: Otomatik boyutlandırılan giriş alanları (
field-sizing: content) ve:user-invalidile doğru doğrulama stilleri. - Yerleşik kullanıcı arayüzü bileşenleri: İletişim kutuları üzerinde doğrudan kontrol, ipuçları için CSS Anchor Positioning ve
popover. - Erişilebilirlik: Erişilebilir hata duyuruları ve klavye odağı yönetimi.
- Yerleşik yapay zeka: Yerel, cihaz üzerinde istemci modellerini (yerel Language Detection, Summarization ve Translation API'leri) kullanın.
- Geçiş anahtarları: Geçiş anahtarı kaydı, kimlik doğrulama ve yönetimi.
Bunlar, her kategorideki rehberlerden birkaçıdır. Tüm rehberleri görmek için rehberlerin tam listesini görüntüleyebilirsiniz.
Referans
Baseline, geliştiricilere hangi web özelliklerinin büyük tarayıcı motorlarında birlikte çalışabileceği konusunda netlik sağlar. Bir web özelliği Baseline ise tarayıcı uyumluluğu düzeyine güvenebilirsiniz. Web özellikleri, Baseline tarafından tanımlanan üç kategoriden birine girer:
- Sınırlı kullanılabilirlik, özelliğin birlikte çalışabilir olmadığı anlamına gelir.
- Yeni kullanılabilir, özelliğin son 30 ay içinde birlikte çalışabilir hale geldiği anlamına gelir.
- Yaygın olarak kullanılabilir, özelliğin en az 30 ay veya daha uzun süredir birlikte çalışabilir olduğu anlamına gelir.
Baseline, web özelliklerinin birlikte çalışabilirliğini tanımlayan bir kavram olsa da projenizin yapılandırılabilir bir yönüdür. Bir Baseline hedefi seçebilir, ardından projenizi AGENTS.md veya CLAUDE.md dosyanıza ekleyerek bu hedefi kullanacak şekilde yapılandırabilirsiniz. Örneğin:
This project's Baseline target is Baseline 2024.
<other project info...>
Modern Web Rehberi ve özellik yedekleri
Modern Web Rehberi, çok çeşitli modern web özelliklerini kullanır. Bunlardan bazıları Baseline Newly veya Widely available, bazıları ise sınırlı sayıda olabilir. Bir özelliğin yaygın olarak kullanılamadığı durumlarda kullanım alanı kılavuzları, temsilcilere özelliği desteklemeyen tarayıcılarda daha geniş uyumluluk sağlamayla ilgili özel talimatlar verir. Çoğu durumda yedekler, modern özelliğin desteklendiği her yerde kullanılabildiği progresif geliştirmeler olarak uygulanır. Desteklenmeyen tarayıcılar için polyfill'ler gerekiyorsa temsilcilere her zaman bunları koşullu olarak yüklemeleri talimatı verilir. Böylece yalnızca gerektiğinde maliyet oluşur.
Doğruluk nasıl sağlanır?
Modern Web Rehberi'ndeki her kullanım alanı, kaliteli sonuçlar elde etmek için sürekli olarak kalibre edilen bir dizi değerlendirme içerir.
Kullanım alanı değerlendirmeleri, doğru temsilci davranışını test etmek için otomatik bir kalite güvencesi donanımı çalıştırır. Bu süreçte Playwright önemli bir rol oynar:
- Her kılavuz için, kılavuzun uygulama ayrıntılarına uyulup uyulmadığını (örneğin, gerekli olduğu durumlarda
@media (prefers-reduced-motion: reduce)öğesinin gözlemlenip gözlemlenmediğini) test etmek amacıyla bir Playwright komut dosyası geliştirilir. - Bu Playwright komut dosyaları, %100 geçiş oranı bekleyen "doğru" bir referans demo uygulamasına göre sürekli olarak kalibre edilir. Diğer tarafta ise komut dosyaları, %0 geçiş oranı bekleyen, kasıtlı olarak kusurlu bir uygulamayı kontrol eder.
- "Doğru" ve kasıtlı olarak kusurlu uygulamalardan biri veya her ikisi sırasıyla% 100 ve% 0 geçme oranları üretemezse bir oluşturucu, %100 kalibrasyon elde edilene kadar bağlamı kullanarak otomatik olarak yeniden dener.
- Son olarak, temel bir uygulama üzerinde uçtan uca değerlendirmeler yapılır. Bu değerlendirmelerden biri, kontrol amaçlı olarak rehbersizdir. Bir görevi tamamlamak için Modern Web Rehberi'ni çağırmadan varsayılan eğitim verilerini kullanır. Başka bir değerlendirme (deneme) ise Modern Web Rehberi'ni kullanarak aynı görevi ele alır.
Değerlendirmelerimiz, son teknoloji modeller ve kodlama temsilcileriyle haftada birkaç kez çalıştırılır. Bu sayede, temsilcilerin rehberliğimizle ve rehberliğimiz olmadan ne kadar iyi performans gösterdiğini net bir şekilde görebiliriz. İlk sonuçlara göre, temsilciler Modern Web Rehberi'ni kullandığında modern en iyi uygulamalara uyumda ortalama %37'lik bir artış görülüyor. Ancak sonuçlarınız; proje gereksinimlerinize, modelinize, yazdığınız istemlere ve tercih ettiğiniz temsilci tabanlı kodlama araçlarına bağlı olarak değişiklik gösterebilir.
Sonraki adımlar
Artık Modern Web Rehberi hakkında genel bir bilgiye sahipsiniz ve yapay zeka kodlama iş akışınızda modern web ile ilgili en iyi uygulamaları benimsemenizi kolaylaştırma potansiyelini biliyorsunuz. Artık Modern Web Rehberi tarafından sağlanan rehberleri inceleyebilirsiniz.