Giới thiệu CSS3

CSS3 là chuẩn mới nhất cho CSS, nó tương thích với chuẩn CSS cũ, hầu hết các trình duyệt đều hỗ trợ các tính năng mới trong CSS3.

Có một số tính năng mới cho CSS3 là:

• Bo trong các đường viền ở 4 góc của box phần tử
• Bo tròn các góc của ảnh
• Hỗ trợ nhiều nền trong phần tử
• Xây dựng phần tử động ...
• Đổ bóng cho box phần tử với box-shadow
• Tạo ra gradient với hai kiểu linear và radial
• Biến đổi phần tử bằng cách quay, dịch chuyển ...
• Tạo đối tượng động animation

CSS Vendor

Tiền tố CSS vendor là một cách viết CSS cho một loại trình duyệt cụ thể mà nó hỗ trợ các tính năng mới CSS đang trong quá trình kiểm tra, thử nghiệm.

Ví dụ tiền tố cho trình duyệt Safari và Chrome là -webkit

Thuộc tính mới border-radius đã được hỗ trợ trong Chrome, Safari, Mozilla đi kèm với nó là tiền tố trình duyệt.

Ví dụ để sử dụng border-radius thì viết CSS với tiền tố như sau:

  -webkit-border-radius: 24px;

 <style>
     .roundrect {
         -webkit-border-radius: 14px;
         border: 2px solid red;
         width: 150px;
         height: 70px;
     }
 </style>
 
 <div class="roundrect"></div>

Sử dụng tiền tố trước các thuộc tính mới nhằm đảm bảo nó làm việc trên các trình duyệt không được hỗ trợ. Như vậy có thể bạn phải định nghĩa nhiều thuộc tính để trang web làm việc như nhau trên nhiều trình duyệt khác nhau.

Danh sách tiền tố Browser

• -moz- (Firefox)
• -o- (Opera)
• -ms- (Internet Explorer)
• -webkit- (Safari, Chrome)

Bạn cần liên tục cập nhật các thông tin về trình duyệt, khi một trình duyệt hỗ trợ theo đúng chuẩn một thuộc tính nào đó thì bạn có thể loại bỏ tiền tố viết riêng cho trình duyệt đó.

Nguồn tin: Xuanthulab