Modern Web Rehberi kılavuzları

Yüksek kontrastlı arayüzleri tercih eden kullanıcılar için kaydırma çubuğu görünürlüğünü artırma

HTML içeriğine WebGL gölgelendiricileriyle özel görsel efektler uygulayın.

Kontrast gereksinimleri, açık ve koyu renk şemaları, zorunlu renk modu ve temel bir renkten tonlar ve gölgeler oluşturma dahil olmak üzere web için renk kılavuzu.

Daha etkileyici tasarımlar için öğeleri ve içeriklerini sembol, fırça darbesi veya organik doku gibi herhangi bir serbest biçimli şekle kırpın.

Alt çizgi, üst çizgi, üstü çizili veya tamamen özel şekiller gibi metin süslemeleri ekleyin. Bu süslemeleri, animasyonlar, özel ofsetler ve bitiş iç dolguları ve esnek mürekkep atlama ile özelleştirin.

Kaydırma çubuğunun rengini veya kalınlığını özelleştirme

Koyu mod desteğini, kullanıcının açık/koyu tema tercihine saygı duyacak ve tarayıcı kullanıcı arayüzünü (ör. kaydırma çubukları, form kontrolleri vb.) uyarlayacak şekilde uygulayın.

Etkileşimli HTML öğelerini 3D sahneye entegre etme

Dinamik arka plan rengi üzerinde yeterli kontrasta sahip, okunabilir bir metin rengi seçin.

Poster stili veya yığın başlık tipografisinde olduğu gibi, çok satırlı bir başlığın veya logonun her satırının aynı genişlikte olmasını sağlayın. İki yana yaslanmış metnin aksine, metnin kendisi genişliğe göre boyutlandırılır ve boşluklar genişletilmez.

Dinamik HTML içeriğini tuvalden resim veya video karesi olarak yakalayıp dışa aktarın.

Tuvalde oluşturulan içeriği yardımcı teknolojiler, çeviri veya okuma modu gibi tarayıcı özelliklerine sunun.

Tarayıcının, metni sarmalarken dengeli satır sonları uygulamasını sağlayarak birkaç satırdan uzun olmayan başlıklar gibi kısa ve bağımsız metin içeriklerinin düzenini ve okunabilirliğini iyileştirin.

Herhangi bir yazı tipindeki metinle dikey hizalamayı hassas bir şekilde yapın. Örneğin, metnin üstünde ve altında tam olarak eşit görsel dolgu veya metni bitişik simgeler ya da resimlerle mükemmel şekilde hizalama.

Birden fazla şekli birleştirerek karmaşık kesimler veya öğelerde "oyma" efektleri (ör. bir öğeye çentik ekleme) oluşturun.

Kaydırılabilir diğer alanları belirtmek veya ödeme duvarlı metni gizlemek için içerik kenarlarına şeffaflık geçişi uygulayın.

Tarayıcı tarafından oluşturulan kullanıcı arayüzünü (ör. metin seçimi, kaydırma çubukları, form kontrolleri ve seçiciler) özel öğelerle yeniden oluşturmak yerine CSS ile temalandırın.

Yazı tipi boyutlandırma birimleri, satır yüksekliği, metin kaydırma ve dengeleme ile görüntü alanına göre ölçeklenen akıcı yazı tipi dahil olmak üzere web için tipografiyle ilgili en iyi uygulamalar.

Katmanlı gölgeler, karışım modları, tahmin edilebilir renk interpolasyonuna sahip gradyanlar ve yalnızca gradyanlardan oluşturulan çizgiler, dama tahtaları, noktalar ve pasta grafikler gibi desenler gibi CSS ile görsel efektler.

Yazı tipi stillerini, tercih edilen yazı tipi ile yedeklerden biri arasında geçiş yapıldığında (veya tam tersi) metnin okunabilir ve görsel olarak tutarlı kalacağı şekilde tanımlayın.

Yazı tipi stillerini, tek bir metin bloğunu oluşturmak için birden fazla yazı tipinin kullanıldığı durumlarda metnin okunabilir ve görsel olarak tutarlı kalacağı şekilde tanımlayın.

Öğelere organik, eski veya fiziksel malzeme görünümü vermek için gerçekçi yıpranma ve doku desenleri uygulayın.

Kaydırma ilerleme çubuğu, adımlı ilerleme izleyici veya kullanıcının bir sayfa ya da bölümün ne kadarını kaydırdığını gösteren herhangi bir görsel olanak oluşturun.

Resimler veya diğer görsel öğeler içeren slaytlardan oluşan bir bant oluşturun. Her slayt, kaydırıcısına girerken/ortalanırken/çıkarken animasyonlu olarak gösterilir. Örneğin, slaytlar yavaşça görünebilir/kaybolabilir, dönebilir, büyüyebilir veya küçülebilir.

Sayfanın renk şemasından bağımsız olarak belirli öğeleri (ör.kod blokları, medya oynatıcılar vb.) açık modda veya koyu modda olmaya zorlayın.

Öğe yedek konuma geçtiğinde otomatik olarak doğru yönü gösteren yön okları (veya diğer görsel stiller) içeren ipuçları ve popover'lar oluşturun.

Kullanıcının ekranı aşağı çekerek arama çubuğu gibi daha fazla içeriği görmesini sağlayan bir "çekerek gösterme" özelliği oluşturun.

