Đã đến lúc suy nghĩ lại các tiền tố của nhà cung cấp trong CSS. Tiền tố của các trình duyệt cụ thể

Tiền tố Veternal - Bảng điều khiển đặc biệt được thêm vào trước tên CSS thuộc tính và tập trung vào các chức năng thử nghiệm của các trình duyệt nhất định. Đối với mỗi trình duyệt, có một tiền tố camendory.

Hôm nay chúng tôi muốn nói về tiền tố của nhà cung cấp, gọi là phổ biến nhất trong số họ và giải phóng một chút về chủ đề của ứng dụng thích hợp.

Nhà cung cấp là gì

Trước hết, tôi muốn xác định khái niệm về từ "nhà cung cấp" để tất cả chúng ta trở nên rõ ràng, tại sao tiền tố CSS được gọi là Vendon và không thích khác. Nhà cung cấp. - Một công ty hoặc thương hiệu đang tham gia vào việc sản xuất các sản phẩm hoặc cung cấp dịch vụ và cung cấp cho họ theo thương hiệu của riêng mình. Từ đến từ tiếng Pháp vendere. - Bán.

Tiền tố nhà cung cấp trong CSS là gì

Trong trường hợp tiền tố CSS, các nhà cung cấp là nhà sản xuất các trình duyệt sử dụng nhãn hiệu của họ ở dạng viết tắt dưới dạng tiền tố (tiền tố) cho một hoặc một thuộc tính CSS khác để nhận dạng. " Tại sao sử dụng các tiền tố này?"Bạn hỏi. Tiền tố Vendine được nhiều trình duyệt khác nhau sử dụng để triển khai danh sách các thuộc tính CSS và hỗ trợ công việc của chúng với động cơ của riêng họ về các thuộc tính thử nghiệm mới chưa được nhập chính thức và chưa được thêm vào thông số kỹ thuật W3C. Nói cách khác , một số loại tài sản, nó có thể thực hiện một tính năng hoàn toàn mới và thường rất hữu ích đã được hạch toán trước đây để sử dụng các hack, thủ thuật, thủ thuật đặc biệt hoặc thậm chí JavaScript. Tuy nhiên, thuộc tính này vẫn chưa được thêm vào tiêu chuẩn và có thể được giải thích xa Tất cả các trình duyệt, vì điều này trước đó thuộc tính này và tiền tố được thêm vào với tên của nhà cung cấp mà nó thuộc về trong tương lai, khi diễn giải trình duyệt mã CSS, thuộc tính sẽ được hiểu chính xác và đáp ứng chức năng mà nó thực sự đã được dự định.

Danh sách tiền tố nhà cung cấp cơ bản

Và bây giờ, hãy đưa ra một danh sách các tiền tố chính của nhà cung cấp tồn tại tại thời điểm này và được chúng tôi biết đến.

• Bằng - Trình duyệt Opera.
• -moz- - Trình duyệt của gia đình Mozilla (nhà sản xuất công ty của Mozilla Firefox nổi tiếng)
• -bệnh đa xơ cứng- - Microsoft Explorer.
• -Webkit- - Trình duyệt sử dụng một công cụ webcut - Google Chrome, Safari
• -icabab- - Trình duyệt thay thế chính thức EPPL - Aikab
• -khtml- - Hiếm khi sử dụng thông dịch viên KHTML cho KDE

Để sử dụng tiền tố một nhà cung cấp, bạn chỉ cần chọn bạn từ danh sách và thêm trực tiếp nó trước khi thử nghiệm, chưa được nhập vào thông số kỹ thuật chung của tài sản và vui mừng trong kết quả.

Ở đây, ví dụ, mã vô hiệu hóa chuyển đổi tự động (thay đổi kích thước) của văn bản *:

Điều chỉnh kích thước văn bản: Không có; -Moz-Text-size-Điều chỉnh: Không có; -Ms-size-size-Điều chỉnh: Không có; -Webkit-text-size-size: none;

* Bất động sản Điều chỉnh văn bản-Không có Nó có ý nghĩa khi sử dụng cho các thiết bị di động có trình duyệt có thể tự động thay đổi kích thước của văn bản trên trang, khiến nó có thể đọc được hơn, nhưng cùng lúc gây sát thương cho bố cục và thẩm mỹ.

