เทคนิคการลดระดับ CSS ลงทีละน้อย วิธีการปรับปรุงส่วนเพิ่มด้วย CSS3: รองรับเบราว์เซอร์สมัยใหม่ การย่อยสลายอย่างค่อยเป็นค่อยไปโดยใช้คำนำหน้าไม่ทำงานอีกต่อไป

ในบทความนี้ เราจะพยายามเข้าใจความแตกต่างระหว่างหลักการสองประการในการสร้างเพจตามการออกแบบเว็บแบบตอบสนอง: การเพิ่มประสิทธิภาพแบบก้าวหน้า และการลดระดับลงอย่างสง่างาม

การเสื่อมสลายอย่างสง่างาม

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

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

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

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

การปฏิบัติตามหลักการของการย่อยสลายอย่างค่อยเป็นค่อยไปทำให้ผู้ใช้ (และผู้ใช้ทุกคนคือลูกค้าที่มีศักยภาพ) สามารถทำงานกับไซต์ได้ในทุกสถานการณ์

การเพิ่มประสิทธิภาพแบบก้าวหน้า

การปรับปรุงแบบก้าวหน้าเป็นหลักการที่สร้างขึ้นเมื่อประกอบกับอุปกรณ์เคลื่อนที่เป็นอันดับแรก พื้นฐานทางทฤษฎีสำหรับการออกแบบเว็บไซต์แบบ “ตอบสนอง” (แบบปรับเปลี่ยนได้) ชื่อของมันบอกไว้แล้วว่ามันวางตำแหน่งการสร้างหน้าเว็บเป็นขั้นตอน วงจรตามหลักการ “จากง่ายไปสู่ซับซ้อน” ในแต่ละขั้นตอนที่วางแผนไว้ล่วงหน้า ลักษณะของหน้าควรจะสวยงามขึ้น ดีขึ้น และสะดวกยิ่งขึ้น แต่ฟังก์ชันทั้งหมดควรจะพร้อมใช้งานตั้งแต่แรก

เป็นกรณีพิเศษของการเสื่อมสลายอย่างสง่างาม , เนื่องจากหน้าเว็บทั้งหมดที่สร้างขึ้นจะปฏิบัติตามหลักการย่อยสลายอย่างสง่างามอย่างสมบูรณ์

โดยทั่วไป การสร้างเพจโดยใช้หลักการปรับปรุงแบบก้าวหน้าประกอบด้วยขั้นตอนต่อไปนี้:

• การสร้างเพจบนพื้นฐาน "สะอาด"HTML
  ในขั้นตอนนี้ให้สมบูรณ์ หน้าการทำงานซึ่งประกอบด้วยโค้ด HTML เท่านั้น ถูกต้องทั้งทางความหมายและตรรกะ ดังนั้นจึงสามารถตีความได้โดยเบราว์เซอร์ใดก็ได้ แม้แต่เบราว์เซอร์ที่ง่ายที่สุดก็ตาม ในขั้นตอนนี้ จะไม่มีการจัดรูปแบบใดๆ และเบราว์เซอร์จะจัดรูปแบบหน้าเว็บเองตามมาตรฐานที่รวมอยู่ในนั้น การปรับปรุงแบบก้าวหน้ายืนยันว่าขั้นตอนแรกเป็นสิ่งสำคัญที่สุด เนื่องจากไม่มีอะไรมีคุณค่าบนเว็บมากไปกว่าเนื้อหา
  สั้น: การสร้างโครงสร้างเอกสารความหมายและตรรกะ
• การเพิ่มกฎซีเอสเอส
  ในขั้นตอนนี้ มีการใช้ตาราง CSS ในรูปแบบเก่า: เพิ่มตารางมาร์กอัป องค์ประกอบจะถูกวางตำแหน่ง ภาพพื้นหลังสำหรับบล็อก ลักษณะ สี และลักษณะข้อความจะเปลี่ยนไป โดยทั่วไปแล้ว เพจจะมีรูปลักษณ์ใหม่สวยงามและน่าอยู่ยิ่งขึ้น
  สั้น: ทำให้มีลักษณะเป็นเอกสาร
• การใช้ CSS3
  ตอนนี้คุณสามารถใช้เอฟเฟกต์และการปรับปรุงทั้งหมดที่มีให้โดยข้อกำหนด CSS3 กับเอกสารได้ นั่นคือเพิ่มความโปร่งแสง เงา มุมโค้งมนสำหรับบล็อก การเปลี่ยนภาพเคลื่อนไหวที่ราบรื่นสำหรับคลาสหลอกหรือองค์ประกอบของแบบฟอร์ม
  สั้น: ให้ความสมบูรณ์แบบ รูปร่างเอกสาร