Tablo şeklinde verileri uygun başlık semantiğiyle sunan ve küçük ekranlarda ve yardımcı teknolojilerle okunabilir ve gezinilebilir durumda kalan bir veri tablosu oluşturun.

Kullanıcının sayfayı kaydırıp kaydırmadığına bağlı olarak görünen ve kaybolan kayan düğmeler veya widget'lar (başa dön, alta kaydır, sohbet başlatıcılar vb.) oluşturun.

Yalnızca ilgili yönde kaydırılacak daha fazla içerik olduğunda görünen kaydırma gölgesi yer paylaşımları, gradyan geçişleri veya yön oku göstergeleri oluşturun.

Sabit bir başlığı veya tam sayfa kapağı kaydırarak sorunsuz bir şekilde canlandırın. Böylece, önceden tanımlanmış bir kaydırma mesafesi boyunca dinamik olarak küçülür, gölge kazanır ve düzenini dönüştürür.

Üst kısma "sabitlendiğinde" görsel olarak dönüşen, renk şemasını değiştiren veya gölge kazanan yapışkan bölüm başlıkları ya da gezinme çubukları oluşturun.

CSS'den ayarlanabilen ve parametreleştirilebilen, hızlı yüklenen, her çözünürlükte net olan ve yardımcı teknolojilere uygun şekilde gösterilen (veya gizlenen) simgeleri görüntüleyin ve yönetin.

Açılır listeleri, açılır menüleri veya bağlamsal işlem panellerini bir tetikleyici düğmeye bağlı olacak şekilde konumlandırın. Böylece, görüntü alanının kenarlarında kırpılmak yerine eksenleri otomatik olarak ters çevrilir.

Sunumunu kendi kullanılabilir alanına ve içeriğine uyarlayan bir kart bileşeni oluşturun.

İç içe yerleştirilmiş alt menüleri destekleyen, seçenek veya işlem listesi gösteren bir menü bileşeni oluşturun.

Gezinme menüsünde bir sayfanın o anda görünen bölümünü vurgulama

Hem belirli hem de belirsiz durumlarda bir görevin veya sürecin tamamlandığını bildiren, stilli bir ilerleme çubuğu oluşturun.

Belirli bir bağlantı türünün (ör. kullanıcı profili) üzerine gelindiğinde yönlendirileceği sayfanın etkileşimli ve yapılandırılmış bir önizlemesini gösteren bir bilgi kutucuğu bileşeni oluşturun.

Kullanıcı etkileşimi sırasında açık kalan bağlı yerel yer paylaşımlarını kullanarak kalıcı ilk katılım adım adım açıklamaları oluşturun.

Kalıcı, yığınlanabilir mesajlaşma ve durum iletişimi için rahatsız edici olmayan toast ve yer paylaşımlı bildirimler oluşturun.

Kullanıcıların mevcut site için sistem renk şeması tercihini geçersiz kılmasına olanak tanıyan bir koyu mod açma/kapatma bileşeni oluşturun.

Erişilebilir, odağı uygun şekilde yöneten ve her platformda kullanıcıların beklediği şekilde kapatılabilen kalıcı veya kalıcı olmayan bir iletişim kutusu bileşeni oluşturun.

Meşgul durumunu tüm kullanıcılara ileten, azaltılmış hareket tercihlerine uyan ve verimli bir şekilde animasyon uygulayan bir yükleme çarkı oluşturun.

Bir menü düğmesinden tetiklendiğinde mevcut sayfa içeriğinin üzerine gelecek şekilde yandan kayarak açılan ve kapatıldığında (kaydırarak, dışına dokunarak veya Esc tuşuna basarak) kayarak kapanan bir gezinme çekmecesi bileşeni oluşturun.

Bir görevin veya sürecin tamamlanma durumunu görsel olarak temsil eden, ortadaki içeriği destekleyen ve markayla tutarlı bir stile sahip bir ilerleme halkası bileşeni oluşturun.

Kullanıcıların iç içe yerleştirilmiş görünümlere girmesine ve kaydırarak veya geri giderek geri dönmesine olanak tanıyan tam ekran hiyerarşik gezinme oluşturun. Tarayıcı geçmişi senkronize edilir.

Özel simgeler, düzen, renkler, işaretleme/işareti kaldırma animasyonları dahil olmak üzere onay kutularını, yerel işlevleri ve erişilebilirliği koruyarak stillendirin.

Kullanıcı sayfayı kaydırırken öğeler kaydırma alanına (veya görüntü alanına) girip çıkarken öğeler üzerinde belirme, büyütme veya diğer karmaşık gösterme türü efektler oluşturun.

Bir öğeyi iki hedef öğe konumu arasında sorunsuz bir şekilde geçirin. Örneğin, seçili sekme alt çizgisini daha önce seçilen sekme ile şu anda seçili sekme arasında taşımak.

DOM'ye eklenen/kaldırılan veya görüntüleme değerleri değiştirilen öğeleri sorunsuz bir şekilde gizleyin/gösterin.

Üst katmana girerken/çıkarken iletişim kutuları, popover'lar ve ipuçları gibi öğelere animasyon ekleyin.

Kayan bir öğeyi sayfada hareket ettirmek için sürükleme desteği sunun.

Ön plan ve arka plan katmanlarının farklı hızlarda hareket ettiği, kullanıcı sayfayı kaydırdıkça derinlik hissi yaratan kaydırmaya dayalı efektler (ör. paralaks) oluşturun.

