เหตุใดการรองรับเบราว์เซอร์รุ่นเก่าจึงมีความสำคัญ:คู่มือสมัยใหม่

/* Always write "@supports not" first if you use it */@supports not (display: grid) { .layout { padding-left: 2em; padding-right: 2em; }}

@supports (display: grid) { .layout { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 1em; padding-left: 1em; padding-right: 1em; }}

ตอนนี้เรามาพูดถึงว่าไซต์ต่างๆ ควรมีลักษณะเหมือนกันในเบราว์เซอร์หรือไม่

ไซต์ควรมีลักษณะเหมือนกันในทุกเบราว์เซอร์หรือไม่

บางคนเชื่อว่าไซต์ต่างๆ ควรมีลักษณะเหมือนกันในทุกเบราว์เซอร์ พวกเขาคิดว่าการสร้างแบรนด์เป็นสิ่งสำคัญ และเน้นย้ำว่าไซต์ควรมีความสม่ำเสมอเพื่อรักษาแบรนด์ไว้

คนอื่นบอกว่าไม่ พวกเขาเชื่อว่าพวกเขาควรยอมรับจิตวิญญาณแห่งการเพิ่มประสิทธิภาพที่ก้าวหน้า พวกเขาสามารถให้ความรักแก่ผู้ใช้เบราว์เซอร์ที่ดีกว่ามากขึ้น

มุมมองทั้งสองถูกต้อง แต่มาจากมุมที่ต่างกัน

มุมมองที่สำคัญที่สุดมาจากผู้ใช้ ไซต์ของคุณสามารถให้สิ่งที่พวกเขาต้องการแก่ผู้ใช้ได้หรือไม่

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

สรุป

หากต้องการให้การสนับสนุนคุณลักษณะ CSS คุณสามารถใช้:

1. การสำรองคุณสมบัติ
2. ข้อความค้นหาคุณลักษณะ

เมื่อคุณเขียน CSS ตรวจสอบให้แน่ใจว่าคุณประกาศโค้ดสำรองก่อนโค้ดชุดอื่นสำหรับเบราว์เซอร์ที่มีการรองรับที่ดีกว่า

รองรับเบราว์เซอร์รุ่นเก่า — JavaScript

การให้การสนับสนุน JavaScript สำหรับเบราว์เซอร์รุ่นเก่าเป็นเรื่องง่าย โดยส่วนใหญ่ คุณเพียงแค่ต้องใช้โพลีฟิล

แต่ยังมีหลายสิ่งที่คุณสามารถทำได้

โพลีฟิลคืออะไร

Polyfill คือโค้ดชิ้นหนึ่งที่บอกเบราว์เซอร์ถึงวิธีใช้งานฟีเจอร์ JavaScript เมื่อคุณเพิ่มโพลีฟิลแล้ว คุณไม่จำเป็นต้องกังวลเกี่ยวกับการสนับสนุนอีกต่อไป มันจะได้ผล

Polyfill ทำงานอย่างไร:

1. ตรวจสอบว่าคุณสมบัตินี้รองรับหรือไม่
2. หากไม่เป็นเช่นนั้น ระบบจะเพิ่มโค้ดเพื่อรองรับคุณลักษณะนี้

นี่คือตัวอย่างของโพลีฟิลในที่ทำงาน ตรวจสอบว่าเบราว์เซอร์รองรับ 218 หรือไม่ . หากเบราว์เซอร์ไม่รองรับ 227 โดยจะบอกเบราว์เซอร์ว่าจะสนับสนุนอย่างไร

คุณสามารถค้นหารหัสนี้ได้บน MDN

