Nelerdir ve neden kullanmalısınız?
Ayrıca CSS tarayıcı önekleri veya CSS tarayıcı önekleri olarak da bilinen CSS sağlayıcı önekleri, tarayıcı özellikli kullanıcıların tüm tarayıcılarda tam olarak desteklenmeden önce yeni CSS özellikleri için destek eklemenin bir yoludur. Bu, tarayıcı üreticisinin bu yeni CSS özelliklerinin nasıl uygulanacağını tam olarak belirlediği bir tür deneme ve deneme dönemi sırasında yapılabilir. Bu önekler birkaç yıl önce CSS3'ün yükselişi ile çok popüler oldu.
CCS3 ilk kez piyasaya sürüldüğünde, bir dizi heyecanlı özellik farklı zamanlarda farklı tarayıcılara çarpmaya başladı. Örneğin, web tabanlı destekli tarayıcılar (Safari ve Chrome) dönüşüm ve geçiş gibi bazı animasyon stili özelliklerini tanıtan ilk tarayıcılardır. Satıcı önceden belirlenmiş özellikleri kullanarak, web tasarımcıları bu yeni özellikleri işlerinde kullanabildiler ve onları diğer tarayıcı üreticilerinin yetişmesini beklemek yerine, onları hemen destekleyen tarayıcılarda görebildiler!
Böylece, bir ön uç web geliştiricisinin bakış açısından, tarayıcı önekleri, tarayıcıların bu stilleri destekleyeceğini bilerek bir siteye yeni CSS özellikleri eklemek için kullanılır. Bu, farklı tarayıcı üreticilerinin özellikleri biraz farklı yollarla veya farklı bir sözdizimi ile uygulandığında özellikle yararlı olabilir.
Kullanabileceğiniz CSS tarayıcı önekleri (her biri farklı bir tarayıcıya özgüdür):
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
Çoğu durumda, yeni bir CSS stili özelliğini kullanmak için standart CSS özelliğini alır ve her tarayıcı için öneki eklersiniz. Önceden belirlenmiş sürümler her zaman önce gelir (tercih ettiğiniz sırada), normal CSS özelliği devam eder. Örneğin, belgenize bir CSS3 geçişi eklemek isterseniz, geçiş özelliğini aşağıda gösterildiği gibi kullanırsınız:
-webkit- geçiş: tüm 4s kolaylığı;
-moz- geçiş: tüm 4s kolaylığı;
-ms- geçişi: tüm 4s kolaylığı;
-o- geçiş: tüm 4s kolaylığı;
geçiş: tüm 4s kolaylığı;
Not: Bazı tarayıcılarda, diğerlerine göre belirli özellikler için farklı bir sözdizimi bulunduğunu unutmayın. Bu nedenle, bir mülkün tarayıcı tarafından önceden yüklenen sürümünün standart özellikle tam olarak aynı olduğunu varsaymayın. Örneğin, bir CSS degrade oluşturmak için doğrusal gradyan özelliğini kullanırsınız. Chrome ve Safari'nin Firefox, Opera ve modern sürümleri, söz konusu mülkü uygun ön ek ile birlikte kullanırken, Chrome ve Safari'nin önceki sürümlerinde önek özelliği -webkit-gradyanı kullanılır. Ayrıca, Firefox standart olanlardan farklı değerler kullanır.
Bildirimi her zaman CSS özelliğinin normal, önceden eklenmemiş sürümü ile sonlandırmanızın nedeni, bir tarayıcı kuralı desteklediğinde, bunu kullanacaktır. CSS'nin nasıl okuntığını unutmayın. Daha sonraki kurallar, özgüllüğün aynı olması durumunda daha öncekilere göre önceliğe sahiptir, böylece bir tarayıcı bir kuralın satıcı sürümünü okuyacaktır ve normal olanı desteklemiyorsa, ancak bunu yaptıktan sonra, satıcı sürümüyle birlikte geçersiz kılınacaktır. gerçek CSS kuralı.
Satıcı Önekleri Hack Değil
Satıcı önekleri ilk kez sunulduğunda, birçok web uzmanı bir hack olup olmadıklarını ya da farklı tarayıcıları desteklemek için bir web sitesinin kodunu değiştirmenin karanlık günlerine geri kaydıklarını merak ettiler (" Bu site, IE'de en iyi görüntüleniyor " mesajlarını hatırlayın). Ancak CSS satıcıları önekleri hack değildir ve bunları işinizde kullanmayla ilgili çekinceleriniz olmamalıdır.
Bir CSS hack, başka bir özelliğin düzgün çalışması için başka bir öğenin veya özelliğin uygulanmasındaki kusurları kullanır. Örneğin, kutu modeli, ses ailesi özelliğinin ayrıştırılmasında veya tarayıcıların ters eğik çizgileri (\) nasıl ayrıştığı konusunda istismar edilen kusurları keser. Ancak bu hackler, Internet Explorer 5.5'in kutu modelini nasıl kullandığı ve Netscape'in nasıl yorumladığı ve ses stili stili ile ilgisi olmadığı arasındaki farkın problemini çözmek için kullanıldı. Neyse ki bu iki eski tarayıcı, şu günlerde kendimizle ilgili endişeleri olmayanlar.
Bir satıcı ön eki bir hack değildir, çünkü özelliklerin bir mülkün nasıl uygulanabileceğine ilişkin kurallar oluşturmasına izin verirken, aynı zamanda tarayıcı yapıcıların bir özelliği başka hiçbir şeyi ihlal etmeden farklı bir şekilde uygulamalarına izin verir. Ayrıca, bu önekler, sonunda belirtimin bir parçası olacak CSS özellikleriyle çalışmaktadır. Mülkiyete erken erişim için bazı kodları ekliyoruz. Bu, CSS kuralını normal, önceden belirlenmemiş özelliklerle sonlandırmanın başka bir nedenidir. Bu şekilde, tam tarayıcı desteği elde edildikten sonra öntanımlı sürümleri bırakabilirsiniz.
Belirli bir özellik için tarayıcının neyi desteklediğini bilmek ister misiniz? CanIUse.com sitesi, bu bilgileri toplamak ve hangi tarayıcıların hangi tarayıcıların hangi sürümlerini desteklediğini bildirmek için harika bir kaynaktır.
Satıcı Önekler Sıkıcı Ama Geçici
Evet, tüm tarayıcılarda çalışmaya başlamak için 2–5 kez özellikler yazmak zorunda kalmak can sıkıcı ve tekrarlayıcı olabilir, ancak bu geçici bir durumdur. Örneğin, birkaç yıl önce, bir kutuda yuvarlanmış bir köşe ayarlamak için şunları yazmanız gerekiyordu:
-moz-sınır yarıçapı: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
sınır yarıçapı: 10px 5px;
Ama şimdi bu tarayıcılar bu özelliği tam olarak desteklediler, gerçekten sadece standartlaştırılmış versiyona ihtiyacınız var:
sınır yarıçapı: 10px 5px;
Chrome, sürüm 5.0'dan bu yana CSS3 özelliğini destekledi, Firefox sürüm 4.0'da ekledi, Safari 5.0'da, Opera'da 10.5'te, iOS'ta 4.0'da ve Android'de 2.1'de ekledi. Internet Explorer 9 bile bir önek olmadan destekler (ve IE 8 ve daha düşük önekler ile veya önekler olmadan desteklemedi).
En modern yöntemlerin gerisinde kalan web sayfalarını oluşturmayı planlamadığınız sürece, tarayıcıların her zaman değişeceğini ve eski tarayıcıları desteklemeye yönelik yaratıcı yaklaşımlar gerektiğini unutmayın. Sonunda, tarayıcı öneklerini yazmak, büyük ihtimalle gelecek sürümde düzeltilecek hataları bulmaktan ve bunlardan yararlanmaktan çok daha kolaydır; bu da, istismar edilecek başka bir hata bulmanızı gerektirir.