Kaydırarak tutturma özellikli bantlarda, galerilerde veya tam sayfa kaydırma deneyimlerinde, o anda tutturulmuş etkileşimli olmayan öğeyi görsel olarak vurgulayın. Örneğin, bir kartı tutturulduğunda genişletme veya gizli içeriği gösterme.

Belgeler arası görünüm geçişi başlatmadan önce kritik sayfa durumunun yüklendiğinden ve kararlı olduğundan emin olun. Bu, kritik CSS stillerinin yüklenip uygulandığı, kritik JavaScript'in yüklenip çalıştırıldığı ve kullanıcının sayfanın ilk görünümünde görebileceği HTML'nin geçiş çalıştırılmadan önce ayrıştırıldığı anlamına gelir.

Animasyon veya geçiş zamanlamasını kardeş öğeler arasında kademelendirin. Böylece her biri, kardeş listesindeki konumuna göre hesaplanan bir gecikmeden sonra başlar.

Tam sayfa gezinmeler arasında yumuşak ve sorunsuz geçişler (ör. çapraz geçişler, özel gösterim efektleri veya bir sayfadan diğerine içerik geçişi) oluşturun.

Bildirim temelli düğme komutları, çağırıcı komutları, düğme komutları, özel komutlar veya bildirim temelli açma/kapatma işlemlerini kullanarak uygulamaya özel işlemleri tetiklemek için bir düğmeyi herhangi bir öğeye bildirim temelli olarak bağlayın.

JavaScript yazmadan bir düğmeden iletişim kutusunun veya popover'ın görünürlüğünü açıp kapatın.

Kullanıcının gezinme akışının yönünü yansıtacak şekilde görsel durum değişikliklerini animasyonlu hale getirin. Örneğin, ileri giderken yeni içeriği sağdan, önceki ekrana dönerken soldan kaydırın.

Benzer öğelerden oluşan bir grubu aynı geçiş mantığını kullanarak aynı anda geçirin. Örneğin, bir ürünü alışveriş sepetinden kaldırın ve diğer tüm ürünlerin yeni konumlarına animasyonla geçmesini sağlayın.

Bir sayfada arama sonuçları, yazım hataları veya ortak düzenleme imleçleri gibi rastgele metin aralıklarını vurgulayın.

Kullanıcının işaretçisini takip ederek bir resim veya kullanıcı arayüzü bölümündeki ayrıntıları ortaya çıkaran spot ışığı gibi etkileşimli efektler oluşturun.

Kullanıcı ilgi gösterdiğinde (ör. fareyle üzerine gelme, odaklanma veya uzun basma) ancak tıklamadan önce düğmenin etkisinin canlı önizlemesini gösterin.

Hafif kapatma (ör.iletişim kutusunun dışına tıklayarak veya dokunarak) yoluyla kapatılabilen kalıcı bir iletişim kutusu oluşturun.

CSS geçişleri, animasyonlar, kaydırmaya dayalı animasyonlar ve görünüm geçişleriyle kullanıcı arayüzüne animasyon ekleyin. Bu sırada birleştiricide hareketi koruyun ve azaltılmış hareket tercihlerine uyun.

Etkileşim durumları (:focus/:active), <iframe> yükleme durumu, animasyon/geçiş durumu gibi önemli öğe durumlarını kaybetmeden bir DOM öğesini taşıyın veya yeniden üst öğe olarak ayarlayın.

Temel DOM düğümü DOM'da taşındığında veya yeniden üst öğe olarak atandığında kalıcı iletişim kutusunu, tam ekran öğesini ya da yerel popover'ı görünür şekilde açık ve işlevsel olarak etkin tutun.

Geleneksel yumuşatma eğrilerinden daha doğal ve ilgi çekici olan, sıçrama ve yaylanma gibi özel, fizik tabanlı animasyon ve geçiş efektleri oluşturun.

Masaüstü platformlarda Esc tuşuna basma veya mobil platformlarda "geri" ya da "kapat" hareketi gibi platforma özgü standart kullanıcı işlemleriyle kapatılabilen kalıcı bir iletişim kutusu oluşturun.

Kalıcı iletişim kutusu açıkken alttaki sayfanın kaydırılmasını engelleme

Tek sayfalık uygulamalarda (SPA) farklı sayfa durumları veya gezinmeler arasında kalıcı öğeleri görsel olarak bağlayın (ör.bir ürün küçük resmini tam sayfa hero resme genişletme). Bunu yapmak için öğelerin boyutunu, konumunu veya diğer stil özelliklerini sorunsuz bir şekilde dönüştürün.

Sayfanın geri kalanı etkileşimli kalırken ve diğer geçişler eşzamanlı olarak çalışırken tek bir bileşendeki (kart, liste, panel veya diğer alt ağaç) durum değişikliklerini canlandırın.

Kullanıcı, kaydırma hareketini tamamlamadan önce, kaydırma hizalı içerikte gezinirken bağlantılı kullanıcı arayüzü öğelerinde gerçek zamanlı görsel geri bildirim sağlar.

Gezinme göstergelerini, bağlantılı içerik panellerini ve analiz takibini kaydırılabilir bir kapsayıcıdaki etkin şekilde tutturulmuş öğeyle senkronize edin.

Tamamen farklı bir öğenin kaydırma alanı konumuna göre yönlendirilen bir hedef öğedeki görsel özellikleri (ör. arka planı soldurma, arka plan rengini değiştirme veya kaydırma deneyimleri oluşturma) canlandırın.