• กำลังสร้างสคริปต์บนจาวาสคริปต์
  ในขั้นตอนนี้ เอฟเฟกต์และหลักการทั้งหมดของการโต้ตอบของหน้าเว็บกับผู้ใช้จะถูกสร้างขึ้น โดยใช้จาวาสคริปต์- ซึ่งรวมถึงคำขอ AJAX การโหลดแบบไดนามิกหรือการตรวจสอบข้อมูล เอฟเฟกต์ภาพเคลื่อนไหวและวิดเจ็ต (เช่น Prototype หรือ jQuery) โดยทั่วไป เราทำให้เพจเป็นมิตรกับผู้ใช้มากขึ้น
  สั้น: การโต้ตอบ การโต้ตอบ ความสะดวกสบาย

เรามาลองใช้แนวทางนี้ในทางปฏิบัติกัน เราจะพัฒนาและออกแบบแบบฟอร์มเข้าสู่ระบบเว็บไซต์อย่างง่าย ในขั้นแรก เราจะสร้างแบบฟอร์มเข้าสู่ระบบด้วย HTML ล้วนๆ รูปทรงไม่สวยเท่าไหร่แต่ใช้งานได้ครบถ้วน ด้านล่างนี้คือโค้ดหน้าและผลลัพธ์ที่แสดงในเบราว์เซอร์:

ในขั้นตอนที่สอง เราจะกำหนดสไตล์ให้กับฟอร์มโดยการใช้สไตล์ชีตที่มีเฉพาะกฎที่ใช้ได้กับ CSS โดยไม่มีคุณสมบัติพิเศษ มาเพิ่มสีพื้นหลัง ระยะห่างจากขอบ การจัดตำแหน่งกัน ตอนนี้ฟอร์มดูดีขึ้นแล้ว:

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

ในขั้นตอนสุดท้าย เราสามารถสร้างคำขอ AJAX เพื่อให้ผู้ใช้สามารถเข้าถึงไซต์ได้โดยไม่ต้องโหลดหน้าซ้ำ

ในกรณีนี้ ในแต่ละขั้นตอน (หากเบราว์เซอร์รองรับ) หน้าที่ครบถ้วนจะปรากฏขึ้น แต่หากเบราว์เซอร์รองรับเทคโนโลยีขั้นสูงมากขึ้น หน้าเว็บก็จะดีขึ้นเท่านั้น

คุณควรปฏิบัติตามหลักการใด?

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

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

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

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

ฉันสับสนเกี่ยวกับความแตกต่างระหว่าง เพิ่มขึ้นอย่างค่อยเป็นค่อยไปและ ความเสื่อมโทรมอันสง่างาม- ฉันคิดว่ามันเป็นสิ่งเดียวกัน

คุณช่วยอธิบายให้ฉันทราบถึงความแตกต่างระหว่างทั้งสองและฉันจะใช้อันใดอันหนึ่งกับอีกอันในสถานการณ์ใด

8 คำตอบ

เกือบจะเหมือนกันแต่ต่างกันในบริบท

มีเบราว์เซอร์คลาสหนึ่งที่เรียกว่า "เบราว์เซอร์คลาส A" เหล่านี้คือสมาชิกผู้ชมทั่วไปของคุณ ซึ่ง (อาจ) ถือเป็นผู้เข้าชมส่วนใหญ่ของคุณ คุณจะเริ่มต้นด้วยระดับฐานของผู้ใช้เหล่านี้ ลองเรียกมันว่า แนวปฏิบัติที่ทันสมัยที่สุด.

ถ้าคุณต้องการ เพิ่มขึ้นประสบการณ์สำหรับผู้ที่ใช้ FF3.6 หรือ Safari 4 หรือนักพัฒนาซอฟต์แวร์รายอื่น whizbang nightly webkit คุณต้องการทำอะไรที่น่าทึ่งเช่น

• มุมโค้งมนผ่าน css
• ข้อความแรเงา (แต่โปรดพระเจ้า อย่ามากเกินไป)
• เงาตกหล่น (ดูด้านบนในวงเล็บ)

สิ่งนี้ทำให้ไซต์ของคุณดูเก๋ไก๋ แต่จะไม่พัง นี้ เพิ่มขึ้นทีละน้อย- การโอบรับอนาคตจากมุมมอง แนวทางปฏิบัติที่ดีที่สุด.

