Web tarayıcıları, web sitelerinin sahip olduğu kadar uzun süredir var. Aslında, tarayıcılar, sitenizde görüntülenen veya sitenizi görüntüleyen kişilerde önemli bir bileşendir - ancak tüm tarayıcılar eşit şekilde oluşturulmaz. Web sayfalarınızı son derece eski ve daha modern tarayıcılarda bulunan özellikleri eksik olan tarayıcılarda görüntüleyen müşterilere sahip olmak tamamen mümkündür (ve aslında oldukça büyük olasılıkla). Bu, web sitesi tasarımı ve geliştirmesinde en son gelişmelerden yararlanan web siteleri geliştirmek için çabalarken önemli sorunlara neden olabilir. Birisi sitenize bu eski tarayıcılardan birini kullanarak gelirse ve en son gelişmiş teknikleriniz bunlar için çalışmazsa, genel olarak kötü bir deneyim yaşayabilirsiniz. Aşamalı geliştirme, farklı tarayıcılar için web sayfası tasarımını ele alma stratejisidir, yani modern desteğe sahip olmayan eski tarayıcılardır.
Aşamalı geliştirme, web sayfalarını tasarlamanın bir yoludur, böylece bir kullanıcı aracısının desteklediği daha fazla özellik, web sayfasının sahip olacağı daha fazla özelliktir. Zarif bozulma olarak bilinen tasarım stratejisinin tam tersidir. Bu strateji ilk olarak en modern tarayıcılar için sayfalar oluşturur ve daha az işlevsel tarayıcılarla makul ölçüde iyi çalışmasını sağlar - bu deneyim "incelikle azalır". Aşamalı geliştirme, önce daha az yetenekli tarayıcılarla başlar ve oradan bir deneyim oluşturur.
Aşamalı İyileştirme Nasıl Kullanılır
Aşamalı geliştirme kullanarak bir web tasarımı oluşturduğunuzda, yapacağınız ilk şey web tarayıcılarının en düşük ortak paydası için çalışan bir tasarım yaratmaktır. Temel olarak, ilerici geliştirme, içeriğinizin yalnızca bir alt kümede değil, tüm web tarayıcılarında kullanılabileceğini söylüyor. Bu nedenle, bu eski, eski ve daha az yetenekli tarayıcıları destekleyerek başlıyorsunuz. İyi çalışan bir site oluşturursanız. onlar için, tüm ziyaretçilere en az kullanılabilir bir deneyim sunması gereken bir temel oluşturduğunuzu biliyorsunuz.
Öncelikle en az göze çarpan tarayıcılarla başladığınızda, tüm HTML’nizin geçerli ve semantik olarak doğru olması gerekir. Bu, en geniş çeşitlilikte kullanıcı aracısının sayfayı görüntüleyebilmesini ve doğru görüntüleyebilmesini sağlar.
Görsel tasarım stilleri ve genel sayfa düzeninin harici stil sayfaları kullanılarak eklendiğini unutmayın. Bu, ilerleyici geliştirmenin gerçekleştiği yerdir. Tüm ziyaretçiler için çalışan bir site tasarımı oluşturmak için stil sayfasını kullanırsınız. Daha sonra, kullanıcı aracıları işlevsellik kazandığı için sayfayı geliştirmek için ek stiller ekleyebilirsiniz. Herkes taban çizgisi stillerini alır, ancak daha gelişmiş ve daha modern stilleri destekleyebilecek herhangi bir haber tarayıcısı için biraz daha fazla alırlar. Bu stilleri destekleyebilen tarayıcılar için sayfayı "aşamalı olarak" geliştirirsiniz.
Aşamalı geliştirmeyi uygulayabileceğiniz birkaç yol vardır. Öncelikle, bir tarayıcı CSS satırını anlamadıysa ne yapması gerektiğini düşünmelisiniz - bunu yok sayar! Bu aslında sizin lehinize çalışır. Tüm tarayıcıların anladığı temel çizgi stilleri oluşturursanız, yeni tarayıcılar için ek stiller ekleyebilirsiniz. Stilleri destekliyorlarsa, bunları uygulayacaklar. Değilse, onları görmezden gelir ve sadece bu temel stilleri kullanırlar. Bu CSS'de basit bir ilerletici geliştirme örneği görülebilir:
.ana içerik {
arkaplan: # 999;
arkaplan: rgba (153, 153, 153, 75);
}
Bu stil önce arka planı grimsi bir renge ayarlar. İkinci kural, saydamlık düzeyini ayarlamak için RGBA renk değerlerini kullanır. Bir tarayıcı RGBA'yı destekliyorsa, ilk stili ikinci ile geçersiz kılacaktır. Aksi takdirde, sadece bir tanesi uygulanacaktır. Başlangıç rengi ayarladınız ve daha modern tarayıcılar için ekstra stiller eklediniz.
Özellik Sorgularını Kullanma
Aşamalı geliştirmeyi uygulayabilmenin bir başka yolu, "özellik sorguları" olarak bilinenleri kullanmaktır. Bunlar, yanıt veren web sitesi tasarımlarının vazgeçilmez bir parçası olan medya sorgularına benzer. Medya belirli ekran boyutları için metin sorgularken, belirli bir özelliğin desteklenip desteklenmediğini görmek için özellik sorguları kontrol edilir. Kullanacağınız sözdizimi şöyledir:
@supports (göster: esnek) {}Bu kuralın içine eklediğiniz tüm stiller, yalnızca bu tarayıcı Flexbox için stil olan "flex" özelliğini destekliyorsa çalışır. Herkes için bir kural kümesi belirleyebilir ve ardından yalnızca belirli tarayıcılara fazladan eklemek için özellik sorgularını kullanabilirsiniz.
Jennifer Krynin tarafından yazılmış orijinal makale. 12/13/16 tarihinde Jeremy Girard tarafından düzenlendi.