Đầu tiên, chúng tôi mô tả tài sản theo hình thức chung - như thể nó đã tồn tại trong thông số kỹ thuật và được hỗ trợ bởi tất cả các trình duyệt, mặc dù cho đến nay nó vẫn chưa, nhưng sau một thời gian, rất có thể, nó sẽ có liên quan khi tài sản được phê duyệt . Sau đó, chúng tôi thêm một thuộc tính tương tự với các tiền tố khác nhau cho các trình duyệt có liên quan. Như bạn có thể thấy, tuy nhiên, không có gì trong việc này là không hoàn toàn không, hành động này là mã "trọng số", bởi vì trên thực tế, chúng tôi đã tăng số lượng mã byte 4-5 lần, sẽ khá đáng chú ý đối với các trang web với vô số tương tự phong cách. Và bản thân mã này trở nên ít dễ đọc hơn, vì nhiều sự lặp lại của một và giống nhau bắt đầu làm giàu trong mắt, và chỉ có một số cảm giác xấu và tối ưu hóa xấu.

Rời khỏi chủ đề, tôi muốn nói rằng có một phương thức lập trình, được gọi là OOP (Lập trình hướng đối tượng). Vì vậy, nhiệm vụ chính của nó là giảm mã bằng các lớp, chức năng, v.v ... chủ yếu là phương thức này tồn tại để thực hiện một số hành động cụ thể trong các phần khác nhau của chương trình, nó không cần phải viết các đoạn mã tương tự. Trong trường hợp OOP, bạn chỉ cần liên hệ với một lớp được xác định trước và các chức năng của nó. Nó đơn giản hóa công việc và giảm đáng kể và tối ưu hóa mã. Gần như điều tương tự cũng xảy ra trong trường hợp CSS với tiền tố của nhà cung cấp - khi chúng không, mã có vẻ được tối ưu hóa cho tất cả các trình duyệt và khi chúng có sự giúp đỡ của những người quay phim thiếu kiên nhẫn muốn chạy trước một đầu máy hơi nước chậm được gọi là W3C, Mã biến thành một món cháo bao gồm sao chép 5 lần các dòng tương tự khác với nhau với một số tiền tố không thể hiểu được.

Tốt hơn là tránh sử dụng tiền tố của nhà cung cấp và không cố gắng vượt qua đầu máy của một đặc điểm kỹ thuật duy nhất, nhưng nếu có mong muốn không thể cưỡng lại và cần phải sử dụng CSS của CSS, chưa được W3C, sau đó sử dụng tiền tố của Tất nhiên bạn có thể đánh bại bất cứ ai vì điều này sẽ không được. Tuy nhiên, theo chúng tôi, đây là một giai điệu xấu.

Tôi sẽ trích dẫn một mảnh vỡ từ cuốn sách Lai Faith "Bí mật CSS. Giải pháp lý tưởng cho các nhiệm vụ hàng ngày."

Tiền tố băng, ngọn lửa và trình duyệt

Phát triển các tiêu chuẩn luôn theo thiên nhiên nghịch lý: các nhóm chuẩn bị nhóm cần thông tin từ các nhà phát triển để tạo ra thông số kỹ thuật điều chỉnh nhu cầu thực sự của các nhà phát triển. Nhưng các nhà phát triển thường không quá quan tâm đến việc thử nghiệm những thứ mà họ không thể áp dụng trong công việc của họ. Khi các công nghệ thử nghiệm bắt đầu được sử dụng rộng rãi trong sản xuất, nhóm làm việc không có lối thoát khác, ngoại trừ tuân thủ phiên bản đầu tiên, thử nghiệm của công nghệ, vì sự thay đổi của nó có khả năng có các trang web hiện có. Rõ ràng, nó phủ nhận đầy đủ những lợi thế có thể mang lại thử nghiệm các phiên bản đầu tiên của các tiêu chuẩn với các nhà phát triển thực sự.

