Lý do để đặt tiền tố trong các tính năng CSS mới là gì?

Có một lý do hợp lệ để các trình duyệt tiền tố các tính năng CSS mới, thay vì cho phép các quản trị web sử dụng phiên bản không có tiền tố?

Ví dụ: mã mẫu cho gradient nền trông như sau:

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

Điểm nào trong việc buộc các quản trị web sao chép-dán cùng một mã bốn lần để có cùng kết quả?

Lưu ý: một trong những lý do thường được trích dẫn là các kiểu tiền tố được dự định là tạm thời trong khi trình duyệt không triển khai chính xác thông số kỹ thuật hoặc thông số kỹ thuật không dứt khoát .

IMO, lý do này là vô nghĩa:

• Nếu công cụ trình duyệt không triển khai thông số kỹ thuật một cách chính xác, trình duyệt sẽ không tuân thủ, bất kể nó không thực hiện nó ở dạng không có tiền tố hay nó không thực hiện ở dạng tiền tố.
• Nếu thông số kỹ thuật không dứt khoát, có thể có vấn đề khi có các triển khai trước đó có cùng tên. Ví dụ: nếu CSS2 có linear-gradient, nhưng CSS3 được dự định mở rộng linear-gradientvới các tính năng bổ sung, sẽ rất thông minh khi đặt tiền tố tạm thời, bản nháp, triển khai bằng cách -css3-<style>phân biệt giữa CSS2 đang hoạt động và CSS3 thử nghiệm. Trong thực tế, CSS2 không có linear-gradienthoặc mới lạ CSS3 khác.

Tôi cũng sẽ hiểu nếu các trình duyệt khác nhau có các định dạng triển khai khác nhau : ví dụ: giả sử Firefox yêu cầu, đối với bóng văn bản <weight-of-shadow distance-x distance-y color>, trong khi Chrome yêu cầu <distance-x distance-y weight-of-shadow color>. Nhưng thực ra, đây không phải là trường hợp; ít nhất là tất cả các tính năng mới của CSS3 tôi đã sử dụng cho đến nay có cùng định dạng.

Theo ghi chú W3C này :

Để tránh xung đột với các tính năng CSS trong tương lai, đặc tả CSS2.1 dành một cú pháp tiền tố cho các phần mở rộng thử nghiệm và độc quyền cho CSS.

Trước khi thông số kỹ thuật đạt đến giai đoạn Đề xuất của Ứng viên trong quy trình W3C, tất cả các triển khai của tính năng CSS đều được coi là thử nghiệm. Nhóm làm việc CSS khuyến nghị rằng việc triển khai sử dụng cú pháp có tiền tố của nhà cung cấp cho các tính năng đó, bao gồm cả các tính năng trong Bản nháp làm việc của W3C. Điều này tránh sự không tương thích với những thay đổi trong tương lai của dự thảo.

Bạn có thể theo dõi trạng thái của CSS tại đây và đây .

Tôi cũng sẽ hiểu nếu các trình duyệt khác nhau có các định dạng triển khai khác nhau ... [b] ut thực sự, đây không phải là trường hợp; ít nhất là tất cả các tính năng mới của CSS3 tôi đã sử dụng cho đến nay có cùng định dạng.

Điều này cho tôi biết rằng bạn đã không chơi trò chơi này đủ lâu.

Vấn đề là trình duyệt web không bao giờ thực hiện các tính năng mới theo cách tương tự. Người ta thường thấy một trình duyệt thực hiện các tính năng chưa được chuẩn hóa và kết quả là mọi thứ hoạt động khác nhau trên các trình duyệt khác nhau.

Không chỉ vậy, các tính năng mới thường có lỗi (chúng tôi sẽ tránh gọi IE bằng tên) và do đó, mặc dù cú pháp cho các yếu tố khác nhau là như nhau, nhưng kết quả lại khác nhau.

Điều này gây đau đầu cho các nhà phát triển đang cố gắng sử dụng các tính năng mới. Sau khi họ viết xong bản định kiểu, họ nhanh chóng nhận ra rằng nó hiển thị khác nhau trên các trình duyệt khác nhau vì những lý do không thể giải thích được.

Trước khi các tiền tố xuất hiện, các nhà phát triển đã buộc phải dựa vào sự khác biệt có thể phát hiện được giữa các trình duyệt, thường bằng cách khai thác lỗi trong trình phân tích cú pháp CSS. Điều này dẫn đến sự ghê tởm như thế này:

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

Những kiểu hack này là kết quả của nỗ lực của nhà phát triển để tùy chỉnh biểu định kiểu của họ cho từng trình duyệt, sử dụng bất kỳ phương thức kỳ quặc nào họ có thể tìm thấy.

Bằng cách tiêu chuẩn hóa các tiền tố, nó cho phép các nhà phát triển sử dụng các tính năng không ổn định trên các trình duyệt khác nhau. Các tiền tố -moz-và -webkit-tiền tố làm cho rất rõ ràng rằng tác giả đang cố gắng cung cấp một phong cách chỉ nên được áp dụng trong một số trình duyệt web nhất định.

Khi các tính năng trở nên ổn định và trình duyệt bắt đầu hoạt động giống nhau, bạn có thể xóa tiền tố và khai báo tính năng một lần.

Tôi nghĩ điều quan trọng là phải nhận ra rằng tiền tố KHÔNG có nghĩa là bạn phải khai báo kiểu một lần cho mọi trình duyệt. Tiền tố có nghĩa là phải khai báo các kiểu bổ sung bất cứ khi nào bạn thấy trình duyệt web không tuân thủ tiêu chuẩn. Ví dụ: thay vì mã ở trên, bạn nên bắt đầu bằng:

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

Nếu bạn đột nhiên nhận ra rằng Microsoft không thể tính toán độ dốc tuyến tính chính xác, thì bạn có thể thêm tiền tố để khắc phục sự cố trên 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);

Đột nhiên trang của bạn trông giống nhau trên mọi trình duyệt, mặc dù thực tế là một trong số họ đã làm những việc khác nhau.

Bạn sẽ thấy rằng điều này đã được đề cập một cách rất toàn diện trong bài viết này trên A List Apart .

Nếu công cụ trình duyệt không triển khai thông số kỹ thuật một cách chính xác, trình duyệt sẽ không tuân thủ, bất kể nó không thực hiện nó ở dạng không có tiền tố hay nó không thực hiện ở dạng tiền tố.

Sự khác biệt là trình duyệt sẽ không phá vỡ tính tương thích khi nó không trở nên phù hợp. Nếu hành vi của trình duyệt khác với thông số kỹ thuật, thì họ sẽ không phá vỡ mã cũ khi họ thay đổi nó - vì nó được liệt kê dưới một tên mới.