Vendor önekleri nedir?

Bunlar, tarayıcı geliştiricilerinin yeni veya deneysel CSS özelliklerini resmi onay ve standartlara dahil edilmeden önce destek eklemek için kullandığı standart olmayan ön eklerdir. Webde yeni özelliklerin kademeli olarak uygulanmasını sağlarlar, ancak dikkatli bir yaklaşım gerektirirler.

Ana ön ekler:

• -webkit-: Chrome, Safari, Opera (bazı sürümler), çoğu mobil tarayıcı (Android ve iOS dahil).
• -moz-: Firefox.
• -ms-: Internet Explorer, Edge (bazı sürümler).
• -o-: Opera (eski sürümler).

Tedarikçi ön ekleri kullanırken, yazım sırasını dikkate almak önemlidir: önce ön ekler, sonra standart özellik. Bu, tarayıcılar standart özelliği desteklemeye başladığında, ön eki üzerine yazmasını sağlar.

.element {
  -webkit-border-radius: 10px; /* Safari sürüm 5 ve öncesi */
  -moz-border-radius: 10px; /* Firefox sürüm 4 ve öncesi */
  border-radius: 10px; /* Standart özellik */
}

Günümüzde, tüm tarayıcılar tarafından yeni CSS özelliklerinin daha aktif benimsenmesi sayesinde tedarikçi ön eklerin kullanımı önemli ölçüde azalmıştır. Ancak, eski tarayıcı sürümlerini desteklemek veya deneysel API'lerle çalışmak için gerekebilirler.

Tedarikçi ön eklerinin yönetimini otomatikleştirmek için genellikle PostCSS ve Autoprefixer eklentisi kullanılır.

// Autoprefixer ile PostCSS yapılandırması örneği
module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: ['last 2 versions', '> 1%'] // Desteklenen tarayıcılar
    })
  ]
};

Autoprefixer, CSS'i analiz eder ve tarayıcı uyumluluk ayarlarına göre gerekli ön ekleri ekler. Bu, geliştirmeyi kolaylaştırır ve manuel ön ek ekleme ve yönetim hatası olasılığını azaltır.