Autoprefixer และ cssnano
เพิ่มคำนำหน้าของผู้ผลิตโดยอัตโนมัติด้วย Autoprefixer และย่อผลลัพธ์ CSS ด้วย cssnano
Autoprefixer และ cssnano เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
Autoprefixer คืออะไร
Autoprefixer เป็นปลั๊กอิน PostCSS ที่เพิ่มคำนำหน้าของผู้ผลิต (-webkit-, -moz-, -ms-) ให้กับคุณสมบัติ CSS โดยอัตโนมัติ ตามเบราว์เซอร์ที่คุณต้องรองรับ และใช้ข้อมูลจาก Can I Use
Autoprefixer ทำงานอย่างไร
คุณเขียน CSS มาตรฐานโดยไม่ต้องใส่คำนำหน้า Autoprefixer จะอ่านการกำหนดค่า Browserslist แล้วเพิ่มคำนำหน้าที่จำเป็นสำหรับเบราว์เซอร์เป้าหมายระหว่างกระบวนการสร้าง
<div class="flex">Flexbox row (display: flex — Autoprefixer would add -webkit-box/-ms-flexbox for older targets)</div>การกำหนดค่า Browserslist
Autoprefixer ใช้ Browserslist เพื่อระบุเบราว์เซอร์เป้าหมาย ให้กำหนดค่าใน .browserslistrc หรือ package.json:
# .browserslistrc
> 1%
last 2 versions
not deadCSS สมัยใหม่ต้องใช้คำนำหน้าเพียงเล็กน้อย
ณ ปี 2024 CSS สมัยใหม่ส่วนใหญ่ (Grid, Flexbox, คุณสมบัติแบบกำหนดเอง และการแปลง) ไม่ต้องใช้คำนำหน้าเลยหรือใช้เพียงเล็กน้อย Autoprefixer มีประโยชน์มากที่สุดกับคุณสมบัติที่เพิ่งเริ่มใช้งาน เช่น appearance, user-select และส่วนเชื่อมต่อโปรแกรมรุ่นใหม่
การเพิ่ม Autoprefixer ให้กับ PostCSS
ใส่ autoprefixer ไว้ในการกำหนดค่า PostCSS:
// postcss.config.js
const autoprefixer = require('autoprefixer');
module.exports = {
plugins: [autoprefixer]
};cssnano คืออะไร
cssnano เป็นปลั๊กอิน PostCSS ที่ลดขนาด CSS โดยลบช่องว่าง ความคิดเห็น และการประกาศที่ซ้ำซ้อน พร้อมใช้การปรับปรุงที่ปลอดภัย เพื่อสร้างไฟล์ CSS ที่มีขนาดเล็กที่สุดเท่าที่ทำได้
ค่าที่ตั้งไว้ล่วงหน้าของ cssnano
cssnano มีค่าที่ตั้งไว้ล่วงหน้าสำหรับการปรับปรุงดังนี้:
default: การลดขนาดที่ปลอดภัย (ลบช่องว่าง ความคิดเห็น และข้อมูลซ้ำ)advanced: การปรับปรุงแบบเข้มข้น ซึ่งอาจเปลี่ยนความจำเพาะของตัวเลือกได้ (ควรใช้อย่างระมัดระวัง)
// postcss.config.js
const cssnano = require('cssnano');
module.exports = {
plugins: [
cssnano({ preset: 'default' })
]
};สิ่งที่ cssnano ทำ
การปรับปรุงของ cssnano ประกอบด้วย:
- ลบช่องว่างและความคิดเห็น
- แปลงสีให้อยู่ในรูปแบบที่สั้นที่สุด (
#ffffff→#fff) - รวมกฎที่เหมือนกัน
- ลบคุณสมบัติที่ซ้ำซ้อน
- ย่อค่าศูนย์ (
0px→0)
การรวมทั้งสองปลั๊กอินไว้ในการกำหนดค่า
การกำหนดค่า PostCSS สำหรับใช้งานจริงที่มีปลั๊กอินทั้งสอง:
module.exports = {
plugins: [
require('autoprefixer'),
process.env.NODE_ENV === 'production' && require('cssnano')({ preset: 'default' })
].filter(Boolean)
};แผนผังแหล่งที่มากับการลดขนาด
สร้างแผนผังแหล่งที่มาเสมอเมื่อใช้ cssnano ในการสร้างสำหรับการพัฒนา แผนผังนี้จะจับคู่ผลลัพธ์ที่ลดขนาดแล้วกลับไปยัง CSS ต้นฉบับเพื่อแก้ไขข้อผิดพลาดใน DevTools
ทางเลือกอื่นนอกเหนือจาก cssnano
เครื่องมือลดขนาด CSS อื่น ๆ ได้แก่ clean-css, lightningcss (สร้างด้วย Rust และทำงานเร็วมาก) และเครื่องมือลดขนาดที่มีมาในเครื่องมือสร้าง เช่น เครื่องมือลดขนาด CSS ภายในของ Vite (ซึ่งใช้ esbuild)
ตรวจสอบอย่างรวดเร็ว
สิ่งใดเป็นตัวกำหนดว่าคำนำหน้าของผู้ผลิตใดที่ Autoprefixer จะเพิ่มให้กับ CSS ของคุณ
สรุปทบทวน
Autoprefixer เพิ่มคำนำหน้าของผู้ผลิตโดยอัตโนมัติตามเบราว์เซอร์เป้าหมายใน Browserslist จึงไม่จำเป็นต้องเขียนคำนำหน้าด้วยตนเอง cssnano ลดขนาด CSS โดยลบช่องว่าง ความคิดเห็น และใช้การปรับปรุงที่ปลอดภัย ควรใช้ทั้งสองอย่างในกระบวนการ PostCSS สำหรับการสร้างจริง CSS สมัยใหม่ต้องใช้คำนำหน้าน้อยลงกว่าเดิม จึงควรตรวจสอบกับเบราว์เซอร์เป้าหมายจริงของคุณ
คำถามที่พบบ่อย
บทเรียน “Autoprefixer และ cssnano” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “Autoprefixer และ cssnano” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “Autoprefixer และ cssnano”
เพิ่มคำนำหน้าของผู้ผลิตโดยอัตโนมัติด้วย Autoprefixer และย่อผลลัพธ์ CSS ด้วย cssnano คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “Autoprefixer และ cssnano” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- PostCSS ทำอะไรและทำงานอย่างไร
- Autoprefixer และ cssnano
- ปลั๊กอิน PostCSS แบบกำหนดเอง
- PostCSS ใน Vite และ Webpack