Apa alasan untuk menempatkan awalan dalam fitur CSS baru?

Apakah ada alasan yang sah untuk browser untuk awalan fitur CSS baru, daripada membiarkan webmaster menggunakan versi yang tidak diawali?

Misalnya, kode sampel untuk gradien latar belakang terlihat seperti:

#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);
}

Apa gunanya memaksa webmaster menyalin-menempelkan kode yang sama empat kali untuk mendapatkan hasil yang sama?

Catatan: salah satu alasan yang sering dikutip adalah bahwa gaya awalan dimaksudkan untuk sementara sementara browser tidak mengimplementasikan spesifikasi dengan benar, atau spesifikasi tidak definitif .

IMO, alasan ini tidak masuk akal:

• Jika mesin peramban tidak mengimplementasikan spesifikasi dengan benar, peramban tidak akan patuh, tidak peduli apakah itu tidak menerapkannya dalam bentuk yang tidak diawali atau tidak mengimplementasikannya dalam bentuk yang diawali.
• Jika spec tidak definitif, mungkin penting ketika ada implementasi sebelumnya dengan nama yang sama. Misalnya jika CSS2 memiliki linear-gradient, tetapi CSS3 dimaksudkan untuk memperluas linear-gradientdengan fitur tambahan, itu akan pintar untuk awalan sementara yang baru, rancangan, implementasi dengan -css3-<style>membedakan antara yang bekerja CSS2, dan yang eksperimental CSS3. Dalam praktiknya, CSS2 tidak memiliki linear-gradientatau hal baru CSS3 lainnya.

Saya juga akan mengerti jika browser yang berbeda memiliki format implementasi yang berbeda : misalnya katakanlah Firefox diperlukan, untuk bayangan teks <weight-of-shadow distance-x distance-y color>,, sementara Chrome diperlukan <distance-x distance-y weight-of-shadow color>. Tetapi sebenarnya, ini bukan masalahnya; setidaknya semua fitur baru CSS3 yang saya gunakan sejauh ini memiliki format yang sama.

Menurut catatan W3C ini :

Untuk menghindari bentrokan dengan fitur CSS di masa mendatang, spesifikasi CSS2.1 menyimpan sintaks yang diawali untuk ekstensi eksklusif dan eksperimental untuk CSS.

Sebelum spesifikasi mencapai tahap Kandidat Rekomendasi dalam proses W3C, semua implementasi fitur CSS dianggap eksperimental. Kelompok Kerja CSS merekomendasikan agar implementasi menggunakan sintaks yang diawali vendor untuk fitur-fitur tersebut, termasuk yang ada di W3C Working Draf. Ini menghindari ketidakcocokan dengan perubahan di masa mendatang dalam konsep.

Anda dapat menindaklanjuti keadaan CSS di sini dan di sini .

Saya juga akan mengerti jika browser yang berbeda memiliki format implementasi yang berbeda ... [b] ut sebenarnya, ini bukan masalahnya; setidaknya semua fitur baru CSS3 yang saya gunakan sejauh ini memiliki format yang sama.

Ini memberitahu saya bahwa Anda belum bermain game ini cukup lama.

Masalahnya adalah browser web tidak pernah mengimplementasikan fitur baru dengan cara yang sama. Adalah umum untuk melihat fitur penerapan browser yang belum terstandarisasi, dan hasilnya adalah semuanya bekerja secara berbeda pada browser yang berbeda.

Tidak hanya itu, fitur-fitur baru sering buggy (kami akan menghindari memanggil IE dengan nama), dan meskipun sintaks untuk berbagai elemen adalah sama, hasilnya berbeda.

Ini menyebabkan sakit kepala bagi pengembang yang tring menggunakan fitur baru. Setelah mereka selesai menulis stylesheet mereka, mereka dengan cepat menyadari bahwa itu membuat berbeda pada browser yang berbeda untuk alasan yang tidak dapat dijelaskan.

Sebelum awalan muncul, pengembang dipaksa untuk mengandalkan perbedaan yang dapat terdeteksi antara browser, seringkali dengan mengeksploitasi kesalahan dalam parser CSS. Ini menghasilkan kekejian seperti ini:

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

Jenis peretasan ini adalah hasil dari upaya pengembang untuk menyesuaikan stylesheet mereka untuk setiap browser, menggunakan segala jenis metode aneh yang bisa mereka temukan.

Dengan membuat standar awalan, ini memungkinkan pengembang untuk menggunakan fitur yang tidak stabil di berbagai browser. The -moz-dan -webkit-awalan membuatnya sangat jelas bahwa penulis sedang mencoba untuk memberikan gaya yang harus diterapkan hanya di browser web tertentu.

Setelah fitur menjadi stabil dan browser mulai melakukan hal yang sama, Anda dapat menghapus awalan dan mendeklarasikan fitur tersebut sekali.

Saya pikir penting untuk menyadari bahwa awalan TIDAK berarti Anda harus mendeklarasikan gaya sekali untuk setiap browser. Awalan berarti yang harus mendeklarasikan gaya tambahan setiap kali Anda menemukan browser web tidak sesuai dengan standar. Misalnya, alih-alih kode Anda di atas, Anda harus mulai dengan:

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

Jika Anda tiba-tiba menyadari bahwa Microsoft tidak dapat menghitung gradien linier dengan benar, maka Anda bisa menambahkan awalan untuk memperbaiki masalah pada IE:

 /* 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);

Tiba-tiba halaman Anda terlihat sama di setiap browser, meskipun faktanya salah satu dari mereka melakukan hal yang berbeda.

Anda akan menemukan bahwa ini telah dibahas secara sangat komprehensif dalam artikel ini di A List Apart .

Jika mesin peramban tidak mengimplementasikan spesifikasi dengan benar, peramban tidak akan patuh, tidak peduli apakah itu tidak menerapkannya dalam bentuk yang tidak diawali atau tidak mengimplementasikannya dalam bentuk yang diawali.

Perbedaannya adalah bahwa browser tidak akan merusak kompatibilitas ketika tidak menjadi compliant. Jika perilaku browser berbeda dengan spec, maka mereka tidak akan merusak kode lama ketika mereka mengubahnya - karena terdaftar di bawah nama baru.