มีบทความมากมายที่เขียนเกี่ยวกับ HTML5 เช่น "สิ่งที่คาดหวังจาก HTML5" และ "HTML5 จะเปลี่ยนเว็บอย่างไร" แต่สิ่งสำคัญที่นักพัฒนาเว็บควรรู้คือ ตอนนี้ฉันสามารถใช้อะไรได้บ้าง และฉันจะเริ่มใช้งานมันได้อย่างไร? ข่าวดีก็คือว่ามีหลายสิ่งหลายอย่างใน HTML5 ที่พร้อมใช้งานอยู่แล้ว
อย่างไรก็ตาม คุณต้องเข้าใจสิ่งหนึ่งตั้งแต่เริ่มต้น คุณจำเป็นต้องรู้จักผู้ชมของคุณ ไม่เช่นนั้น คุณไม่ควรใช้ HTML5 หากคนส่วนใหญ่ที่เข้าชมไซต์ของคุณใช้ IE6 ก็ไม่มีเหตุผลใดที่คุณจะใช้ HTML5 ในทางกลับกัน หากผู้เยี่ยมชมไซต์ของคุณใช้เบราว์เซอร์บนมือถือ เช่น iPhone และ iPad คุณจะรออะไรอีก คุณสามารถเริ่มต้นได้เลย! เดี๋ยวก่อน ต่อไปนี้เป็นแนวทางบางส่วน ยังไม่สายเกินไปที่จะเริ่มหลังจากอ่านแล้ว
คุณสามารถใช้ฟีเจอร์ HTML5 ใดได้บ้างในตอนนี้
แม้ว่ามาตรฐาน HTML5 จะยังคงเป็นฉบับร่างและยังคงถูกหารือโดยองค์กรมาตรฐาน แต่เบราว์เซอร์สมัยใหม่จำนวนมากได้นำส่วนสำคัญต่างๆ มาใช้ Apple Safari, Google Chrome, Mozilla Firefox, Opera และ Microsoft IE9 ล้วนรองรับคุณสมบัติบางอย่างของ HTML5 แล้ว
ก่อนอื่นเรามาดูกันว่าแต่ละเบราว์เซอร์ให้คะแนนบนเว็บไซต์ HTML5 TEST กันก่อน:
*แอปเปิลซาฟารี 5.0:208
* กูเกิลโครม 5.03:197
*ไมโครซอฟต์ IE7: 12
*ไมโครซอฟต์ IE8: 27
*มอซิลลา ไฟร์ฟอกซ์ 3.66: 139
* โอเปร่า 10.6: 159
ดูเหมือนว่าเบราว์เซอร์กระแสหลักส่วนใหญ่ที่ไม่ใช่ IE core จะรองรับ HTML5 ได้ดี และสามารถทำให้ "เว็บไซต์ที่ใช้ HTML5 แบบร่าง" ทำงานได้ดีมาก
ย้อนกลับไปที่จุดเริ่มต้น ตอนนี้คุณสามารถใช้ประเภทเอกสาร HTML5 ได้แล้ว ไม่มีเหตุผลที่จะไม่ใช้มัน คุณยังสามารถค้นหาและแทนที่ทั่วทั้งเว็บไซต์ได้:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
กลายเป็น:
|
โค้ดต่อไปนี้ดูสะอาดตาและตรงไปตรงมามากขึ้นใช่ไหม หากเบราว์เซอร์แสดงผลหน้าเว็บของคุณในลักษณะที่เป็นไปตามมาตรฐาน เบราว์เซอร์เหล่านั้นก็จะยังทำเช่นนั้น
มาพูดถึงวิดีโอกันดีกว่า สิ่งพิมพ์จำนวนมากเกี่ยวกับ HTML5 จะกล่าวถึงคู่แข่งในปัจจุบัน รวมทั้งหมดสี่รายการ: Flash, H.264, OGG และ WebM สิ่งเหล่านี้ทั้งหมดอาจกลายเป็นรูปแบบมาตรฐานในอนาคต และจะไม่มีสิ่งใดที่จะเล่นได้อย่างถูกต้องในทุกเบราว์เซอร์บนทุกแพลตฟอร์ม น่าเศร้าที่ดูเหมือนว่าผู้สนับสนุนเบราว์เซอร์ยังไม่ได้เตรียมรูปแบบหนึ่งสำหรับฟีเจอร์นี้ในเร็วๆ นี้
เห็นได้ชัดว่าแท็กวิดีโอยังไม่ถึงขั้นที่สามารถนำมาใช้ได้ แต่เดี๋ยวก่อน เราควรจะคาดหวังว่าแท็กวิดีโอ HTML5 จะไม่ขึ้นกับรูปแบบ อันที่จริง เนื่องจากวิดีโอสามารถมีแท็กแหล่งที่มาได้หลายแท็ก วิดีโอจึงต้องทำงานในลักษณะนี้ หากเบราว์เซอร์ของคุณไม่รองรับตัวเลือกแรก คุณจะต้องลองตัวเลือกที่สอง จากนั้นที่สาม ที่สี่ ที่ห้า...
HTML เพื่อจัดการกับสถานการณ์เช่นนี้เป็นโครงการโอเพ่นซอร์สที่รองรับวิดีโอบนเว็บโดยไม่ต้องใช้สคริปต์และการดมกลิ่นเบราว์เซอร์ใด ๆ และสามารถ พบได้ที่นี่
ในทางความหมาย การเปลี่ยนแปลงครั้งใหญ่ใน HTML5 คือแท็กที่มีความหมายที่ชัดเจน การเปลี่ยนแปลงที่คุณเห็นคือตอนนี้ไซต์ของคุณเต็มไปด้วยโค้ดที่คล้ายกับสิ่งนี้:
|
ใน HTML5 คุณสามารถแสดงได้ดังนี้:
<ส่วนหัว> <นำทาง> |
ความหมายชัดเจนขึ้นหรือไม่? แน่นอนว่าเรายังต้องใช้ CSS [Cascading Style Sheets] เพื่อจัดรูปแบบองค์ประกอบเหล่านี้ แต่เดี๋ยวก่อน ไม่มีเวอร์ชันใดของ IE ที่รองรับแท็กเหล่านี้! นี่เป็นปัญหาใหญ่สำหรับผู้คน! เราโชคร้ายจริงๆเหรอ? โชคดีที่เรามีวิธีแก้ปัญหา สิ่งที่คุณต้องทำคือวางโค้ดต่อไปนี้ลงในแท็ก HEAD ของหน้าเว็บของคุณ:
|
HTML5 Shiv เป็นโปรเจ็กต์โอเพ่นซอร์สที่มีพื้นฐานมาจากการค้นพบง่ายๆ หากคุณสร้างองค์ประกอบ DOM ใน IE คุณสามารถใช้ชื่อนั้นในรูปแบบได้ เช่น ถ้าคุณใช้
document.createElement("foo") |
สร้างองค์ประกอบ DOM จากนั้นคุณสามารถเพิ่มแท็ก foo จำนวนเท่าใดก็ได้ลงในหน้าปัจจุบัน จากนั้น IE จะจัดรูปแบบแท็กเหล่านั้น HTML5 Shiv มีองค์ประกอบ HTML5 บางอย่างที่ IE ไม่รู้จัก จากนั้นจึงสร้างขึ้นทีละองค์ประกอบ วิธีนี้ทำให้คุณสามารถใช้แท็ก HTML5 เหล่านี้ได้ เช่น
| บทความ, ส่วน, ส่วนหัว, ส่วนท้าย, การนำทาง |
Smart Forms อีกหนึ่งฟีเจอร์ที่ทำให้ HTML5 ฉลาดขึ้น หากคุณเบื่อกับการเขียนสคริปต์เดิมทุกครั้งเพื่อตรวจสอบความถูกต้องของที่อยู่อีเมลหรือบางอย่าง เช่น หมายเลขโทรศัพท์ ที่อยู่อินเทอร์เน็ต ฯลฯ คุณไม่ได้อยู่คนเดียว! มีเหตุผลในการปล่อยให้เบราว์เซอร์ทำงานที่น่ารำคาญทั้งหมดนี้ใช่ไหม ค่อนข้างจริง
นี่คือไวยากรณ์:
| <ประเภทอินพุต = "อีเมล"> <ประเภทอินพุต = "url"> <ประเภทอินพุต = "หมายเลข"> <ประเภทอินพุต = "เทล"> |
จะเกิดอะไรขึ้นกับเบราว์เซอร์รุ่นเก่าเหล่านั้น? ส่วนที่ชาญฉลาดกว่า: หากพวกเขาเห็นแอตทริบิวต์ TYPE ที่มีค่าที่พวกเขาไม่รู้จัก พวกเขาจะเรนเดอร์องค์ประกอบด้วยค่าเริ่มต้นของ Text ซึ่งเป็นผลลัพธ์ของความเข้ากันได้แบบย้อนหลังที่เราคาดหวังทุกประการ เบราว์เซอร์ที่รองรับ HTML5 จะตรวจสอบประเภทฟิลด์นี้โดยอัตโนมัติ แต่คุณไม่ควรทิ้งสคริปต์ก่อนหน้าของคุณ อย่างน้อยก็อย่าจนกว่า IE9 จะได้รับความนิยม
หากคุณสงสัยว่าเบราว์เซอร์ใดบ้างที่รองรับการทำงานประเภทนี้ นอกเหนือจากการตรวจสอบ คุณสามารถลองใช้แบบฟอร์มเหล่านี้บน iPhone ของคุณ คุณจะสังเกตเห็นว่าประเภทแป้นพิมพ์ที่เกี่ยวข้องกับแบบฟอร์มเปลี่ยนแปลงไป บางครั้งก็เป็นตัวเลข บางครั้งเป็นตัวอักษรและตัวเลขโดยมีสัญลักษณ์ @ ต่อท้าย และบางส่วนก็มี key.com โดยตรง นั่นคือสิ่งที่เป็นองค์ประกอบเหล่านี้ สิ่งที่คุณต้องทำคือเปลี่ยนค่าของแอตทริบิวต์ type
นอกจากนี้ยังอาจฉลาดขึ้นอีกเล็กน้อย นี่คือคุณลักษณะใหม่:
ตัวยึดตำแหน่ง |
ค่านี้สามารถระบุส่วนของข้อความได้ ซึ่งเป็นเอฟเฟกต์ที่คุณมักจะเห็นบนอินเทอร์เน็ต เมื่อก่อนเคยใช้ Javascript มาประมวลผล แต่ตอนนี้เบราว์เซอร์จะทำสิ่งนี้ให้คุณ
|
คุณสามารถใช้ฟีเจอร์ HTML5 ใดได้ทันที
องค์ประกอบ HTML5 ยังไม่พร้อมใช้งานด้วยเหตุผลหลายประการ (ไม่มีตัวย่อโดย IE) การสนับสนุนเบราว์เซอร์จะมาในเร็วๆ นี้ และในอนาคตอันใกล้นี้ คุณจะมีสององค์ประกอบทันทีที่พร้อมใช้งาน
Magic Fonts นักออกแบบทุกคนมีความฝัน หวังว่าผู้เยี่ยมชมเว็บไซต์จะติดตั้งแบบอักษรที่พวกเขาต้องการเมื่อออกแบบ เพื่อที่จะทำสิ่งนี้ เคยมีวิธีการที่หลากหลาย รวมถึงรูปภาพ Flash ฯลฯ แต่ตอนนี้ พวกเขา มีสิทธิ์นี้ และคุณสามารถบังคับให้ผู้เยี่ยมชมติดตั้งแบบอักษรที่คุณระบุได้ นี่คือสิ่งที่ CSS3 รองรับ: แอตทริบิวต์ @font-face Firefox เวอร์ชันก่อน 3.5 และ Safari เวอร์ชันมือถือ (ก่อน iOS 4) ไม่รองรับแอตทริบิวต์นี้ หากไซต์ของคุณมีการเข้าชมที่คล้ายกันจำนวนมาก คุณอาจต้องรอ
อย่างไรก็ตาม ไม่มีเหตุผลที่แท้จริงที่เบราว์เซอร์ทั้งหมดจะใช้แบบอักษรเดียวกัน หากคุณต้องการจัดเตรียมแบบอักษรที่กำหนดเองให้กับเบราว์เซอร์ที่รองรับแอตทริบิวต์นี้ แล้วจัดเตรียมแบบอักษรสำรองให้กับเบราว์เซอร์ที่ไม่รองรับแอตทริบิวต์นี้ ก็ถือเป็นวิธีแก้ปัญหาที่ดีเช่นกัน ในขณะนี้ http://www.fontsquirrel fontface/generator เป็นสถานที่ที่ดีที่จะไป
เงาและมุมโค้งมนเป็นสิ่งที่ทำให้นักออกแบบหลายคนพอใจ เงาของข้อความ เงาของบล็อก บล็อกมุมโค้งมน ฯลฯ ได้รับการสนับสนุนโดย CSS3 แล้ว ขอย้ำอีกครั้ง หากคุณไม่ต้องการวัดการแสดงผลในเบราว์เซอร์ต่างๆ โดยอิงตามความสมบูรณ์แบบของพิกเซล คุณสามารถเริ่มใช้คุณลักษณะเหล่านี้ได้ทันที ตัวสร้าง CSS3 จะช่วยคุณทำสิ่งนี้
มุมโค้งมน (Firefox 3+, Safari 3.1+, Opera 10.5+, Chrome 4+, IE 9+) |
-webkit-ขอบรัศมี: 10px; |
เงาข้อความ (Firefox 3.5+, Safari 1.1+, Opera 9.6+, Chrome 4+) |
ข้อความเงา: 5px 5px 3px #CCC; |
บล็อกเงา (Firefox 3.5+, Safari 3+, Opera 10.5+, Chrome 4+): |
-webkit-box-shadow: 10px 10px 5px #666; |
สักวันหนึ่งคุณอาจใช้คุณลักษณะใด
แค็ตตาล็อกนี้ประกอบด้วยฟีเจอร์ที่นักพัฒนาและนักออกแบบคิดมานานหลายปี น่าเสียดายที่อาจต้องใช้เวลาหลายปีกว่าจะสามารถนำมาใช้ในโลกแห่งความเป็นจริงได้
มีการกล่าวถึงแบบฟอร์มอัจฉริยะมาก่อนแล้ว แต่จริงๆ แล้วยังมีองค์ประกอบที่มีประโยชน์อีกมากมายที่ไม่ได้กล่าวถึง แต่ก่อนที่จะได้รับการสนับสนุนในวงกว้าง ไม่มีทางที่จะใช้องค์ประกอบเหล่านั้นได้
ตัวเลือกการเลื่อน:
|
ตัวเลือกสี:
| <ประเภทอินพุต = "สี"> |
ตัวเลือกวันที่:
| <ประเภทอินพุต = "วันที่"> |
กล่องป้อนข้อมูลที่มีการตรวจสอบตามปกติ:
ช่องป้อนข้อมูลที่จำเป็น:
<ประเภทอินพุต = "ข้อความ" จำเป็น> |
แท็กเหล่านี้ไม่มีการสนับสนุนข้ามเบราว์เซอร์หรือข้ามแพลตฟอร์ม แต่เมื่อวันนั้นมาถึง คุณจะต้องกระตือรือร้นที่จะใช้แท็กเหล่านี้อย่างแน่นอน
เค้าโครงที่พิมพ์ออกมาซึ่งเป็นฟีเจอร์ CSS3 อีกประการหนึ่งยังต้องใช้เวลาอีกหลายปีกว่าจะถูกนำมาใช้อย่างเต็มรูปแบบ ให้นักออกแบบมีคุณสมบัติเค้าโครงหลายคอลัมน์ ขณะนี้สามารถใช้งานได้เฉพาะในกรณีทดสอบของ Firefox และ Safari เท่านั้น
| -moz-คอลัมน์นับ: 3; -moz-คอลัมน์ช่องว่าง: 20px; -webkit-จำนวนคอลัมน์: 3; -webkit-คอลัมน์ช่องว่าง: 20px; |
การตรวจจับตำแหน่งทางภูมิศาสตร์ ด้วยการเติบโตของบริการตามตำแหน่งเช่น Gowalla และ Foursquare มันมีประโยชน์สำหรับเบราว์เซอร์ในการรู้ว่าผู้ใช้อยู่ที่ไหน ดังนั้นจึงไม่น่าแปลกใจที่เบราว์เซอร์มือถือที่ใช้โทรศัพท์มือถือเป็นเบราว์เซอร์แรกที่ใช้ฟีเจอร์นี้ Firefxo 3.5 และ Safari 5 ได้เริ่มให้การสนับสนุนการระบุตำแหน่งทางภูมิศาสตร์แล้ว (บริการที่คล้ายกันของ Chrome ใช้งานผ่าน Gears แต่จะค่อยๆ เปลี่ยนไปใช้ HTML5)
ทำงานแบบออฟไลน์และจัดเก็บในเครื่อง การจัดเก็บข้อมูลบนคลาวด์เป็นแนวคิดที่ดีเมื่อคุณไม่รู้ว่าคุณไม่มีการเชื่อมต่ออินเทอร์เน็ต หรือคุณมีแอปพลิเคชันที่ต้องประมวลผลข้อมูลจำนวนมากและต้องทำงานบนนั้นบ่อยครั้ง เซิร์ฟเวอร์ มีธุรกรรมกับลูกค้ามากกว่าที่คุณคิด หรือการรับส่งข้อมูลมือถือของคุณมีจำกัด และคุณต้องการจัดเก็บข้อมูลเพิ่มเติมในโทรศัพท์ของคุณเพื่อหลีกเลี่ยงการสูญเสียการรับส่งข้อมูลมากเกินไป ในขณะนี้คือการใช้ที่เก็บข้อมูลในเครื่องเพื่อเปิดใช้งานแอปพลิเคชัน ทำงานออฟไลน์แล้วซิงค์กับคลาวด์เมื่อเชื่อมต่อ
เบราว์เซอร์ที่รองรับคุณสมบัตินี้คือ: Firefox 3.5+, Safari Mobile 3.1+, Safari 4+, Chrome 4+
อาร์ตบอร์ด แอนิเมชั่น และเอฟเฟกต์การแปลง หนึ่งในคำสัญญาของ HTML5 สามารถทำได้โดยใช้องค์ประกอบ Canvas และคุณสมบัติ CSS3 บางอย่าง เพื่อให้ได้เว็บไซต์ที่มีภาพประกอบและภาพเคลื่อนไหวครบถ้วน นี่เป็นจากมาตรฐาน ณ วันที่ 12 กรกฎาคม 2010
สีเขียว = สำเร็จ สีแดง = ไม่ได้วางแผนไว้
ทางลัดสู่ HTML5 ที่ล้ำสมัย
หากคุณรอไม่ไหวให้ IE8 ตาย มีหลายวิธีในการข้ามและดำเนินการต่อ - อีกครั้ง ขึ้นอยู่กับผู้เยี่ยมชมของคุณ ดูบันทึกการเข้าถึงเว็บไซต์ของคุณเพื่อดูว่าส่วนหัวของเบราว์เซอร์ใดที่มีผู้เข้าชมมากที่สุด วิธีหนึ่งในการทำเช่นนี้คือ การใช้ Chrome Frame ของ Google เพื่อฝังอินสแตนซ์ Chrome ลงใน IE หากคุณเข้าใจว่าผู้เยี่ยมชมเว็บไซต์ของคุณอาจติดตั้ง GCF [Google Chrome Frame] แล้ว คุณสามารถเพิ่มลงใน HEAD ของคุณได้ แท็ก META ในบรรทัดก่อนหน้าบังคับให้ IE ใช้ GCF เพื่อแสดงเว็บไซต์ของคุณ:
[บรรณาธิการ: แต่ฉันขอเตือนคุณว่าการทำเช่นนั้นจะทำให้โหมดความเข้ากันได้ของ IE7 ดั้งเดิมของ IE=7 เป็นโมฆะ โปรดชั่งน้ำหนักด้วยตัวเองหากคุณเลือก -
เมื่อใช้ร่วมกับสคริปต์สั้นๆ ที่จัดทำโดย Google ซึ่งอนุญาตให้ผู้ใช้ที่ไม่ได้ติดตั้ง GCF สามารถข้ามไปยังหน้าการติดตั้ง GCF ได้ คุณอาจสามารถข้ามข้อจำกัดของ IE ได้ [บรรณาธิการ: ฉันบ้าไปแล้ว ดูเหมือนว่าการโฆษณาฟรีสำหรับ GCF จะทำให้มีการเข้าชมฟรี...]
องค์ประกอบที่ระบุไว้ในบทความนี้เป็นเพียงส่วนเล็กๆ ของแบบร่าง HTML5 และ CSS3 ปัจจุบัน หากคุณจำเป็นต้องใช้คุณสมบัติใหม่บางอย่าง จำเป็นต้องตรวจสอบโปรเจ็กต์โอเพ่นซอร์สที่มีอยู่เพื่อให้คุณสามารถเรียกดูปัญหาความเข้ากันได้ของเซิร์ฟเวอร์ให้เหลือน้อยที่สุด .
เมื่อรายงานเกี่ยวกับ HTML สื่อจำนวนมากมุ่งเน้นไปที่จุดยืน เช่น "น้อยกว่าปี 2022" และ "Flash Killer" ความจริงก็คือ HTML5 นั้นเป็นการอัพเกรด HTML4 ที่ค้างชำระมานานและใหม่ทั้งหมด ดังนั้นคุณจึงสามารถเริ่มใช้งานได้ตั้งแต่วันนี้
สนับสนุนโดย: SafariX — บล็อก Safari Chinese แบ่งปันข้อมูล Safari เคล็ดลับ และส่วนขยาย
ที่มา: Infoworld
ที่มาภาษาจีน: http://safarix.net/how-to-use-html5-on-your-site-today