หยุดเสียเวลาพิมพ์คำนำหน้า CSS

เบราว์เซอร์ในอดีตทำให้การทำงานกับ CSS เป็นเรื่องยุ่งยาก เนื่องมาจากความไม่สอดคล้องกันหลายอย่างที่เกิดขึ้นโดยเฉพาะในเบราว์เซอร์รุ่นเก่า หรือกับคุณสมบัติ CSS รุ่นทดลองใหม่ล่าสุด เพื่อแก้ไขปัญหานี้ คุณต้องใช้คำนำหน้ากับคุณสมบัติ CSS บางอย่างเพื่อทำให้ UI ของคุณมีลักษณะและทำงานเหมือนกันในทุกเบราว์เซอร์

ตัวอย่างที่ดีคือ CSS flexbox คุณสมบัติที่ต้องการคำนำหน้าไอกรน 4 เพื่อทำงานในเบราว์เซอร์ที่ทันสมัยทั้งหมดเช่นเดียวกับ IE10 &IE11 (โดยที่ flexbox ยังคงรองรับเพียงบางส่วนเท่านั้น):

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

ด้วยเครื่องมือที่ทันสมัย ​​คุณไม่ต้องกังวลกับการพิมพ์คำนำหน้า ที่จริงแล้วคุณไม่ควรเสียเวลาแม้แต่วินาทีเดียวในการพยายามท่องจำคำนำหน้าเหล่านั้น นั่นเป็นเพียงการสิ้นเปลืองทรัพยากรทางจิตใจของคุณ ให้ใช้เครื่องมือเช่น Autoprefixer กับ Webpack หรือ task runner/bundler ที่คุณใช้แทน

ด้วย Autoprefixer คุณไม่ต้องกังวลเกี่ยวกับคุณสมบัติ CSS นำหน้า เนื่องจากคุณสมบัตินี้จะทำงานทั้งหมดให้คุณในขั้นตอนหลังการถ่ายทำ ก่อนที่คุณจะส่ง CSS ล่าสุดไปยังเซิร์ฟเวอร์ที่ใช้งานจริง