HTML5 - Modernizr

Modernizr มีขนาดเล็ก JavaScript Library ที่ตรวจจับความพร้อมใช้งานของการใช้งานแบบเนทีฟสำหรับเทคโนโลยีเว็บรุ่นใหม่

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

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

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

คุณสามารถดาวน์โหลดรุ่นล่าสุดของยูทิลิตี้นี้จากModernizr ดาวน์โหลด

ไวยากรณ์

ก่อนที่คุณจะเริ่มใช้ Modernizr คุณจะต้องรวมไลบรารี javascript ไว้ในส่วนหัวของหน้า HTML ดังนี้ -

<script src="modernizr.min.js" type="text/javascript"></script>

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

ต่อไปนี้เป็นไวยากรณ์ง่ายๆในการจัดการคุณสมบัติที่รองรับและไม่รองรับ -

/* In your CSS: */
.no-audio #music {
   display: none; /* Don't show Audio options */
}
.audio #music button {
   /* Style the Play and Pause buttons nicely */
}

<!-- In your HTML: -->
<div id="music">
   
   <audio>
      <source src="audio.ogg" />
      <source src="audio.mp3" />
   </audio>
   
   <button id="play">Play</button>
   <button id="pause">Pause</button>
</div>

ที่นี่เป็นที่น่าสังเกตว่าคุณต้องนำหน้า "no-" ไปยังทุกคุณสมบัติ / คุณสมบัติที่คุณต้องการจัดการสำหรับเบราว์เซอร์ที่ไม่รองรับ

ต่อไปนี้เป็นไวยากรณ์เพื่อตรวจหาคุณลักษณะเฉพาะผ่าน Javascript -

if (Modernizr.audio) {
   /* properties for browsers that
   support audio */
}

else{
   /* properties for browsers that
   does not support audio */
}

คุณสมบัติที่ Modernizr ตรวจพบ

ต่อไปนี้เป็นรายการคุณสมบัติที่ Modernizr สามารถตรวจพบได้ -

ลักษณะเฉพาะ	คุณสมบัติ CSS	ตรวจสอบ JavaScript
@ font-face	. แบบอักษร	Modernizr.fontface
ผ้าใบ	.ผ้าใบ	Modernizr.canvas
ข้อความแคนวาส	.canvastext	Modernizr.canvastext
HTML5 เสียง	.audio	Modernizr.audio
รูปแบบเสียง HTML5	NA	Modernizr.audio [รูปแบบ]
วิดีโอ HTML5	.video	Modernizr.video
รูปแบบวิดีโอ HTML5	NA	Modernizr.video [รูปแบบ]
rgba ()	.rgba	Modernizr.rgba
hsla ()	.hsla	Modernizr.hsla
ขอบภาพ	.borderimage	Modernizr.borderimage
เส้นขอบรัศมี	.borderradius	Modernizr.borderradius
กล่องเงา	.boxshadow	Modernizr.boxshadow
พื้นหลังหลายแบบ	.multiplebgs	Modernizr.multiplebgs
ความทึบ	.opacity	Modernizr.opacity
ภาพเคลื่อนไหว CSS	.cssanimations	Modernizr.cssanimations
คอลัมน์ CSS	.csscolumns	Modernizr.csscolumns
CSS Gradients	.cssgradients	Modernizr.cssgradients
การสะท้อน CSS	.cssreflections	Modernizr.cssreflections
การแปลง CSS 2D	.csstransforms	Modernizr.csstransforms
การแปลง CSS 3D	.csstransforms3d	Modernizr.csstransforms3d
การเปลี่ยน CSS	.csstransitions	Modernizr.csstransitions
Geolocation API	.geolocation	Modernizr.geolocation
ประเภทอินพุต	NA	Modernizr.inputtypes [ประเภท]
อินพุตแอตทริบิวต์	NA	Modernizr.input [แอตทริบิวต์]
localStorage	.localstorage	Modernizr.localstorage
sessionStorage	.sessionstorage	Modernizr.sessionstorage
คนงานเว็บ	.webworkers	Modernizr.webworkers
applicationCache	.applicationcache	Modernizr.applicationcache
SVG	.svg	Modernizr.svg
SVG เส้นทางคลิป	.svgclippaths	Modernizr.svgclippaths
ยิ้ม	.smil	Modernizr.smil
ฐานข้อมูล Web SQL	.websqldatabase	Modernizr.websqldatabase
IndexedDB	.indexeddb	Modernizr.indexeddb
เว็บซ็อกเก็ต	.websockets	Modernizr.websockets
กิจกรรม Hashchange	.hashchange	Modernizr.hashchange
การจัดการประวัติ	.historymanagement	Modernizr.historymanagement
ลากแล้ววาง	.ลากแล้ววาง	Modernizr.draganddrop
การส่งข้อความข้ามหน้าต่าง	.crosswindowmessaging	Modernizr.crosswindowmessaging
addTest () Plugin API	NA	Modernizr.addTest (str, fn)