Trong những năm qua, nhiều lựa chọn để thoát khỏi tình huống khó khăn này đã được đề xuất, nhưng tất cả đều xa lý tưởng. Mọi nơi đều bị coi thường tiền tố trình duyệt là một trong số đó. Ý tưởng là các cơ hội thực nghiệm (hoặc thậm chí được cấp bằng sáng chế) có thể được triển khai cho từng trình duyệt, có tên để thêm tiền tố đặc biệt. Các tiền tố phổ biến nhất là -Moz- cho Firefox, -ms- cho IE, -o- cho Opera và -WebKit- cho Safari và Chrome. Các nhà phát triển được cung cấp để thử nghiệm một cách tự do với các tính năng đặc biệt này và chia sẻ ấn tượng của họ với nhóm làm việc. Lần lượt nhóm làm việc, nên tính đến phản hồi từ các nhà phát triển trong việc chuẩn bị thông số kỹ thuật, dần dần mang lại chức năng tương ứng để hoàn thiện. Kể từ khi phiên bản cuối cùng, được tiêu chuẩn hóa phải là một tên khác (không có tiền tố), việc bổ sung của nó không được tạo ra các vụ va chạm trong các sản phẩm đã sử dụng các tương đương hiện có, gánh nặng bởi tiền tố.

Âm thanh hoàn hảo, phải không? Nhưng, như bạn đã biết, thực tế hóa ra là hoàn toàn không giống như những gì đã được lên kế hoạch dịch. Khi các nhà phát triển nhận ra rằng các thuộc tính này phụ thuộc vào trình duyệt, có thể dễ dàng tạo hiệu ứng, việc thực hiện những nỗ lực lớn nhất trước đây và các con đường xuyên qua rối, họ bắt đầu sử dụng chúng ở nơi chỉ có thể. Các thuộc tính với tiền tố trình duyệt nhanh chóng biến thành một xu hướng thời trang trong thế giới của CSS. Hướng dẫn đã được sản xuất, câu trả lời đã được xuất bản trên trang web StackOverflow và ngay sau khi mọi nhà phát triển CSS tự tôn trọng đã bị choáng ngợp với các trang web của họ từ chân đến đầu.

Cuối cùng, các nhà phát triển nhận ra rằng nếu chúng ta chỉ sử dụng tiền tố trình duyệt hiện có, thì quảng cáo mới cần được trả về và thêm quảng cáo mới mỗi lần trong trình duyệt mới, sự hỗ trợ của các khả năng CSS yêu thích của họ xuất hiện. Không đề cập đến thực tế là tất cả các tiền tố cần thiết cho cách này hay cách khác thường khá khó để giữ trí nhớ. Phán quyết? Tất nhiên, luôn luôn sử dụng tất cả các tiền tố trình duyệt có thể, vào cuối cùng một lúc thêm phiên bản mà không cần tiền tố để đảm bảo xử lý mã chính xác trong tương lai. Kết quả là, mã bắt đầu tìm kiếm một cái gì đó như thế này:

Bán kính moz-Border: 10px; -Ms-Border-Radius: 10px; -O-Border-Radius: 10px; -Webkit-Border Radius: 10px; Border-Radius: 10px;

Trong số các quảng cáo này là hai phần dư thừa: -ms-Border-Radius và -O-Border-Radius không bao giờ trong bất kỳ trình duyệt nào không tồn tại, như trong IE và Opera, từ đầu, thuộc tính bán kính biên giới không có tiền tố đã được thực hiện . Rõ ràng, lặp lại mỗi quảng cáo lên đến năm lần vô cùng mệt mỏi và mã kết quả không được điều chỉnh cho sự hỗ trợ thông thường. Sự xuất hiện của các công cụ sẽ tự động hóa điều này sẽ là độc quyền là vấn đề thời gian:

