เบราว์เซอร์ทำให้ CSS เปลี่ยนยาก historically เนื่องจาก inconsistencies มากมาย โดยเฉพาะ older browsers หรือ brand new experimental CSS properties วิธีแก้: apply prefixes บน CSS properties บางอย่าง ให้ UI ลุค/ทำงานเหมือนกันทุกเบราว์เซอร์
ตัวอย่างดี: CSS flexbox property ต้องการ 4 prefixes เพื่อทำงานทุก modern browsers รวม IE10 & IE11 (flexbox partially supported):
display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;ด้วย modern tools ไม่ต้องกังวลพิมพ์ prefixes ไม่ควรเสียเวลาจำ prefixes เลย waste of mental resources ใช้ tool อย่าง Autoprefixer กับ Webpack หรือ task runner/bundler ที่ใช้
Autoprefixer ทำ prefixing CSS properties ให้หมดใน post-production ก่อน push CSS ล่าสุดไป production server
