จัดการ CSS3 Vendor Prefixes ด้วย prefixfree.js

Published on

ปกติเวลาเราเขียน CSS3 นั้นต้องเขียน prefix สำหรับ property บางตัว ที่ browser บางเวอร์ชั่นที่ยังไม่รู้จัก W3C standards เช่น gradient background ลากยาวมหึมา (โค้ดจาก CSS3Please.com)

.box_gradient {
  background-color: #444444;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
  background-image: -webkit-linear-gradient(top, #444444, #999999);
  background-image: -moz-linear-gradient(top, #444444, #999999);
  background-image: -ms-linear-gradient(top, #444444, #999999);
  background-image: -o-linear-gradient(top, #444444, #999999);
  background-image: linear-gradient(to bottom, #444444, #999999);
}

เห็นโค้ดแล้วเหนื่อย Lea Verou เจ้าของเดียวกับ dabblet เลยทำ prefixfree.js ขึ้นมาเพื่อเป็นตัวจัดการกับ prefix ต่างๆ ให้ โดยที่เราเขียนแค่เวอร์ชั่น W3C standards ตัว prefixfree.js ก็จะใส่ prefix ให้เท่าที่จำเป็น ขึ้นอยู่กับ browser ที่ใช้ครับ

prefix-free

วิธีใช้ก็แค่เรียกใช้ prefixfree.js ในหน้าที่เราต้องการครับ

<script src="js/prefixfree.min.js"></script>

เวลาเขียน CSS ก็เขียนแค่เวอร์ชั่นธรรมดา

.box_gradient {
  background-image: linear-gradient(to bottom, #444444, #999999);
}

พอไปรันใน browser ตัว prefixfree.js ก็จะเติม prefix ให้อัตโนมัติ ข้อดีก็คือ เราไม่ต้องไปจำ vendor prefix ที่ไม่ใช่มาตรฐานของ CSS3 ไม่ต้องเขียนให้เสียเวลา โค้ด CSS เราก็จะสั้นลงนิดหน่อย อีกอย่างก็คือ ดูไม่รกรุงรังเมื่อใช้ developer tools inspect ดูใน browser ครับ

ข้อมูลอื่นๆ อ่านได้จาก http://leaverou.github.com/prefixfree/ ครับ ลองใช้กันดูนะ

Share

(Edit on GitHub)