- 综合排序
- 最热优先
- 最新优先
- 来自专栏Coco的专栏
深入探讨 CSS 特性检测 @supports 与 Modernizr
本文将主要介绍两种 CSS 特性检测的方式： @supports modernizr 及使用 javascript 进行特性检测的原理。 以及，它可以配合我们下文即将要讲的 modernizr 。 modernizr 上面介绍了 CSS 方式的特性检测，在以前，通常是使用 javascript 来进行特性检测的，其中 modernizr 就是其中最为出色的佼佼者。 modernizr（戳我查看 Github ）是一个开源的 javascript 库。有着将近 2W 的 star ，其优秀程度可见一斑。 简单看看使用方法，假设页面已经引用了 modernizr ，语法如下： // Listen to a test, give it a callback Modernizr.on('testname',
88530发布于 2018-05-28 - 来自专栏图像识别与深度学习
《HTML5实战》Lesson02
Week02 2016/09/21上午1-4节 一、Modernizr.js的作用 解决不支持css3+html5浏览器的兼容性 Modernizr.js:为HTML5和CSS3而生！ -前端开发博客 Modernizr的介绍和使用-刘一痕-ChinaUnix博客 Modernizr.js入门指南 - 推酷 二、Modernizr.js的下载 官方网站： Modernizr: the feature detection library for HTML5/CSS3 GitHub - Modernizr/Modernizr: Modernizr is a JavaScript library --使用样式表--> <script src="<em>modernizr</em>-1.7.js"></script> <script src="app.js"></script> </head><body
79990发布于 2018-04-27 - 来自专栏Piper蛋窝
如何优雅地实现浏览器兼容与CSS规则回退
本文就是探讨如何优雅地应对浏览器兼容问题，包括四点：层叠机制来支持较早的浏览器，Modernizr设置辅助类来分别编写样式，使用 @supports 规则回退，简短的 JavaScript 代码实现回退 设置辅助类来分别编写样式 这里参考了一篇14年的老博客 Modernizr 的介绍和使用。 Modernizr 官网：https://modernizr.com/ Modernizr 如何生效？ 如果页面支持 text-shadow 属性，那么 Modernizr 会添加 textshadow 类。如果不支持，那么它用 no-textshadow 类作为替代进行添加。 简短的 JavaScript 代码实现回退 思路与 Modernizr 相同，做特性检测，然后添加辅助类。
68430发布于 2021-07-23 - 来自专栏Angular&服务
关于package.json 的script标签使用以及和npm的关系
MyGridApplication", "build": "ng build", "test": "ng test", "lint": "ng lint", "modernizr ": "modernizr -c modernizr-config.json -d src/modernizr.js", "postinstall": "node .
1.1K20发布于 2018-08-20 - 来自专栏刘悦的技术博客
响应式设计笔记
可以使用Modernizr框架，向缺少HTML5或CSS3支持的浏览器页面中打补丁。 三、Modernizr Modernizr是一个用于检测浏览器功能的开源JS库。 Modernizr的js文件执行之后，会在html标签上附加一系列class，它表示当前浏览器对HTML5或CSS3的特性的支持情况。 background-top.png) top left no-repeat, url(background-bottom.png) bottom left repeat-x; } 在下载的时候，将yepnop.js引入，Modernizr 还能根据浏览器特性做到按需加载（根据浏览器特性来加载polyfill）： Modernizr.load({ test: Modernizr.canvas, //yep: '', 也可以使用到我们上面提到的媒体查询来按需加载： Modernizr.load({ test:Modernizr.mq('only screen and (max-width:600px)'),
1.6K20编辑于 2022-08-08 - 来自专栏前端新视界
响应式卡片抽奖插件 CardShow
以下是我在写插件时遇到的问题以及解决的问题，大概包括 jQuery 插件编写、modernizr 使用、css3 动画、transitionend 事件、洗牌算法、相邻不重复随机数、获取 transform // 设置 jQuery 插件 $.fn.plugin = function(options) { return instance; } })(window, jQuery); Modernizr 的使用 modernizr 也算是一个老牌的浏览器兼容方案了，相信大家也早已使用或者早有耳闻。 网上关于 modernizr 的文章并不多，这是官网文档：https://modernizr.com/docs ，已经说得很详细，我之后会翻译该文。
3.1K60发布于 2018-01-17 - 来自专栏张善友的专栏
ASP.NET MVC 4 RC的JS/CSS打包压缩功能
Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*")); bundles.Add(new ScriptBundle("~/bundles/modernizr ").Include( "~/Scripts/modernizr-*")); bundles.Add(new StyleBundle("~/Content/css").Include("~/Content themes/base/jquery.ui.theme.css")); } } } 跟Beta时代很大的差异是将JS与CSS加以群组化，分别定义出jquery, jqueryui, jqueryval, modernizr text/css" /> <link href="/Content/site.css" rel="stylesheet" type="text/css" /> <script src="/Scripts/<em>modernizr</em> v=ji3n...略" rel="stylesheet" type="text/css" /> <script src="/bundles/<em>modernizr</em>?
3.7K70发布于 2018-01-22 - 来自专栏黯羽轻扬
CSS Feature Query
相当于内置了友好的渐进增强机制，之前通常用Modernizr来做的事情，现在多了一种选择，比如： Override one layout method with another. Modernizer Modernizr，一般特性检测方案，通过JS来检查运行环境是否支持指定特性： Modernizer checks if a feature is available in the 简言之，Modernizr有助于区分高端与低端环境，这样就允许我们针对低端环境进行降级（fallback），或者打补丁（polyfill）。 例如： if (Modernizr.awesomeNewFeature) { showOffAwesomeNewFeature(); } else { getTheOldLameExperience (); } 作为一种JS方案，优势是足够灵活，不仅支持查询CSS特性，还支持所有可以通过JS检测的特性，例如： // 媒体特征 var query = Modernizr.mq('(min-width:
1K30发布于 2019-06-12 - 来自专栏bamboo前端学习记录
浏览器兼容
让哪些浏览器支持哪些效果 3、如何做 （1）根据兼容需求选择技术框架/库(jquery) （2）根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr ie9 圆角: >= ie9 阴影: >= ie9 动画/渐变: >= ie10 八：处理兼容的开发工具 html5shiv.js respond.js css reset normalize.css Modernizr 而Modernizr方法不关心浏览器，帮助探测浏览器是否支持某种新特性，也就是说Modernizr只关心有没有对应的css特性。 运行的时候它会在html元素上添加一批CSS的class名称，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性 详情见文档：Modernizr介绍文章 ?
2.5K52发布于 2019-01-29 - 来自专栏偏前端工程师的驿站
前端魔法堂：解秘FOUC
<html class="no-js"> <style> /*modernizr会将html的no-js替换为js，并将modernizr代码在最后时加载，那么就能保证所有样式文件已经加载完成 important;} </style> <body> <script src="<em>modernizr</em>.js"></script> </body> </html> (编译modernizr时记得勾setClasses哦，否则不会替换no-js的！)
1.7K70发布于 2018-01-18 - 来自专栏MixLab科技+设计实验室
全栈设计师技术Wiki之Polyfills
此项技术常常为了让各种浏览器都可以使用 HTML5 的新标准，HTML5 有哪些新标准，可以查看以下链接： https://github.com/Modernizr/Modernizr/wiki/HTML5
1.2K100发布于 2018-04-17 - 来自专栏吃猫的鱼个人博客编程笔记
jQuery网页背景动态渐变色代码
也可以单独写成一个js文件，然后引入那个js文件即可 下面是js代码： window.Modernizr=function(Z,Y,X){function F(b){R.cssText=b}function 1}var W="2.8.3",V={},U=Y.documentElement,T="modernizr",S=Y.createElement(T),R=S.style,Q,P={}.toString Modernizr.cssgradients){return}this.currentIndex=0;this.nextIndex=1;this.steps_count=0;this.steps_total
1.8K20编辑于 2023-02-02 - 来自专栏网站教程
20个最新的 CSS3 和 HTML5 工具
15.Modernizr Modernizr 是一个利用 JS 和 CSS 来检测浏览器说支持功能的小工具。
1.1K30发布于 2021-07-16 - 来自专栏ASP.NET MVC5 后台权限管理系统
ASP.NET MVC5+EF6+EasyUI 后台管理系统（2）-easyui构建前端页面框架[附源码]
Include( "~/Scripts/jquery.validate.unobtrusive.plus.js")); // 使用 Modernizr 然后，当你做好 // 生产准备时，请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。 bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( "~/Scripts/modernizr
2.6K60发布于 2018-01-16 - 来自专栏WD学习记录
ASP.NET MVC4 配置逻辑
里边默认添加一些捆绑，包括 jQuery、jQueryUI、jQuery 验证、Modernizr 和默认的 CSS 引用。
66620发布于 2018-09-03 - 来自专栏子曰五溪
Using SVG
如果你想要在不支持的浏览器里面使用，可以这样： 使用Modernizr来替换
的src属性： jQuery if (! Modernizr.svg) { $(".logo img").attr("src", "images/logo.png"); } David Bushell提供了一个更简单的操作： HTML < 如果要在不支持的浏览器里面使用： 用Modernizr把background-image替换成一个支持的格式。 -- fallback image in CSS --> </object> 同样可以使用Modernizr来兼容： CSS .no-svg .logo { width: 200px; height
3K20发布于 2019-06-24 - 来自专栏灵儿的笔记
帅帅的导航代码
http://libs.cncdn.cn/snap.svg/0.2.0/snap.svg-min.js"></script> <script src="http://libs.cncdn.cn/<em>modernizr</em> /2.7.1/<em>modernizr</em>.js"></script> </head> <body>
< 'MSTransitionEnd', 'transition': 'transitionend' }, transEndEventName = transEndEventNames[ Modernizr.prefixed ( 'transition' ) ], support = { transitions : Modernizr.csstransitions }; s = Snap( overlay.querySelector 1.4K20发布于 2020-06-23来自专栏owent常用官方文档整理
://github.com/aFarkas/html5shiv HTML5 Cross Browser Polyfills(浏览器功能适配polyfills): https://github.com/Modernizr /Modernizr/wiki/HTML5-Cross-Browser-Polyfills 网站及网页–压缩工具： YUI Compressor官网（英）[java]{js\css}：http://developer.yahoo.com
3K30发布于 2018-08-01来自专栏快乐八哥HTML5学习—Canvas API入门
处理老的浏览器不支持HTML5 Canvas元素的问题，可以在canva标签里面添加内容，当然也可以使用Modernizr 类库进行不同浏览器之间的兼容操作。
85930编辑于 2022-05-11来自专栏电光石火HTML条件注释判断浏览器及检验
因此，jQuery和Modernizr给出了各自的方法。
2.5K90发布于 2018-01-18
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号