Các trình duyệt đã từng khiến việc làm việc với CSS trở nên khó khăn do có nhiều điểm không nhất quán xảy ra trong các trình duyệt đặc biệt là các trình duyệt cũ hơn hoặc với các thuộc tính CSS thử nghiệm hoàn toàn mới. Để khắc phục sự cố này, bạn cần áp dụng các tiền tố trên một số thuộc tính CSS nhất định để làm cho giao diện người dùng của bạn trông và hoạt động giống nhau trong tất cả các trình duyệt.
Một ví dụ tuyệt vời là CSS flexbox thuộc tính cần có 4 tiền tố để hoạt động trong tất cả các trình duyệt hiện đại cũng như IE10 &IE11 (nơi mà flexbox vẫn chỉ được hỗ trợ một phần):
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;Với các công cụ hiện đại theo ý muốn của bạn, bạn không phải lo lắng về việc nhập các tiền tố, thực tế là bạn thậm chí không nên lãng phí một giây để cố gắng ghi nhớ bất kỳ tiền tố nào trong số đó, điều đó chỉ lãng phí nguồn lực tinh thần của bạn. Thay vào đó, hãy sử dụng một công cụ như Trình sửa lỗi tự động với Webpack hoặc bất kỳ trình chạy / gói tác vụ nào bạn đang sử dụng.
Với Autoprefixer, bạn không bao giờ phải lo lắng về việc đặt trước các thuộc tính CSS, vì nó thực hiện tất cả công việc cho bạn trong quá trình hậu sản xuất, trước khi bạn đẩy CSS mới nhất của mình lên máy chủ sản xuất của mình.