CSS Girişi

Önekli CSS

CSS Önekleyici Nedir?

Tarayıcı üreticileri, -webkit-, -moz-, -ms- ve -o- gibi önekler kullanarak deneysel CSS özelliklerini uygular. Bu önekler olmadan modern CSS'iniz eski tarayıcılarda çalışmaz. Bu CSS önekleyici, CSS (Basamaklı Stil Sayfaları)'nin farklı tarayıcılarda ve sürümlerde çalışması için gerekli tüm vendor öneklerini otomatik olarak ekler.

MDN Web Docs'a göre vendor önekleri çapraz tarayıcı uyumluluğu için kritik öneme sahiptir. Aracımız, hangi özelliklerin önek gerektirdiğini belirlemek için Can I Use veritabanını takip eder ve stillerinizin Chrome, Firefox, Safari, Edge ve eski tarayıcılarda çalışmasını sağlar.

Her şey tarayıcınızda yerel olarak çalışır. Yükleme yok, sunucu yok – CSS'inizi yapıştırın ve anında öneklenmiş çıktıyı alın.

CSS Önekleyici Nasıl Kullanılır

CSS'inize vendor önekleri eklemek için bu adımları izleyin. Her adım bu sayfadaki gerçek düğme ve panelleri kullanır.

Yapıştır, Yükle veya Örnek Yükle

Sol CSS Girişi paneline CSS yapıştırın veya Yükle'ye tıklayarak .css dosyası yükleyin. Önek gerektiren özellikler içeren örnek stilleri görmek için Örnek'e tıklayın. Örnek:

.subscriber-card {
  display: flex;
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

Önekli Çıktıyı Görüntüle

Sağ Önekli CSS paneli gerekli yerlere -webkit-, -moz-, -ms- ve -o- önekleri eklenmiş çıktıyı gösterir. flex, transform ve transition gibi özellikler çapraz tarayıcı desteği için tüm önekli sürümleri alır.

Kopyala veya İndir

Kopyala'ya tıklayarak panoya kopyalayın veya İndir'e tıklayarak .css olarak kaydedin. Yeniden başlamak için Temizle'yi kullanın. Tüm işlemler tarayıcınızda çalışır.

Ne Zaman Kullanırsınız

Çapraz Tarayıcı Uyumluluğu

Eski tarayıcılarda da çalışması gereken bir site mi inşa ediyorsunuz? Flexbox ve Grid gibi modern CSS özelliklerinin her yerde çalışmasını sağlamak için vendor önekleri ekleyin. Eski tarayıcı desteğine sahip kurumsal projeler için vazgeçilmezdir.

Hızlı Prototipleme

CSS animasyonlarını veya transform'ları farklı tarayıcılarda test mi ediyorsunuz? Tarayıcıya özgü sorunları önlemek için önce kodunuzu önekleyin. Tasarımları hızla geliştirirken zaman kazandırır.

Eski Projeler

Hâlâ IE11 veya eski Chrome sürümlerini destekleyen eski projeleri mi yönetiyorsunuz? Deploy öncesinde yeni CSS özelliklerine önekler ekleyin. Mevcut tarayıcı desteğinin bozulmasını önler.

CSS Öğrenme

Hangi CSS özelliklerinin vendor öneklerine ihtiyaç duyduğunu anlamak mı istiyorsunuz? Bu aracı kullanarak hangi özelliklerin önek gerektirdiğini görün. Tarayıcı uyumluluğunu öğrenen geliştiriciler için eğiticidir.

Sık Sorulan Sorular

Vendor önekleri nedir?

Vendor önekleri, -webkit-, -moz-, -ms- ve -o- gibi tarayıcıya özgü CSS özellik önekleridir. Tarayıcılar bunları, resmi standartlar haline gelmeden önce deneysel veya standart dışı CSS özelliklerini uygulamak için kullanır.

Modern tarayıcılarda hâlâ öneklere ihtiyacım var mı?

En yeni özellikler için evet. Modern tarayıcılar standart CSS'in çoğunu desteklese de bazı yeni özellikler ve eski tarayıcı sürümleri hâlâ önek gerektirir. Belirli özellik desteği için Can I Use'yi kontrol edin.

Hangi özellikler önek gerektiriyor?

Yaygın olanlar arasında transform, transition, animation, flex özellikleri, border-radius (eski tarayıcılar), box-shadow ve diğerleri sayılabilir. Aracımız bunları MDN standartlarına göre otomatik olarak tespit eder.

Önekli özelliklerin sırası nedir?

Önekli özellikler standart özelliğin önüne gelmelidir. Aracımız bu kurala uyar: önce vendor önekleri (-webkit-, -moz-, -ms-, -o-), ardından en sona önek içermeyen standart özellik.

Bu CSS dosyamı büyütür mü?

Evet, vendor önekleri eklemek dosya boyutunu artırır. Ancak bunun karşılığında tarayıcı uyumluluğu elde edersiniz. Üretim için bunu minifikasyon ile birlikte kullanın ve yapı sürecinizde Autoprefixer kullanmayı düşünün.

CSS verilerim güvende mi?

Kesinlikle. Tüm işlemler JavaScript kullanılarak tarayıcınızda gerçekleşir. CSS'iniz bilgisayarınızdan hiçbir zaman çıkmaz – sunucu yüklemesi yok, veri depolama yok, tamamen özel.

İlgili CSS Araçları

Önekleme CSS geliştirmenin yalnızca bir parçasıdır. Yardımcı olabilecek diğer araçlar: