10 วิธีทางเลือกที่มีประโยชน์สำหรับ CSS และ Javascript

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

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

ตรวจสอบคำแนะนำของเราด้านล่างและแจ้งให้เราทราบความคิดและคำถามของคุณในส่วนความเห็น.

1. มุมโค้งมนพร้อมรูปภาพ

เทคนิค CSS3 พุ่งสูงขึ้นในการออกแบบเว็บกระแสหลัก หนึ่งในคุณสมบัติที่โดดเด่นที่สุดคือ border-radius ซึ่งช่วยให้มุมโค้งมน on-the-fly สิ่งเหล่านี้ดูสวยงามบนแทบทุกปุ่มปุ่ม div หรือกล่องข้อความ ปัญหาเดียวคือการสนับสนุนที่ จำกัด ระหว่างเว็บเบราว์เซอร์.

เบราว์เซอร์รุ่นเก่าจำนวนมากรวมถึง Internet Explorer 7 ไม่รองรับคุณสมบัตินี้ ดังนั้นเพื่อให้มุมโค้งมนทำงานได้กับเบราว์เซอร์มาตรฐานทั้งหมดคุณจะต้องสร้างรูปภาพสำรอง.

รหัสมาตรฐานใช้คุณสมบัติ CSS3 ปกติใน div หลักขณะที่รองรับรูปภาพในแต่ละมุม คุณอาจต้องตั้งค่า div เพิ่มเติมบางส่วนภายในคอนเทนเนอร์หลักที่ใช้ในการแสดงภาพมุมในพื้นหลัง.

#mainbox -webkit-border-radius: 5px; / * Safari * / -moz-border-radius: 5px; / * Firefox \ Gecko Engine * / -o-border-radius: 5px; / * Opera * / border-radius: 5px;  #mainbox .topc background: url ('corner-tl.png') ไม่ทำซ้ำบนซ้าย;  #mainbox .topc ขยาย background: url ('corner-tr.png') ไม่ต้องทำซ้ำบนขวา;  #mainbox .btmc background: url ('corner-bl.png') ไม่ทำซ้ำล่างซ้าย  #mainbox .btmc span background: url ('corner-br.png') ไม่ทำซ้ำด้านล่างขวา;  

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

2. ระบบเมนูแบบเลื่อนลง jQuery

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

ปัญหาเดียวของวิธีนี้คือ Internet Explorer 6 ไม่รองรับ CSS Hover selector อย่างไรก็ตาม IE7 + ใช้งานได้ดี; และแน่นอนว่าเบราว์เซอร์ทั้งหมดจะทำงานได้ดีหากเปิดใช้งาน JavaScript ตั้งแต่แรก รหัสจากบทช่วยสอนนี้ใน CSS Plus เป็นหนึ่งในแหล่งข้อมูลที่ดีที่สุดที่ฉันพบ มันไม่เพียง แต่แก้ปัญหาด้วย jQuery แต่ยัง CSS ที่จำเป็นสำหรับปัญหา IE.

/ * คลาสของกระแสจะถูกเพิ่มผ่าน jQuery * / #nav li.current> a background: # f7f7f7;  / * CSS fallback * / #nav li: hover> ul.child display: block;  #nav li: hover> ul.grandchild display: block;  

แหล่ง

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

หากคุณไม่รู้สึกว่า Internet Explorer 6 เป็นกังวลอย่างมากอย่ากังวลกับทางเลือกอื่น บทช่วยสอนและโค้ดที่ตามมาด้านบนควรเพียงพอที่จะโหลดเมนู JavaScript ของคุณแม้จะมี CSS อย่างเข้มงวดในเบราว์เซอร์หลัก.

3. รูปแบบ Internet Explorer ที่กำหนดเป้าหมาย

ฉันแน่ใจว่าเราทุกคนรู้เกี่ยวกับปัญหาการแสดงผลที่ออกมาจาก Internet Explorer ของ Microsoft ฉันสามารถให้เครดิตเล็กน้อยสำหรับ IE8 ล่าสุดและโอกาสในอนาคตกับ IE9 อย่างไรก็ตามยังมีผู้ชมจำนวนเล็กน้อยที่ใช้ IE6 / IE7 อยู่และคุณยังไม่สามารถเพิกเฉยต่อพวกเขาได้.

(แหล่งที่มาของรูปภาพ: GitHub)

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

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

