Bazen veya CSS tarayıcı önekleri olarak da bilinen CSS tedarikçi önekleri, tarayıcı üreticilerinin bu özellikler tüm tarayıcılarda tam olarak desteklenmeden önce yeni CSS özellikleri için destek eklemelerinin bir yoludur. Bu, tarayıcı üreticisinin bu yeni CSS özelliklerinin tam olarak nasıl uygulanacağını belirlediği bir tür test ve deneme döneminde yapılabilir. Bu önekler, birkaç yıl önce CSS3’ün yükselişiyle çok popüler hale geldi.
Satıcı Öneklerinin Kökenleri
CCS3 ilk sunulduğunda, bir dizi heyecanlı özellik, farklı zamanlarda farklı tarayıcıları vurmaya başladı. Örneğin, Webkit destekli tarayıcılar (Safari ve Chrome), dönüştürme ve geçiş gibi bazı animasyon tarzı özellikleri sunan ilk tarayıcılardır. Satıcı önekli özellikleri kullanarak, web tasarımcıları bu yeni özellikleri işlerinde kullanabildiler ve diğer tarayıcı üreticilerinin yetişmesini beklemek yerine onları hemen destekleyen tarayıcılarda görmelerini sağladılar!
Ortak Önekler
Bu nedenle, bir ön uç web geliştiricisinin bakış açısından, tarayıcı önekleri, tarayıcıların bu stilleri destekleyeceğini bilmenin rahatlığını yaşarken bir siteye yeni CSS özellikleri eklemek için kullanılır. Bu, özellikle farklı tarayıcı üreticileri özellikleri biraz farklı şekillerde veya farklı bir sözdizimiyle uyguladığında yararlı olabilir. Kullanabileceğiniz (her biri farklı bir tarayıcıya özgü olan) CSS tarayıcı önekleri şunlardır:
- Android: -webkit-
- Chrome: -webkit-
- Firefox: -moz-
- Internet Explorer: -ms-
- iOS: -webkit-
- Opera: -o-
- Safari: -webkit-
Önek Ekleme
Çoğu durumda, yepyeni bir CSS stil özelliği kullanmak için standart CSS özelliğini alır ve her tarayıcı için ön eki eklersiniz. Önekli sürümler her zaman önce gelir (tercih ettiğiniz herhangi bir sırada), normal CSS özelliği ise en son gelir. Örneğin, belgenize bir CSS3 geçişi eklemek istiyorsanız, geçiş özelliğini aşağıda gösterildiği gibi kullanırsınız: -webkit-transition: tüm 4s kolaylığı;
-moz geçiş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ığı;
class = “ql-syntax”> Unutmayın, bazı tarayıcıların belirli özellikler için diğerlerinden farklı bir sözdizimi vardır, bu nedenle bir özelliğin tarayıcı önekli sürümünün standart özellik ile tamamen aynı olduğunu varsaymayın. Örneğin, bir CSS gradyanı oluşturmak için doğrusal gradyan özelliğini kullanırsınız. Firefox, Opera ve Chrome ile Safari’nin modern sürümleri bu özelliği uygun önekle kullanırken, Chrome ve Safari’nin ilk sürümleri önekli -webkit-gradient özelliğini kullanır. Ayrıca Firefox, standart değerlerden farklı değerler kullanır. Bildiriminizi her zaman CSS özelliğinin normal, önekli olmayan sürümüyle sonlandırmanızın nedeni, bir tarayıcı kuralı desteklediğinde bunu kullanmasıdır. CSS’nin nasıl okunduğunu unutmayın. Daha sonraki kurallar, özgüllük aynıysa öncekilere göre öncelik kazanır, bu nedenle bir tarayıcı bir kuralın satıcı sürümünü okur ve normal olanı desteklemiyorsa bunu kullanır, ancak desteklediğinde satıcı sürümünü geçersiz kılar. gerçek CSS kuralı.
Satıcı Önekleri Hack Değildir
Satıcı önekleri ilk kez kullanıma sunulduğunda, birçok web uzmanı bunların bir bilgisayar korsanlığı olup olmadığını veya farklı tarayıcıları desteklemek için bir web sitesinin kodunu çatallamanın karanlık günlerine geri dönüp dönmediğini merak etti (şunu unutmayın “Bu site en iyi IE’de görüntülenir“mesaj). CSS satıcılarının önekleri bilgisayar korsanlığı değildir, ancak bunları çalışmanızda kullanmakla ilgili hiçbir çekinceniz olmamalıdır. Bir CSS saldırısı, başka bir mülkün doğru şekilde çalışmasını sağlamak için başka bir öğenin veya mülkün uygulanmasındaki kusurları kullanır. Örneğin, kutu modeli hacklemesi, ses ailesinin ayrıştırılmasında veya tarayıcıların ters eğik çizgileri nasıl ayrıştırdığındaki kusurlardan yararlandı . Ancak bu korsanlar, Internet Explorer 5.5’in kutu modelini nasıl işlediği ile Netscape’in bunu nasıl yorumladığı arasındaki fark sorununu çözmek için kullanıldı. ve ses ailesi stiliyle hiçbir ilgisi yok. Neyse ki bu iki eski tarayıcı, bugünlerde kendimizi endişelendirmek zorunda olmadığımız tarayıcılardır. Bir satıcı öneki, spesifikasyonun nasıl bir özellik uygulanabilirken, aynı zamanda tarayıcı üreticilerinin bir özelliği diğer her şeyi bozmadan farklı bir şekilde uygulamasına izin verebilir. Ayrıca, bu önekler, sonunda spesifikasyonun bir parçası olacak. Mülke erken erişim sağlamak için sadece bazı kodlar ekliyoruz. Bu, CSS kuralını normal, önekli olmayan özellik ile sonlandırmanızın başka bir nedenidir. Bu şekilde, tam tarayıcı desteği elde edildiğinde önekli sürümleri bırakabilirsiniz. Belirli bir özellik için tarayıcı desteğinin ne olduğunu bilmek ister misiniz? CanIUse.com web sitesi, bu bilgileri toplamak ve hangi tarayıcıların ve bu tarayıcıların hangi sürümlerinin şu anda bir özelliği desteklediğini size bildirmek için harika bir kaynaktır.
Satıcı Önekleri Rahatsız Edici Ancak Geçicidir
Evet, tüm tarayıcılarda çalışması için özellikleri 2-5 kez yazmak zorunda kalmak can sıkıcı ve tekrarlayıcı gelebilir, ancak bu geçici bir durumdur. Örneğin, sadece birkaç yıl önce, bir kutuya yuvarlak bir köşe koymak için şunu yazmanız gerekiyordu: -moz-border-radius: 10px 5px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-alt-sağ-yarıçap: 10px;
-webkit-border-alt-sol-yarıçap: 5px;
sınır yarıçapı: 10px 5px;
Ancak artık tarayıcılar bu özelliği tam olarak desteklemeye başladığına göre, gerçekten yalnızca standartlaştırılmış sürüme ihtiyacınız var: border-radius: 10px 5px;
Chrome, CSS3 özelliğini 5.0 sürümünden beri desteklemektedir, Firefox 4.0 sürümünde eklemiştir, Safari 5.0 sürümünde, Opera 10.5 sürümünde, iOS 4.0 sürümünde ve Android 2.1’de eklemiştir. Internet Explorer 9 bile bunu bir önek olmadan destekler (ve IE 8 ve daha düşük sürümler, öneklerle veya önekler olmadan bunu desteklemiyordu). En modern yöntemlerin yıllarca gerisinde kalan web sayfaları oluşturmayı planlamıyorsanız, tarayıcıların her zaman değişeceğini ve eski tarayıcıları desteklemek için yaratıcı yaklaşımlar gerekeceğini unutmayın. Sonunda, tarayıcı önekleri yazmak, büyük olasılıkla gelecekteki bir sürümde düzeltilecek olan hataları bulmaktan ve kullanmaktan çok daha kolaydır ve bundan yararlanılacak başka bir hata bulmanızı gerektirir.
