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.

Enter Your CSS

CSS Properties

Enter one CSS property per line or separate with semicolons

Browser Support

WebKit

(Safari, Chrome)

Mozilla

(Firefox)

Microsoft

(IE, Edge)

Opera

Generated CSS with Vendor Prefixes

  display: flex;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -webkit-animation: fade 1s ease-in-out;
  -moz-animation: fade 1s ease-in-out;
  -ms-animation: fade 1s ease-in-out;
  -o-animation: fade 1s ease-in-out;
  animation: fade 1s ease-in-out;

Tips

• 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 อย่าง -webkit-, -moz-, -ms- และ -o- ช่วยให้คุณใช้พร็อพเพอร์ตี้ที่เอนจินเบราว์เซอร์รองรับก่อนถูกกำหนดเป็นมาตรฐาน การเพิ่มมันช่วยเพิ่มความเข้ากันได้ข้ามเบราว์เซอร์สำหรับเบราว์เซอร์รุ่นเก่า

เครื่องมือนี้เพิ่ม prefix ใดได้บ้าง

มันสร้าง prefix ทั่วไปสี่ตัวได้ คือ -webkit- (Chrome, Safari, Edge), -moz- (Firefox), -ms- (Internet Explorer และ Edge รุ่นเก่า) และ -o- (Opera รุ่นเก่า) และคุณเลือกได้ว่าจะใส่ตัวใดบ้าง

มันเพิ่ม prefix ให้ทุกพร็อพเพอร์ตี้ที่ฉันวางไหม

มันเพิ่มรูปแบบ prefix ให้พร็อพเพอร์ตี้ที่เคยจำเป็นต้องใช้ในอดีต และคงพร็อพเพอร์ตี้มาตรฐานที่รองรับเต็มที่ไว้ตามเดิม ผลลัพธ์จึงสะอาดแทนที่จะรกด้วยบรรทัดที่ไม่จำเป็น

ทุกวันนี้ฉันยังต้องใช้ vendor prefix อยู่ไหม

พร็อพเพอร์ตี้สมัยใหม่หลายตัวไม่ต้องใช้แล้ว แต่ prefix ยังมีประโยชน์เมื่อต้องรองรับเบราว์เซอร์รุ่นเก่าหรือฟีเจอร์เฉพาะ เครื่องมือนี้ช่วยให้เพิ่มได้ง่ายเมื่อกลุ่มเบราว์เซอร์เป้าหมายของโปรเจกต์ต้องการ

CSS ของฉันถูกส่งไปที่ไหนหรือไม่

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

เครื่องมือที่เกี่ยวข้อง

ทำงานต่อด้วยเครื่องมือที่มีประโยชน์เหล่านี้

เครื่องมือแปลงหน่วย CSS

เครื่องมือสร้าง Meta Tag

เครื่องสร้าง Robots.txt

Open Graph Previewer

เครื่องมือเข้ารหัส/ถอดรหัสเอนทิตี HTML

เครื่องมือดูส่วนหัว HTTP