ความเข้ากันได้ของเบราว์เซอร์และ caniuse.com
ตรวจสอบการรองรับคุณลักษณะในเบราว์เซอร์ต่าง ๆ บน caniuse.com ทำความเข้าใจคำนำหน้าของผู้ผลิต และใช้โพลีฟิลล์หรือทางเลือกสำรองเมื่อจำเป็น
ความเข้ากันได้ของเบราว์เซอร์และ caniuse.com เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุใดความเข้ากันได้จึงสำคัญ
เบราว์เซอร์ต่าง ๆ นำมาตรฐานเว็บมาใช้ด้วยความเร็วต่างกัน คุณสมบัติ CSS หรือ API ของ JavaScript ที่มีใน Chrome 130 อาจไม่มีใน Safari หรือ Firefox รุ่นเก่า การทดสอบและวางแผนเพื่อความเข้ากันได้ช่วยป้องกันประสบการณ์ใช้งานที่เสียหายสำหรับผู้ใช้ของคุณ
caniuse.com — แหล่งอ้างอิงด้านความเข้ากันได้
ไปที่ caniuse.com แล้วพิมพ์คุณสมบัติ CSS, API ของ JavaScript หรือแอตทริบิวต์ HTML ใดก็ได้ คุณจะเห็นตารางการรองรับที่ใช้สีแยกประเภทในเบราว์เซอร์หลักทั้งหมดและรุ่นล่าสุดของเบราว์เซอร์เหล่านั้น รวมถึงสถิติการใช้งานและหมายเหตุเกี่ยวกับการรองรับบางส่วน
การอ่านตาราง caniuse
สีเขียว = รองรับ สีเหลือง = รองรับบางส่วน สีแดง = ไม่รองรับ สีเทา = ไม่ทราบสถานะ ตรวจสอบเปอร์เซ็นต์การใช้งานทั่วโลกที่ด้านบน หากผู้ใช้มีฟีเจอร์นี้ตั้งแต่ 97% ขึ้นไป โดยทั่วไปคุณสามารถใช้ได้โดยไม่ต้องมีทางเลือกสำรอง
browser-compat-data และ MDN
หน้า MDN Web Docs มีตารางความเข้ากันได้ของเบราว์เซอร์อยู่ด้านล่างของหน้าอ้างอิง API ทุกหน้า ตารางนี้ใช้ข้อมูลเดียวกับ caniuse และได้รับการอัปเดตบ่อยครั้งโดยผู้ผลิตเบราว์เซอร์เอง
โครงการริเริ่ม Baseline
โครงการริเริ่ม Baseline (web.dev/baseline) ระบุฟีเจอร์เป็นพร้อมใช้งานใหม่หรือพร้อมใช้งานอย่างแพร่หลายตามการรองรับใน Chrome, Edge, Firefox และ Safari ฟีเจอร์ที่พร้อมใช้งานอย่างแพร่หลายปลอดภัยที่จะใช้โดยไม่ต้องมีโพลีฟิลล์
โพลีฟิลล์
โพลีฟิลล์ คือโค้ด JavaScript ที่นำ API รุ่นใหม่มาใช้งานในเบราว์เซอร์รุ่นเก่า แหล่งที่ได้รับความนิยม ได้แก่ polyfill.io (ส่งเฉพาะโพลีฟิลล์ที่จำเป็น), core-js (โพลีฟิลล์ JavaScript แบบครอบคลุม) และตัวช่วยของ Babel
// polyfill.io example:
<script src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.at,Object.hasOwn"></script>@supports — การตรวจสอบคุณสมบัติใน CSS
@supports ช่วยให้คุณเขียน CSS ที่มีผลเฉพาะเมื่อเบราว์เซอร์รองรับคุณสมบัตินั้น โดยจัดเตรียมทางเลือกสำรองของ CSS ในลักษณะคล้ายกับที่การตรวจสอบสื่อใช้กำหนดค่าทดแทนตามการตอบสนอง
/* Fallback for all browsers */
.grid {
display: flex;
flex-wrap: wrap;
}
/* Enhancement for browsers that support grid */
@supports (display: grid) {
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}คำนำหน้าผู้ผลิต (รุ่นเก่า)
คุณสมบัติ CSS รุ่นเก่าจำเป็นต้องใช้คำนำหน้าผู้ผลิต ได้แก่ -webkit-, -moz- และ -ms- ปัจจุบันคำนำหน้าเหล่านี้ส่วนใหญ่เลิกใช้แล้ว — เบราว์เซอร์สมัยใหม่ใช้คุณสมบัติมาตรฐานที่ไม่มีคำนำหน้า Autoprefixer (ปลั๊กอิน PostCSS) จะเพิ่มคำนำหน้าเหล่านี้โดยอัตโนมัติหากยังจำเป็น
การแปลงโค้ดด้วย Babel
Babel จะแปลง JavaScript สมัยใหม่ (ES2022 ขึ้นไป) เป็น ES5 ซึ่งเบราว์เซอร์รุ่นเก่าสามารถเรียกใช้ได้ Vite และ webpack ผสานการทำงานกับ Babel ผ่านปลั๊กอิน คุณสามารถกำหนดเบราว์เซอร์เป้าหมายใน browserslist ภายใน package.json ได้
// package.json
"browserslist": [
"last 2 versions",
"not dead",
"> 0.5%"
]การทดสอบในเบราว์เซอร์จริง
การจำลองอุปกรณ์ด้วย DevTools ไม่สามารถใช้แทนการทดสอบในเบราว์เซอร์จริงได้ โปรดใช้ BrowserStack, Sauce Labs หรือเบราว์เซอร์ Safari จริง (ต้องใช้ macOS หรือ iOS) เพื่อยืนยันความเข้ากันได้ข้ามเบราว์เซอร์อย่างแท้จริง
ภาพรวมเบราว์เซอร์ที่อัปเดตอัตโนมัติ
Chrome, Edge, Firefox และ Safari ล้วนรองรับการอัปเดตอัตโนมัติ จำนวนเบราว์เซอร์ล้าสมัยที่ยังมีผู้ใช้อยู่ลดลงทุกปี สำหรับผลิตภัณฑ์ส่วนใหญ่ที่มุ่งเป้าผู้บริโภค การรองรับ 2 รุ่นหลักล่าสุดของเบราว์เซอร์แต่ละชนิดจะครอบคลุมผู้ใช้มากกว่า 95%
ตรวจสอบอย่างรวดเร็ว
เซลล์สีเขียวในตารางการรองรับของ caniuse.com บ่งชี้อะไร
สรุป: ความเข้ากันได้ของเบราว์เซอร์
ตรวจสอบ caniuse.com ก่อนใช้ API ใหม่ อ่านตารางความเข้ากันได้ของ MDN กำหนดชุดเบราว์เซอร์เป้าหมายที่เหมาะสมด้วย browserslist ใช้ @supports สำหรับการตรวจสอบคุณสมบัติของ CSS ใช้โพลีฟิลล์เฉพาะส่วนที่จำเป็น แปลง JS สมัยใหม่ด้วย Babel และทดสอบในเบราว์เซอร์จริงสำหรับคุณสมบัติสำคัญ
คำถามที่พบบ่อย
บทเรียน “ความเข้ากันได้ของเบราว์เซอร์และ caniuse.com” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ความเข้ากันได้ของเบราว์เซอร์และ caniuse.com” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ความเข้ากันได้ของเบราว์เซอร์และ caniuse.com”
ตรวจสอบการรองรับคุณลักษณะในเบราว์เซอร์ต่าง ๆ บน caniuse.com ทำความเข้าใจคำนำหน้าของผู้ผลิต และใช้โพลีฟิลล์หรือทางเลือกสำรองเมื่อจำเป็น คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “ความเข้ากันได้ของเบราว์เซอร์และ caniuse.com” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม
ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- Chrome DevTools: Elements Console Network
- VSCode: ส่วนขยาย Emmet และแป้นพิมพ์ลัด
- การตั้งค่า Prettier และ ESLint
- ความเข้ากันได้ของเบราว์เซอร์และ caniuse.com