CSS Vendor Prefix Generator
Input your CSS properties below to automatically add vendor prefixes. This tool helps ensure cross-browser compatibility for modern CSS features.
CSS Properties
Enter one CSS property per line or separate with semicolons
WebKit
(Safari, Chrome)
Mozilla
(Firefox)
Microsoft
(IE, Edge)
Opera
• Modern browsers may not need all prefixes, but they ensure compatibility with older versions
• Consider using a build tool like Autoprefixer for production code
• Some properties like 'display: flex' need prefixing for older browsers but not for newer ones
วิธีใช้ เครื่องมือสร้างคำนำหน้าเฉพาะของ CSS
- 1
วาง CSS ของคุณ
นำกฎ CSS ของคุณ เช่น การประกาศ flex หรือ transition มาวางลงในช่องป้อนโค้ด
- 2
เลือก prefix
เลือกว่าจะเพิ่ม vendor prefix ใดบ้าง รวมถึง -webkit-, -moz-, -ms- และ -o- ตามเบราว์เซอร์ที่คุณต้องการรองรับ
- 3
สร้าง CSS ที่มี prefix
คลิก "สร้าง Prefixes" เพื่อสร้างโค้ดเวอร์ชันที่เพิ่มพร็อพเพอร์ตี้แบบ prefix ที่เข้าคู่กัน
- 4
คัดลอกผลลัพธ์
คัดลอก CSS ที่มี prefix จากช่องผลลัพธ์แล้ววางกลับลงในสไตล์ชีตของคุณ
อธิบาย CSS Vendor Prefix ให้เข้าใจ
vendor prefix คืออะไรกันแน่
vendor prefix คือสตริงสั้น ๆ ที่ผู้สร้างเบราว์เซอร์ใส่ไว้หน้าชื่อพร็อพเพอร์ตีหรือชื่อค่า เพื่อปล่อยฟีเจอร์ออกมาก่อนที่มันจะถูกสรุปขั้นสุดท้าย สี่ตัวที่คุณจะได้พบคือ -webkit- สำหรับเอนจินเบื้องหลัง Chrome, Safari และ Edge สมัยใหม่, -moz- สำหรับ Firefox, -ms- สำหรับ Internet Explorer รุ่นเก่าและ Edge รุ่นแรก และ -o- สำหรับ Opera รุ่นเก่าที่ใช้เอนจิน Presto ดังนั้นในช่วงปีแห่งการเปลี่ยนผ่าน คุณอาจเขียนทั้ง transition-property และ -webkit-transition-property โดยตัวที่มี prefix สำหรับเบราว์เซอร์ที่ปล่อยฟีเจอร์ออกมาแต่เนิ่น ๆ และตัวเปล่า ๆ สำหรับเบราว์เซอร์ที่ทำตามมาตรฐานขั้นสุดท้าย
ในเชิงกลไก เบราว์เซอร์จะเพิกเฉยต่อพร็อพเพอร์ตีใดก็ตามที่มันไม่รู้จัก ซึ่งเป็นสิ่งที่ทำให้การวาง prefix ซ้อนกันปลอดภัย คุณสามารถระบุรูปแบบที่มี prefix ก่อนแล้วระบุพร็อพเพอร์ตีมาตรฐานไว้ท้ายสุด แล้วแต่ละเอนจินก็จะเลือกบรรทัดที่มันเข้าใจและข้ามที่เหลือไปเอง
ทำไมในตอนแรกถึงต้องมี prefix
prefix เป็นคำตอบเชิงปฏิบัติต่อปัญหาที่ยาก เมื่อฟีเจอร์ใหม่อย่างการไล่ระดับสี การแปลงรูป (transform) หรือเฟล็กซ์บ็อกซ์ยังอยู่ระหว่างการออกแบบ ผู้ผลิตเบราว์เซอร์ต้องการให้นักพัฒนาได้ทดลองโดยไม่ตรึงตัวเองไว้กับไวยากรณ์ที่ข้อกำหนดอาจเปลี่ยนแปลง การปล่อยฟีเจอร์ไว้หลัง prefix จึงเป็นวิธีบอกว่านี่คือของทดลองและอาจเปลี่ยนได้ หากมาตรฐานขั้นสุดท้ายต่างออกไป พร็อพเพอร์ตีที่ไม่มี prefix ก็สามารถรับพฤติกรรมที่แก้ไขแล้วได้ ขณะที่ตัวที่มี prefix ยังคงรักษาพฤติกรรมเดิมไว้ หน้าเว็บที่มีอยู่จึงไม่พังอย่างเงียบ ๆ
ในทางปฏิบัติ ระบบนี้กลับให้ผลตรงข้าม เว็บไซต์ต่าง ๆ พึ่งพาฟีเจอร์ที่มี -webkit- มากจนกระทั่งเอนจินอื่น ๆ ในที่สุดต้องนำพร็อพเพอร์ตีที่มี -webkit- บางตัวไปใช้เองเพียงเพื่อให้เรนเดอร์เว็บได้อย่างถูกต้อง ผลลัพธ์นี้เองคือเหตุผลที่แนวทางทั้งหมดถูกละทิ้งไปเป็นส่วนใหญ่ แล้วหันไปใช้แฟล็กฟีเจอร์ (feature flags) สำหรับงานทดลองแทน
วิธีเขียนตัวที่มี prefix และตัวมาตรฐานควบคู่กัน
กฎนั้นเรียบง่ายและลำดับสำคัญ คือ เขียนทุกเวอร์ชันที่มี prefix ที่คุณต้องการ แล้วจึงเขียนพร็อพเพอร์ตีมาตรฐานที่ไม่มี prefix ไว้ท้ายสุด เพราะการประกาศที่อยู่ทีหลังจะชนะเมื่อทั้งหมดถูกเข้าใจ การวางบรรทัดมาตรฐานไว้ล่างสุดจึงหมายความว่าเบราว์เซอร์ที่ทันสมัยเต็มที่จะใช้พฤติกรรมขั้นสุดท้ายที่ถูกต้อง ขณะที่ตัวเก่ากว่าจะถอยกลับไปใช้บรรทัดที่มี prefix ที่มันเข้าใจ เครื่องมือนี้ทำตามแบบแผนนั้น โดยส่งออกเวอร์ชันที่มี prefix ที่คุณเลือกไว้ควบคู่กับการประกาศมาตรฐานดั้งเดิม เพื่อให้การสืบทอด (cascade) คลี่คลายไปในแบบที่คุณคาดหวัง
แนวคิดเดียวกันบางครั้งก็ใช้กับค่า ไม่ใช่แค่ชื่อพร็อพเพอร์ตี เพราะมีบางฟีเจอร์ที่ถูกใส่ prefix ในฝั่งของค่าด้วย นิสัยที่ปลอดภัยก็เหมือนกันทุกประการ คือ ใส่รูปแบบที่มี prefix แบบเก่าก่อน แล้วปล่อยให้รูปแบบมาตรฐานเข้าแทนที่มันสำหรับเบราว์เซอร์ที่ตามทันแล้ว
CSS สมัยใหม่ส่วนใหญ่ไม่ต้องใช้ prefix อีกแล้ว
นี่คือส่วนที่ควรซึมซับไว้ คือ พร็อพเพอร์ตีส่วนใหญ่อย่างท่วมท้นที่เคยต้องใช้ prefix ไม่ต้องใช้อีกแล้ว transition, transform, animation, box-shadow, border-radius, การไล่ระดับสี และไวยากรณ์เฟล็กซ์บ็อกซ์สมัยใหม่ ล้วนรองรับโดยไม่ต้องมี prefix ในเบราว์เซอร์ปัจจุบัน การใส่ -webkit-, -moz-, -ms- และ -o- ให้กับสิ่งเหล่านั้นในวันนี้จะสร้างโค้ดตายที่ทำให้สไตล์ชีตของคุณบวม สร้างความสับสนแก่ผู้อ่านในอนาคต และในกรณีที่พบได้ยากอาจถึงขั้นเรียกพฤติกรรมเก่าที่มีบั๊กให้ทำงาน หากโปรเจกต์ของคุณตั้งเป้าเฉพาะเบราว์เซอร์ปัจจุบัน คุณก็แทบจะไม่ต้องใช้ prefix เลย
นี่จึงเป็นเหตุผลที่เวิร์กโฟลว์ที่รอบคอบจะไม่ใส่ prefix ให้ทุกอย่างโดยอัตโนมัติ แต่จะใส่เฉพาะที่กลุ่มเบราว์เซอร์เป้าหมายจริง ๆ ต้องการ ซึ่งช่วยให้ผลลัพธ์กระชับและซื่อตรงแทนที่จะรกด้วยบรรทัดที่ไม่มีใครได้รันมันเลย
ที่ที่ prefix ยังสำคัญจริง ๆ
ฟีเจอร์จำนวนหยิบมือยังคงใช้ได้เฉพาะแบบมี prefix หรือต้องใช้ prefix เป็นหลักในเบราว์เซอร์ที่ปล่อยออกมาแล้ว และนี่คือที่ที่ prefix ไม่ใช่ของเก่าที่ตกค้างแต่เป็นข้อกำหนดในปัจจุบัน prefix -webkit- โดยเฉพาะยังปรากฏสำหรับสิ่งต่าง ๆ เช่น เทคนิค line-clamp ที่ใช้ตัดข้อความให้เหลือจำนวนบรรทัดที่ตายตัว พฤติกรรม backdrop และ appearance บางอย่าง และการปรับแต่งแถบเลื่อนกับ tap-highlight บางตัวบน Safari มือถือ สำหรับสิ่งเหล่านี้ การละ prefix หมายความว่าฟีเจอร์จะไม่ทำงานเสียเฉย ๆ นี่จึงเป็นกรณีที่การหยิบ prefix มาใช้นั้นถูกต้องพอดี
หากคุณรองรับเบราว์เซอร์เวอร์ชันเก่าแต่ยังมีใช้จริงสำหรับกลุ่มผู้ใช้เฉพาะ prefix ก็กลับเข้ามาในภาพอีกครั้งสำหรับพร็อพเพอร์ตีที่เพิ่งถูกกำหนดเป็นมาตรฐานเมื่อไม่นานมานี้ คำถามชี้ขาดไม่เคยเป็นว่าพร็อพเพอร์ตีให้ความรู้สึกอย่างไร แต่เป็นว่าเมทริกซ์การรองรับของคุณมีอะไรอยู่จริง ๆ
Autoprefixer และแนวทางการบิลด์สมัยใหม่
แนวปฏิบัติที่ดีที่สุดในปัจจุบันคือเลิกเขียน prefix ด้วยมือแล้วปล่อยให้เครื่องมือเพิ่มมันจากข้อมูลจริง Autoprefixer ซึ่งทำงานเป็นส่วนหนึ่งของขั้นตอนการบิลด์ จะอ่านรายการการรองรับเบราว์เซอร์ที่โปรเจกต์ของคุณประกาศไว้ แล้วแทรก prefix ที่เบราว์เซอร์เหล่านั้นต้องการเป๊ะ ๆ ไม่มากไม่น้อย โดยใช้ข้อมูลความเข้ากันได้ที่เป็นปัจจุบัน คุณเขียน CSS มาตรฐานที่สะอาด แล้ว prefix ที่ถูกต้องก็ถูกสร้างขึ้นโดยอัตโนมัติในตอนบิลด์ จากนั้นก็ถูกถอดออกอีกครั้งทันทีที่รายการการรองรับของคุณไม่ต้องการมันอีกต่อไป
ตัวแปลงนี้คือคู่หูแบบใช้มือของเวิร์กโฟลว์นั้น เหมาะอย่างยิ่งเมื่อคุณไม่ได้รันไปป์ไลน์การบิลด์ เมื่อคุณต้องการเพิ่ม prefix เฉพาะตัวให้กับสนิปเปตอย่างรวดเร็ว หรือเมื่อคุณกำลังเรียนรู้ว่ารูปแบบที่มี prefix และแบบมาตรฐานสัมพันธ์กันอย่างไร สำหรับฐานโค้ดขนาดใหญ่ การติดตั้ง Autoprefixer หมายความว่าคุณจะไม่ต้องคิดเรื่องนี้อีกเลย
ตรวจสอบการรองรับก่อนใส่ prefix
ก่อนเพิ่ม prefix ใด ๆ ให้ยืนยันว่ามันจำเป็นจริงหรือไม่ด้วยการตรวจสอบแหล่งอ้างอิงความเข้ากันได้ที่เป็นปัจจุบันอย่าง caniuse ซึ่งแสดงทีละพร็อพเพอร์ตีว่าเบราว์เซอร์เวอร์ชันใดรองรับรูปแบบมาตรฐานและเวอร์ชันใดยังคงต้องการ prefix การจับคู่การค้นหานั้นเข้ากับรายการเบราว์เซอร์ที่โปรเจกต์ของคุณรองรับอย่างชัดเจน จะเปลี่ยนการใส่ prefix จากการเดาสุ่มให้กลายเป็นการตัดสินใจที่คุณปกป้องได้ ต้นทุนการดูแล prefix ที่ตกค้างนั้นมีอยู่จริง การลบตัวที่คุณไม่ต้องการอีกต่อไปจึงมีค่าไม่ต่างจากการเพิ่มตัวที่คุณต้องการ
คำถามที่พบบ่อย
CSS vendor prefix มีไว้ทำอะไร
เครื่องมือนี้เพิ่ม prefix ใดได้บ้าง
มันเพิ่ม prefix ให้ทุกพร็อพเพอร์ตี้ที่ฉันวางไหม
ทุกวันนี้ฉันยังต้องใช้ vendor prefix อยู่ไหม
CSS ของฉันถูกส่งไปที่ไหนหรือไม่
เครื่องมือที่เกี่ยวข้อง
ทำงานต่อด้วยเครื่องมือที่มีประโยชน์เหล่านี้