Cross-Trình duyệt CSS3 Rule

Question

Tôi có một câu hỏi ngu ngốc,

Nếu tôi muốn thêm góc tròn cho một yếu tố trong các trình duyệt có hỗ trợ một số công cụ của CSS3, tôi phải lặp lại phong cách nhiều thời gian cho mỗi trình duyệt, bởi vì nó khác ?

Đối với ví dụ:

  -moz-border-radius: 12px; /* FF1+ */ 
     -webkit-border-radius: 12px; /* Saf3+, Chrome */ 
      border-radius: 12px; /* Opera 10.5, IE 9 */ 

Điều đó có nghĩa, mà tôi phải thêm 3 phong cách cho biên giới bán kính này, đúng không?

Answer 1

Tuyên bố miễn trừ trách nhiệm: hy vọng bạn đã tìm thấy điều này một năm sau khi tôi viết nó và bây giờ hoàn toàn sai, và chúng tôi có một tiêu chuẩn, yay!

Hiện tại, có điều này đúng ... bạn cần tất cả các quy tắc. Thật không may, đây là kết quả của một thông số được thực hiện trong khi thông lượng, nhưng đó là cách mà web phát triển đến nay, đôi khi các ổ đĩa chuyên biệt phát triển, thường xuyên hơn với web, trình duyệt làm gọn gàng công cụ và nó là một đặc điểm sau này .

Hy vọng rằng khi thông số kỹ thuật được hoàn tất, chúng tôi sẽ chỉ có border-radius: 12px;. Vì Firefox và Chrome đẩy cập nhật tự động (không chắc chắn về Safari?), Điều này có nhiều khả năng xảy ra hơn, ngược lại với người dùng IE, những người không bao giờ có thể nâng cấp.

Answer 2

border-radius là quy tắc CSS3 chính thức để thêm bán kính đường viền. Tuy nhiên, như Nick chỉ ra, điều này không được hỗ trợ trong tất cả các trình duyệt, do đó bạn cần phải thêm các phiên bản thích hợp để làm cho nó hoạt động trong nhiều trình duyệt nhất có thể.

Answer 3

Hãy thử điều này: http://css3please.com/

Answer 4

Compass cung cấp Sass mixins cho many CSS3 properties có nghĩa là bạn có thể viết một cái gì đó như:

.foo { 
    @include border-radius(4px, 4px); 
} 

mà sẽ tạo ra CSS sau đây:

.foo { 
    -webkit-border-radius: 4px 4px; 
    -moz-border-radius: 4px/4px; 
    -o-border-radius: 4px/4px; 
    -ms-border-radius: 4px/4px; 
    -khtml-border-radius: 4px/4px; 
    border-radius: 4px/4px; 
} 

này là rất tốt vì bạn phải viết ít mã hơn, nhưng nó cung cấp các quy tắc nhắm mục tiêu một loạt các trình duyệt.

Answer 5

Bạn chỉ cần border-radius cho các trình duyệt thực sự hỗ trợ phần CSS đó 3. Các thuộc tính khác dành cho các trình duyệt có triển khai thử nghiệm. Phiên bản mới hơn của các trình duyệt này sẽ thay thế nhà cung cấp các thuộc tính thử nghiệm có tiền tố bằng các đặc tính chuẩn khi triển khai và đặc tả kỹ thuật ổn định.