HTML5, CSS3 และเทคโนโลยีที่เกี่ยวข้องเช่นผ้าใบและซ็อกเก็ตเว็บได้นำคุณสมบัติที่มีประโยชน์มากซึ่งสามารถช่วยโปรแกรมเว็บของเราปรับปรุงระดับใหม่ เทคโนโลยีใหม่เหล่านี้ช่วยให้เราสามารถสร้างหน้าฟอร์มที่หลากหลายซึ่งสามารถทำงานบนแท็บเล็ตและอุปกรณ์มือถือโดยใช้ HTML, CSS และ JavaScript เท่านั้น แม้ว่า HTML5 จะมีคุณสมบัติใหม่มากมาย แต่ก็ไม่สมจริงที่จะใช้เทคโนโลยีใหม่เหล่านี้หากเราไม่พิจารณาเบราว์เซอร์รุ่นเก่า เบราว์เซอร์รุ่นเก่าถูกใช้มาหลายปีแล้วและเรายังต้องพิจารณาปัญหาความเข้ากันได้ของเวอร์ชันเหล่านี้ ปัญหาที่จะแก้ไขในบทความนี้คือ: เมื่อเราใช้เทคโนโลยี HTML5/CSS3 วิธีจัดการกับปัญหาของเบราว์เซอร์เก่าที่ไม่รองรับคุณสมบัติ HTML5/CSS3 ได้ดีขึ้น
แม้ว่าเราสามารถเขียนโค้ดด้วยตนเองเพื่อตรวจสอบว่าเบราว์เซอร์รองรับคุณสมบัติ HTML5/CSS3 บางอย่างโค้ดนั้นไม่ง่ายมาก ตัวอย่างเช่น: การเขียนรหัสเพื่อพิจารณาว่าการชำระเงินของเบราว์เซอร์รองรับผืนผ้าใบรหัสของเราอาจคล้ายกับต่อไปนี้:
<script> window.onload = function () {if (canvassupported ()) {Alert ('Canvas รองรับ'); - ฟังก์ชั่น canvassupported () {var canvas = document.createElement ('Canvas'); return (canvas.getContext && canvas.getContext ('2d')); } </script>หากคุณต้องการตรวจสอบว่ารองรับการจัดเก็บในท้องถิ่นรหัสอาจคล้ายกับด้านล่างหรือไม่ แต่เป็นเรื่องง่ายที่จะทำให้เกิดข้อบกพร่องภายใต้ Firefox
<script> window.onload = function () {if (localstoragesupported ()) {แจ้งเตือน ('ที่เก็บข้อมูลในพื้นที่'); - ฟังก์ชั่น localStoragesUpported () {ลอง {return ('localstorage' ในหน้าต่าง && window ['localstorage']! = null); } catch (e) {} return false; } </script>สองตัวอย่างแรกคือการตรวจสอบคุณสมบัติทั้งหมด หากมีคุณสมบัติ HTML5/CSS3 มากมายเราต้องเขียนรหัสหลายชุดเพื่อตัดสิน แต่โชคดีที่รหัสเหล่านี้ไม่ได้ขึ้นอยู่กับคำสั่ง Modernizr ช่วยให้คุณสามารถใช้ฟังก์ชั่นที่ซับซ้อนข้างต้นด้วยรหัสน้อยมาก มาดูคุณสมบัติที่สำคัญบางอย่างของ Modernizr:
เริ่มต้นด้วย Modernizrครั้งแรกที่ฉันได้ยิน Modernizr ฉันคิดว่ามันหมายถึงทันสมัยและสามารถเพิ่มคุณสมบัติ HTML5/CSS3 ใหม่ให้กับเบราว์เซอร์รุ่นเก่าได้ ในความเป็นจริง Modernizr ไม่ได้ทำสิ่งนี้มันช่วยให้เราปรับปรุงแนวทางการพัฒนาของเราโดยใช้วิธีที่ขี้ขลาดมากเพื่อช่วยตรวจจับว่าเบราว์เซอร์รองรับคุณสมบัติใหม่บางอย่างและสามารถโหลดสคริปต์เพิ่มเติมได้ หากคุณเป็นนักพัฒนาเว็บมันเป็นอาวุธที่ยอดเยี่ยมมากสำหรับคุณ
เว็บไซต์อย่างเป็นทางการของ Modernizr: http://modernizr.com คุณสามารถใช้สคริปต์ทั้งสองประเภท (เวอร์ชันการพัฒนาและเวอร์ชันการผลิตที่กำหนดเอง) เว็บไซต์มีเครื่องมือที่กำหนดเองเพื่อสร้างเฉพาะคุณสมบัติการตรวจจับที่คุณต้องการแทนที่จะเป็นเวอร์ชันขนาดใหญ่และสมบูรณ์ที่สามารถตรวจจับทุกสิ่งซึ่งหมายความว่าคุณสามารถลดสคริปต์ของคุณได้ รูปต่อไปนี้เป็นอินเทอร์เฟซของเครื่องมือสร้างเว็บไซต์อย่างเป็นทางการ คุณจะเห็นได้ว่าสามารถเลือก HTML5/CSS3 และเทคโนโลยีที่เกี่ยวข้องได้มากมาย
หลังจากดาวน์โหลดสคริปต์ที่กำหนดเองของคุณคุณสามารถอ้างอิงได้เช่นไฟล์ JS ปกติแล้วคุณสามารถใช้งานได้
<script src = scripts/modernizr.js type = text/javascript> </script>องค์ประกอบ Modernizr และ HTML
หลังจากเพิ่มการอ้างอิง Modernizr แล้วจะมีผลทันที เมื่อทำงานมันจะเพิ่มแบทช์ชื่อคลาส CSS ลงในองค์ประกอบ HTML ชื่อคลาสเหล่านี้ทำเครื่องหมายว่าคุณสมบัติรองรับและคุณสมบัติใดที่ไม่รองรับในเบราว์เซอร์ปัจจุบัน คุณสมบัติที่รองรับจะแสดงชื่อของคุณสมบัติของวันเป็นคลาสโดยตรง (ตัวอย่างเช่น: Canvas, WebSockets) คลาสที่แสดงโดยคุณสมบัติที่ไม่ได้รับการสนับสนุนคือชื่อที่ไม่มีการจัดทำ (ตัวอย่างเช่น: No-FlexBox) รหัสต่อไปนี้คือผลของการทำงานใน Chrome:
<html class = js flexbox canvas canvastext webgl no-touch postmessage postmessage webldatabase indexeddb hashchange ประวัติศาสตร์ draganddrop websockets rgba hsla multiplebgs พื้นหลัง borderimage borderradius boxshadow boxshadow การดื่มสุรา CSSTRANSFORMS3D CSSTRANSITIONS FONTFACE สร้าง Video Audio Audio LocalStorage SessionStorage Webworkers ApplicationCache SVG Inlinesvg Smil Svgclippaths>
รหัสต่อไปนี้เป็นผลของการรันภายใต้ IE9:
<html class = js no-flexbox canvas canvas canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history no-history boxhadius no-bore-border-border No-csssanimations no-csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface สร้างวิดีโอเสียงในพื้นที่
การใช้ Modernizr รหัสต่อไปนี้อาจเกิดขึ้น (เพิ่มชื่อ NO-JS ลงในชั้นเรียน):
<html class = no-js>
คุณสามารถเยี่ยมชมเว็บไซต์ (http://html5boilerplate.com) เพื่อดูเนื้อหาที่เกี่ยวข้องกับหม้อต้มน้ำ HTML5 หรือ (http://initializr.com) เพื่อดูเนื้อหาที่เกี่ยวข้องกับการเริ่มต้น หากไม่ได้รับการสนับสนุนจะไม่มีการแสดง NO-JS หากได้รับการสนับสนุน NO-JS จะถูกลบ เจ๋งมากใช่มั้ย
ใช้กับคุณสมบัติ HTML5/CSS3คุณสามารถใช้ชื่อคลาสที่สร้างขึ้นโดย Modernizr ในองค์ประกอบ <html> เพื่อกำหนดแอตทริบิวต์ที่เกี่ยวข้องในไฟล์ CSS ของคุณเพื่อรองรับเบราว์เซอร์ปัจจุบัน ตัวอย่างเช่นรหัสต่อไปนี้สามารถแสดงเงาในเบราว์เซอร์ที่รองรับเงาเงาและแสดงเส้นขอบมาตรฐานในเบราว์เซอร์ที่ไม่รองรับ:
.BoxShadow #MyContainer {ชายแดน: ไม่มี; -webkit-box-shadow: #666 1px 1px 1px; -moz-box-shadow: #666 1px 1px 1px;} .no-boxshadow #mycontainer {border: 2px solid black;}เพราะถ้าเบราว์เซอร์รองรับกล่อง shadows, Modernizr จะเพิ่มคลาส Boxshadow ลงในองค์ประกอบ <html> และคุณสามารถจัดการกับ Div ID ที่เกี่ยวข้อง หากไม่รองรับ Modernizr จะเพิ่มคลาส No-BoxShadow ลงในองค์ประกอบ <html> ซึ่งแสดงเส้นขอบมาตรฐาน ด้วยวิธีนี้เราสามารถใช้คุณสมบัติ CSS3 ใหม่บนเบราว์เซอร์ที่รองรับคุณสมบัติ CSS3 ได้อย่างง่ายดายและใช้วิธีการก่อนหน้านี้บนเบราว์เซอร์ที่ไม่รองรับ
นอกเหนือจากการเพิ่มคลาสที่สอดคล้องกันในองค์ประกอบ <html> แล้ว Modernizr ยังมีวัตถุ JavaScript Global Modernizr ซึ่งให้คุณสมบัติที่แตกต่างกันเพื่อระบุว่าคุณสมบัติใหม่ได้รับการสนับสนุนในเบราว์เซอร์ปัจจุบันหรือไม่ ตัวอย่างเช่นรหัสต่อไปนี้สามารถใช้เพื่อตรวจสอบว่าเบราว์เซอร์รองรับผืนผ้าใบและที่เก็บข้อมูลท้องถิ่นหรือไม่ มันเป็นประโยชน์อย่างมากสำหรับนักพัฒนาหลายคนในการพัฒนาและทดสอบภายใต้เบราว์เซอร์หลายรุ่นและทุกคนสามารถรวมรหัสได้
$ (document) .ready (function () {if (modernizr.canvas) {// เพิ่มรหัสผืนผ้าใบ} ถ้า (modernizr.localstorage) {// เพิ่มรหัสการจัดเก็บท้องถิ่น}});สามารถใช้วัตถุ Global Modernizr เพื่อตรวจจับได้ว่าคุณลักษณะ CSS3 นั้นรองรับหรือไม่ รหัสต่อไปนี้ใช้เพื่อทดสอบว่ารองรับการแปลงชายแดนและ CSS หรือไม่:
$ (เอกสาร) .ready (function () {ถ้า (modernizr.borderradius) {$ ('#mydiv'). addclass ('Borderradiusstyle');} ถ้า (modernizr.csstransforms) {$ ('#mydiv')คุณสมบัติ CSS3 อื่น ๆ สามารถตรวจจับผลลัพธ์ได้เช่นความทึบ, RGBA, text-shadow, ภาพเคลื่อนไหว CSS, การเปลี่ยน CSS, พื้นหลังที่หลากหลาย ฯลฯ รายการตรวจจับ HTML5/CSS3 ที่สมบูรณ์ซึ่งได้รับการสนับสนุนโดย Modernizr สามารถพบได้ที่ http://ww.modernizr.com/docs
กำลังโหลดสคริปต์สคริปต์ด้วย Modernizrในเบราว์เซอร์บางตัวที่ไม่รองรับคุณสมบัติใหม่ Modernizr ไม่เพียง แต่ให้วิธีการข้างต้นเพื่อบอกคุณ แต่ยังมีฟังก์ชั่นโหลดเพื่อให้คุณโหลดสคริปต์ shim/polyfill เพื่อให้ได้รับการสนับสนุน (สำหรับข้อมูลเกี่ยวกับ shim/polyfill โปรดไปที่: https://github.com/modernizr/modernizr/wiki Modernizr ให้ตัวโหลดสคริปต์เพื่อกำหนดฟังก์ชั่นและหากไม่รองรับสคริปต์ที่เกี่ยวข้องจะถูกโหลด สคริปต์แยกต่างหากสามารถดูได้ที่ http://yepnopejs.com
คุณสามารถใช้ฟังก์ชั่น Load () ของ Modernizr เพื่อโหลดสคริปต์แบบไดนามิก แอตทริบิวต์การทดสอบของฟังก์ชั่นระบุว่าได้รับการสนับสนุนหรือไม่ หากรองรับการทดสอบสำเร็จสคริปต์ที่ตั้งค่าโดยแอตทริบิวต์ YEP จะถูกโหลด หากไม่รองรับสคริปต์ที่ตั้งค่าโดยแอตทริบิวต์ NOPE จะโหลด ไม่ว่าจะได้รับการสนับสนุนหรือไม่สคริปต์ที่ตั้งค่าโดยแอตทริบิวต์ทั้งสองจะถูกโหลด รหัสตัวอย่างมีดังนี้:
modernizr.load ({test: modernizr.canvas, yep: 'html5canvasavailable.js', nope: 'excanvas.js', ทั้ง: 'mycustomscript.js'});ในตัวอย่างนี้ Modernizr จะพิจารณาว่าเบราว์เซอร์ปัจจุบันรองรับคุณลักษณะ Canvas หรือไม่ หากได้รับการสนับสนุนมันจะโหลดสคริปต์สองสคริปต์ html5canvasavailable.js และ mycustomscript.js หากไม่ได้รับการสนับสนุนมันจะโหลด excanvas.js (ใช้สำหรับเวอร์ชันก่อนที่ IE9) ไฟล์สคริปต์เพื่อให้เบราว์เซอร์รองรับฟังก์ชัน Canvas จากนั้นโหลดสคริปต์ mycustomscript.js
เนื่องจาก Modernizr สามารถโหลดสคริปต์ได้คุณยังสามารถใช้การใช้งานอื่น ๆ เช่นหากสคริปต์บุคคลที่สามที่คุณอ้างอิง (เช่น Google และ Microsoft ที่ให้บริการ CDN ที่ให้ JQuery Hosting) ล้มเหลวในการโหลดคุณสามารถโหลดไฟล์สำรองได้ รหัสต่อไปนี้เป็นตัวอย่างของการโหลด jQuery ที่จัดทำโดย Modernizr:
modernizr.load ([{load: '//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jQuery.js', เสร็จสมบูรณ์: ฟังก์ชั่น () {ถ้า (! window.jquery) {modernizr.load ('js/libs/jquery -1.6.4. ทางเลือกในการโหลดและ // ดำเนินการหากต้องการรหัสนี้จะโหลดไฟล์ jQuery จาก Google CDN ก่อน หากการดาวน์โหลดหรือโหลดล้มเหลวฟังก์ชั่นที่สมบูรณ์จะถูกดำเนินการ ก่อนอื่นให้ตรวจสอบว่ามีวัตถุ JQeury อยู่หรือไม่ หากไม่มีอยู่ Modernizr จะโหลดไฟล์ JS ดั้งเดิมที่กำหนดไว้ หากแม้แต่ไฟล์ที่สมบูรณ์นั้นไม่สามารถโหลดได้สำเร็จไฟล์ ququery.js.js.js จะถูกโหลด
สรุป:Modernizr เป็นเครื่องมือที่จำเป็นอย่างยิ่งหากคุณใช้ HTML5/CSS3 ล่าสุดเพื่อสร้างโปรแกรมของคุณ การใช้มันคุณสามารถบันทึกรหัสและการทดสอบจำนวนมากและคุณสามารถใช้คุณสมบัติใหม่ที่เกี่ยวข้องในรูปแบบของสคริปต์โหลดเพิ่มเติมสำหรับเบราว์เซอร์บางตัวที่ไม่รองรับคุณสมบัติใหม่
ที่อยู่ดั้งเดิม: http://weblogs.asp.net/dwahlin/archive/2011/11/16/detecting-html5-css3-features-using-modernizr.aspx