CSS’de Eski Tarayıcıları Destekleme

Bu modülde, tasarımlarınız için ana düzen yöntemleri olarak Flexbox ve Grid kullanmanızı öneririz.

Bu modülde, tasarımlarınız için ana düzen yöntemleri olarak Flexbox ve Grid kullanmanızı öneririz. Ancak, sitenizde eski tarayıcıları veya kullandığınız yöntemleri desteklemeyen tarayıcıları kullanan ziyaretçiler olacaktır. Bu durum web’de her zaman geçerlidir – yeni özellikler geliştirildikçe farklı tarayıcılar farklı şeylere öncelik verecektir. Bu makale, eski teknoloji kullanıcılarını dışarıda bırakmadan modern web tekniklerinin nasıl kullanılacağını açıklamaktadır.

Ön Koşullar:HTML temelleri (HTML’ye Giriş bölümünü çalışın) ve CSS’nin nasıl çalıştığına dair bir fikir edinin (CSS’ye Giriş ve Stil kutuları bölümlerini çalışın).

Siteniz için tarayıcı ortamı nasıl?

Her web sitesi hedef kitlesi açısından farklıdır. Nasıl bir yaklaşım izleyeceğinize karar vermeden önce, sitenize eski tarayıcıları kullanarak gelen ziyaretçi sayısını öğrenin. Ekleme yaptığınız veya değiştirdiğiniz mevcut bir web siteniz varsa, muhtemelen insanların kullandığı teknolojiyi size söyleyebilecek analitiklere sahip olduğunuz için bu basit olacaktır. Analiziniz yoksa veya bu yepyeni bir siteyse, konuma göre filtrelenmiş istatistikler sağlayabilen Statcounter gibi siteleri kullanabilirsiniz.

Ayrıca cihazların türünü ve insanların sitenizi kullanma şeklini de göz önünde bulundurmalısınız; örneğin, mobil cihaz sayısının ortalamadan daha yüksek olmasını bekleyebilirsiniz. Erişilebilirlik ve yardımcı teknoloji kullanan kişiler her zaman dikkate alınmalıdır, ancak bazı siteler için bu daha da kritik olabilir. Deneyimlerime göre, geliştiriciler genellikle Internet Explorer’ın eski bir sürümünü kullanan kullanıcıların %1’inin deneyimi hakkında çok endişelenirken, erişilebilirlik ihtiyaçları olan çok daha büyük bir sayıyı hiç dikkate almıyorlar.

Kullanmak istediğiniz özellikler için CSS desteği nedir?

Sitenize gelen tarayıcıları öğrendikten sonra, kullanmak istediğiniz herhangi bir teknolojiyi ne kadar iyi desteklendiğine ve bu teknolojiye sahip olmayan ziyaretçiler için ne kadar kolay bir alternatif sağlayabileceğinize göre değerlendirebilirsiniz. Örneğin MDN referansları ile CSS’in hangi tarayıcı için neyi desteklediğini görebilirsiniz:

Bir özelliğin ne kadar iyi desteklendiğini öğrenmenin bir diğer popüler yolu da Can I Use web sitesidir. Bu site, Web Platformu özelliklerinin çoğunu tarayıcı destek durumları hakkında bilgilerle birlikte listeler. Kullanım istatistiklerini konuma göre görüntüleyebilirsiniz – çoğunlukla dünyanın belirli bir bölgesinden kullanıcıları olan bir sitede çalışıyorsanız kullanışlıdır. Kullanıcı verilerinize dayalı analizler elde etmek için Google Analytics hesabınızı bile bağlayabilirsiniz.

Kullanıcılarınızın sahip olduğu teknolojiyi bilmek ve kullanmak isteyebileceğiniz şeylere yönelik desteği anlamak, tüm kararlarınızı vermede ve tüm kullanıcılarınızı en iyi şekilde nasıl destekleyeceğinizi bilmede işinizi kolaylaştırır.

Tarayıcı desteği “aynı görünüyor” demek değildir

Bir web sitesinin tüm tarayıcılarda aynı görünmesi mümkün değildir, çünkü kullanıcılarınızdan bazıları siteyi bir telefonda, bazıları ise büyük bir masaüstü ekranda görüntüleyecektir. Benzer şekilde, bazı kullanıcılarınız eski bir tarayıcı sürümüne, bazıları ise en son tarayıcı sürümüne sahip olacaktır. Bazı kullanıcılarınız içeriğinizin bir ekran okuyucu tarafından okunduğunu duyuyor olabilir veya içeriğinizi okuyabilmek için sayfayı yakınlaştırmış olabilir. Herkesi desteklemek, içeriğinizin modern tarayıcılarda harika görünecek, ancak eski tarayıcı kullanıcıları için hala temel düzeyde kullanılabilir olacak şekilde savunmaya yönelik olarak tasarlanmış bir sürümünü sunmak anlamına gelir.