trên các trang web như vậy như CSS3, xin vui lòng! (http://css3please.com) và pleeeese (http: // pleeese.io/playground.html), bạn có thể chèn mã CSS mà không cần tiền tố và lấy lại CSS với tất cả các tiền tố cần thiết. Các ứng dụng như vậy đã trở thành một trong những triển khai đầu tiên của việc bổ sung tiền tố trình duyệt tự động, nhưng nhanh chóng mất đi mức độ phổ biến của họ, vì so với các giải pháp khác khá khó chịu trong sử dụng;

Autoprefixer (http://github.com/ai/autoprefixer) sử dụng cơ sở dữ liệu từ Tôi có thể sử dụng ... (http://caniuse.com) để xác định tiền tố nào cần được thêm vào mã mà không cần tiền tố trình duyệt và biên dịch nó cục bộ như một bộ tiền xử lý;

tiện ích của riêng tôi -Prefix - miễn phí. (http://leaverou.github.io/profixfree) Thực hiện thử nghiệm các khả năng trong trình duyệt, xác định tiền tố nào được yêu cầu. Ưu điểm của nó là nó cực kỳ hiếm khi yêu cầu cập nhật, vì nó nhận được tất cả các thông tin cần thiết, bao gồm một danh sách các thuộc tính, từ môi trường trình duyệt;

tiền xử lý như Ít hơn (http://lesscss.org) và Sass. (http://sass-lang.com), không đề xuất chức năng tiêu chuẩn để thêm tiền tố, nhưng nhiều nhà phát triển tạo các bộ sưu tập của riêng họ để có khả năng mà chúng thường sử dụng tiền tố trình duyệt và trong lưu thông bạn có thể tìm thấy một số thư viện tương tự .

Vì các nhà phát triển đã sử dụng các phiên bản mà không có tiền tố là sự đảm bảo về hiệu suất của mã của họ trong tương lai, nhưng không thể thay đổi chúng. Về bản chất, chúng tôi đã đi đến một kết thúc chết với các thông số kỹ thuật của United bán cấp cho phép chỉ những thay đổi nhỏ. Rất sớm mọi người đã đến với nhận thức rằng tiền tố trình duyệt là một thất bại sử thi.

Ngày nay, tiền tố trình duyệt được sử dụng cho các triển khai thử nghiệm mới rất hiếm khi. Thay vào đó, khả năng thử nghiệm được bao gồm sử dụng cờ cấu hình, ngăn việc sử dụng các nhà phát triển của họ trong môi trường sản xuất - bởi vì bạn không thể buộc người dùng thay đổi cài đặt cục bộ để trang web trên máy của họ được hiển thị chính xác. Tất nhiên, hậu quả của việc này là bây giờ ít các nhà phát triển kiểm tra các khả năng thử nghiệm, nhưng chúng tôi vẫn có đủ phản hồi - và, có thể, phản hồi chất lượng cao không phải là những khó khăn được tạo ra bởi tiền tố trình duyệt. Tuy nhiên, thậm chí sẽ có rất nhiều thời gian trước khi chúng ta hoàn toàn thoát khỏi những hậu quả khó chịu của sự tồn tại của tiền tố trình duyệt.

Ý kiến \u200b\u200bcá nhân:

Không thêm tiền tố trình duyệt mà không có lý do cân nặng. Chỉ cần googled một tài sản mới cho bạn để hỗ trợ các trình duyệt. Quá thường thấy việc bổ sung các tiền tố cần thiết trong các trình duyệt rất cũ, người hầu như ai đó hầu như không hỗ trợ (ví dụ, cần thiết trong các phiên bản đầu tiên của Firefox hoặc Chrome) trên cùng một StackOverflow.

Bản dịch: Vlad Merzezhevich

Các nhà phát triển với tình yêu và sự ghét bỏ thuộc về tiền tố của CSS Vendon, cho phép bạn ở rìa của tiến trình do quảng cáo bằng lời nói:

Hình nền: -webkit-linear-gradient (#fff, # 000); Hình nền: -Moz-linear-gradient (#fff, # 000); Hình nền: -ms-linear-gradient (#fff, # 000); Hình nền: -o-gradient tuyến tính (#fff, # 000); Hình nền: gradient tuyến tính (#fff, # 000);

Nó hoạt động tốt trong lý thuyết, nhưng những gì xảy ra trong thực tế.

• Các thuộc tính thử nghiệm thường được triển khai đầu tiên trong động cơ WebKIT, nhưng không có gì đảm bảo rằng chúng sẽ xuất hiện trong các trình duyệt khác.
• Đôi khi rất khó để xác định xem tài sản có phần tiền tố Vendon của đặc tả CSS là một phần hay không. Một số nhà sản xuất trình duyệt không tiêu chuẩn hóa các thuộc tính.
• Ngay cả khi thuộc tính tiêu chuẩn đã thay đổi, các thuộc tính không chính xác với tiền tố của nhà cung cấp tiếp tục được hỗ trợ. Mã cũ của bạn vẫn hoạt động và bạn không cần phải quay lại với anh ta để sửa nó.

Bạn sẽ ngày càng tìm các trang web chỉ sử dụng tiền tố mộtwebkit, ngay cả khi các trình duyệt khác hỗ trợ thuộc tính hoặc nó phổ biến không có tiền tố (như Raduis biên giới). Chrome và Safari do đó trông tốt hơn so với các trình duyệt cạnh tranh và các nhà sản xuất khác không được hạnh phúc.

Vấn đề đã được nâng lên và cuộc thảo luận tại cuộc họp W3C vào ngày 7 tháng 2 năm 2012.

Các nhà hoạt động tiêu chuẩn dạy mọi người sử dụng webkit. Bạn sẽ thấy trong bài thuyết trình về những người ủng hộ tiêu chuẩn Web mà họ chiến dịch để sử dụng tiền tố WebKIT.

Công việc của chúng tôi là tìm một quyết định chung.

Hiện tại chúng tôi đang cố gắng tìm hiểu có bao nhiêu và những thuộc tính với tiền tố WebKIT thực sự được hỗ trợ trong Mozilla.

Nếu chúng tôi không hỗ trợ các tiền tố WebKIT, chúng tôi sẽ tự đóng cửa từ một phần của web di động.

Hãy nhìn vào đồng hồ này một lát.

Các trình duyệt không có trên công cụ WebKIT sẽ hỗ trợ tiền tố -Webkit. Quyết định này được coi là W3C.

Ý tưởng có khả năng thất bại với một vụ tai nạn. Hai hoặc nhiều việc triển khai thuộc tính tương tự sẽ không tương thích, vì vậy các nhà phát triển sẽ không thể sử dụng chúng ở bất cứ đâu. Người chiến thắng sẽ không được, bao gồm cả Apple và Google.

Nhưng tôi quan tâm nhiều hơn đến thiệt hại không thể khắc phục, điều này sẽ xảy ra nếu quyết định được đưa ra. Ngay khi các nhà phát triển thấy tiền tố webkit hoạt động trong Firefox, IE và Opera, họ sẽ mong đợi tiền tố hoạt động trong tất cả các thuộc tính. Chỉ riêng việc thông qua WebKIT sẽ phát triển theo cấp số nhân và các nhà sản xuất trình duyệt sẽ bị buộc phải giới thiệu tiền tố. Tại thời điểm này, các thuộc tính với WebKit sẽ là tiêu chuẩn thực tế bất kể thông số kỹ thuật W3C. Trò chơi đã kết thúc: Mở Web Đóng.

Ai có tội?

Chúng ta có thể chỉ với ngón tay của bạn theo sau.

Nhóm làm việc W3C.

Cô dành quá nhiều thời gian trong khi các tiêu chuẩn web đạt đến sự trưởng thành. Nó có thể là không thể tránh khỏi, nhưng các nhà sản xuất trình duyệt bỏ qua quá trình này.

Nhà sản xuất trình duyệt

Theo đuổi để thúc đẩy các công nghệ mới cho các nhà sản xuất dễ dàng để thêm tiền tố và quên nó đi. Các nhà phát triển web yêu cầu thêm thông tin: Thuộc tính này được coi là W3C và khi tiền tố bị xóa?

Trong thế giới lý tưởng, tiền tố thử nghiệm sẽ biến mất ngay khi trình duyệt bắt đầu duy trì một thuộc tính tiêu chuẩn. Các nhà sản xuất sẽ không làm như vậy, bởi vì nó phá vỡ các trang web, nhưng họ có thể thực hiện nhiều hơn để thu hút sự chú ý đến vấn đề, ví dụ, để phát hành các công cụ để phát hiện các thông báo lỗi và lỗi về đạo đức trong bảng điều khiển dành cho nhà phát triển.

Apple và Google.

Cả hai công ty đều phạm tội thúc đẩy các tiền tố WebKIT, như thể chúng là phần tiêu chuẩn của sự phát triển hàng ngày của HTML5. Apple bị buộc tội tích cực làm việc chống lại W3C.

Mozilla, Microsoft và Opera

Các nhà sản xuất khác được theo sau bởi các trình duyệt dựa trên WebKIT, nếu không phải năm. Thêm tiền tố webkit Giải pháp lố bịch, đã đến lúc chơi trò chơi của bạn.

Nhà công nghệ trang web và truyền giáo

Tất cả chúng ta đều yêu thích những cuộc biểu tình tuyệt vời, nhưng các nhà truyền giáo thường quên đề cập rằng các thuộc tính là thử nghiệm và có thể không bao giờ được trình duyệt hỗ trợ đầy đủ. Lý tưởng nhất, mã sẽ hoạt động ít nhất hai trình duyệt, ít nhất điều này có nghĩa là cần có một số tiền tố của nhà cung cấp.

các nhà phát triển web

Chúng tôi quá lười biếng. Chúng tôi viết một mã cụ thể về mã, và mặc dù chúng tôi có thể có ý định tốt liên quan đến sự điều chỉnh của nó trong tương lai, chúng tôi hiếm khi thực hiện nó.

Bạn có nhớ lần cuối các nhà phát triển tập trung vào một trình duyệt nhất định không? Đó là IE6. Chúng tôi vẫn sống với di sản của quyết định này sau một thập kỷ. Bạn có thực sự muốn câu chuyện lặp lại?

Thời gian để hành động

Tôi chống lại các trình duyệt không phải webkit hỗ trợ các tiền tố webkit. Tốt nhất, họ thực hiện tiền tố không phù hợp để sử dụng. Trong trường hợp xấu nhất, điều này vi phạm toàn bộ quá trình tiêu chuẩn hóa. Bạn có thể đồng ý hoặc không đồng ý, nhưng hãy cho tôi biết về các đồng nghiệp của bạn thông qua các blog và mạng xã hội. W3C và các nhà sản xuất trình duyệt sẽ lắng nghe ý kiến \u200b\u200bcủa bạn, bạn chỉ cần chỉ cho họ nó.

Sau đó kiểm tra trang web của bạn trong các trình duyệt khác nhau. Một chút suy thoái thanh lịch sẽ không bị tổn thương, nhưng bỏ bê một hoặc nhiều trình duyệt hiện đại là xấu. Đúng mã, nếu không trang web của bạn góp phần vào vấn đề này.

Thoạt nhìn, có vẻ như tiền tố của nhà cung cấp là một cái gì đó từ danh mục ngữ pháp ... tiền tố nhà cung cấp, hậu tố nhà cung cấp và kết thúc của nhà cung cấp ... nhưng đây phải là một cách bố trí?

Nó hóa ra trực tiếp nhất! Tiền tố của nhà cung cấp là bảng điều khiển cho các thuộc tính tên CSS, thêm các nhà sản xuất trình duyệt cho các thuộc tính không chuẩn.

Theo thông số kỹ thuật CSS 2.1 CSS, các định danh bắt đầu bằng "-" hoặc "_" được dành riêng cho các phần mở rộng trình duyệt CSS. Sự hiện diện của các dấu hiệu này khi bắt đầu tài sản đảm bảo rằng trong tương lai, việc mở rộng các trình duyệt sẽ không bao giờ vượt qua các thuộc tính CSS tiêu chuẩn. Những, cái đó. Không có trình duyệt sẽ bắt đầu "tình cờ" để hiểu tài sản không dành cho anh ta.

Họ là ai?

Các tiền tố của nhà cung cấp của các trình duyệt phổ biến nhất được hiển thị trong bảng dưới đây:

Làm thế nào nó hoạt động?

Phần tử được quy định bởi thuộc tính CSS trực tiếp cho các trình duyệt hiểu nó. Sau khi anh ta, cùng một tài sản được liệt kê trong một điểm có dấu phẩy, nhưng với các tiền tố của nhà cung cấp khác nhau cho các trình duyệt khác nhau. Một trình duyệt từ một mã như vậy chỉ diễn giải các thuộc tính được viết cho nó và được viết cho các trình duyệt khác bỏ qua.

Ví dụ: thuộc tính CSS chịu trách nhiệm về độ trong suốt của phần tử, CrossBraWser được sử dụng như thế này:

Bộ lọc: progid: dimumagetransform.microsoft.alpha (Opacity \u003d 50); / * Tức là 5,5-7 * / -ms-filter: "progid: cregidetransform.microsoft.alpha (Opacity \u003d 50)"; / * tức là 8 * / -Moz-Opacity: 0,5; / * Mozilla 1.6 * / -khthml Opacity : 0,5; / * Konqueror 3.1, Safari 1.1 * / Opacity: 0,5 / * Safari 2.0+, Chrome, Firefox Opera, * /

Nó là gì để làm gì?

Trong blog của mình, các nhà phát triển Internet Explorer gọi ba lý do để sử dụng tiền tố của nhà cung cấp -ms- cho trình duyệt IE8:

1. Nếu thuộc tính này chỉ được thiết kế cho Microsoft IE và không được mô tả trong mô-đun thông số kỹ thuật hoặc CSS
2. Nếu mô-đun CSS, tài sản này đề cập đến trong sự phát triển W3C. Và chưa đạt đến trạng thái của một ứng cử viên để khuyến nghị (khuyến nghị ứng viên)
3. Nếu thuộc tính chỉ thực hiện một phần các thuộc tính được mô tả trong mô-đun CSS hoặc thông số kỹ thuật

Các nhà phát triển còn lại sử dụng tiền tố của nhà cung cấp vì những lý do tương tự. Ví dụ: Mozilla có một danh sách lớn các thuộc tính CSS riêng lẻ và giá trị của chúng với tiền tố của nhà cung cấp -Moz-, được thiết kế dành riêng cho Firefox và không được mô tả trong mô-đun CSS không có trong đặc điểm kỹ thuật.

Ngoài ra, các nhà phát triển của Microsoft đã quản lý với sự trợ giúp của các tiền tố của nhà cung cấp để ẩn khỏi trình xác nhận các thiết kế không hợp lệ. Điều này áp dụng chủ yếu bằng các bộ lọc. Đối với IE 5.5-7, bộ lọc trông như thế này:

Bộ lọc: progid: dimumagetransform.microsoft.alpha (Opacity \u003d 50); / * IE 5,5-7 * /

Một thiết kế như vậy để trải qua xác nhận về nguyên tắc không thể! Nhưng nó được giữ một thiết kế mới của cùng một bộ lọc, nhưng đã dành cho IE 8:

MS-Filter: "progid: dimumagetransform.microsoft.alpha (Opacity \u003d 50)"; / * IE 8 * /

Tất nhiên, tôi không thực sự muốn viết một vài dòng mã với các thuộc tính nhà cung cấp cho mỗi trình duyệt thay vì một dòng mã với các thuộc tính tiêu chuẩn. Nhưng không cần thiết phải quên rằng đặc điểm kỹ thuật CSS3 vẫn đang được phát triển. Có thể trong mô tả về tài sản khi tiêu chuẩn hóa, một cái gì đó sẽ thay đổi hoặc nó sẽ không hoàn toàn trong đặc điểm kỹ thuật. Sau đó, các nhà phát triển chắc chắn sẽ dễ dàng hơn để từ chối các thuộc tính và tiêu chuẩn hỗ trợ của nhà cung cấp. Đồng ý, nếu trong các phiên bản khác nhau của trình duyệt, cùng một thuộc tính sẽ hoạt động theo những cách khác nhau, không có gì tốt sẽ thất bại. Chúng ta hãy tốt hơn trong các phiên bản cũ của các trình duyệt sẽ hoạt động các thuộc tính của nhà cung cấp và các phiên bản mới sẽ hỗ trợ thông số kỹ thuật ở dạng trực tiếp và các thuộc tính có tiền tố của nhà cung cấp sẽ bị bỏ qua.

Tiền thưởng dễ chịu

Nhờ các tiền tố Vendon, các nhà sản xuất trình duyệt đã thực hiện các tài sản CSS3 thử nghiệm có nguy cơ của chính họ.

Bây giờ bố trí có thể nhận ra hầu hết các khả năng được cung cấp bởi CSS3, bao gồm các chuyển đổi và hình ảnh động khác nhau mà không cần sử dụng các tập lệnh, nhưng sử dụng tiền tố của nhà cung cấp.

Một ví dụ trực quan về việc triển khai như vậy có thể là việc sử dụng các thuộc tính CSS3. Chúng tôi sẽ cung cấp nhiệm vụ để thực hiện thay đổi màu văn bản mượt mà để tham chiếu khi bạn di con trỏ mà không cần sử dụng JavaScript. Để thực hiện việc này, trong CSS cho liên kết bạn cần thêm mã sau.

WebKIT-Transition: Màu nền 5S Dễ dàng trong 3S; / * Hoạt động trong Safari 3.1+, Chrome 1+ * / -o-Chuyển: Màu nền 5S Dễ dàng trong 3S; / * Hoạt động trong Opera 10.5+ * / - Moz-Transtion: Màu nền 5S Dễ dàng trong 3S; / * Đã lên kế hoạch cho Firefox 4.0+ * / Chuyển đổi: Màu nền 5S Dễ dàng trong 3S; / * LIGCTLY không hỗ trợ bất kỳ trình duyệt nào * /

Ví dụ trực tiếp có thể được xem.

Tiền tố CSS kaki hoặc nhà cung cấp là gì
Nếu trình duyệt không hỗ trợ và không hiểu một số xác định Css. Tài sản, Làm thế nào để hiểu được tài sản này đột nhiên sau khi sử dụng hack?
Nhờ tiền tố của nhà cung cấp, các nhà sản xuất trình duyệt đã thực hiện thử nghiệm CSS3. Tài sản có nguy cơ của riêng bạn.

CSS kaki. họ đang - Tiền tố của Vendan., hậu tố nhà cung cấp và kết thúc nhà cung cấp là bảng điều khiển được sử dụng bởi các trình duyệt các nhà sản xuất (nhà cung cấp) để thử nghiệm, chưa được áp dụng trong các thuộc tính tiêu chuẩn, CSS.

Tiền tố của Vendan. Lạnh cho một trình duyệt cụ thể và cho phép nó hiểu các thuộc tính CSS thử nghiệm và đồng thời bỏ qua các bản ghi dành cho các trình duyệt khác, tức là. Không có trình duyệt sẽ bắt đầu "vô tình" để hiểu tài sản không dành cho anh ta.

Cần nhớ rằng các thuộc tính với tiền tố của nhà cung cấp không tuân thủ các tiêu chuẩn và sẽ không vượt qua xác nhận, tuy nhiên, chúng có thể được áp dụng, bởi vì Trong bàn tay khéo léo, đây là một công cụ rất mạnh mẽ. Và nhiều hãng phim Runet hàng đầu thích điều này.

Việc sử dụng tiền tố nhà cung cấp (hack) rất đơn giản, CSS được quy định trực tiếp cho phần tử cho các trình duyệt hiểu nó. Sau khi anh ta, cùng một tài sản được liệt kê trong một điểm có dấu phẩy, nhưng với các tiền tố của nhà cung cấp khác nhau cho các trình duyệt khác nhau. Một trình duyệt từ mã như vậy chỉ diễn giải thuộc tính được viết cho nó và được viết cho các trình duyệt khác bỏ qua.

Những lý do chính để sử dụng tiền tố của nhà cung cấp:

1. Nếu thuộc tính này chỉ được thiết kế cho một trình duyệt cụ thể và không được mô tả trong Đặc tả hoặc mô-đun CSS
2. Nếu mô-đun CSS, tài sản này liên quan đến việc phát triển W3C và chưa đạt đến trạng thái của ứng cử viên để khuyến nghị (khuyến nghị ứng viên)
3. Nếu thuộc tính chỉ thực hiện một phần các thuộc tính được mô tả trong mô-đun CSS hoặc thông số kỹ thuật

Nhờ các tiền tố Vendon, các nhà sản xuất trình duyệt đã thực hiện các tài sản CSS3 thử nghiệm có nguy cơ của chính họ.

Bây giờ bố trí có thể nhận ra hầu hết các khả năng được cung cấp bởi CSS3, bao gồm các chuyển đổi và hình ảnh động khác nhau mà không cần sử dụng các tập lệnh, nhưng sử dụng tiền tố của nhà cung cấp.

Tiền tố của nhà cung cấp của các trình duyệt phổ biến nhất:

Ví dụ về văn bản:

border-Radius: 15px 0 15px 0; / * Các góc hợp lệ CSS 3 góc tròn, giá trị (chữ số) đặt bán kính làm tròn * /
-moz-border-Radius: 15px 0 15px 0; / * Firefox * /
-Webkit-border-Radius: 15px 0 15px 0; / * Safari, Chrome * /
-khtml-border-Radius: 15px 0 15px 0; / * Konqueror * /