ในทางกลับกัน ไซต์ Nintendo เฉพาะของคุณดึงดูดผู้ใช้ IE5 เป็นจำนวนมาก แย่นะ แต่คุณยังต้องการให้แน่ใจว่าพวกเขากลับมาเรื่อยๆ คุณสามารถจัดเตรียมทางเลือกให้กับพฤติกรรม ajax ของคุณได้โดยการรวมสคริปต์ ajax เข้าไปด้วย ไฟล์ภายนอกและถ้าไม่รวม JS ก็เป็นไปได้ว่าลิงก์ของคุณกำลังรีเฟรชทั้งหน้า เร็วๆ นี้. จากมุมมอง แนวปฏิบัติที่ทันสมัยที่สุดคุณจะเห็นว่ามีตลาดประวัติศาสตร์บางแห่งให้บริการ รูปร่างหน้าตาของเว็บไซต์ที่ใช้งานได้จริง- นี้ การย่อยสลายอย่างสง่างาม.

โดยพื้นฐานแล้วจะเหมือนกัน แต่แตกต่างกันในแง่ของลำดับความสำคัญสำหรับทีมพัฒนาจำนวนมาก: PE ค่อนข้างดีถ้าคุณมีเวลา แต่ GD มักจะ จำเป็น

หากไซต์ของคุณดูดีพอๆ กันในทุกเบราว์เซอร์ แต่บางเบราว์เซอร์อาจใช้ Dancing ponies เพราะพวกเขาสนับสนุน Dancing ponies นั่นคือการปรับปรุงแบบก้าวหน้า มันทำงานได้กับทุกเบราว์เซอร์ แต่เบราว์เซอร์บางตัวได้รับสิ่งที่พิเศษกว่านั้น โดยทั่วไปคำนี้ใช้กับคุณลักษณะ Javascript บางอย่างที่สามารถเพิ่มความสามารถในการใช้งานนอกเหนือจาก "raw HTML"

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

ท้ายที่สุดแล้ว สิ่งเหล่านี้เป็นสิ่งเดียวกันจริงๆ เมื่อมองจากสองมุมมองที่แตกต่างกัน

ทิศทางจากสิ่งที่เลือก ฐานแนวคิดที่แตกต่างกันสำหรับทุกคน

การเสื่อมสลายอย่างสง่างามเริ่มต้นที่ระดับอุดมคติ ประสบการณ์ผู้ใช้และถูกลดขนาดลงตามความสามารถของตัวแทนผู้ใช้ให้เหลือระดับต่ำสุด โดยให้บริการตัวแทนที่ไม่สนับสนุนคุณสมบัติบางอย่างที่ใช้โดยพื้นฐาน

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

ฉันคิดว่าสามารถใช้ทั้งสองแนวคิดได้หากเวลา/งบประมาณเอื้ออำนวย ถ้าไม่เช่นนั้น ก็ควรใช้การย่อยสลายอย่างสง่างาม

ขออภัยที่ต้องฟื้นคืนชีพบางสิ่งที่มีอายุเกินหนึ่งปี แต่รู้สึกว่าฉันสามารถมีส่วนสนับสนุนความคิดเห็นของตัวเองในเรื่องนี้ได้ในทางใดทางหนึ่ง

แม้ว่าฉันจะเห็นด้วยกับ Alex Mcp และ deceze ในบางแง่ แต่คำว่า "การย่อยสลายอย่างสง่างาม" และ "การปรับปรุงแบบก้าวหน้า" มีความหมายแตกต่างไปจากที่ฉันยืนหยัดเล็กน้อย

การย่อยสลายอย่างสง่างามหลายครั้ง (ในความคิดของฉัน) ดูเหมือนว่าจะเป็นการดีกว่าที่จะเอาชนะแอปในการนำเสนอหลังจากที่สร้างมาได้ไม่ดีตั้งแต่แรกจากประสบการณ์ของฉัน เหมือนมีคนสร้างวัตถุจาวาสคริปต์ขนาดใหญ่ที่ให้ผู้ใช้ได้เล่นอะไรเจ๋งๆ จนกระทั่งผู้จัดการมาตรวจสอบสิ่งนั้น และทุกคนก็วิ่งกรีดร้อง ยกมือขึ้นเมื่อพบว่าแอปพลิเคชันของพวกเขาใช้งานไม่ได้ใน 35% ของเบราว์เซอร์ "มีคนที่ดีกว่านี้เป็นทางเลือกสำรองสำหรับเรื่องนี้"

