เว็บเบราเซอร์ได้รับรอบตราบเท่าที่เว็บไซต์มี ในความเป็นจริงเบราว์เซอร์เป็นส่วนประกอบสำคัญในประสบการณ์หรือผู้คนที่ดูไซต์ของคุณ แต่เบราว์เซอร์ไม่ได้สร้างขึ้นอย่างเท่าเทียมกัน เป็นไปได้ทั้งหมด (และอาจเป็นไปได้ค่อนข้างมาก) เพื่อให้ลูกค้าดูหน้าเว็บของคุณในเบราว์เซอร์ที่เก่าและไม่มีคุณลักษณะที่พบในเบราว์เซอร์ที่ทันสมัยกว่า ซึ่งอาจก่อให้เกิดปัญหาที่สำคัญเมื่อคุณพยายามพัฒนาเว็บไซต์ที่ใช้ประโยชน์จาก ความก้าวหน้าล่าสุดในการออกแบบและพัฒนา เว็บไซต์ หากมีคนมาที่ไซต์ของคุณโดยใช้เบราว์เซอร์ที่ต่อต้านเหล่านี้และเทคนิคขั้นสูงล่าสุดของคุณใช้ไม่ได้ผลคุณอาจส่งผลเสียโดยรวม การเพิ่มประสิทธิภาพเชิงก้าวหน้าคือกลยุทธ์ในการจัดการการออกแบบหน้าเว็บสำหรับเบราว์เซอร์ที่แตกต่างกันคือเบราว์เซอร์รุ่นเก่าที่ขาดการสนับสนุนที่ทันสมัย
การเพิ่มประสิทธิภาพเชิงก้าวหน้าเป็นวิธีการออกแบบหน้าเว็บเพื่อให้มีคุณลักษณะที่ผู้ใช้งานสนับสนุนมากขึ้นคุณสมบัติของหน้าเว็บจะมีมากขึ้น มันเป็นสิ่งที่ตรงกันข้ามกับกลยุทธ์การออกแบบที่เรียกว่า การย่อยสลายสง่างาม กลยุทธ์นี้สร้างหน้าเว็บสำหรับเบราว์เซอร์ที่ทันสมัยที่สุดก่อนแล้วจึงมั่นใจได้ว่าจะทำงานได้ดีกับเบราว์เซอร์ที่ทำงานได้น้อยลงนั่นทำให้ประสบการณ์ "ลดความสง่างาม" การเพิ่มประสิทธิภาพที่ก้าวหน้าขึ้นเริ่มต้นด้วยเบราว์เซอร์ที่มีคุณสมบัติน้อยกว่าก่อนและสร้างประสบการณ์จากที่นั่น
วิธีการใช้ Progressive Enhancement
เมื่อคุณสร้างการออกแบบเว็บโดยใช้การเพิ่มประสิทธิภาพเชิงก้าวหน้าสิ่งแรกที่คุณจะต้องทำก็คือการสร้างการออกแบบที่เหมาะสำหรับส่วนร่วมที่ต่ำที่สุดของเว็บเบราเซอร์ ที่หลักของการเพิ่มประสิทธิภาพความก้าวหน้ากล่าวว่าเนื้อหาของคุณควรมีให้กับเว็บเบราเซอร์ ทั้งหมด ไม่ใช่แค่ชุดย่อยเท่านั้นนี่คือเหตุผลที่คุณเริ่มต้นด้วยการสนับสนุนเบราว์เซอร์เก่าเก่าและเบราว์เซอร์ที่มีคุณสมบัติน้อยกว่านี้หากคุณสร้างไซต์ที่ทำงานได้ดี สำหรับพวกเขาคุณรู้ว่าคุณได้สร้างพื้นฐานที่ควรมอบประสบการณ์การใช้งานอย่างน้อยให้กับผู้เข้าชมทั้งหมด
เมื่อเริ่มต้นด้วยเบราว์เซอร์ที่มีความสามารถน้อยที่สุดก่อนอื่นคุณจะต้องตรวจสอบให้แน่ใจว่า HTML ทั้งหมดของคุณควรมีความถูกต้องและมีความหมายตามหลักจรรยา ซึ่งจะช่วยให้มั่นใจได้ว่าตัวแทนผู้ใช้สามารถดูหน้าเว็บได้อย่างถูกต้องและกว้างที่สุด
โปรดจำไว้ว่ารูปแบบการออกแบบภาพและการจัดวางหน้าโดยรวมจะถูกเพิ่มโดยใช้ สไตล์ชีทภายนอก นี่เป็นจุดที่การเพิ่มประสิทธิภาพก้าวหน้าเกิดขึ้น คุณใช้สไตล์ชีทเพื่อสร้างการออกแบบเว็บไซต์ที่เหมาะกับผู้เข้าชมทั้งหมด จากนั้นคุณสามารถเพิ่มรูปแบบเพิ่มเติมเพื่อปรับปรุงหน้าเว็บเนื่องจากฟังก์ชันการทำงานของเอเจนต์ผู้ใช้เพิ่มขึ้น ทุกคนได้รับรูปแบบพื้นฐาน แต่สำหรับเบราว์เซอร์ข่าวใด ๆ ที่สามารถสนับสนุนรูปแบบที่ทันสมัยและทันสมัยมากขึ้นพวกเขาได้รับบางพิเศษ คุณ "ก้าวหน้าเพิ่ม" หน้าเว็บสำหรับเบราว์เซอร์ที่สามารถสนับสนุนรูปแบบเหล่านั้นได้
มีวิธีการบางอย่างที่คุณสามารถใช้การเพิ่มประสิทธิภาพเชิงก้าวหน้าได้ ก่อนอื่นคุณควรพิจารณาสิ่งที่เบราว์เซอร์ไม่ถ้าไม่เข้าใจบรรทัดของ CSS - มันละเว้นมัน! นี้จริงทำงานในความโปรดปรานของคุณ หากคุณสร้างชุดรูปแบบพื้นฐานที่เบราว์เซอร์เข้าใจแล้วคุณสามารถเพิ่มรูปแบบเพิ่มเติมสำหรับเบราว์เซอร์ใหม่ได้ หากพวกเขาสนับสนุนรูปแบบพวกเขาจะใช้พวกเขา ถ้าไม่พวกเขาจะไม่สนใจพวกเขาและใช้รูปแบบพื้นฐานเหล่านั้น ตัวอย่างง่ายๆของการเพิ่มประสิทธิภาพก้าวหน้าสามารถมองเห็นได้ใน CSS นี้:
.เนื้อหาหลัก {
พื้นหลัง: # 999;
พื้นหลัง: rgba (153,153,153, .75);
}
สไตล์นี้จะตั้งค่าพื้นหลังเป็นสีเทาก่อน กฎที่สองใช้ค่าสี RGBA เพื่อกำหนดระดับความโปร่งใส หากเบราว์เซอร์สนับสนุน RGBA ระบบจะแทนที่สไตล์แรกด้วยส่วนที่สอง หากไม่เป็นเช่นนั้นจะใช้เฉพาะชุดแรกเท่านั้น คุณได้ตั้งค่าสีพื้นฐานและเพิ่มรูปแบบพิเศษสำหรับเบราว์เซอร์ที่ทันสมัยขึ้นแล้ว
การใช้ Query คุณลักษณะ
อีกวิธีหนึ่งที่คุณสามารถใช้การเพิ่มประสิทธิภาพเชิงก้าวหน้าคือการใช้สิ่งที่เรียกว่า "คุณลักษณะการค้นหา" ข้อความเหล่านี้คล้ายกับ ข้อความค้นหาสื่อ ซึ่งเป็นส่วนสำคัญของ การออกแบบเว็บไซต์ที่ตอบสนอง ต่อ ในขณะที่ข้อความค้นหาสื่อสำหรับขนาดหน้าจอบางแบบข้อความค้นหาคุณลักษณะจะตรวจสอบเพื่อดูว่าคุณลักษณะบางอย่างได้รับการสนับสนุนหรือไม่ ไวยากรณ์ที่คุณใช้คือ:
@supports (display: flex) {}รูปแบบใด ๆ ที่คุณเพิ่มภายในกฎนี้จะใช้ได้เฉพาะเมื่อเบราเซอร์สนับสนุน "flex" ซึ่งเป็นสไตล์ของ Flexbox คุณสามารถตั้งกฎหนึ่งชุดสำหรับทุกคนจากนั้นใช้แบบสอบถามคุณลักษณะเพื่อเพิ่มเฉพาะสำหรับเบราว์เซอร์ที่เลือกเท่านั้น
บทความต้นฉบับโดย Jennifer Krynin แก้ไขโดย Jeremy Girard เมื่อวันที่ 12/13/16