CSS Satıcısı veya Tarayıcı Önekleri Nelerdir?

Bazen veya olarak da bilinen CSS satıcı önekleri CSS tarayıcı önekleri, tarayıcı üreticilerinin aşağıdakilere destek eklemesinin bir yoludur. yeni CSS özellikleri bu özellikler tüm tarayıcılarda tam olarak desteklenmeden önce. 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 öneklerin yükselişi ile çok popüler oldu. CSS3 birkaç yıl önce.

Satıcı Öneklerinin Kökenleri

CCS3 ilk tanıtıldığında, farklı zamanlarda farklı tarayıcılara bir dizi heyecanlı özellik vurmaya başladı. Örneğin, Webkit destekli tarayıcılar (Safari ve Chrome), dönüştürme ve geçiş gibi bazı animasyon stili özelliklerini tanıtan ilk kişilerdi. Satıcı ön ekini kullanarak özellikleri, web tasarımcıları bu yeni özellikleri çalışmalarında kullanabildiler ve tarayıcılarda görmelerini sağladılar. diğer tarayıcı üreticilerinin onları yakalamasını beklemek yerine onları hemen destekledi. yukarı!

Ortak Önekler

Dolayısıyla, bir ön uç web geliştiricisinin bakış açısından, tarayıcıların bu stilleri destekleyeceğini bilmenin rahatlığını yaşarken bir siteye yeni CSS özellikleri eklemek için tarayıcı önekleri kullanılır. Bu, özellikle farklı tarayıcı üreticileri özellikleri biraz farklı şekillerde veya farklı bir sözdizimi ile uyguladığında yardımcı olabilir.

Kullanabileceğiniz CSS tarayıcı önekleri (her biri farklı bir tarayıcıya özgüdür):

• Android:

  -webkit-

• Krom:

  -webkit-

• Firefox:

  -moz-

• Internet Explorer:

  -Hanım-

• iOS:

  -webkit-

• Opera:

  -Ö-

• Safari:

  -webkit-

Önek Ekleme

Çoğu durumda, yepyeni bir CSS stili özelliği kullanmak için standart CSS özelliğini alır ve her tarayıcı için önek eklersiniz. Ön ekli sürümler her zaman önce gelir (tercih ettiğiniz herhangi bir sırayla), normal CSS özelliği en son gelir. Örneğin, belgenize bir CSS3 geçişi eklemek isterseniz, aşağıda gösterildiği gibi geçiş özelliğini kullanırsınız:

-webkit-geçiş: tüm 4s kolaylığı;
-moz-geçiş: tüm 4s kolaylığı;
-ms-geçiş: tüm 4s kolaylığı;
-o-geçiş: tüm 4s kolaylığı;
geçiş: tüm 4s kolaylığı; 

Bazı tarayıcıların belirli özellikler için diğerlerinden farklı bir sözdizimine sahip olduğunu unutmayın, 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 ve Safari'nin modern sürümleri bu özelliği uygun önekle birlikte kullanırken, Chrome ve Safari'nin önceki sürümleri -webkit-gradient önek özelliğini kullanır.

Ayrıca, Firefox standart olanlardan farklı değerler kullanır.

Bildiriminizi her zaman CSS özelliğinin normal, ön eksiz sürümüyle bitirmenizin nedeni, bir tarayıcının kuralı desteklediğinde onu kullanmasıdır. CSS'nin nasıl okunduğunu hatırlayın. Spesifiklik aynıysa sonraki kurallar öncekilere göre önceliklidir, bu nedenle tarayıcı bir normal olanı desteklemiyorsa, ancak bir kez desteklediğinde, satıcı sürümünü gerçek CSS ile geçersiz kılacaktır. kural.

Satıcı Önekleri Hack Değildir

Satıcı önekleri ilk kez tanıtıldığında, birçok web uzmanı bunların bir bilgisayar korsanlığı mı yoksa bir bilgisayar korsanlığı mı olduğunu merak etti. farklı tarayıcıları desteklemek için bir web sitesinin kodunun çatallandığı karanlık günlere geri dönün (bunu unutmayın) "Bu site en iyi IE'de görüntülenir" İleti). Bununla birlikte, CSS satıcılarının önekleri hack değildir ve bunları işinizde kullanmak konusunda hiçbir çekinceniz olmamalıdır.

Bir CSS saldırısı, başka bir özelliğin doğru şekilde çalışmasını sağlamak için başka bir öğenin veya özelliğin uygulanmasındaki kusurlardan yararlanır. Örneğin, kutu modeli, ses ailesinin ayrıştırılmasında veya tarayıcıların ters eğik çizgileri nasıl ayrıştırmasında yararlanılan kusurları hackler. Ancak bu hack'ler, Internet Explorer 5.5'in kutu modelini nasıl ele aldığı ve nasıl kullandığı arasındaki fark sorununu çözmek için kullanıldı. Netscape yorumladı ve ses ailesi stiliyle hiçbir ilgisi yok. Neyse ki bu iki eski tarayıcı, bugünlerde kendimizle ilgilenmek zorunda olmadığımız tarayıcılardır.

Bir satıcı öneki, spesifikasyonun bir özelliğin nasıl uygulanabileceğine ilişkin kurallar oluşturmasına izin verdiği için bir hack değildir. aynı zamanda tarayıcı üreticilerinin her şeyi bozmadan bir özelliği farklı bir şekilde uygulamalarına izin verirken Başka. Ayrıca, bu önekler CSS özellikleriyle çalışır. sonunda şartnamenin bir parçası olacak. Sadece mülke erken erişim sağlamak için bazı kodlar ekliyoruz. Bu, CSS kuralını normal, öneksiz özellik ile sonlandırmanın başka bir nedenidir. Bu şekilde, tam tarayıcı desteği sağlandığında ön ekli sürümleri bırakabilirsiniz.

Satıcı Önekleri Can Sıkıcı Ama 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, birkaç yıl önce bir kutuya yuvarlak bir köşe koymak için şunu yazmanız gerekiyordu:

-moz-border-radius: 10px 5px;
-webkit-border-sol-üst-yarıçap: 10px;
-webkit-border-sağ-üst yarıçapı: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-alt-sol-yarıçap: 5px;
sınır yarıçapı: 10 piksel 5 piksel; 

Ancak artık tarayıcılar bu özelliği tam olarak desteklemeye başladığına göre, gerçekten yalnızca standart sürüme ihtiyacınız var:

sınır yarıçapı: 10 piksel 5 piksel; 

Chrome, sürüm 5.0'dan beri CSS3 özelliğini desteklemektedir, Firefox bunu sürüm 4.0'da eklemiştir, Safari 5.0'da eklemiştir, Opera 10.5'te, iOS'ta 4.0 ve Android 2.1'de. Internet Explorer 9 bile önek olmadan destekler (ve IE 8 ve daha düşük sürümler, önek olsun veya olmasın desteklemiyor önekler).

Tarayıcıların her zaman değişeceğini ve planlamadığınız sürece eski tarayıcıları desteklemek için yaratıcı yaklaşımların gerekli olacağını unutmayın. web sayfaları oluşturmak bu, en modern yöntemlerin yıllarca gerisindedir. Sonunda, tarayıcı önekleri yazmak, büyük olasılıkla gelecekteki bir sürümde düzeltilecek olan ve yararlanılacak başka bir hata bulmanızı gerektiren hataları bulup kullanmaktan çok daha kolaydır.