Tarayıcı Uyumluluğu ve caniuse.com
caniuse.com'da tarayıcılar arasındaki özellik desteğini denetleyin, satıcı ön eklerini öğrenin ve gerektiğinde polyfill veya geri dönüş kullanın.
Tarayıcı Uyumluluğu ve caniuse.com, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Uyumluluk Neden Önemlidir?
Farklı tarayıcılar web standartlarını farklı hızlarda uygular. Chrome 130'da bulunan bir CSS özelliği veya JavaScript API'si, eski bir Safari ya da Firefox sürümünde bulunmayabilir. Uyumluluğu test etmek ve bunun için plan yapmak, kullanıcılarınızın bozuk deneyimler yaşamasını önler.
caniuse.com — Uyumluluk Başvurunuz
caniuse.com adresine gidip herhangi bir CSS özelliğinin, JavaScript API'sinin veya HTML özniteliğinin adını yazın. Kısmi destekle ilgili kullanım istatistikleri ve notların yanı sıra, tüm büyük tarayıcılar ve bunların güncel sürümleri için renklerle kodlanmış bir destek tablosu görürsünüz.
caniuse Tablosunu Okuma
Yeşil = destekleniyor. Sarı = kısmi destek. Kırmızı = desteklenmiyor. Gri = bilinmiyor. Üstteki küresel kullanım yüzdesini kontrol edin; kullanıcıların %97'sinden fazlasında varsa genellikle fallback kullanmadan yararlanabilirsiniz.
browser-compat-data ve MDN
MDN Web Docs sayfalarının her API başvuru sayfasının altında bir tarayıcı uyumluluk tablosu bulunur. Bu tablo, caniuse ile aynı verileri kullanır ve tarayıcı üreticileri tarafından sık sık güncellenir.
Baseline Girişimi
Baseline girişimi (web.dev/baseline), Chrome, Edge, Firefox ve Safari'deki desteklerine göre özellikleri Yeni Kullanılabilir veya Yaygın Olarak Kullanılabilir olarak işaretler. Yaygın Olarak Kullanılabilir bir özellik, polyfill'ler olmadan güvenle kullanılabilir.
Uyumluluk Dolguları
Uyumluluk dolgusu, daha yeni bir API'yi eski tarayıcılarda uygulayan JavaScript kodudur. Yaygın kaynaklar: polyfill.io (yalnızca gereken uyumluluk dolgularını sunar), core-js (kapsamlı JavaScript uyumluluk dolguları) ve Babel yardımcıları.
// polyfill.io example:
<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.at,Object.hasOwn"></script>@supports — CSS'te Özellik Sorguları
@supports, yalnızca bir özellik desteklendiğinde uygulanacak CSS yazmanızı sağlar. Medya sorgularının duyarlı tasarım için sağladığı geçersiz kılmalara benzer CSS yedekleri sunar.
/* Fallback for all browsers */
.grid {
display: flex;
flex-wrap: wrap;
}
/* Enhancement for browsers that support grid */
@supports (display: grid) {
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}Üretici Önekleri (Eski)
Eski CSS özellikleri üretici öneklerine ihtiyaç duyuyordu: -webkit-, -moz-, -ms-. Bunlar artık çoğunlukla kullanımdan kalkmıştır; modern tarayıcılar öneksiz standart özellikleri kullanır. Autoprefixer (PostCSS eklentisi), hâlâ gerekiyorsa bunları otomatik olarak ekler.
Babel ile Dönüştürme
Babel, modern JavaScript'i (ES2022 ve sonrası) eski tarayıcıların çalıştırabileceği ES5'e derler. Vite ve webpack, Babel'i eklentiler aracılığıyla entegre eder. Hedef tarayıcıları package.json içindeki browserslist bölümünde yapılandırın.
// package.json
"browserslist": [
"last 2 versions",
"not dead",
"> 0.5%"
]Gerçek Tarayıcılarda Sınama
DevTools cihaz benzetimi, gerçek tarayıcı sınamasının yerini tutmaz. Gerçek tarayıcılar arası doğrulama için BrowserStack, Sauce Labs veya doğrudan Safari tarayıcısını (macOS ya da iOS gerektirir) kullanın.
Sürekli Güncellenen Tarayıcı Ekosistemi
Chrome, Edge, Firefox ve Safari'nin tümü otomatik olarak güncellenir. Güncelliğini yitirmiş tarayıcıların uzun kuyruğu her yıl kısalır. Çoğu tüketici ürünü için her tarayıcının son 2 ana sürümünü hedeflemek, kullanıcıların %95'inden fazlasını kapsar.
Kısa Kontrol
caniuse.com destek tablosundaki yeşil hücre neyi gösterir?
Özet: Tarayıcı Uyumluluğu
Yeni uygulama programlama arayüzlerini kullanmadan önce caniuse.com'u kontrol edin. MDN uyumluluk tablolarını okuyun. browserslist ile makul tarayıcı kümelerini hedefleyin. CSS özellik sorguları için @supports kullanın. Yalnızca gereken uyumluluk dolgularını kullanın. Modern JS'yi Babel ile dönüştürün. Kritik özellikleri gerçek tarayıcılarda sınayın.
Sıkça Sorulan Sorular
“Tarayıcı Uyumluluğu ve caniuse.com” dersi ücretsiz mi?
Evet — “Tarayıcı Uyumluluğu ve caniuse.com” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Tarayıcı Uyumluluğu ve caniuse.com” dersinde ne öğreneceğim?
caniuse.com'da tarayıcılar arasındaki özellik desteğini denetleyin, satıcı ön eklerini öğrenin ve gerektiğinde polyfill veya geri dönüş kullanın. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Tarayıcı Uyumluluğu ve caniuse.com” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Chrome DevTools: Elements Console Network
- VSCode: Eklentiler, Emmet Kısayolları
- Prettier ve ESLint Kurulumu
- Tarayıcı Uyumluluğu ve caniuse.com