-webkit -moz ve benzeri kodlar nerede kullanılır

demsinasbey (69) 6 yıl önce sordu

uzun süredir aklıma takılıyor -webkit ve -moz gibi kodları hangi kodun altında kullanacağımız bunun üzerine bir çok kez araştırma yapmama rağmen düzgün bir liste bulamadım .

Eğer bu kodları nasıl ve nerde kullanacağımıza dair ayrıntılı bir kaynak varsa linkini yollarsanız çok sevinir Türkçe olursa iyi olur yoksa ingilizce de olur ama google çeviri herzaman başarılı bir çevirme yapamıyor ingilizcemde zayıf.

Bu konu ile bir kaynak yoksa css bilen bir arkadaşımız alt tarafa yazabilirmi.

Ben css öğrenirken bunu görmemiştim belkide onun için bu sıkıntıyı yaşıyorum ama tarayıcı uyumluluğu için öğrenmem lazım.

Bir başka sorumda bu kodlara günümüzde kullanmaya gerek varmı. Çünkü bu konu hakkında hiç güncel bir kaynak yok.

Not olarak tek bildiğim box shodow da kullanıldığı çünkü hangi box shodow örneğine baksam -webkit kodları var. 

@alattin hocam müsait bir zamanınızda cevaplarsanız sevinirim.

Toplam 1 cevap


alattin (16999) 6 yıl önce cevapladı
  • -webkit-
  •  -moz-
  • -ms-
  • -o-

Bunlar üretici ön eki (vendor prefix)  olarak adlandırılır.  Buradaki üretici tarayıcı,Firefox,Opera, Chrome gibi bunları sağlayan kurum ya da firmaları temsil eder.

  • -webkit > Chrome, Safari
  • -moz > Mozilla Firefox
  • -o > Opera
  • -ms > Internet Explorer 

tarayıcıları için kullanılır.  Neden böyle bir şey var-dı? Çünkü tarayıcılar farklı CSS özellikleri için kendi belirledikleri kodları destekliyor ve kullanıyorlardı.

Örneğin bir border yaptın ve köşesini hafif yuvarlatacaksın (radius) o zaman tüm tarayıcılar desteklesin diye şu şekilde yazman gerekiyordu:

-moz-border-radius: 10px 10px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
border-radius: 10px 5px

Çünkü tüm Firefox ve Safari border-radius ifadesini desteklemiyordu. Fakat artık günümüzde destekliyor ve bu sebepten sadece border-radius yazman yeterli.

Bu ifadeler aslında standart olmayan CSS kodları için kullanılıyor. Örneğin Chrome tarayıcı içine bir özellik koyuyor. Fakat bu özelliği kullanabilmen için standart CSS kodları yeterli değil. O zaman işte -webkit-border-sonuna-yildiz-ekle gibi bir özellik oluşturuyor. Bunu kullandığında sadece Chrome'da çalışan bir özelliğin oluyor.

Sonra bakıyor Firefox bu güzel bir özellik dur şunu biz de kullanalim diyor -moz-border-sonuna-yildiz-ekle diye bir özelliği onlarda ekliyor. Sonra W3C bu güzel bir özellikmiş diyor ve bir sonraki CSS sürümüne ekliyor.

2016 yılından beri bunun önüne geçmeye çalışıyorlar. Yani artık üretici ön eki olan özellikler olmasın diye çalışıyorlar.

box-shadow artık tüm tarayıcılar tarafından destekleniyor (güncel tarayıcılar). Yani onlarda üretici öneki kullanmana gerek yok.

demsinasbey 6 yıl önce

Çok sağolasınız hocam şimdilik güncel tarayıcıları destekleycek bir site yapmayı öğreneyim ileride belki gerek olursa eski tarayıcılar içinde bu şekilde kodlamayı öğrenirim ama içim rahatladı okadar kod yazdım tekrar düzenlemek zor olur ikinci projemde bu konulara dikkat edeceğim. Tekraradan cevapladığınız için çok teşekkür ederim.