CSS3 và Hỗ trợ Trình duyệt - núm vú

Trạng thái hiện tại về tiêu chuẩn hỗ trợ trình duyệt web cho các hiệu ứng CSS3 và các phép biến đổi có trong luồng. Hầu hết khả năng, theo thời gian, sức mạnh - đó là trong thế giới trình duyệt - những người xuất bản Internet Explorer, Safari, Firefox và Chrome (và những người khác) - sẽ đạt được một số thoả thuận chung về cách mã cho các hiệu ứng CSS3.

Nhưng ngay bây giờ, họ đã không đạt được thỏa thuận như vậy. Điều đó có nghĩa là, ít nhất ở bài viết này, những hiệu ứng mát mới này phải được định nghĩa riêng cho các trình duyệt khác nhau.

Đây là những gì bạn cần biết về CSS3 và trình duyệt hỗ trợ:

• Các hiệu ứng và biến đổi CSS3 được hỗ trợ trong phiên bản hiện tại của tất cả các trình duyệt chính, nhưng Safari, Firefox và Opera yêu cầu các tiền tố mã khác nhau để tạo hiệu ứng CSS3 và chuyển đổi các tác vụ trong trình duyệt của họ.

• Các biến đổi ba chiều (3D) không được hỗ trợ bởi các trình duyệt, ngoại trừ Safari và Chrome, và bởi vì chúng xoay các đối tượng theo x -xis (ngang) hoặc y -axis dọc), chúng không làm nhiều mà không có JavaScript bổ sung để kích hoạt chúng. Điều đó cho biết, thế giới của các phép biến đổi CSS3 là trong luồng và phát triển liên tục, và các phép biến đổi 3D có thể nhận được sự hỗ trợ rộng hơn và trở nên dễ tiếp cận hơn với các nhà phát triển.

• Hiệu ứng CSS3 và chuyển đổi hoạt động tốt trong mọi môi trường duyệt web hiện đại. Bạn chỉ cần bao gồm các phiên bản dự phòng của mỗi hiệu ứng, với các tiền tố trình duyệt khác nhau, để làm cho chúng hoạt động trong mọi trình duyệt.

• Một số trình duyệt lỗi thời không hỗ trợ hiệu ứng CSS3 và chuyển đổi ở tất cả.

  Sử dụng các hiệu ứng CSS3 và biến đổi theo cách mà ngay cả khi một trình duyệt không hỗ trợ CSS3, nội dung trang không bị hỏng. Hình dưới đây cho thấy hiệu ứng hình tròn. Bên phải, trình duyệt hỗ trợ hiệu ứng CSS3, và bên trái, trình duyệt không hỗ trợ chúng. Trong cả hai môi trường, bạn có thể đọc nội dung, và một số hiệu ứng thiết kế, chẳng hạn như hộp và màu chữ, được hỗ trợ.

  

  Sau đây là mã CSS3 tạo ra văn bản bị lệch. Lưu ý rằng năm dòng CSS là cần thiết để xác định hiệu ứng nghiêng giống nhau cho Firefox, Safari, Opera, Internet Explorer và phiên bản chung chung. (Những người làm cho các trình duyệt dường như cuốn hút vào phiên bản chung chung, nhưng điều này không được chấp nhận rộng rãi.)

. xiên {background-color: # 999; chiều cao: 300px; chiều rộng: 300px; -moz-biến đổi: skew (12deg, 0deg); -webkit-chuyển đổi: skew (12deg, 0deg); -ms-biến đổi: nghiêng (12deg, 0deg); -o-biến đổi: nghiêng (12deg, 0deg); biến đổi: nghiêng (12deg, 0deg); màu trắng; padding: 15px; float: phải; margin-top: 6px; lề phải: 100px; margin-bottom: 6px; margin-left: 6px;}

Bốn trong số những biến thể này của biến đổi CSS3 có tiền tố (-moz, -webkit, -ms, và -o); phiên bản chung chung không có tiền tố.Mỗi tiền tố áp dụng cho các công cụ cơ bản khác nhau trong các trình duyệt này:

Mã -moz-transform-skew áp dụng cho Mozilla Firefox.

• Đoạn mã chuyển đổi trang web áp dụng cho Safari và các trình duyệt khác tuân thủ tiêu chuẩn WebKit (bao gồm chế độ xem Trực tiếp trên Dreamweaver CS5).

• Mã chuyển đổi chung: mã lệch được áp dụng cho "mọi người khác", bao gồm hầu hết các lần lặp của Internet Explorer 9, không yêu cầu tiền tố trình duyệt giải thích hiệu ứng này (hoặc các hiệu ứng khác). Tuy nhiên, một số phiên bản của IE9 yêu cầu -m tiền tố. Vì vậy, nên bao gồm tiền tố -ms trong trường hợp.

• Đoạn mã -o-biên giới áp dụng cho trình duyệt Opera.