Akordiyonlar, sekmeler ve "Daha fazla bilgi" bölümleri gibi kalıpları kullanarak içeriği görünümden gizleyin. Aynı zamanda gizli metnin yerel "Sayfada bul" aramaları sırasında görünmesini sağlayın, arama motoru dizine eklemesine izin verin, URL parçası derin bağlantılarını destekleyin ve ARIA erişilebilirliğini koruyun.

İlk oluşturma sırasında belirli bir öğe kaydırılarak görüntülenebilen, kaydırılabilir bir öğe listesi (ör. resimlerden oluşan bir bant veya sohbet görüşmesi dizisi) oluşturun.

Kullanıcı, tıklama yapmadan etkileşimli bir öğenin üzerine geldiğinde, öğeye odaklandığında veya öğeye uzun bastığında ipucu ya da ek bilgiler gösterin.

Farklı düzen modlarında (ızgara vb.) doğru şekilde çalışan ok tuşlarını kullanarak erişilebilir yönlü gezinme özelliğini uygulayın.

Kullanıcıların yatay kaydırma hareketiyle listedeki öğeler üzerinde işlem yapmasına (kaldırma, arşivleme, okundu olarak işaretleme vb.) izin verin. Böylece, ayrı bir denetime dokunmadan girişleri hızlıca işleyebilirler.

Kullanıcıların, bir liste öğesi veya içerik bölmesi üzerinde yatay olarak kaydırarak bağlamsal işlem düğmelerini veya yan menüyü otomatik olarak bir işlem tetiklemeden görüntülemesine olanak tanıyın.

Görsel efektleri, animasyonları veya odak değişikliklerini yalnızca hedef öğeye sorunsuz bir programatik kaydırma işlemi tamamlandıktan sonra tetikleyin.

Kullanıcıların, hareket tek bir yatay veya dikey eksene kilitlenmeden iki boyutlu yüzeyleri (ör. haritalar, yakınlaştırılmış resimler, sonsuz tuvaller veya büyük veri tabloları) her iki yönde (çapraz olarak veya hareketin ortasında yön değiştirerek) serbestçe kaydırmasına izin verin.

Açılır listesi animasyonlu olan özel bir seçim bileşeni oluşturun. Örneğin, menü yavaşça belirir veya kayarak görünür ya da seçenekler seçildiğinde animasyon oynatılır.

Onay kutularını, radyo düğmelerini, aralık kaydırıcılarını ve ilerleme çubuklarını özel bileşenlerle değiştirmeden sitenizin renk paletine uygun hale getirin.

Doğal işlevselliği ve erişilebilirliği korurken özel iz, kaydırma çubuğu, dolgu ve odaklanmış durumlarla doğal bir aralık kaydırıcısını stillendirin.

Düğmesi, seçicisi, ok simgesi ve onay işareti markanızın veya tasarım sisteminizin tipografisi, renkleri, boşlukları ve kenarlık işlemleriyle sorunsuz bir şekilde eşleşen özel seçim öğeleri oluşturun.

Doğru otomatik tamamlama değerleri ve otomatik doldurma desteğiyle kart bilgilerini toplayan bir ödeme formu oluşturun.

Doğru otomatik tamamlama değerleri ve otomatik doldurma desteği içeren bir oturum açma formu oluşturun.

Doğru otomatik tamamlama değerleri ve otomatik doldurma desteği içeren bir kayıt formu oluşturun.

Yerel HTML anahtar özelliğiyle erişilebilir bir anahtar oluşturun ve desteklenmediğinde stilize edilmiş bir onay kutusuna geri dönün.

Doğru otomatik tamamlama özellikleri ve otomatik doldurma desteği içeren bir adres formu oluşturun.

Seçenekleri geleneksel dikey liste yerine benzersiz veya ilgi çekici şekillerde konumlandırılmış özel seçim seçiciler oluşturun.

Form alanlarının, kullanıcı girişine uyacak şekilde (ör. kullanıcı farklı bir seçenek yazdığında veya seçtiğinde) büyüyüp küçülmesine izin verin. Sayfa tasarımına uygun dinamik ve duyarlı form alanları oluşturmak için maksimum ve minimum boyut sınırları uygulayın.

Erişilebilir, güvenli ve kullanıcı dostu web formları oluşturmayla ilgili en iyi uygulamalar. Form, giriş ve gönderim akışları oluştururken veya değiştirirken bu kılavuzdan yararlanın.

Tarayıcı tarafından otomatik olarak doldurulan ve kullanıcı tarafından düzenlenmeyen form alanlarını vurgulamak için CSS kullanın.

IME (Giriş Yöntemi Düzenleyici) kullanıcılarının eksik metin göndermesini önlemek için metin alanlarında ve tek satırlık girişlerde (sohbet, arama, satır içi yeniden adlandırma) Enter tuşuna basarak gönderme özelliğini güvenli bir şekilde uygulayın.

Atlanan veya boş bırakılan zorunlu form alanları için hata mesajını yalnızca kullanıcı etkileşiminden sonra gösterin. Böylece erken hataları önleyebilir ve geri bildirimin zamanında ve kullanıcının akışıyla bağlamsal olarak alakalı olmasını sağlayabilirsiniz.

Seçenekleri yalnızca düz metin yerine karmaşık HTML biçimlendirmesi (ör. resimler, simgeler ve diğer zengin biçimlendirmeler) içerebilen özel bir seçim bileşeni oluşturun.

