[CSS3 + HTML5] Modernizr
Modernizr is a library for detecting whether the user's browsers have certain features and based on the availability, we developers will trigger certain functions or styles. In this episode, we will take a simple slideshow and use both javascript and css3 to make the transitions based on features available with libraries such as yepnope and html5shiv. Most importantly, we will scratch the surface of what is graceful degradation and progressive enhancement.
If you use modren JS Framework like Angular, when comes to IE8, it will report error. And I believe, IE9 below will be abandoned, moderen web technology will no longer support IE9 below.
But it will still valuable to know how to handle css / javascript fallback on old bower.
1. installing modernizr
download the entire library from modernizr or cdnjs and put a <script> tag in the <head> of index.html. Open up the browser dev console to see some classes added to the <head> tag:
<html lang="en" style="" class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"><head>
2. feature detection
if a css property is not available:
.box{ box-shadow: 0 0 10px 1px #666; } .no-boxshadow .box{ border: 3px solid grey; }
if a css property is available:
.box{ border: 3px solid grey; } .boxshadow .box{ box-shadow: 0 0 10px 1px #666; }
-
html5 tags:
- include the option for html5shiv when generating the modernizr
- now semantic html5 tags are easily seen in older browser as well
- if the entire html5shiv library is not needed, then create the html5 element indivudally and put the javascript in the
<head>tags
-
javascript fallback:
- for a javascript fallback, use yepnope.js - ensure it is part of the generated modernizr as well. Put the scripts in the
<head>tag.
- for a javascript fallback, use yepnope.js - ensure it is part of the generated modernizr as well. Put the scripts in the
<script> yepnope({ test : Modernizr.cssanimations, yep : 'slides.css', nope : 'slides.js' }); </script>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
2014-12-21 [AngularJS] Directive with Transcluded Elements
2014-12-21 [AngularJS] Build Your Own ng-controller Directive
2014-12-21 [AngularJS] Html ngSanitize, $sce