เพิ่มขึ้นอย่างค่อยเป็นค่อยไปแม้ว่า (และนี่เป็นคำที่ดีที่จะพูดเช่นกัน) มันดูเหมือนจะเป็นเรื่องเกี่ยวกับการสร้างบางสิ่งที่ใช้งานได้จริงมากกว่า ระดับเริ่มต้นทุกที่ด้วยความช่วยเหลือขั้นพื้นฐานที่สุด วิธีการที่มีอยู่เพื่อมอบฟังก์ชันการทำงานทั้งหมดที่ผู้ใช้ต้องการ จากนั้นคุณสามารถเพิ่มสิ่งนี้ด้วยผู้ช่วยที่ไม่เป็นการรบกวนเล็กน้อย สไตล์ ฯลฯ ซึ่งช่วยปรับปรุงประสบการณ์ผู้ใช้ของแอปที่เป็นปัญหาจริง ๆ แทนที่จะทำให้แทบใช้งานได้จริง "มันดูดีเลย มันใช้งานได้กับ IE6 หรือเปล่า โอ้ ใช่ ใช้งานได้เลย"

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

ดราม่าจบแล้ว...

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

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

กล่าวอีกนัยหนึ่ง การย่อยสลายอย่างค่อยเป็นค่อยไปเริ่มต้นด้วยความซับซ้อนในสถานะที่เป็นอยู่และพยายามแก้ไขโดยอาศัยประสบการณ์น้อยลง ในขณะที่การปรับปรุงแบบก้าวหน้าเริ่มต้นด้วยตัวอย่างการทำงานขั้นพื้นฐาน และทำให้เกิดการขยายตัวอย่างต่อเนื่องสำหรับสภาพแวดล้อมในอนาคต การเสื่อมถอยอย่างงดงามหมายถึงการมองย้อนกลับไปในขณะที่การเพิ่มขึ้นอย่างต่อเนื่องหมายถึงการมองไปข้างหน้าโดยที่ยังคงยืนบนพื้นที่มั่นคง

ความเสื่อมโทรมอันสง่างาม

การย่อยสลายอย่างสง่างามความสามารถของคอมพิวเตอร์ เครื่องจักร ระบบอิเล็กทรอนิกส์ หรือเครือข่าย ในการรักษาฟังก์ชันการทำงานที่จำกัด แม้ว่าฟังก์ชันส่วนใหญ่ถูกทำลายหรือปิดใช้งานก็ตาม เป้าหมายของการย่อยสลายอย่างสง่างามคือการป้องกันความล้มเหลวจากภัยพิบัติ

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

ตัวอย่างง่ายๆ คือการใช้ PNG แบบโปร่งใสอัลฟ่า 24 บิต รูปภาพเหล่านี้สามารถแสดงในเบราว์เซอร์สมัยใหม่ได้โดยไม่มีปัญหา IE5.5 และ IE6 จะแสดงรูปภาพ แต่เอฟเฟกต์ความโปร่งใสจะไม่ทำงาน (สามารถทำงานได้หากจำเป็น) เบราว์เซอร์รุ่นเก่าที่ไม่รองรับ PNG จะแสดงข้อความแสดงแทนหรือช่องว่าง

นักพัฒนาที่ยอมรับการลดระดับอย่างค่อยเป็นค่อยไปมักจะระบุระดับการสนับสนุนเบราว์เซอร์ของตน เช่น เบราว์เซอร์ระดับ 1 (ประสบการณ์ที่ดีที่สุด) และเบราว์เซอร์ระดับ 2 (ประสบการณ์ลดลง)

เพิ่มขึ้นอย่างค่อยเป็นค่อยไป

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

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

การเพิ่มประสิทธิภาพแบบก้าวหน้าไม่จำเป็นต้องให้เราเลือกเบราว์เซอร์ที่รองรับหรือเปลี่ยนกลับเป็นเค้าโครงแบบตาราง เราเลือกระดับเทคโนโลยี เช่น เบราว์เซอร์ต้องรองรับ HTML 4.01 และคำขอ/ตอบกลับเพจมาตรฐาน

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

ลิงค์

วิกิพีเดีย: เพิ่มขึ้นอย่างค่อยเป็นค่อยไปและ

ฉันสับสนเกี่ยวกับความแตกต่างระหว่าง เพิ่มขึ้นอย่างค่อยเป็นค่อยไปและ ความเสื่อมโทรมอันสง่างาม- พวกเขาดูเหมือนเป็นหนึ่งเดียวกันสำหรับฉัน

คุณช่วยอธิบายให้ฉันฟังถึงความแตกต่างระหว่างพวกเขาและฉันจะใช้อันใดอันหนึ่งแทนอันอื่นในสถานการณ์ใด

8 คำตอบ:

เกือบจะเหมือนกันทุกประการ แต่ต่างกันในบริบท

มีเบราว์เซอร์ประเภทหนึ่งที่เรียกว่า "เบราว์เซอร์เกรด A" เหล่านี้คือสมาชิกผู้ชมทั่วไปของคุณซึ่ง (อาจ) ถือเป็นผู้เยี่ยมชมส่วนใหญ่ของคุณ คุณจะเริ่มต้นด้วยระดับฐานของผู้ใช้เหล่านี้ ลองเรียกมันว่า แนวปฏิบัติที่ทันสมัยที่สุด.

ถ้าคุณต้องการ เพิ่มขึ้นประสบการณ์สำหรับผู้ที่ใช้ FF3 โดยไม่ตั้งใจ 6 หรือ Safari 4 หรือนักพัฒนาซอฟต์แวร์รายอื่น ๆ ที่หวือหวา webkit ทุกคืน คุณต้องการทำอะไรที่น่าทึ่งเช่น

• มุมโค้งมนผ่าน css
• ข้อความแรเงา (แต่โปรดพระเจ้า อย่ามากเกินไป)
• เงาทอด (ดูด้านบนในวงเล็บ)

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

ในทางกลับกัน ไซต์ Nintendo เฉพาะของคุณดึงดูดผู้ใช้ IE5 เป็นจำนวนมาก แย่นะ แต่คุณยังต้องการให้แน่ใจว่าพวกเขากลับมาเรื่อยๆ คุณสามารถจัดเตรียมทางเลือกอื่นให้กับพฤติกรรม ajax ของคุณได้โดยการรวมสคริปต์ ajax ไว้ในไฟล์ภายนอก และหากไม่ได้รวม JS ไว้ด้วย ก็เป็นไปได้ที่ลิงก์ของคุณจะรีเฟรชทั้งหน้า เร็วๆ นี้. จากมุมมอง แนวปฏิบัติที่ทันสมัยที่สุดคุณจะเห็นว่ามีตลาดประวัติศาสตร์บางแห่งให้บริการ รูปร่างหน้าตาของเว็บไซต์ที่ใช้งานได้จริง- นี้ การย่อยสลายอย่างสง่างาม.

โดยพื้นฐานแล้วจะเหมือนกัน แต่แตกต่างกันในแง่ของลำดับความสำคัญสำหรับทีมพัฒนาจำนวนมาก: PE ค่อนข้างดีถ้าคุณมีเวลา แต่ GD มักจะ จำเป็น

หากไซต์ของคุณดูดีพอๆ กันในทุกเบราว์เซอร์ แต่บางเบราว์เซอร์อาจใช้ Dancing ponies เพราะพวกเขาสนับสนุน Dancing ponies นั่นคือการปรับปรุงแบบก้าวหน้า มันทำงานได้กับทุกเบราว์เซอร์ แต่เบราว์เซอร์บางตัวได้รับสิ่งที่พิเศษกว่านั้น โดยทั่วไปคำนี้ใช้กับคุณลักษณะ Javascript บางอย่างที่สามารถเพิ่มความสามารถในการใช้งานนอกเหนือจาก "raw HTML"

หากเว็บไซต์ของคุณมีลักษณะเหมือนที่คุณใช้บนเบราว์เซอร์ที่สนับสนุนอย่างเต็มที่ เช่น CSS3 และ IE8 - หน้าเดียวกันนี้จะแสดงโดยไม่มีมุมโค้งมน นั่นถือเป็นความเสื่อมโทรมลงอย่างมาก ไซต์นี้ได้รับการออกแบบมาโดยเฉพาะสำหรับเบราว์เซอร์รุ่นใหม่ แต่ยังคงใช้งานได้บนเบราว์เซอร์รุ่นเก่า แม้จะไม่ได้ดูหรูหราเท่าไหร่

ท้ายที่สุดแล้ว มันเป็นสิ่งเดียวกันจริงๆ เมื่อมองจากสองมุมมองที่แตกต่างกัน

ทิศทางจากสิ่งที่เลือก ฐานแนวคิดที่แตกต่างกันสำหรับทุกคน

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

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

ฉันคิดว่าสามารถใช้ทั้งสองแนวคิดได้หากเวลา/งบประมาณเอื้ออำนวย ถ้าไม่เช่นนั้น ก็ควรเสื่อมสลายอย่างสง่างามจะดีกว่า

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

แม้ว่าฉันจะเห็นด้วยกับ Alex Mcp และ deceze ในบางแง่ แต่คำว่า "การย่อยสลายอย่างสง่างาม" และ "การเพิ่มประสิทธิภาพแบบก้าวหน้า" มีความหมายแตกต่างจากที่ฉันยืนหยัดเล็กน้อย

การย่อยสลายอย่างสง่างามหลายครั้ง (ในความคิดของฉัน) ดูเหมือนว่าจะง่ายกว่าที่จะเอาชนะแอปพลิเคชันให้ส่งหลังจากที่มันถูกสร้างขึ้นมาอย่างไม่ดีตั้งแต่แรกจากประสบการณ์ของฉัน เช่นเดียวกับใครบางคนสร้างวัตถุจาวาสคริปต์ขนาดใหญ่ที่ให้ผู้ใช้มีสิ่งที่น่าสนใจในการเล่นด้วย จนกระทั่งผู้จัดการปรากฏตัวขึ้น ตรวจสอบสิ่งนั้น และทุกคนต่างกรีดร้อง ยกมือขึ้นเมื่อมาถึงความสนใจว่าแอปพลิเคชันของพวกเขาทำ ไม่ทำงานในเบราว์เซอร์ 35% มีคนเสนอทางเลือกที่ดีกว่าสำหรับเรื่องนี้”

เพิ่มขึ้นอย่างค่อยเป็นค่อยไปแม้ว่า (และเป็นคำที่ดีที่จะพูดเช่นกัน) ดูเหมือนว่าจะเป็นการสร้างบางสิ่งที่ใช้งานได้จริง ในระดับพื้นฐาน ทุกที่ โดยใช้เทคนิคพื้นฐานที่สุดที่มีอยู่ เพื่อมอบฟังก์ชันการทำงานทั้งหมดที่ผู้ใช้ต้องการ จากนั้นคุณสามารถเพิ่มสิ่งนี้ด้วยผู้ช่วยที่ไม่เป็นการรบกวนเล็กน้อย สไตล์ ฯลฯ ซึ่งช่วยปรับปรุงประสบการณ์ผู้ใช้ของแอปที่เป็นปัญหาจริง ๆ แทนที่จะทำให้แทบใช้งานได้จริง "ซึ่งก็ดูเท่ดีนะ มันใช้งานได้กับ IE6 หรือเปล่า อ๋อ ทำได้จริงๆ"

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

โวยวายต่อ...

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

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

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

ความเสื่อมโทรมอันสง่างาม

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

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

ตัวอย่างง่ายๆ คือการใช้ PNG แบบโปร่งใสอัลฟ่า 24 บิต ภาพเหล่านี้สามารถแสดงบนเบราว์เซอร์สมัยใหม่ได้โดยไม่มีปัญหา IE5. 5 และ IE6 จะแสดงภาพ แต่เอฟเฟกต์ความโปร่งใสจะล้มเหลว (ซึ่งสามารถใช้งานได้หากจำเป็น) เบราว์เซอร์รุ่นเก่าที่ไม่รองรับ PNG จะแสดงข้อความแสดงแทนหรือช่องว่าง

นักพัฒนาที่ยอมรับการลดระดับอย่างค่อยเป็นค่อยไปมักจะระบุระดับการสนับสนุนเบราว์เซอร์ของตน เช่น เบราว์เซอร์ระดับ 1 (ประสบการณ์ที่ดีกว่า) และเบราว์เซอร์ระดับ 2 (ประสบการณ์ลดลง)

เพิ่มขึ้นอย่างค่อยเป็นค่อยไป

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

เพิ่มขึ้นเรื่อยๆ เช่น แผนผังเสื่อมโทรมลงอย่างสง่างามแต่กลับตรงกันข้าม เว็บไซต์หรือแอปพลิเคชันจะสร้างประสบการณ์ผู้ใช้พื้นฐานสำหรับเบราว์เซอร์ส่วนใหญ่ คุณสมบัติขั้นสูงเพิ่มเติมจะถูกเพิ่มเมื่อเบราว์เซอร์รองรับ

การเพิ่มประสิทธิภาพแบบก้าวหน้าไม่จำเป็นต้องให้เราเลือกเบราว์เซอร์ที่รองรับหรือเปลี่ยนกลับเป็นเค้าโครงแบบตาราง เราเลือกระดับเทคโนโลยี เช่น เบราว์เซอร์ต้องรองรับ HTML 4.01 และคำขอ/ตอบกลับหน้ามาตรฐาน

เพื่อให้ง่ายขึ้น เพียงตั้งแถบไว้ที่ด้านบน จากนั้นคุณก็สามารถเพิกเฉยต่อการปรับปรุงแบบก้าวหน้าได้ เมื่อไร คุณลักษณะใหม่ออกมาเพื่อยกระดับบาร์ ;)

หรือตั้งแถบของคุณไปที่ระดับต่ำสุด (อาจเป็นวิ่งเหยาะๆ?) และใช้การเพิ่มขึ้นแบบก้าวหน้า

แน่นอน, อินเทอร์เน็ตเอ็กซ์พลอเรอร์ประกอบด้วย จำนวนมากข้อผิดพลาดใน รุ่นที่แตกต่างกันแต่ด้วยความช่วยเหลือของความคิดเห็นที่มีเงื่อนไขคุณสามารถต่อสู้กับพวกเขาและกำจัดพวกเขาได้ แต่สิ่งที่แก้ไขไม่ได้ก็คือ IE ล้าสมัยอย่างสิ้นหวัง ในขณะที่เบราว์เซอร์อื่นๆ รวมทุกอย่างไว้ด้วยกัน คุณสมบัติเพิ่มเติม CSS3 รองรับเทคโนโลยีใหม่ๆ มากมาย IE กำลังทำเครื่องหมายเวลา การเปิดตัว IE9 จะไม่สามารถแก้ปัญหาได้ รุ่นก่อนหน้าสิ่งนี้จะไม่ระเหยข้ามคืน ในสถานการณ์เช่นนี้ ทางออกที่ดีที่สุดจะมีการเสื่อมสภาพอย่างงดงาม - หลักการรักษาประสิทธิภาพเมื่อฟังก์ชันการทำงานบางอย่างหายไป

ลองดูเทคนิคนี้ด้วยตัวอย่างเล็กๆ น้อยๆ ซึ่งมีข้อความแสดงในบล็อกและปุ่ม บล็อกและปุ่มมีมุมโค้งมน และมีการเพิ่มเงาเล็กๆ ให้กับบล็อกด้วย จนถึงตอนนี้ เบราว์เซอร์สำหรับ CSS3 ส่วนใหญ่ใช้คุณสมบัติเฉพาะพร้อมคำนำหน้าของตัวเอง:

• Firefox - คุณสมบัติที่ขึ้นต้นด้วย -moz-;
• Safari และ Chrome - คุณสมบัติที่ขึ้นต้นด้วย -webkit-;
• Opera - คุณสมบัติที่ขึ้นต้นด้วย -o-

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

Moz-เส้นขอบรัศมี: 10px; /* สำหรับ Firefox */ -webkit-border-radius: 10px; /* สำหรับ Safari และ Chrome */ border-radius: 10px; /* สำหรับ Opera และ IE9 */

แม้ว่าการใช้คุณสมบัติเหล่านี้จะส่งผลให้โค้ด CSS ไม่ถูกต้องในกรณีนี้ งานมีความสำคัญมากขึ้นวี เบราว์เซอร์ไฟร์ฟอกซ์ 1.0, Safari 3.1, Chrome 2.0, Opera 10.50, IE9 รวมถึงเวอร์ชันเก่า ตัวอย่างที่ 1 แสดงวิธีการใช้คุณสมบัติ CSS3 เพื่อสร้างเงาและมุมโค้งมน

ตัวอย่างที่ 1 บล็อกด้วยเงา

XHTML 1.0 CSS 2.1 CSS3 IE 8 IE 9+ Cr สำหรับ Fx

ผลลัพธ์ของตัวอย่างจะแสดงในรูป 1.

ข้าว. 1. บล็อกมุมมองใน Safari

ตัวอย่างเดียวกันในเบราว์เซอร์ IE8 และด้านล่างจะแสดงในรูป 2.

ข้าว. 2. บล็อกมุมมองใน IE8

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

แนวทางนี้ให้อะไรในทางปฏิบัติ?

• ช่วยให้คุณใช้คุณสมบัติการตกแต่งของ CSS3 ได้โดยไม่ต้องคำนึงถึงเบราว์เซอร์
• กระตุ้นให้ใช้เอฟเฟกต์ CSS3 ต่างๆ
• มันทำให้ชีวิตของนักพัฒนาง่ายขึ้นอย่างมาก เนื่องจากเขาไม่ต้องมองหาวิธีแก้ปัญหาสำหรับเบราว์เซอร์ที่ล้าสมัยอีกต่อไป
• เร่งประสิทธิภาพการทำงาน

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

คำนำหน้า -webkit- มีความโดดเด่นมากใน CSS ซึ่งบางไซต์อาจทำงานไม่ถูกต้องหากไม่มี สิ่งนี้บ่งชี้ว่านักพัฒนาไม่ได้ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดในช่วงไม่กี่ปีที่ผ่านมา และสิ่งนี้นำไปสู่การตัดสินใจที่โชคร้าย แต่เกือบจะถูกบังคับในส่วนของ Mozilla ใน Firefox เวอร์ชัน 46 หรือ 47 (นี่คือเดือนเมษายนหรือพฤษภาคม 2559) Mozilla วางแผนที่จะใช้การรองรับคำนำหน้า -webkit- ที่ไม่เป็นไปตามมาตรฐาน เพื่อปรับปรุงความเข้ากันได้ของ Firefox กับไซต์ที่ใช้งาน -webkit (โดยปกติจะเป็นไซต์ที่เน้นอุปกรณ์เคลื่อนที่เป็นอันดับแรก)

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

แนวทางของ Mozilla และ Microsoft นั้นปลอดภัยสำหรับไซต์ส่วนใหญ่ ไซต์จำนวนมากจะใช้คำนำหน้า -moz- หรือไม่จำเป็นต้องดำเนินการใดๆ เพื่อให้เข้ากันได้ในอนาคต อัพเดตไฟร์ฟอกซ์- แต่ในฐานะนักพัฒนาเว็บมืออาชีพ เราต้องพิจารณาอย่างรอบคอบและเข้าใจว่าสิ่งนี้จะส่งผลตามมาอย่างไร คุณคงทราบแล้วว่าไซต์ใดของคุณที่อาจได้รับผลกระทบจากการอัปเดตนี้

ถึงเวลาที่จะต้องคิดใหม่เกี่ยวกับแนวทางการใช้คำนำหน้าและทดสอบไซต์ด้วย

คำนำหน้าที่รองรับ

มีคำนำหน้า -webkit- หลายคำที่ Mozilla สามารถใช้ได้ จากสิ่งที่ฉันรวบรวม Mozilla มีแนวโน้มที่จะไม่จับคู่รายการคุณสมบัติคำนำหน้าที่รองรับกับ Edge's เนื่องจากไม่จำเป็นทั้งหมดสำหรับความเข้ากันได้ของกลไกโครงร่าง

นักพัฒนา Firefox ก็ใกล้เคียงกับแนวทางที่คล้ายกัน:

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

Microsoft Edge กำลังจะละทิ้งคำนำหน้าผู้ขายด้วย:

“Microsoft กำลังจะกำจัดคำนำหน้าผู้ขายใน Edge เช่นกัน ซึ่งหมายความว่านักพัฒนาที่ต้องการใช้คุณสมบัติเฉพาะของ HTML และ CSS จะไม่ใช้คำนำหน้าเฉพาะของ Edge แต่พวกเขาจะเขียนโค้ดตามมาตรฐานแทน” - Mashable

จะไม่มีการย่อยสลายแบบค่อยเป็นค่อยไปอีกต่อไปตามคำนำหน้า

การย้ายออกจากคำนำหน้าผู้ขายหมายถึงสิ่งหนึ่ง - การลดลงอย่างค่อยเป็นค่อยไปโดยใช้คำนำหน้าผู้ขายไม่มีโอกาส

การใช้คำนำหน้าผู้ขายเพื่อใช้สไตล์สำหรับเบราว์เซอร์เฉพาะ (เช่น Chrome เท่านั้น) ไม่ใช่จุดประสงค์ในการแนะนำสไตล์เหล่านี้ คำแนะนำสำหรับนักพัฒนาคือการใช้คำนำหน้าทั้งหมดเสมอ (ตั้งแต่ -webkit- ถึง -o-) หากคุณกำลังใช้คุณสมบัติที่ขึ้นอยู่กับคุณสมบัติของคำนำหน้าและใช้คำนำหน้าเพื่อค่อยๆ ลดระดับการออกแบบของคุณในเบราว์เซอร์อื่น สิ่งนี้จะไม่ทำงานอีกต่อไป

บทสรุป

เวลากำลังเปลี่ยนแปลง การครอบงำของ WebKit ได้นำไปสู่ปัญหาความไม่เข้ากันโดยไม่ได้ตั้งใจ ทำให้ผู้จำหน่ายเบราว์เซอร์รายอื่นต้องใช้คำนำหน้า -webkit- ปัญหานี้จะสิ้นสุดเมื่อผู้จำหน่ายเบราว์เซอร์ยุติการใช้คำนำหน้าผู้ขาย แต่ในระหว่างนี้ นักพัฒนาควรตรวจสอบให้แน่ใจว่าคำนำหน้าไม่ทำให้เกิดผลลัพธ์ที่ไม่คาดคิดในเบราว์เซอร์ที่ไม่ใช่ WebKit