#nav li ตำแหน่ง: ญาติ; ความกว้าง: 150px; / * ต้องกำหนดความกว้างที่ จำกัด สำหรับ IE * / #nav li ul / * รหัสการนำทางย่อย * / display: block; ตำแหน่ง: สัมบูรณ์; ความกว้าง: อัตโนมัติ / * กำหนดความกว้างของคุณเองหรือตั้งค่าในองค์ประกอบ li * / #nav li ul li width: 100%;  

4. ความทึบ / ความโปร่งใสดั้งเดิมของ IE

หนึ่งในข้อบกพร่องที่น่ารำคาญมากมายกับ Internet Explorer คือการจัดการกับความทึบ การตั้งค่าอัลฟาโปร่งใสใน CSS3 สามารถเปลี่ยนแปลงได้ผ่านคุณสมบัติความทึบ แต่ในทางของ Microsoft ปัจจุบันมีเพียง Internet Explorer 9 เท่านั้นที่รองรับคุณสมบัตินี้.

ทางออกที่ดีที่สุดสำหรับการกำหนดเป้าหมาย IE6 + คือผ่าน กรอง, การตั้งค่าที่เป็นกรรมสิทธิ์ซึ่ง IE ยอมรับเท่านั้น ลองดูตัวอย่างรหัสย่อด้านล่าง:

.mydiv opacity: 0.55; / * CSS3 * / ตัวกรอง: alpha (opacity = 55); / * IE6 + * / 

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

-ตัวกรอง ms: "progid: DXImageTransform.Microsoft.Alpha (opacity = 55)"; / * IE8 * / 

5. การสร้างปุ่ม CSS3 พร้อมรูปภาพสำรอง

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

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

ทางเลือกคือการย้อนกลับไปเป็นสีพื้นหลังธรรมดาและสไตล์ CSS ที่ง่ายกว่า ฉันใช้ตัวอย่างโค้ดบางส่วนจาก CSS-Tricks โพสต์ที่ดีในการไล่ระดับสี CSS3 เบราว์เซอร์หลักทั้งหมดรวมถึง Safari, Firefox, Chrome และแม้กระทั่ง Opera สนับสนุนคุณสมบัติเหล่านี้ พื้นที่ที่คุณพบปัญหาคือการสนับสนุนเบราว์เซอร์รุ่นเก่า: เครื่องมือ Mozilla รุ่นเก่า, IE6 / 7, หรือแม้แต่ Mobile Safari.

.gradient-bg background-color: # 1a82f7; / * ใช้สีทึบที่แย่ที่สุด * / background-image: url ('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'); background-image: -webkit-gradient (เส้นตรง, 0% 0%, 0% 100%, จาก (# 2F2727), ถึง (# 1a82f7)); background-image: -webkit-linear-gradient (บนสุด, # 2F2727, # 1a82f7); background-image: -moz-linear-gradient (บนสุด, # 2F2727, # 1a82f7); background-image: -ms-linear-gradient (บนสุด, # 2F2727, # 1a82f7); ภาพพื้นหลัง: -o-linear-gradient (บนสุด, # 2F2727, # 1a82f7);  

แหล่ง

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

6. การตรวจสอบเนื้อหาบนมือถือ

อีกหนึ่งแนวโน้มที่สำคัญในปี 2012 คือความนิยมในการท่องอินเทอร์เน็ตบนมือถือ สมาร์ทโฟนมีอยู่ทั่วไปและข้อมูลผ่าน 3G / Wi-Fi กำลังเข้าถึงได้มากขึ้นเรื่อย ๆ ดังนั้นนักออกแบบหลายคนจะมองหารูปแบบทางเลือกสำหรับผู้ใช้มือถือ.

เว็บเบราว์เซอร์มือถือยอดนิยมสองสามตัวจะแสดงหน้าคล้ายกับสภาพแวดล้อมเดสก์ท็อป Mobile Safari และ Opera เป็นที่รู้จักกันดีในเรื่องนี้แม้รองรับสคริปต์ jQuery ทั่วไปจำนวนมาก แต่หน้าเหล่านี้อาจไม่เหมาะกับอุปกรณ์พกพาเสมอไปและยังมีพื้นที่สำหรับเพิ่มใน UX.