Temel düzeyde bir destek, sayfanızın normal akışının mantıklı olması için içeriğinizi iyi yapılandırmaktan gelir. Çok sınırlı özelliklere sahip bir telefonu olan bir kullanıcı CSS’nizin çoğunu alamayabilir, ancak içerik, okumayı kolaylaştıracak şekilde akacaktır. Bu nedenle, iyi yapılandırılmış bir HTML belgesi her zaman başlangıç noktanız olmalıdır. Stil sayfanızı kaldırırsanız içeriğiniz anlamlı olur mu?

Bunun bir yöntemi, çok eski veya sınırlı tarayıcı kullanan kişiler için sitenin bu düz görünümünü yedek olarak bırakmaktır. Siteye bu tarayıcılarla gelen çok az sayıda kişi varsa, bu kişilere modern tarayıcılarla benzer bir deneyim sunmaya çalışmak için zaman harcamak ticari açıdan mantıklı olmayabilir. Zamanı, siteyi daha erişilebilir hale getirecek ve böylece çok daha fazla kullanıcıya hizmet verecek şeylere harcamak daha iyi olacaktır. Düz bir HTML sayfası ve CSS aslında bu geri dönüşleri oluşturmayı oldukça basit hale getirmiştir.

CSS’de fallback oluşturma – geri düşüş

CSS özellikleri, aynı öğeye iki düzen yöntemi uygulandığında tarayıcının ne yaptığını açıklayan bilgiler içerir. Bu, örneğin kayan bir öğenin aynı zamanda CSS Izgara Düzeni kullanan bir Izgara Öğesi olması durumunda ne olacağına dair bir tanım olduğu anlamına gelir. Bu bilgiyi tarayıcıların anlamadıkları CSS’yi yok saydığı bilgisiyle birleştirdiğinizde, daha önce ele aldığımız eski teknikleri kullanarak basit düzenler oluşturmanın bir yolunu bulursunuz. Bu düzenler daha sonra bunu anlayan modern tarayıcılarda Izgara düzeniniz tarafından üzerine yazılır.

Izgaradan float’a geri düşme

Aşağıdaki örnekte, bir satırda görüntülenmeleri için üç <div>’i kaydırdık. CSS Izgara Düzenini desteklemeyen herhangi bir tarayıcı, kutu sırasını kayan bir düzen olarak görecektir. Izgara öğesi haline gelen kayan öğe, kayma davranışını kaybeder; bu da sarmalayıcıyı bir Izgara Konteynerine dönüştürdüğünüzde kayan öğelerin Izgara Öğeleri haline geleceği anlamına gelir. Tarayıcı Izgara Düzenini destekliyorsa ızgara görünümünü görüntüler, desteklemiyorsa display: grid ve ilgili özellikleri yok sayar ve kayan düzen kullanılır.

* {box-sizing: border-box;}

