CSS chuyển tiếp WebKit là gì?

Từ giữa đến cuối những năm 2000 dài và đẫm máu, nhưng giờ nó đã kết thúc. Ngay cả một số nhóm du kích vẫn đang lẩn trốn trong cây Internet, chúng ta sẽ nói về họ sau

Cuối cùng thì cuộc chiến này đã làm cho Internet thực sự tốt hơn và rõ ràng hơn, nhưng nó cũng để lại nhiều hệ lụy đáng trách mà chúng ta vẫn cảm nhận được cho đến ngày nay. Đặc biệt, đó là một sự không chắc chắn lớn giữa các nhà phát triển web về các tiêu chuẩn mà họ nên hoặc không nên sử dụng trong các tình huống khác nhau. “Mã tôi vừa viết có hoạt động bình thường trong tất cả các trình duyệt phổ biến nhất hay không?”

Hoạt ảnh của thuộc tính CSS là ví dụ cổ điển về trường hợp như vậy. Sử dụng –moz-transition khi nào và ở đâu [-webkit-transition, -ms-transition, -o-transition, v.v. ] hay chỉ chuyển đổi riêng lẻ, cùng nhau hay thay thế?

Sự phát triển tiêu chuẩn của Cascading Style Sheets

Đặc tả CSS chính thức đầu tiên là CSS cấp 1, do W3C xuất bản vào tháng 12 năm 1996. Rất nhanh chóng, vào tháng 5 năm 1998, tiêu chuẩn CSS đã được mở rộng lên cấp độ 2 và nhóm bắt đầu làm việc với phiên bản mới, CSS 3. Ngày nay, sau 15 năm, công trình này vẫn chưa hoàn thành. Theo thời gian, đặc điểm kỹ thuật được chia thành nhiều tài liệu riêng biệt được gọi là "mô-đun", một số trong số đó đã trở thành tiêu chuẩn trong khi những tài liệu khác vẫn còn.

Trong khi đó, các nhà cung cấp trình duyệt vẫn tiếp tục phát triển các tính năng mới theo cách riêng của họ và phát minh ra các tiêu chuẩn riêng của họ, khiến cộng đồng các nhà phát triển web ngày càng thất vọng. Để tạo điều kiện thuận lợi cho việc sử dụng các tiện ích mở rộng riêng tư này, một ngày nọ, họ đã đồng ý về một tiêu chuẩn trung gian có tên là "". -moz cho Mozilla [Gecko], -webkit cho Apple Safari và Google Chrome, -ms cho Microsoft Internet Explorer, -o cho Opera, v.v. Kể từ thời điểm này, Cascading Style Sheet thông thường trông giống như thế này

IE5. 5-7

bộ lọccung cấp. DXImageTransform. Microsoft. Alpha[độ mờ=50]

IE8

-ms-filter"progid. DXImageTransform. Microsoft. Alpha[Độ mờ=50]"

mozilla 1. 6

-moz-opacity0. 5

Konqueror 3. 1, Safari 1. 1

-khtml-opacity0. 5

Safari 2. 0+, Chrome, Firefox, Opera

độ mờ0. 5

tương thích ngược. css -moz-transition, css -webkit-transition và css –o-transition

Thuộc tính –moz-transition, viết tắt của một tập hợp các thành phần riêng lẻ của quá trình chuyển đổi, là thuộc tính dành riêng cho nhà cung cấp Mozilla [Gecko], được Firefox hỗ trợ. Nó cho phép bạn đặt tất cả các tham số chuyển đổi trong một dòng mã theo định dạng sau

-moz-transition [ thuộc tính ] [ thời lượng] [timing function] [delay]

theo cách tương tự, thuộc tính -webkit-transition được hỗ trợ bởi trình duyệt Google Chrome và Safari và -o-transition được hỗ trợ bởi Opera

Các giá trị của thuộc tính, thời lượng, hàm thời gian và độ trễ là phần giữ chỗ cho các giá trị của thuộc tính riêng lẻ sau

-moz-transition-property
-webkit-transition-property
-o-transition-property chỉ định tên hoặc tên của các thuộc tính CSS mà quá trình chuyển đổi sẽ được áp dụng-moz-transition-duration
-webkit-transition-duration
-o-transition-durationspecifies the duration over which transitions should occur in seconds or milliseconds-moz-transition-timing-function
-webkit-transition-timing-function
-o-transition-timing-functionspecifies a function to define how intermediate values for properties are computed. There are 5 supported functions: "ease", "linear", "ease-out", "ease-in-out" and "cubic-bezier"-moz-transition-delay
-webkit-transition-delay-webkit-transition-delay

Chủ Đề