Thắc mắc về tiền tố -moz- , -webkit- trong thiết kế web

Một câu hỏi y hệt của bạn trên SO nè: http://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit?answertab=votes#tab-top

Ý chính là như vầy: Đây là những tiền tố được cung cấp bởi các engine render khác nhau:

1. -webkit là của Chrome và Safari
2. -moz là của Firefox
3. -o là của Opera
4. -ms là của Internet Explorer
   Những tiền tố này giúp render ra những tính năng CSS mới.(chi tiết hơn thì bạn xem nội dung của link nhé)

Khi CSS3 mới ra thì mỗi trình duyệt hỗ trợ mỗi khác, có cái thằng này có, thằng kia lại không. Thằng nào hỗ trợ thuộc tính nào thì thêm prefix của nó vào trước, trình duyệt khác sẽ xem đó là một property sai và bỏ qua.
Còn bây giờ, thì hầu hết trình duyệt đều hỗ trợ đầy đủ CSS3 cả rồi, nên không cần thêm tiền tố vào cũng được.

Muốn tra cứu kỹ càng hơn thì truy cập caniuse.

Cách nhanh nhất và dễ dàng nhất là viết CSS không prefix, sau đó dùng autoprefixer, nó sẽ tự thêm những prefix còn thiếu vào.

Để hỗ trợ HTML5 cho trình duyệt cũ thì nhúng thêm html5shiv vào mã nguồn.

Còn nhiều thủ thuật khác, bạn có thể xem trên browserhacks.

Cách nhanh nhất và dễ dàng nhất là viết CSS không prefix, sau đó dùng autoprefixer, nó sẽ tự thêm những prefix còn thiếu vào.

Sao e gõ box-sizing:border-box; vào cái khung bên trái thì nó không translate sang cái khung bên phải nhỉ

E cảm ơn 2 người nhiều nhé

box-sizing:border-box;

Phải đúng cú pháp, có selector nữa

.example {
    box-sizing:border-box;
}

Em gõ đúng mà nó có ra đâu anh

Pasted image1366x638 40.7 KB

Ra rồi đấy, điều đó có nghĩa là bạn không cần thêm prefix cho property này, vì phần lớn trình duyệt đã hỗ trợ cả rồi.