.wrapper {
  background-color: rgb(79,185,227);
  padding: 10px;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.item {
  float: left;
  border-radius: 5px;
  background-color: rgb(207,232,220);
  padding: 1em;
}

<div class="wrapper">
  <div class="item">Item One</div>
  <div class="item">Item Two</div>
  <div class="item">Item Three</div>
</div>

Not: “clear” özelliğinin, temizlenen öğe bir ızgara öğesi haline geldiğinde de bir etkisi yoktur, bu nedenle temizlenmiş bir footer’a sahip bir düzeniniz olabilir ve bu düzen daha sonra bir Izgara Düzenine dönüşür.

Fallback yöntemleri

Bu float örneğine benzer şekilde kullanılabilecek bir dizi yerleşim yöntemi vardır. Oluşturmanız gereken düzen modeli için en mantıklı olanı seçebilirsiniz.

float ve clear

Yukarıda gösterildiği gibi, float ve clear özellikleri, float veya clear edilen öğeler flex veya grid öğeleri haline gelirse düzeni etkilemeyi bırakır.

display: inline-block

Bu yöntem sütun düzenleri oluşturmak için kullanılabilir, bir öğe display: inline-block ayarına sahipse ancak daha sonra bir flex veya grid öğesi haline gelirse, inline-block davranışı göz ardı edilir.

display: table

Bu derslerin giriş bölümünde açıklanan CSS Tabloları oluşturma yöntemi bir yedek olarak kullanılabilir. CSS tablo düzenleri ayarlanmış öğeler, esnek veya ızgara öğeleri haline gelirlerse bu davranışı kaybedeceklerdir. Daha da önemlisi, tablo yapısını düzeltmek için oluşturulan anonim kutular oluşturulmaz.

Çoklu Sütun Düzeni

Belirli düzenler için çoklu sütunu geri dönüş olarak kullanabilirsiniz, kapsayıcınızda tanımlanmış column-* özelliklerinden herhangi biri varsa ve daha sonra bir ızgara kapsayıcısı haline gelirse, çoklu sütun davranışı gerçekleşmeyecektir.

Grid için Yedek Olarak Flexbox

Flexbox, IE10 ve 11 tarafından desteklendiği için Grid’den daha fazla tarayıcı desteğine sahiptir, ancak bu dersin ilerleyen bölümlerinde eski tarayıcılarda Flexbox için oldukça düzensiz ve kafa karıştırıcı desteği açıklayan bilgilere de bir göz atın. Bir flex konteynerini bir grid konteynerine dönüştürürseniz, alt öğelere uygulanan tüm flex özellikleri yok sayılır.


Eski tarayıcılardaki birçok düzen ayarlaması için CSS’yi bu şekilde kullanarak iyi bir deneyim sunabilirsiniz. Daha eski ve iyi desteklenen tekniklere dayalı daha basit bir düzen ekliyoruz, ardından kitlenizin %90’ından fazlasının göreceği düzeni oluşturmak için daha yeni CSS’yi kullanıyoruz. Bununla birlikte, geri dönüş kodunun yeni tarayıcıların da yorumlayacağı bir şey içermesi gereken durumlar vardır. Bunun iyi bir örneği, sütunları ızgara görüntüsüne daha çok benzetmek için yüzen öğelerimize yüzde genişlikleri eklememiz ve kabı dolduracak şekilde uzatmamızdır.

Float düzeninde, yüzde konteyner üzerinden hesaplanır – %33,333 konteyner genişliğinin üçte biridir. Ancak Izgara’da bu %33,333 öğenin yerleştirildiği ızgara alanından hesaplanır, bu nedenle Izgara Düzeni kullanılmaya başlandığında aslında istediğimiz boyutun üçte biri olur.

* {box-sizing: border-box;}

.wrapper {
  background-color: rgb(79,185,227);
  padding: 10px;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.item {
  float: left;
  border-radius: 5px;
  background-color: rgb(207,232,220);
  padding: 1em;
  width: 33.333%;
}

<div class="wrapper">
  <div class="item">Item One</div>
  <div class="item">Item Two</div>
  <div class="item">Item Three</div>
</div>

Bu sorunla başa çıkmak için Grid’in desteklenip desteklenmediğini ve dolayısıyla genişliği geçersiz kılıp kılmayacağını tespit etmenin bir yoluna ihtiyacımız var. CSS’nin burada bizim için bir çözümü var.

Özellik sorguları – feature queries

Özellik sorguları, bir tarayıcının belirli bir CSS özelliğini destekleyip desteklemediğini test etmenizi sağlar. Bu, belirli bir özelliği desteklemeyen tarayıcılar için bazı CSS’ler yazabileceğiniz, ardından tarayıcının destekleyip desteklemediğini kontrol edebileceğiniz ve destekliyorsa süslü düzeninizi atabileceğiniz anlamına gelir.

Yukarıdaki örneğe bir özellik sorgusu eklersek, ızgara desteğimiz olduğunu biliyorsak öğelerimizin genişliklerini tekrar otomatik olarak ayarlamak için kullanabiliriz.

* {box-sizing: border-box;}

.wrapper {
  background-color: rgb(79,185,227);
  padding: 10px;
  max-width: 400px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.item {
  float: left;
  border-radius: 5px;
  background-color: rgb(207,232,220);
  padding: 1em;
  width: 33.333%;
}

@supports (display: grid) {
  .item {
      width: auto;
  }
}

<div class="wrapper">
  <div class="item">Item One</div>
  <div class="item">Item Two</div>
  <div class="item">Item Three</div>
</div>

Özellik sorguları için destek modern tarayıcılarda çok iyidir. Ancak CSS Grid’i desteklemeyen tarayıcıların özellik sorgularını da desteklememe eğiliminde olduğunu unutmamalısınız. Bu, yukarıda ayrıntıları verilen bir yaklaşımın bu tarayıcılar için çalışacağı anlamına gelir. Yaptığımız şey, herhangi bir özellik sorgusunun dışında, önce eski CSS’mizi yazmaktır. Grid’i desteklemeyen ve özellik sorgusunu desteklemeyen tarayıcılar, anlayabildikleri düzen bilgilerini kullanacak ve diğer her şeyi tamamen göz ardı edecektir. Özellik sorgusunu destekleyen tarayıcılar CSS Grid’i de destekler ve böylece grid kodunu ve özellik sorgusu içindeki kodu çalıştırır.

Özellik sorguları için spesifikasyon ayrıca bir tarayıcının bir özelliği destekleyip desteklemediğini test etme yeteneğini de içerir – bu yalnızca tarayıcı özellik sorgularını destekliyorsa yararlıdır. Gelecekte, özellik sorgusu desteğine sahip olmayan tarayıcılar ortadan kalktıkça, destek eksikliğini kontrol etme yaklaşımı işe yarayacaktır. Ancak şimdilik, en iyi destek için eski CSS’yi oluşturma ve ardından üzerine yazma yaklaşımını kullanın.

Flexbox’ın eski sürümleri

Tarayıcıların eski sürümlerinde, Flexbox spesifikasyonunun önceki yinelemelerini bulabilirsiniz. Bu yazının yazıldığı sırada, çoğunlukla bu durum Flexbox için -ms- önekini kullanan Internet Explorer 10 ile ilgili bir sorundu. Bu, aynı zamanda bazı eski makalelerin ve eğitimlerin var olduğu anlamına gelir; bu yararlı kılavuz neye baktığınızı kontrol etmenize yardımcı olur ve çok eski tarayıcılarda flex desteğine ihtiyacınız varsa da yardımcı olabilir.

IE10 ve 11 önekli Grid sürümü

CSS Grid spesifikasyonu ilk olarak Internet Explorer 10’da denenmişti; bu da IE10 ve IE11’in modern grid desteğine sahip olmamasına rağmen, bu sitede belgelenen modern spesifikasyondan farklı olsa da çok kullanışlı bir Grid düzeni sürümüne sahip oldukları anlamına gelir. IE10 ve 11 uygulamaları -ms- öneklidir, yani bu tarayıcılar için kullanabilirsiniz ve Microsoft dışı tarayıcılar tarafından göz ardı edilecektir. Ancak Edge hala eski sözdizimini anlıyor, bu nedenle modern ızgara CSS’nizde her şeyin güvenli bir şekilde üzerine yazılmasına dikkat edin.

Eski tarayıcıları test etme

Flexbox ve Grid’i destekleyen tarayıcıların çoğunluğu ile eski tarayıcıları test etmek oldukça zor olabilir. Bunun bir yolu, Sauce Labs gibi bir çevrimiçi test aracı kullanmaktır.

Ayrıca Sanal Makineleri indirip kurabilir ve tarayıcıların eski sürümlerini kendi bilgisayarınızda kapalı bir ortamda çalıştırabilirsiniz. Internet Explorer’ın eski sürümlerine erişmek özellikle kullanışlıdır ve bu amaçla Microsoft bir dizi Sanal Makineyi ücretsiz olarak indirilebilir hale getirmiştir. Bunlar Mac, Windows ve Linux işletim sistemleri için mevcuttur ve bu nedenle Windows bilgisayar kullanmıyor olsanız bile eski ve modern Windows tarayıcılarını test etmenin harika bir yoludur.

Özet

Artık Grid ve Flexbox gibi teknikleri güvenle kullanabilecek, eski tarayıcılar için geri dönüşler oluşturabilecek ve gelecekte ortaya çıkabilecek yeni tekniklerden yararlanabilecek bilgiye sahipsiniz.

CSS düzeni hakkındaki makalelerimizi incelediğinize göre, bu klavuz için hazırladığımız değerlendirme ile kavrayışınızı test etme zamanı geldi: Temel düzen anlayışı.

Bu yazı topluluk tarafından oluşturuldu. Lisans bilgisine bakabilirsiniz. Yanlış veya eksik bilgileri düzenlemek için github üzerinden katkıda bulunabilirsiniz.

Kategoriler: CSS Sayfa Düzeni, CSS, Kılavuz

konular

Okumaya devam et!
Sonraki Yazı: Uygulama: Temel düzen bilgisi kavrama

Bu klavuz üzerinde çalıştıysanız, bugün CSS düzeni oluşturmak ve eski CSS ile çalışmak için bilmeniz gerekenlerin temellerini kavramış olmalısınız.

HTML5 için input placeholder rengini CSS ile değiştirme

Chrome, input[type=text] öğeleri için yer tutucu özelliğini (placeholder) destekler – muhtemelen diğer tarayıcılar için de bu geçerli.

CSS nasıl yapılandırılır

Artık CSS’nin amacını ve kullanımını anlamaya başladığınıza göre, CSS’nin yapısını inceleyebiliriz.

CSS’e başlarken

Bu yazıda basit bir HTML sayfası alıp ona CSS uygulayacağız, bu arada dil hakkında da bazı pratik şeyler öğreneceğiz.

CSS nasıl çalışır?

CSS’nin temellerini, ne işe yaradığını ve basit stil sayfalarının nasıl yazılacağını öğrendik.

Yorum Gönderin

E-posta hesabınız yayımlanmayacak.

koddla
Tema Mundana by WowThemes.net.