Yalnızca kullanıcı kontrolle etkileşime geçtikten sonra seçim menüsünde varsayılan olmayan bir seçeneğin belirlendiğini doğrulayın.

Otomatik kod ayıklama ve erişilebilir form girişi ile SMS üzerinden gönderilen kullanıcı telefon numaralarını ve tek kullanımlık şifre kodlarını doğrulayın.

Form alanı doğrulama geri bildirimini (ör.şifre karmaşıklığı veya e-posta biçimi koşulları) yalnızca kullanıcı ilk etkileşimini tamamladıktan sonra gösterin. Böylece, sayfa yüklenirken veya kullanıcı yazarken erken hatalar gösterilmesini önleyebilirsiniz.

ElementInternals ARIA mixin aracılığıyla rolleri ve ARIA durumunu ayarlayarak, delegatesFocus ile odağı yöneterek ve ARIA ilişkilerini tek bir gölge kökünde tutarak özel öğeleri varsayılan olarak erişilebilir hale getirin.

Otonom özel öğelerin yaşam döngüsünü tanımlama, kaydetme ve yönetme. Bu kapsamda yapıcı kuralları, yaşam döngüsü geri çağırma yöntemleri, yükseltme zamanlaması, özellik/özellik yansıması ve adlandırma kuralları ele alınır.

formAssociated ve ElementInternals ile formlara yerel olarak katılan, kendi değerini gönderen, kısıtlama doğrulamasıyla entegre olan ve sıfırlama, devre dışı bırakma ve durum geri yükleme işlemlerine tepki veren özel bir kontrol oluşturun.

Modern HTML mimarisi, semantik, yerel etkileşimli API'ler (Dialog, Popover, Details), odak yönetimi ve kaynak önceliklendirme için eyleme yönelik yönergeler. Web dokümanlarını yapılandırırken, yerel yer paylaşımları uygularken veya kaynak yükleme sırasını optimize ederken bu kılavuzdan yararlanabilirsiniz.

Özel bir öğeyi sunucuda oluşturun, ardından yeniden oluşturmadan veya stil uygulanmamış içerik flaşı olmadan yerinde canlandırın.

Shadow DOM ile bir bileşenin DOM'unu ve stillerini kapsülleyin, HTML şablonlarıyla ağacı verimli bir şekilde oluşturun ve tüketici içeriğini slotlarla yansıtın.

Gölge sınırında :host seçiciler, tema oluşturma için devralınan ve özel özellikler, ::slotted ve ::part, bileşenlerin içindeki basamaklı katmanlar ve kapsayıcı sorguları ile stil oluşturun.

Özel öğeler, gölge DOM, şablonlar ve yuvalar, bildirimsel gölge DOM, gölge sınırında stil oluşturma, formla ilişkili özel öğeler ve erişilebilirlik koşullarını kapsayan, web bileşenleri oluşturma ve kullanmaya yönelik oryantasyon ve kesişen ilkeler. Yeniden kullanılabilir kullanıcı arayüzü bileşenleri, tasarım sistemleri veya sunucu tarafından oluşturulan özel öğeler oluştururken bu kılavuzu kullanın.

Etkileşimli bileşenleri (akordeonlar, menüler ve genişleyen kartlar gibi) doğal boyutlarına ve boyutlarından sorunsuz bir şekilde animasyonlu hale getirin.

Bir öğenin boyutunu, kendi boyutuna göre hesaplarken belirli tasarım kısıtlamalarına uymasını sağlayın.

Stilini alt öğelerinden birinin durumuna göre değiştiren bir bileşen oluşturun. Örneğin, bir tema açma/kapatma düğmesinin işaretli olup olmamasına bağlı olarak açık veya koyu modda oluşturulan bir bileşen.

Belirli CSS kurallarını veya bildirimlerini yalnızca tarayıcı tarafından belirli bir @ kuralı destekleniyorsa koşullu olarak uygulayın.

Belirli alt öğeleri içerip içermediğine bağlı olarak düzenini değiştiren bir bileşen oluşturun. Örneğin, bileşen bir resim içeriyorsa çok sütunlu düzen kullanın, aksi takdirde varsayılan olarak tek sütunlu düzeni kullanın.

Flexbox, grid, subgrid, container queries, anchor positioning ve intrinsic sizing gibi modern CSS düzenleri. Bu beceriyi, duyarlı kullanıcı arayüzü bileşenleri veya sayfa düzenleri tasarlarken kullanın.

Basamak, seçiciler, kapsam, iç içe yerleştirme ve tasarım jetonları dahil olmak üzere modern CSS mimarisi için eyleme dayalı yönergeler. Stil oluştururken veya tasarım sistemlerini yönetirken bu kılavuzdan yararlanabilirsiniz.

Yoğunluk modları (kompakt, rahat, geniş) veya temalar gibi daha yüksek düzey tasarım jetonları tanımlayın ve alt bileşenlerin değişikliklere doğrudan ve bileşene uygun şekilde tepki vermesini sağlayın.

Yazı tipi boyutu, boşluk ve medya boyutları gibi öğeleri, sabit kesme noktaları kullanmak yerine üst kapsayıcının boyutuna göre sorunsuz bir şekilde ölçeklendirin.

Tek bir öğedeki diğer dönüştürme özelliklerinden bağımsız olarak ayrı CSS dönüştürme özelliklerini (ör. çevirme, döndürme, ölçeklendirme) canlandırın veya geçersiz kılın.

