M

MLOG

Türkçe

Aşamalı iyileştirme ve özellik algılama kullanarak sağlam ve erişilebilir web uygulamaları oluşturmayı öğrenin. Bu kılavuz, kapsayıcı ve geleceğe dönük web deneyimleri oluşturmak için küresel bir bakış açısı, pratik örnekler ve en iyi uygulamalar sunar.

Aşamalı İyileştirme: Özellik Algılama - Küresel Bir Kitle İçin Esnek Web Deneyimleri Oluşturma

İnternetin sürekli gelişen ortamında, web uygulamalarınızın erişilebilir, performanslı ve geleceğe dönük olmasını sağlamak çok önemlidir. Bunu başarmanın en etkili stratejilerinden biri, kullanıcının ortamının yeteneklerine göre geliştirmeler eklerken, çok çeşitli cihazlarda ve tarayıcılarda çalışan temel işlevsellik oluşturmayı vurgulayan bir tasarım felsefesi olan aşamalı iyileştirmedir. Aşamalı iyileştirmenin önemli bir bileşeni, geliştiricilerin bir tarayıcının uygulamadan önce belirli bir özelliği destekleyip desteklemediğini belirlemesine olanak tanıyan özellik algılamadır. Bu yaklaşım, özellikle dünyanın çeşitli teknolojik ortamında tutarlı bir kullanıcı deneyimini garanti eder.

Aşamalı İyileştirme Nedir?

Aşamalı iyileştirme, sağlam, erişilebilir bir temel ile başlayan ve ardından tarayıcı veya cihaz izin verdikçe gelişmiş özellikler ekleyen bir web geliştirme stratejisidir. Bu yaklaşım, cihazı, tarayıcısı veya internet bağlantısı ne olursa olsun tüm kullanıcılar için içeriğe ve temel işlevselliğe öncelik verir. Web'in her yerde herkes için kullanılabilir ve bilgilendirici olması gerektiği fikrini benimser.

Aşamalı iyileştirmenin temel ilkeleri şunları içerir:

Özellik Algılama Neden Önemlidir?

Özellik algılama, aşamalı iyileştirmenin temel taşıdır. Tarayıcı koklama (kullanıcının tarayıcısını kullanıcı aracısı dizesine göre tanımlama) yerine, özellik algılama tarayıcının *yapabileceği* şeylere odaklanır. Bu çok daha güvenilir bir yaklaşımdır çünkü:

Özellik Algılama Yöntemleri

Tarayıcı özelliklerini algılamak için her birinin güçlü ve zayıf yönleri olan çeşitli yöntemler vardır. En yaygın yöntem, belirli bir özelliğin veya API'nin varlığını kontrol etmek için JavaScript kullanır.

1. Özellikleri Kontrol Etmek İçin JavaScript Kullanma

Bu yöntem en yaygın ve esnektir. JavaScript kodu kullanarak belirli bir tarayıcı özelliğinin kullanılabilirliğini kontrol edersiniz.

Örnek: `fetch` API'sini kontrol etme (Ağdan veri getirmek için JavaScript)


if ('fetch' in window) {
  // 'fetch' API'si destekleniyor. Veri yüklemek için kullanın.
  fetch('data.json')
    .then(response => response.json())
    .then(data => {
      // Verileri işle
    })
    .catch(error => {
      // Hataları işle
    });
} else {
  // 'fetch' API'si desteklenmiyor. XMLHttpRequest gibi bir geri dönüş kullanın.
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'data.json');
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      // Verileri işle
    } else {
      // Hataları işle
    }
  };
  xhr.onerror = function() {
    // Hataları işle
  };
  xhr.send();
}

Bu örnekte, kod `window` nesnesinde `fetch` özelliğinin olup olmadığını kontrol eder. Varsa, tarayıcı `fetch` API'sini destekler ve kod onu kullanabilir. Aksi takdirde, bir geri dönüş mekanizması (`XMLHttpRequest` kullanılarak) uygulanır.

Örnek: `classList` API desteğini kontrol etme


if ('classList' in document.body) {
  // Tarayıcı classList'i destekler. classList yöntemlerini kullanın (örneğin, ekle, kaldır)
  document.body.classList.add('has-js');
} else {
  // Tarayıcı classList'i desteklemiyor. Alternatif yöntemler kullanın.
  // Örneğin, CSS sınıflarını eklemek ve kaldırmak için dize manipülasyonu kullanma
  document.body.className += ' has-js';
}

2. CSS Özellik Sorgularını Kullanma (`@supports`)

CSS özellik sorguları, `@supports` kuralıyla belirtilir, tarayıcının belirli CSS özelliklerini veya özellik değerlerini destekleyip desteklemediğine bağlı olarak CSS kurallarını uygulamanıza olanak tanır.

Örnek: Izgara Düzenini kullanarak bir düzeni stillendirmek için `@supports` kullanma


