เวนดอร์เพรฟิกซ์ใน CSS

ในอดีต มีสถานการณ์ต่อไปนี้เกิดขึ้นในหมู่เบราว์เซอร์: ก่อนที่คุณสมบัติ CSS จะปรากฏในข้อกำหนดมาตรฐาน (specification) เบราว์เซอร์ต่างๆ จะนำร่องใช้งานคุณสมบัตินั้นในเวอร์ชันทดลอง พร้อมกับคำนำหน้า (prefix) พิเศษที่เรียกว่า เวนดอร์เพรฟิกซ์

ลองดูตัวอย่างจากคุณสมบัติ box-sizing ว่าเป็นอย่างไร:

cssp {
  box-sizing: border-box;
}

คุณสมบัตินี้เริ่มได้รับการสนับสนุนตั้งแต่ Firefox29 เป็นต้นมา แต่ตั้งแต่ Firefox2 แล้ว มันสามารถใช้งานได้ด้วยเพรฟิกซ์ -moz:

cssp {
  -moz-box-sizing: border-box;
}

เบราว์เซอร์อื่นๆ ก็มีคำนำหน้าในลักษณะเดียวกัน: -moz - Mozilla Firefox, -webkit - เบราว์เซอร์ที่ใช้เอ็นจิ Webkit และ Blink, -o - Opera ที่ใช้เอ็นจิ Presto, -ms - IE

ดังนั้น รูปแบบของคุณสมบัติ box-sizing ที่รองรับข้ามเบราว์เซอร์ได้ดีที่สุด โดยใช้เวนดอร์เพรฟิกซ์ จะมีลักษณะประมาณนี้:

cssp {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

ในปัจจุบัน เบราว์เซอร์ตัดสินใจเลิกใช้เพรฟิกซ์เนื่องจากความไม่สะดวก และตอนนี้ได้เปลี่ยนมาใช้สิ่งที่เรียกว่า แฟล็ก แทน คุณสมบัติต่างๆ จะถูกนำมาใช้ในเบราว์เซอร์ แต่จะถูกปิดใช้งานโดยค่าเริ่มต้น อย่างไรก็ตาม ผู้ใช้สามารถเปิดใช้งานได้ในตั้งค่าเบราว์เซอร์ โดยเลือกติ๊กที่ช่องทำเครื่องหมาย (แฟล็ก) ที่เกี่ยวข้อง สิ่งนี้ทำขึ้นเพื่อให้นักพัฒนาได้มีโอกาสทดลองเล่นกับคุณสมบัติใหม่ก่อนที่จะเปิดตัวอย่างเป็นทางการ