Bir öğenin görünür kırpma sınırını içerik kenarı, dolgu kenarı veya kenarlık kenarı ya da bunlardan herhangi birinden belirtilen bir ofset ile hizalanacak şekilde ayarlayarak içeriğin nasıl kırpılacağı üzerinde daha ayrıntılı kontrol sağlar.

Karmaşık veya dinamik stil mantığını yeniden kullanılabilir işlevlere (ör. bir dizi giriş parametresine göre gradyan hesaplayan bir işlev) kapsülleyerek aşırı stil tekrarını azaltın.

Kapsayıcı sorguları, dinamik görüntü alanı birimleri, en-boy oranları ve duyarlı tipografi dahil olmak üzere kapsayıcı ve görüntü alanı boyutuna uyum sağlayan kullanıcı arayüzü oluşturun.

Tekrarı en aza indirirken seçicilerin ve koşullu @ kurallarının kesişimine veya birleşimine göre öğeleri hedefleyin.

CSS kapsayıcı stil sorgularını kullanarak görsel mantığı anlamsal bağlama göre uyarlayan bileşenler oluşturun.

Stilleri, görüntü alanının genişliği veya yüksekliği yerine kendi genişliğine ya da yüksekliğine koşullu olarak bağlı olabilen bir bileşen oluşturun. Örneğin, boyutuna göre düzenini değiştirebilen bir kart bileşeni veya genişliğine göre koşullu olarak yardımcı metin gösterebilen bir harekete geçirici mesaj düğmesi.

Alan geçersiz olduğunda form alanının üst öğelerini (ör. etiketler veya alan kümeleri) stillendirin.

Bir gruptaki öğe sayısına otomatik olarak uyum sağlayan dinamik görsel spektrumlar veya düzenler oluşturun.

Temporal.Duration ve Intl.DurationFormat'ı kullanarak tarihler ve saatler arasındaki geçen veya kalan süreyi hesaplayın, süre birimlerini dengeleyin ve insanlar tarafından okunabilen yerelleştirilmiş süreleri biçimlendirin.

Temporal Plain türlerini kullanarak konumdan bağımsız takvim tarihlerini, saatleri, kısmi tarihleri (yinelenen doğum günleri, kredi kartı son kullanma tarihleri) ve yinelenen aylık aralıkları saat dilimi kayması olmadan modelleyin.

Gelecekteki toplantıları veya etkinlikleri coğrafi bir IANA saat dilimine açıkça bağlayarak planlayın. Böylece etkinlik saatleri, yaz saati uygulaması (DST) geçişlerinden, saat değişiklikleri sırasında "atlanan" veya "tekrarlanan" saatlerden bağımsız olarak doğru kalır.

Temporal.Instant'ı kullanarak milisaniye altı veya nanosaniye ISO 8601 zaman damgaları arasındaki aralıkları, tarih kesme çakışmaları olmadan ayrıştırın, sıralayın ve ölçün.

Uluslararası kullanıcılar için tarihleri Gregoryen olmayan takvim sistemlerinde (ör. İslami, İbrani veya Çin takvimi) doğru şekilde görüntüleyin ve hesaplayın.

Emscripten kullanarak C/C++'ı WebAssembly'ye derleme

Tarayıcının kullanıcı girişini işlemesine ve ekranı yeniden boyamasına olanak tanımak için yoğun eşzamanlı işlemleri (karmaşık hesaplamalar ve/veya uzun döngüler) veya DOM güncellemelerini bölün.

Sekmenin arka planda olduğu dönemler hariç, bir kullanıcının sayfayı görüntüleyerek geçirdiği toplam süreyi hesaplayın.