if (!Array.prototype.find) { Object.defineProperty(Array.prototype, 'find', { value: function(predicate) { // 1. Let O be ? ToObject(this value). if (this == null) { throw new TypeError('"this" is null or not defined'); }

var o = Object(this);

// 2. Let len be ? ToLength(? Get(O, "length")). var len = o.length >>> 0;

// 3. If IsCallable(predicate) is false, throw a TypeError exception. if (typeof predicate !== 'function') { throw new TypeError('predicate must be a function'); }

// 4. If thisArg was supplied, let T be thisArg; else let T be undefined. var thisArg = arguments[1];

// 5. Let k be 0. var k = 0;

// 6. Repeat, while k < len while (k < len) { // a. Let Pk be ! ToString(k). // b. Let kValue be ? Get(O, Pk). // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)). // d. If testResult is true, return kValue. var kValue = o[k]; if (predicate.call(thisArg, kValue, k, o)) { return kValue; } // e. Increase k by 1. k++; }

// 7. Return undefined. return undefined; }, configurable: true, writable: true });}

หมายเหตุ :โพลีฟิลคือเซตย่อยของชิม Shim คือไลบรารีที่นำ API ใหม่มาสู่สภาพแวดล้อมแบบเก่า

การใช้โพลีฟิล

มีสองวิธีในการใช้โพลีฟิล:

1. polyfill ด้วยตนเอง ดังตัวอย่างด้านบน
2. การเพิ่มโพลีฟิลจำนวนมากพร้อมกันผ่านไลบรารี

การบรรจุโพลีด้วยตนเอง

ขั้นแรก คุณต้องค้นหาโพลีฟิล คุณต้องการ. คุณควรจะสามารถค้นหาได้หากคุณใช้ Google นักพัฒนาที่ชาญฉลาดได้สร้างโพลีฟิลสำหรับเกือบทุกอย่างที่คุณต้องการ

เมื่อคุณพบโพลีฟิลแล้ว ให้ใช้กระบวนการข้างต้น เพื่อสร้างการสนับสนุนเบราว์เซอร์รุ่นเก่า

การเพิ่มโพลีฟิลหลายรายการพร้อมกัน

ไลบรารีบางแห่งมีโพลีฟิลล์จำนวนมาก ES6-shim คือตัวอย่างหนึ่งของห้องสมุดดังกล่าว ให้การสนับสนุนฟีเจอร์ ES6 ทั้งหมดบนเบราว์เซอร์รุ่นเก่า

การใช้คุณสมบัติ JavaScript ที่ล้ำสมัย

หากคุณต้องการใช้ฟีเจอร์ JavaScript ที่ล้ำสมัย ลองเพิ่ม Babel ในกระบวนการสร้างของคุณ

Babel เป็นเครื่องมือที่รวบรวม JavaScript ในระหว่างกระบวนการคอมไพล์นี้ มันสามารถ:

1. เพิ่ม shim / polyfill ที่คุณต้องการ
2. คอมไพล์ตัวประมวลผลล่วงหน้าเป็น JavaScript

เพิ่มเติมเกี่ยวกับประเด็นที่สอง:

Babel ทำงานแบบออฟไลน์ในกระบวนการสร้างของคุณ มันสามารถอ่านไฟล์ที่คุณส่งเข้าไป จากนั้นแปลงไฟล์เหล่านี้เป็น JavaScript ที่เบราว์เซอร์สามารถอ่านได้

ความหมายก็คือ คุณสามารถใช้ฟีเจอร์ล้ำสมัย เช่น Flow, TypeScript และเทคโนโลยีเจ๋งๆ อื่นๆ ที่คุณเคยได้ยินได้ ทั้งหมดนี้จะใช้งานได้ในเบราว์เซอร์ หากคุณผ่าน Babel ก่อน!

จะเป็นอย่างไรหากโพลีฟิลล์ยังไม่เพียงพอ

หากโพลีฟิลล์ไม่เพียงพอที่จะรองรับฟีเจอร์นี้ คุณอาจต้องการพิจารณาจำนวนการสนับสนุนที่คุณมอบให้กับเบราว์เซอร์ที่เป็นปัญหาอีกครั้ง

คุณจำเป็นต้องจัดให้มีฟังก์ชันการทำงานเดียวกันในเบราว์เซอร์ที่แตกต่างกันหรือไม่? บางทีคุณควรพิจารณาการปรับปรุงแบบก้าวหน้าแทน

บางทีคุณอาจเขียนโค้ดในลักษณะที่ไม่ใช้ฟีเจอร์นี้ได้

อาจจะมากมาย แต่คุณเข้าใจได้

จะทราบได้อย่างไรว่าเบราว์เซอร์รองรับคุณสมบัตินี้

ก่อนอื่น ฉันตรวจสอบ caniuse.com เขียนชื่อฟีเจอร์ JavaScript ที่คุณต้องการ แล้วคุณจะเห็นระดับการสนับสนุนเบราว์เซอร์

นี่คือตัวอย่างของ Abort Controller

หาก caniuse.com ไม่ให้ข้อมูลใดๆ แก่ฉัน ฉันจะตรวจสอบ MDN คุณจะพบการสนับสนุนเบราว์เซอร์ที่ด้านล่างของบทความส่วนใหญ่

นี่คือตัวอย่างของ Abort Controller อีกครั้ง:

ระวังค่าใช้จ่ายของ JavaScript

เมื่อคุณใช้ polyfills คุณจะเพิ่มโค้ด JavaScript เพิ่มเติม

ปัญหาในการเพิ่ม JavaScript ก็คือ มี JavaScript มากขึ้น และเมื่อมี JavaScript มากขึ้น ปัญหาก็เพิ่มมากขึ้น:

1. เบราว์เซอร์รุ่นเก่ามักจะอยู่ในคอมพิวเตอร์รุ่นเก่า อาจมีพลังการประมวลผลไม่เพียงพอ
2. ชุด JavaScript อาจทำให้การโหลดไซต์ล่าช้าได้ ข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้ใน “ต้นทุนของ JavaScript“ โดย Addy Osmani

สรุป

การเพิ่มการรองรับคุณสมบัติ JavaScript เป็นเรื่องง่าย โดยส่วนใหญ่ คุณจะเพิ่มโพลีฟิลและเรียกว่าวันละครั้ง แต่ควรคำนึงถึงต้นทุนของ JavaScript เมื่อคุณทำเช่นนั้น!

บางครั้ง การยกเลิกฟีเจอร์นี้ไปเลยอาจเป็นการดี

เหตุใดจึงรองรับเบราว์เซอร์รุ่นเก่า

ทำไมคุณต้องสนใจเบราว์เซอร์รุ่นเก่า

ใครใช้เบราว์เซอร์รุ่นเก่าบ้าง? อาจเป็นผู้ใช้ที่มีคอมพิวเตอร์เครื่องเก่าใช่ไหม

หากพวกเขาใช้คอมพิวเตอร์เครื่องเก่า บางทีพวกเขาอาจไม่มีเงินซื้อเครื่องใหม่

หากพวกเขาไม่มีเงินที่จะซื้อคอมพิวเตอร์เครื่องใหม่ พวกเขาอาจจะไม่ซื้ออะไรจากคุณเช่นกัน

หากพวกเขาจะไม่ซื้ออะไรจากคุณ ทำไมคุณต้องสนใจที่จะสนับสนุนเบราว์เซอร์ของพวกเขาด้วย

สำหรับนักธุรกิจ นั่นเป็นความคิดที่สมเหตุสมผลอย่างยิ่ง แต่ทำไมนักพัฒนาของเราถึงยังยืนกรานที่จะสนับสนุนเบราว์เซอร์รุ่นเก่า

มาดูรายละเอียดกันดีกว่า

มีข้อสันนิษฐานมากมายเกี่ยวกับกระบวนการคิดดั้งเดิม

“ใครใช้เบราว์เซอร์รุ่นเก่า อาจเป็นผู้ใช้คอมพิวเตอร์เครื่องเก่า หากพวกเขาใช้คอมพิวเตอร์เครื่องเก่า บางทีพวกเขาอาจไม่มีเงินซื้อเครื่องใหม่”

แม้ว่าผู้คนจะใช้เบราว์เซอร์รุ่นเก่าเพราะพวกเขาใช้คอมพิวเตอร์เครื่องเก่า เราไม่สามารถสรุปได้ว่าผู้คนไม่มีเงินพอที่จะซื้อเบราว์เซอร์ใหม่ได้

• บางทีบริษัทของพวกเขาอาจไม่ต้องการซื้อมัน
• บางทีพวกเขาอาจพอใจกับคอมพิวเตอร์ของตน และไม่ต้องการอัปเกรด
• บางทีพวกเขาอาจไม่มีความรู้ในการอัพเกรดคอมพิวเตอร์
• บางทีพวกเขาอาจไม่สามารถเข้าถึงคอมพิวเตอร์เครื่องใหม่ได้
• บางทีพวกเขาอาจผูกพันกับโทรศัพท์มือถือที่ไม่มีเบราว์เซอร์ที่ดี

อย่าคิดไปเอง

หากพวกเขาไม่มีเงินที่จะซื้อคอมพิวเตอร์เครื่องใหม่ พวกเขาอาจจะไม่ซื้ออะไรจากคุณเช่นกัน หากพวกเขาจะไม่ซื้ออะไรจากคุณ ทำไมคุณต้องสนใจที่จะสนับสนุนเบราว์เซอร์ของพวกเขาด้วย

เราต้องขยายไปยังพื้นที่อื่นเพื่อพูดคุยเกี่ยวกับประเด็นนี้

การเข้าถึงเก้าอี้รถเข็น

หากคุณเคยไปสิงคโปร์ คุณจะสังเกตเห็นว่ามีทางลาดหรือลิฟต์ติดกับบันไดเกือบทุกขั้น

แต่ทำไม? เหตุใดภาครัฐและเอกชนจึงทุ่มเงินซื้อลิฟต์และทางลาด? ทำไมต้องสร้างบันไดเหล่านี้ในเมื่อบันไดเพียงพอที่จะพาผู้คนจากระดับล่างขึ้นไปสู่ระดับที่สูงขึ้น

ปรากฎว่าบางคนไม่สามารถใช้บันไดได้ พวกเขาเดินด้วยเท้าไม่ได้ พวกเขาต้องนั่งในเก้าอี้รถเข็น และไม่สามารถเข็นตัวเองขึ้นบันไดได้ ลิฟต์และทางลาดให้บริการคนเหล่านี้

และปรากฎว่ามีผู้คนจำนวนมากขึ้นที่ได้รับประโยชน์จากลิฟต์และทางลาด

1. ผู้ที่มีเข่าอ่อนแรง
2. ผู้ที่มีจักรยานหรือสกู๊ตเตอร์ติดตัว
3. ผู้ปกครองที่กำลังเข็นรถเข็นเด็ก

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

แต่ปัญหาคือ ไม่มีใครมีรายได้แม้แต่สตางค์เดียวจากการใช้ทางลาดหรือลิฟต์ใช่ไหม แล้วทำไมต้องสร้างมันขึ้นมา

เพราะมันคุ้มค่า

และความคุ้มค่าไม่ได้หมายถึงเงินเสมอไป

พิจารณาภาวะโลกร้อน

คุณอาศัยอยู่บนโลก คุณรู้สึกอย่างไรเกี่ยวกับภาวะโลกร้อน

บางคนไม่สนใจ ไม่เป็นไรถ้าป่าไม้ถูกเผา ไม่เป็นไรหากบริษัทต่างๆ ก่อให้เกิดมลพิษในแม่น้ำและปล่อยก๊าซคาร์บอนไดออกไซด์จำนวนมากสู่อากาศ มันไม่ส่งผลกระทบต่อพวกเขา

แต่ก็มีคนกลุ่มหนึ่งที่ใส่ใจ พวกเขารักโลกที่เราอาศัยอยู่ พวกเขาต้องการให้ลูกๆ มีที่อยู่อาศัยที่ดีขึ้น มีเหตุผลมากมายที่พวกเขาใส่ใจ และพวกเขาอาจต้องการประหยัดทรัพยากรให้ได้มากที่สุด

คุณยืนอยู่ตรงไหน?

คุณจะให้เงินกับบริษัทที่ทำลายโลกในขณะที่บริษัทดำเนินกิจการอยู่หรือไม่

บางทีคุณอาจจะ บางทีคุณอาจจะไม่ บางทีคุณอาจไม่สนใจ ทั้งสามตัวเลือกนั้นถูกต้อง

และขอย้ำอีกครั้งว่ามันไม่ได้เกี่ยวกับเงินเสมอไป

เว็บเหมาะสำหรับทุกคน

ความฝันเบื้องหลังเว็บคือพื้นที่ข้อมูลทั่วไปที่เราสื่อสารโดยการแบ่งปันข้อมูล

— ทิม เบอร์เนอร์ส-ลี

นักพัฒนาส่วนหน้าคือผู้ดูแลเว็บ เว็บจะออกมาเป็นอย่างไรก็ขึ้นอยู่กับเรา เราไม่สามารถบังคับให้ทุกคนสร้างทางลาดและลิฟต์ได้ แต่เราสร้างมันเองได้

ทางเลือกขึ้นอยู่กับคุณจริงๆ

คุณไม่จำเป็นต้องสนใจหากคุณไม่ต้องการ

นักพัฒนาส่วนหน้าที่ดีที่สุดที่ฉันรู้จัก? พวกเขาใส่ใจ พวกเขาเลือกที่จะรวม มันคือสิ่งที่ทำให้เราเป็นนักพัฒนาส่วนหน้า

เราใส่ใจ

แต่บางครั้งเราก็มีข้อจำกัดและข้อจำกัดเช่นกัน และเราทำงานกับขีดจำกัดเหล่านั้น

บทความนี้เดิมถูกโพสต์ที่บล็อกของฉัน
สมัครรับจดหมายข่าวของฉัน หากคุณต้องการบทความเพิ่มเติมเพื่อช่วยให้คุณเป็นนักพัฒนาส่วนหน้าที่ดีขึ้น

เรียนรู้การเขียนโค้ดฟรี หลักสูตรโอเพ่นซอร์สของ freeCodeCamp ช่วยให้ผู้คนมากกว่า 40,000 คนได้งานในตำแหน่งนักพัฒนา เริ่มต้น