.container {
  display: flex; /* Izgara olmayan tarayıcılar için geri dönüş */
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

Bu örnekte, `.container` başlangıçta bir `flex` düzeni (yaygın olarak desteklenen bir özellik) kullanır. `@supports` kuralı, tarayıcının `display: grid`i destekleyip desteklemediğini kontrol eder. Destekliyorsa, kural içindeki stiller uygulanır ve başlangıçtaki flex düzeni bir ızgara düzeniyle geçersiz kılınır.

3. Kitaplıklar ve Çerçeveler

Çeşitli kitaplıklar ve çerçeveler, yerleşik özellik algılama yetenekleri veya süreci basitleştiren yardımcı programlar sağlar. Bunlar, belirli özellikleri kontrol etme karmaşıklığını soyutlayabilir. Yaygın örnekler şunları içerir:

Örnek: Modernizr Kullanma


<html class="no-js" >
<head>
  <!-- Diğer meta etiketleri vb. -->
  <script src="modernizr.min.js"></script>
</head>
<body>
  <div class="my-element"></div>
  <script>
    if (Modernizr.borderradius) {
      // Kenarlık yarıçapı stilleri uygulayın
      document.querySelector('.my-element').style.borderRadius = '10px';
    }
  </script>
</body>
</html>

Bu senaryoda, Modernizr tarayıcı `border-radius`'u destekliyorsa `` öğesine `borderradius` sınıfını ekler. JavaScript kodu daha sonra bu sınıfı kontrol eder ve karşılık gelen stili uygular.

Pratik Örnekler ve Küresel Hususlar

Erişilebilirlik, uluslararasılaştırma (i18n) ve performans gibi küresel hususları dikkate alarak, özellik algılamanın bazı pratik örneklerini ve bunların nasıl uygulanacağını keşfedelim.

1. Duyarlı Görüntüler

Duyarlı görüntüler, kullanıcının cihazına ve ekran boyutuna göre en uygun görüntü boyutlarını sağlamak için çok önemlidir. Özellik algılama, bunları etkili bir şekilde uygulamada önemli bir rol oynayabilir.

Örnek: `srcset` ve `sizes` desteğini kontrol etme

`srcset` ve `sizes`, tarayıcıya görüntü kaynağı seçenekleri hakkında bilgi sağlayan, mevcut bağlam için en uygun görüntüyü seçmesine olanak tanıyan HTML öznitelikleridir. 


<img
  src="image-fallback.jpg"
  srcset="image-small.jpg 480w, image-medium.jpg 768w, image-large.jpg 1024w"
  sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"
  alt="Resmin açıklaması"
>

`srcset` özniteliği, genişlikleriyle birlikte bir görüntü kaynakları listesini belirtir. `sizes` özniteliği, medya sorgularına göre görüntünün amaçlanan görüntüleme boyutu hakkında bilgi sağlar.

Tarayıcı `srcset` ve `sizes`'ı desteklemiyorsa, benzer bir sonucu elde etmek için JavaScript ve özellik algılama kullanabilirsiniz. `picturefill` gibi kitaplıklar, eski tarayıcılar için bir polyfill sağlar.


if (!('srcset' in document.createElement('img')) || !('sizes' in document.createElement('img'))) {
  // picturefill.js gibi bir polyfill kullanın
  // Picturefill bağlantısı: https://scottjehl.github.io/picturefill/
  console.log('Picturefill polyfill kullanılıyor');
}

Bu yaklaşım, tarayıcılarından bağımsız olarak tüm kullanıcıların optimize edilmiş görüntüler almasını sağlar.

2. Web Animasyonları

CSS animasyonları ve geçişleri kullanıcı deneyimini önemli ölçüde iyileştirebilir, ancak bazı kullanıcılar için dikkat dağıtıcı veya sorunlu da olabilirler. Özellik algılama, bu animasyonları yalnızca uygun olduğunda sağlamanıza olanak tanır.

Örnek: CSS geçişleri ve animasyonları için desteği algılama


if (Modernizr.cssanimations && Modernizr.csstransitions) {
  // Animasyon sınıflarını uygulayın
  document.body.classList.add('animations-enabled');
} else {
  // Animasyonlar olmadan statik bir kullanıcı arayüzü veya daha temel bir deneyim kullanın
  document.body.classList.add('animations-disabled');
}

Eski tarayıcıları olan kullanıcılar için veya kullanıcının azaltılmış hareket için bir tercih ifade ettiği zaman animasyonları devre dışı bırakarak (`prefers-reduced-motion` medya sorgusu aracılığıyla), daha sorunsuz ve daha kapsayıcı bir deneyim sağlayabilirsiniz.

Animasyonlar için küresel hususlar: Bazı kullanıcıların vestibular bozuklukları veya animasyonlar tarafından tetiklenebilen başka rahatsızlıkları olabileceğini unutmayın. Her zaman animasyonları devre dışı bırakma seçeneği sağlayın. Kullanıcının `prefers-reduced-motion` ayarına saygı gösterin.

3. Form Doğrulama

HTML5, gerekli alanlar, girdi türü doğrulama (örneğin, e-posta, sayı) ve özel hata mesajları gibi güçlü form doğrulama özellikleri tanıttı. Özellik algılama, bu özelliklerden yararlanırken zarif geri dönüşler sağlamanıza olanak tanır.

Örnek: HTML5 form doğrulama desteğini kontrol etme


if ('checkValidity' in document.createElement('input')) {
  // HTML5 form doğrulamasını kullanın.
  // Bu yerleşiktir ve JavaScript gerektirmez
} else {
  // JavaScript tabanlı form doğrulamasını uygulayın.
  // Parsley.js gibi bir kitaplık yararlı olabilir:
  // https://parsleyjs.org/
}

Bu, eski tarayıcıları olan kullanıcıların JavaScript kullanılarak uygulanmış olsa bile yine de form doğrulama almasını sağlar. Son bir güvenlik ve sağlamlık katmanı olarak sunucu tarafı doğrulama sağlamayı düşünün.

Form doğrulama için küresel hususlar: Hata mesajlarınızın yerelleştirilmiş ve erişilebilir olduğundan emin olun. Kullanıcının dilinde açık ve özlü hata mesajları sağlayın. Farklı tarih ve sayı biçimlerinin küresel olarak nasıl kullanıldığını düşünün.

4. Gelişmiş Düzen Teknikleri (örneğin, CSS Izgarası)

CSS Izgara Düzeni, karmaşık, duyarlı düzenler oluşturmanın güçlü bir yolunu sağlar. Ancak, eski tarayıcıların zarif bir şekilde işlendiğinden emin olmak önemlidir.

Örnek: Geri dönüşle CSS Izgarası kullanma


.container {
  display: flex;  /* Eski tarayıcılar için geri dönüş */
  flex-wrap: wrap;
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

Bu kod, `grid`'i desteklemeyen tarayıcılar için bir geri dönüş olarak `flexbox`'ı kullanır. Tarayıcı `grid`'i destekliyorsa, düzen ızgara kullanılarak işlenir. Bu yaklaşım, eski tarayıcılarda zarif bir şekilde bozulan duyarlı bir düzen oluşturur.

Düzen için küresel hususlar: Farklı ekran boyutları, en boy oranları ve girdi yöntemleri (örneğin, dokunmatik ekranlar, klavye navigasyonu) için tasarım yapın. Düzenlerinizi küresel olarak kullanılan çeşitli cihazlarda ve tarayıcılarda test edin. Hedef kitleniz RTL komut dosyalarını (örneğin, Arapça, İbranice) okuyan kullanıcıları içeriyorsa, sağdan sola (RTL) dil desteğini göz önünde bulundurun.

Özellik Algılama İçin En İyi Uygulamalar

Özellik algılamanın etkinliğini en üst düzeye çıkarmak için şu en iyi uygulamalara uyun:

Özellik Algılamada Erişilebilirlik (a11y) Ele Alma

Erişilebilirlik, aşamalı iyileştirmenin kritik bir bileşenidir. Özellik algılama, web sitenizin engelli kullanıcılar için erişilebilir olmasını sağlamaya yardımcı olabilir.

Uluslararasılaştırma (i18n) ve Özellik Algılama

Küresel bir web sitesi oluştururken, i18n'yi göz önünde bulundurun. Özellik algılama, dile özgü içeriği ve davranışı kolaylaştırarak i18n çabalarınıza katkıda bulunabilir.

Sonuç: Gelecek İçin İnşa Etme

Aşamalı iyileştirme ve özellik algılama sadece teknik uygulamalar değildir; bunlar, küresel bir kitle için kapsayıcı, performanslı ve esnek web deneyimleri oluşturmanıza olanak tanıyan web geliştirmenin temel ilkeleridir. Bu stratejileri benimseyerek, sürekli değişen teknolojik ortama uyum sağlayan, içeriğinizin cihazı, tarayıcısı veya konumu ne olursa olsun tüm kullanıcılar için erişilebilir ve ilgi çekici olmasını sağlayan web siteleri oluşturabilirsiniz. Temel işlevselliğe odaklanarak, özellik algılamayı benimseyerek ve erişilebilirliğe öncelik vererek, herkes için daha sağlam ve kullanıcı dostu bir web deneyimi oluşturursunuz.

Web gelişmeye devam ettikçe, aşamalı iyileştirmenin önemi yalnızca artacaktır. Bu uygulamaları bugün benimseyerek, web uygulamalarınızın geleceğine yatırım yapıyor ve küresel dijital ekosistemdeki başarılarını sağlıyorsunuz.

Eyleme Dönüştürülebilir Bilgiler: