5 ข้อผิดพลาดที่พบบ่อยที่สุดที่นักพัฒนา HTML5 ทำ: คู่มือสำหรับผู้เริ่มต้น

เป็นเวลากว่า 20 ปีแล้วที่ Tim Berners-Lee และ Robert Cailliau ระบุ HTML ซึ่งกลายเป็นภาษามาร์กอัปมาตรฐานที่ใช้สร้างอินเทอร์เน็ต ตั้งแต่นั้นมา ชุมชนการพัฒนา HTML ได้ร้องขอให้มีการปรับปรุงภาษานี้ แต่เสียงร้องนี้ส่วนใหญ่ได้ยินโดยนักพัฒนาเว็บเบราว์เซอร์ที่พยายามทำให้ปัญหา HTML ของเพื่อนร่วมงานง่ายขึ้น น่าเสียดายที่สิ่งนี้นำไปสู่ปัญหามากขึ้นซึ่งทำให้เกิดปัญหาความเข้ากันได้ของเบราว์เซอร์หลายตัวและความซ้ำซ้อนของงานพัฒนา ตลอด 20 ปีที่ผ่านมา HTML ได้รับการอัปเกรด 4 ครั้ง ในขณะที่เบราว์เซอร์ส่วนใหญ่ได้รับการอัปเดตหลักตัวเลขสองหลักพร้อมแพตช์ขนาดเล็กจำนวนมาก

ในที่สุด HTML5 ก็ควรจะแก้ปัญหาของเราและกลายเป็น มาตรฐานเดียวที่จะควบคุมพวกเขาทั้งหมด (เบราว์เซอร์) นี่อาจเป็นหนึ่งในเทคโนโลยีที่คาดว่าจะเกิดขึ้นมากที่สุดนับตั้งแต่การสร้างเวิลด์ไวด์เว็บ มันเกิดขึ้น? ในที่สุด เราก็ได้ภาษามาร์กอัปหนึ่งภาษาที่จะใช้งานร่วมกันได้กับเบราว์เซอร์ต่างๆ และทำงานบนแพลตฟอร์มเดสก์ท็อปและมือถือทั้งหมดที่มีคุณลักษณะทั้งหมดที่เราขอหรือไม่ ฉันไม่รู้! เมื่อไม่กี่วันก่อน (16 ก.ย. 2014) เราได้รับคำขอให้ตรวจสอบโดย W3C อีกครั้งเพื่อให้ข้อกำหนด HTML5 ยังไม่สมบูรณ์

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

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

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

ข้อผิดพลาดทั่วไป #1: เชื่อถือที่เก็บข้อมูลในเครื่อง

ปล่อยให้พวกเขากินเค้ก! แนวทางนี้เป็นภาระสำหรับนักพัฒนาซอฟต์แวร์มานานแล้ว เนื่องจากความกลัวที่สมเหตุสมผลที่สมเหตุสมผลต่อการละเมิดความปลอดภัยและการป้องกันคอมพิวเตอร์ ใน "ยุคมืด" เมื่ออินเทอร์เน็ตเป็นที่กลัวของหลาย ๆ คน เว็บแอปพลิเคชันจึงได้รับอนุญาตให้ทิ้งข้อมูลจำนวนเล็กน้อยไว้บนคอมพิวเตอร์อย่างไม่สมเหตุสมผล จริงอยู่ มีบางอย่างเช่นข้อมูลผู้ใช้ที่ "ผู้เชี่ยวชาญเบราว์เซอร์ที่ยอดเยี่ยมจาก Microsoft(r)" มอบให้เรา หรือสิ่งต่างๆ เช่น Local Shared Objects ใน Flash แต่สิ่งนี้ยังห่างไกลจากความสมบูรณ์แบบ

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

หากต้องการทราบข้อมูลเชิงลึกเพิ่มเติมเกี่ยวกับ Web Storage และวิธีใช้งาน ขอแนะนำให้อ่านโพสต์นี้

ข้อผิดพลาดทั่วไป #2: คาดหวังความเข้ากันได้ระหว่างเบราว์เซอร์

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

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

ตัวอย่างเช่น Web Animations เป็นคุณลักษณะที่ยอดเยี่ยมที่ได้รับการสนับสนุนโดย Chrome และ Opera เท่านั้น ในขณะที่คุณลักษณะ Web Notification ที่อนุญาตให้แจ้งเตือนผู้ใช้นอกบริบทของหน้าเว็บที่เกิดเหตุการณ์ เช่น การส่งอีเมล จะถูกละเว้นโดย Internet Explorer

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับคุณลักษณะ HTML5 และการสนับสนุนโดยเบราว์เซอร์ต่างๆ โปรดดูคู่มือ HTML5 ที่ www.caniuse.com

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

ข้อผิดพลาดทั่วไป #3: สมมติว่ามีประสิทธิภาพสูง

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

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

ข้อผิดพลาดทั่วไป #4: การเข้าถึงที่จำกัด

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

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

ข้อผิดพลาดทั่วไป #5: ไม่ใช้การเพิ่มประสิทธิภาพ HTML5

HTML5 ได้ขยายชุดแท็ก HTML/XHTML มาตรฐานอย่างมาก นอกจากแท็กใหม่แล้ว เรายังมีกฎและพฤติกรรมใหม่อีกสองสามข้อ นักพัฒนาจำนวนมากเกินไปเลือกการปรับปรุงเพียงเล็กน้อยและข้ามคุณลักษณะใหม่ที่ยอดเยี่ยมของ HTML5 ไปบางส่วน

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

คุณลักษณะที่ยอดเยี่ยมอีกประการหนึ่งเกี่ยวข้องกับวิธีจัดการการป้อนข้อมูลของผู้ใช้ใน HTML5 ก่อน HTML5 จะมาถึง เราต้องเก็บช่องแบบฟอร์มทั้งหมดไว้ในแท็ก <form></form> แอตทริบิวต์ของแบบฟอร์มใหม่ทำให้ถูกต้องสมบูรณ์ที่จะทำสิ่งนี้:

 <form action="demo_form.asp"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form> Last name: <input type="text" name="lname" form="form1">

แม้ว่า lname จะไม่ได้อยู่ในแบบฟอร์ม แต่จะถูกโพสต์พร้อมกับ fname

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับแอตทริบิวต์และการปรับปรุงรูปแบบใหม่ คุณสามารถตรวจสอบ Mozilla Developer Network

สรุป

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