Bir sayfanın tüm komut dosyası bağımlılıkları arasında karmaşık düzenleme gerektirmeden eş zamansız bağımlılıkları koşullu olarak yükleme veya ilk kullanıma hazırlama (ör. eksik web özellikleri için polyfill'leri içe aktarma).

Ağ çakışmasını en aza indirmek ve sunucu yükünü azaltmak için birden fazla analiz, telemetri ve Core Web Vitals etkinliğini tek bir işaretçide birleştirip toplu işlem yapın. Bu sayede gerçek zamanlı güncellemeler sunmaya devam edebilirsiniz.

Kullanıcı tarafından hemen görülemeyen içeriklerin oluşturulmasını erteleyerek içerik açısından yoğun web sayfalarında (ör. uzun feed'ler, çok sayıda makale veya karmaşık kontrol panelleri içeren sayfalar) oluşturma sürelerini kısaltın.

Kolay kaydırma performansı sağlamak için DOM güncellemeleri, veri getirme, analiz izleme veya düzeni yeniden hesaplama gibi pahalı işlemleri kaydırma işlemi tamamlanana kadar erteleyin.

Arka planlar, kullanıcı arayüzü simgeleri veya karmaşık maskeler gibi optimize edilmiş dekoratif resimler sunun. Bunun için, yeni nesil resim biçimlerini (ör. AVIF veya WebP) birden fazla piksel yoğunluğuyla (ör. 1x ve 2x) birlikte sağlayın. Böylece tarayıcı, kullanıcının cihaz özelliklerine göre dosya boyutu ve görsel kalitenin en iyi kombinasyonunu dinamik olarak belirleyebilir.

Kullanıcı tarafından başlatılan isteklerle ağ çakışmasını önlemek için Fetch API ile yapılan arka plan veri getirme işlemlerinin önceliğini azaltın.

Komut dosyasının, kullanıcı sayfayı ön plana getirdikten sonra eşzamansız olarak yüklendiği durumlarda bile bir sayfanın başlangıçta arka planda yüklenip yüklenmediğini güvenilir bir şekilde belirleyin.

Bileşen ekran dışındayken arka planda JavaScript yürütmeyi (ör. <canvas> animasyonları, WebGL oluşturma veya yüksek frekanslı WebSocket veri yoklaması) duraklatarak sistem kaynaklarını ve pil ömrünü koruyun, ardından tekrar görünüme kaydırıldığında tam zamanında devam ettirin.

Tek sayfalık uygulamalarda (SPA) daha önce ziyaret edilen görünümlere daha hızlı geçiş yapılmasını sağlar. Bu işlem, her gezinmede görünümleri silip yeniden oluşturmak yerine yapısal DOM durumlarını koruyarak gerçekleştirilir.

HTML, CSS ve JavaScript'i değiştirmek veya yerleştirmek için istemci taraflı JavaScript'i kullanarak A/B testleri, çok değişkenli testler veya diğer denemeleri yayınlayıp oluşturun. Bu sayede, deneme içeriğini göstermek için titreme veya yanıp sönme olmadan önce özgün içerik gösterilmez.

Yavaş çalışan JavaScript'i ve Interaction to Next Paint (INP) duyarlılığının düşük olmasına neden olan diğer etkenleri belirleyin.

İşlenmesi uzun süren animasyon çerçevelerine en çok neden olan komut dosyalarını belirleme

Kullanıcının bir sonraki adımda ziyaret etme olasılığı yüksek olan sayfaları önceden getirerek veya önceden oluşturarak sayfa yükleme performansını iyileştirin.

İlk sayfa yüklemesi sırasında bant genişliğini korumak ve ağ çakışmasını azaltmak için video poster resimleri ve önceden yüklenmiş medya verileri de dahil olmak üzere ekran dışı video ve ses öğelerinin indirilmesini medya oynatıcı görüntü alanına yaklaşana kadar erteleyin.

Kullanıcı etkileşimlerinin ve istemci tarafı gezinmelerin ekranda yeni içerik güncellemeleri oluşturması için geçen süreyi ölçün.

Kritik kaynak yükleme gecikmelerini azaltmak için Largest Contentful Paint (LCP) adayı resimlerin yükleme önceliğini optimize edin ve kritik olmayan resimlerin önceliğini kaldırın.

Kritik kaynak yükleme gecikmelerini azaltmak için önceden yüklenen içeriğin göreceli önceliğini optimize edin.

Sıralamayı iyileştirmek ve gecikmeleri azaltmak için kritik eşzamansız komut dosyalarını güçlendirip gerekli olmayan veya gövdenin sonundaki komut dosyalarının önceliğini azaltarak komut dosyalarının yükleme önceliğini optimize edin.

Veri ağırlıklı kontrol panelleri veya e-tablo tarzı ızgaralar gibi karmaşık düzenlerde düzen yeniden hesaplamalarından kaçınarak etkileşimleri daha hızlı ve daha duyarlı hale getirin (Interaction to Next Paint (INP) puanlarını azaltın).

Bir sayfayı, daha sonra aynı HTML belgesine veya zorunlu JavaScript API'leri aracılığıyla aktarılan içerikle bildirimli olarak güncelleyin.

Modern web uygulamalarını optimize etmeye yönelik uygulanabilir yönergeler. Performansı denetlerken, yükleme metriklerini optimize ederken, yavaş etkileşimleri düzeltirken ve Core Web Vitals'ı (LCP, INP, CLS) optimize ederken bu kılavuzdan yararlanabilirsiniz.

Kullanıcının tüm sayfa ziyareti boyunca analizleri, Core Web Vitals'ı, hataları ve telemetri verilerini güvenilir bir şekilde izleyin ve verilerin gönderilmesini kullanıcı sayfadan ayrılana kadar erteleyin.

DOM düğümlerinin sayısını azaltmak için CSS sözde öğelerinde (::before ve ::after gibi) çözünürlüğü optimize edilmiş resimler kullanın.

Arka plan işleri ertelenirken kritik işlerin önce çalıştırılmasını sağlamak için farklı önceliklere sahip görevler planlayın.

Semantik HTML, odak yönetimi, formlar, medya ve test konularını kapsayan, erişilebilir web uygulamaları oluşturmaya yönelik uygulanabilir kodlama yönergeleri. Erişilebilirlik özelliklerini, klavye gezinmesini veya ARIA'yı denetlerken ya da uygularken bu beceriyi kullanın.

Programatik erişilebilirlik durumlarını (ör. aria-invalid) görsel :user-invalid durumuyla senkronize ederek ekran okuyucu kullanıcılarının yalnızca etkileşimden sonra hata geri bildirimi almasını sağlayın ve görsel deneyimi yansıtın.

CSS tarafından oluşturulan içerikleri (::before/::after), dekoratif içeriklerin alternatif metinleri de dahil olmak üzere erişilebilir kalacak şekilde kullanın.

Yazı tipi boyutlarının, düzenin ve rem tabanlı ölçümlerin kullanıcının erişilebilirlik ayarlarına uyması için işletim sisteminin bir sayfa için metin ölçeği tercihine uyun.

Hata yapmaya açık dize ayrıştırma işlemi olmadan, dokümanlar arası mesajlar ve URL'ler genelinde web kaynaklarını ve siteleri güvenli bir şekilde karşılaştırıp doğrulayın.

Ortak anahtar kapsülleme veya anahtar anlaşması (karma ve kuantum sonrası koruma dahil) kullanarak paylaşılan gizli anahtarlar oluşturun ve tarayıcıdaki hassas verileri kimliği doğrulanmış şifrelemeyle şifreleyin.

Herkese açık bir web uygulamasından kullanıcının yerel ağındaki veya geri döngü arayüzündeki kaynaklara erişme

Geri gelen bir kullanıcının kimliğini birincil oturum açma için geçiş anahtarıyla doğrulama

Başarılı bir şifre girişinden sonra mevcut bir kullanıcı için geçiş anahtarını sessizce kaydetme

Kullanıcıların, hesaplarına kayıtlı geçiş anahtarlarını görüntülemesine ve yönetmesine izin verin.

Hassas bir işlemden önce oturum açmış bir kullanıcının kimliğini mevcut geçiş anahtarlarını kullanarak doğrulama

Mevcut bir kullanıcı hesabı için geçiş anahtarı kaydetme

Web uygulamalarında WebAuthn ve geçiş anahtarlarını uygulamaya yönelik kapsamlı oryantasyon ve kesişen ilkeler. Geçiş anahtarı kaydı, kimlik doğrulama, yönetim veya yeniden kimlik doğrulama işlemlerini gerçekleştirirken bu kılavuzdan yararlanın.

Güvenilir olmayan HTML'yi temizlemek için bir Trusted Types politikası tanımlayarak, innerHTML gibi DOM havuzlarına yazarken politikayı kullanarak ve İçerik Güvenliği Politikası aracılığıyla Trusted Types'ı zorunlu kılarak DOM tabanlı XSS saldırılarını önleyin.

Geri gelen kullanıcıların kimliğini, bir oturum açma sayfasına gitmeden veya iş akışlarını kesintiye uğratmadan, kayıtlı geçiş anahtarları veya şifreleriyle bulundukları sayfada doğrulayın.

Yetkisiz üçüncü taraf isteklerini ve istemci tarafı veri sızıntısını önlemek için bir sayfanın veya çalışanın yalnızca açık bir ağ uç noktası izin verilenler listesiyle iletişim kurmasını kısıtlayın.

Güvenli olmayan öğeleri ve özellikleri kaldırarak kullanıcı girişinden gelen güvenilmeyen HTML içeriğini güvenli bir şekilde ayrıştırıp görüntüleyin.

Üçüncü taraf kaynaklardan yüklenen harici komut dosyalarının, stil sayfalarının, yazı tiplerinin ve resimlerin şifreleme bütünlüğünü doğrulayın ve bu isteklerin kimlik bilgileri veya yönlendiren URL'leri gönderip göndermediğini kontrol edin.

Veri bütünlüğünü ve özgünlüğünü sağlamak için klasik veya kuantum dirençli (kuantum sonrası) asimetrik anahtarlar kullanarak tarayıcıda mesajları, jetonları ya da yapıları imzalayıp doğrulayın.

Hesap oluşturma, oturum açma veya kurtarma sırasında tek kullanımlık şifre kodu ya da sihirli bağlantı e-postası göndermeden kullanıcının bir e-posta adresinin sahibi olduğunu doğrulayın.

Web geliştiricileri için önleyici güvenlik yönergeleri (XSS, CSP, Çerezler, Kökenler Arası Yalıtım). Güvenlik politikalarını güvenli bir şekilde denetleme, test etme ve dağıtma sürecini yönetmek için bu beceriden yararlanın.

Web geliştiricileri için tasarımdan başlayan gizlilik, minimum veri (toplama), üçüncü taraf denetimleri ve güvenli veri işleme uygulamalarına yönelik eyleme dönük yönergeler. Uygulama tasarlarken, üçüncü taraf hizmetlerini entegre ederken, kullanıcı verilerini işlerken veya güvenlik başlıklarını yapılandırırken bu beceriden yararlanabilirsiniz.

Yüklü bir web uygulamasını yeni bir kaynağa aktarırken kullanıcı yapılandırmasını ve işletim sistemi düzeyindeki kısayolları koruyun.

Kullanıcı tarafından oluşturulan içeriğin veya mevcut site içeriğinin dilini algılama

Prompt API'yi kullanarak tarayıcıda cihaz üzerinde doğal dil çıkarımı yapın. Akış çıkışı, yapılandırılmış JSON yanıtları ve çok turlu oturum yönetimi özelliklerinden yararlanın.

Cihaz üzerinde Summarizer API'yi kullanarak metin içeriğini özetleme

Cihaz üzerinde Translator API'yi kullanarak metinleri diller arasında çevirin.

Standart HTML formlarına WebMCP özellikleri ekleyerek istemci tarafı işlevleri yapay zeka ajanlarına araç olarak sunun.

WebMCP Imperative API'yi kullanarak istemci tarafı JavaScript işlevlerini yapay zeka ajanları için araç olarak programatik şekilde kaydedin.

Tarayıcı uygulamalarında WebMCP'yi (Web Model Context Protocol) uygulamak için bu kılavuzdan yararlanabilirsiniz. Bu sayede, istemci tarafı işlevleri, bildirim temelli veya zorunlu API'ler aracılığıyla yapay zeka ajanlarına araç olarak sunulur.