มีสองวิธีที่คุณสามารถตรวจพบเบราว์เซอร์มือถือและแสดงเลย์เอาต์หรือสไตล์ชีทอื่น สิ่งแรกคือผ่าน JavaScript ซึ่งใช้งานได้ดีเป็นเครื่องมือส่วนหน้า สคริปต์ที่ฉันเพิ่มด้านล่างนั้นง่ายมากและตรวจสอบเฉพาะผู้ใช้ iPhone / iPod Touch เท่านั้น Detect Mobile Browsers เป็นเว็บไซต์ที่ยอดเยี่ยมซึ่งมีสคริปต์ที่มีรายละเอียดมากขึ้นคุณสามารถเรียกใช้แทน.

// เปลี่ยนเส้นทางฟังก์ชั่น iPhone / iPod Touch isiPhone () return ((navigator.platform.indexOf ("iPhone")! = -1) || (navigator.platform.indexOf ("iPod")! = -1));  if (isiPhone ()) window.location = "m.yourdomain.com";  

ตอนนี้ทางเลือกอื่นกำลังตรวจสอบผ่านภาษาแบ็กเอนด์เช่น PHP คุณสามารถตรวจสอบตัวแปรที่เรียกว่า HTTP_USER_AGENT. เว็บไซต์หลายสิบแห่งจะปรากฏขึ้นหากคุณ google ข้อกำหนดเหล่านี้ อย่างไรก็ตามฉันยังคงแนะนำลิงก์ Detect เบราว์เซอร์มือถือที่ฉันเพิ่มในย่อหน้าก่อนหน้า.

เว็บไซต์นี้มีสคริปต์ที่ดาวน์โหลดได้ฟรีสำหรับการแยกวิเคราะห์ไม่เพียง แต่ใน PHP แต่ยังมีภาษาแบ็กเอนด์ยอดนิยมอื่น ๆ อีกมากมาย เหล่านี้รวมถึง ASP.NET, ColdFusion, Rails, Perl, Python และแม้แต่รหัสที่ใช้เซิร์ฟเวอร์เช่น IIS และ Apache.

7. Slicebox Slider พร้อม Fallback อันสง่างาม

ฟรี CSS3 ที่ชื่นชอบของฉันจากปี 2011 อาจจะต้องเป็น Slicebox 3D Image Slider ที่วางจำหน่ายโดย Codrops มันใช้การเปลี่ยนภาพเคลื่อนไหว CSS ที่สวยงามในเบราว์เซอร์ที่รองรับพวกเขาในปัจจุบันใน Google Chrome และล่าสุดใน Safari เป็นเรื่องแปลกที่แม้กระทั่ง Firefox หรือ IE9 รุ่นล่าสุดก็ยังไม่สามารถใช้การเปลี่ยนภาพเหล่านี้ได้.

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

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

8. jQuery Script CDN วิธีการไม่ปลอดภัย

ไลบรารี jQuery กลายเป็นสิ่งจำเป็นสำหรับการพัฒนาจาวาสคริปต์บนเว็บ ซัพพลายเออร์ CDN สำรองหลายรายได้สร้าง URL แบบคงที่ซึ่งโฮสต์โฮสต์ jQuery ทุกเวอร์ชัน Google, Microsoft และ jQuery เองได้สร้างพอร์ทัล CDN สำหรับนักพัฒนาในบรรดาเว็บไซต์ที่รู้จักกันน้อย.

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

แหล่ง

9. ช่องทำเครื่องหมาย HTML5 ที่ไม่ซ้ำกัน

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

ฉันพบกับการสอน CSS / jQuery ที่ยอดเยี่ยมที่โพสต์เมื่อต้นฤดูใบไม้ผลิปี 2011 มันมีวิธีการง่ายๆในการสร้างสวิตช์สไตล์แอปเปิ้ลสำหรับช่องทำเครื่องหมายของคุณซึ่งทำให้เบราว์เซอร์รุ่นเก่า ๆ รหัสใช้ภาพพื้นหลังเพื่อแทนที่สไตล์เปิด / ปิดระหว่างการโต้ตอบของผู้ใช้.

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

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

10. HTML5 วิดีโอที่รองรับ

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

Mozilla Firefox โดยทั่วไปรองรับวิดีโอ. OGG ซึ่งคุณสามารถใช้ VLC เป็นตัวแปลง Google Chrome & Safari มองหาไฟล์. MP4 หรือ H.264 ที่เข้ารหัส. MOV เนื่องจากความแตกต่างเหล่านี้คุณจะต้องรวม สาม รูปแบบวิดีโอที่แตกต่าง - ทั้งสองรายการข้างต้นพร้อมด้วย. fallback .FLV.

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

แหล่ง

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

ข้อสรุป

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

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