Ön ekleri yeni CSS özelliklerine koymanın nedeni nedir?

Tarayıcıların ön ekli olmayan sürümü kullanmasına izin vermek yerine, tarayıcıların yeni CSS özelliklerinin önekini kullanmasının geçerli bir nedeni var mı?

Örneğin , arka plan gradyanı için bir örnek kod şöyle görünür:

#arbitrary-stops {
  /* fallback DIY*/

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.05, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.95, #1a82f7), to(#2F2727));

  /* Safari 5.1+, Chrome 10+ */
  background: -webkit-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* IE 10 */
  background: -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

  /* Opera 11.10+ */
  background: -o-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
}

Web yöneticilerini aynı kodu aynı sonucu elde etmek için aynı kodu dört kez kopyalayıp yapıştırmaya zorlamanın anlamı nedir?

Not: Sık sık alıntılanan nedenlerden biri, ya tarayıcı özellikleri doğru şekilde uygulamazsa ya da spesifikasyon kesin değilse ön ekli stillerin geçici olarak tasarlanmasıdır .

IMO, bu sebep saçmalık:

• Tarayıcı motoru spesifikasyonu doğru bir şekilde uygulamıyorsa, tarayıcıyı öneksiz formda uygulamıyorsa veya önekli formda uygulamıyorsa da uyumlu olmayacaktır.
• Spesifikasyon kesin değilse, aynı ada sahip önceki uygulamaların ne zaman olduğu önemli olabilir. Örneğin, CSS2'nin vardı linear-gradient, ancak CSS3 linear-gradientek özelliklerle genişletmek isteseydi, yeni, taslak, -css3-<style>çalışan CSS2 olanı ve deneysel CSS3 olanı arasında ayrım yaparak uygulamanın geçici önekinin yapılması akıllıca olurdu . Uygulamada, CSS2'nin linear-gradientveya başka CSS3 yenilikleri yoktur.

Farklı tarayıcıların farklı uygulama biçimlerine sahip olup olmadığını da anlarım : örneğin metin gölgesi için Firefox gerekliyken <weight-of-shadow distance-x distance-y color>Chrome gerekliydi <distance-x distance-y weight-of-shadow color>. Ama aslında, durum böyle değil; en azından şimdiye kadar kullandığım CSS3'ün tüm yeni özellikleri aynı biçime sahipti.

Bu W3C notuna göre :

Gelecekteki CSS özellikleriyle çakışmaları önlemek için, CSS2.1 belirtimi CSS'nin tescilli ve deneysel uzantıları için önceden eklenmiş bir sözdizimi ayırır .

W3C sürecinde Aday Öneri aşamasına ulaşan bir spesifikasyondan önce, bir CSS özelliğinin tüm uygulamaları deneysel olarak kabul edilir. CSS Çalışma Grubu, uygulamaların bu tür özellikler için W3C Çalışma Taslakları'ndakiler de dahil olmak üzere tedarikçi firmanın ön ekli bir sözdizimini kullanmasını önerir. Bu, taslaktaki gelecekteki değişikliklerle uyumsuzlukları önler.

Burada ve burada CSS'nin durumunu takip edebilirsiniz .

Farklı tarayıcıların farklı uygulama biçimleri olup olmadığını da anlarım ... [b] ut aslında, durum böyle değil; en azından şimdiye kadar kullandığım CSS3'ün tüm yeni özellikleri aynı biçime sahipti.

Bu bana bu oyunu yeterince uzun süredir kullanmadığınızı söylüyor.

Sorun, web tarayıcılarının yeni özellikleri asla aynı şekilde uygulamamasıdır. Standartlaştırılmamış bir tarayıcı uygulama özelliklerini görmek yaygındır ve sonuç, her şeyin farklı tarayıcılarda farklı davranmasıdır.

Sadece bu değil, yeni özellikler genellikle hatalıdır (IE'yi isimle çağırmaktan kaçınırız) ve bu nedenle çeşitli öğelerin sözdizimi aynı olsa da sonuç farklıdır.

Bu, yeni özellikleri kullanma eğiliminde olan geliştiriciler için baş ağrısına neden olur. Stil sayfalarını yazmayı bitirdikten sonra, açıklanamayan nedenlerle farklı tarayıcılarda farklı şekilde oluşturulduğunu hemen fark ederler.

Ön ekler gelmeden önce, geliştiriciler genellikle CSS ayrıştırıcısındaki hataları kullanarak tarayıcılar arasında algılanabilir farklılıklara güvenmek zorunda kaldılar. Bu, aşağıdaki gibi iğrençliklerle sonuçlandı:

padding: 10px;
width: 200px;
w\idth: 180px;
height: 200px;
heigh\t: 180px;

Bu tür saldırılar, bir geliştiricinin bulabildikleri her türlü tuhaf yöntemi kullanarak stil sayfasını her tarayıcı için özelleştirme girişiminin sonucuydu.

Önekleri standart hale getirerek, geliştiricilerin farklı tarayıcılarda kararlı olmayan özellikleri kullanmalarını sağlar. -moz-Ve -webkit-ön ekler bol açıkça yazar sadece belirli web tarayıcılarında uygulanmalıdır bir stil sağlamak için çalışıyor emin olun.

Özellikler sabit hale geldikten ve tarayıcılar aynı şekilde davranmaya başladığında, öneki kaldırabilir ve özelliği bir kez bildirebilirsiniz.

Öneklerin her tarayıcı için bir kez stil bildirmeniz gerektiği anlamına gelmediğini fark etmenin önemli olduğunu düşünüyorum. Ön ekler, bir web tarayıcısının bir standarda uygun olmadığını gördüğünüzde ek stiller bildirmesi gerektiği anlamına gelir. Örneğin, yukarıdaki kodunuz yerine aşağıdakilerle başlamalısınız:

 background: linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

Aniden Microsoft'un doğrusal bir gradyanı doğru hesaplayamadığını fark ederseniz, IE'de sorunu düzeltmek için bir önek ekleyebilirsiniz:

 /* Friggin IE */
 background: -ms-linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);
 background: linear-gradient(left, #2F2727, #1a82f7 5%, #2F2727, #1a82f7 95%, #2F2727);

Biri farklı şeyler yapmasına rağmen, sayfanız her tarayıcıda aynı görünüyor.

A List Apart'ın bu makalesinde bunun çok kapsamlı bir şekilde ele alındığını göreceksiniz .

Tarayıcı motoru spesifikasyonu doğru bir şekilde uygulamıyorsa, tarayıcıyı öneksiz formda uygulamıyorsa veya önekli formda uygulamıyorsa da uyumlu olmayacaktır.

Fark ne zaman tarayıcı uyumluluğu kırmak alışkanlık olduğunu gelmez uyumlu hale gelir. Tarayıcının davranışı spesifikasyondan farklıysa, yeni bir ad altında listelendiği için değiştirdiklerinde eski kodu kırmazlar.