我知道我可以创建一个Modernizr的自定义构建版本来检测我关心的功能.但有没有办法使用与Bower一起安装的Modernizr来检测特定功能或一组功能(例如SVG支持)而不包括整个库？
基本上当我这样做
bower install modernizr
我将获得超出我需要的整个库.
我评价一个脚本加载优化现有资源,但我readed像一些文章这个,是指直到这个顺序脚本加载阶段完成旧的浏览器阻止其他下载.我检查Modernizr(yepnope.js),headjs和ControlJs作为候选人.但是,它是否需要在现代浏览器中使用此工具进行并行脚本加载？
让我们假设一个div从动画opacity:0;到opacity:1;,我想保留opacity:1;动画结束之后.
这是什么animation-fill-mode:forwards;.
@keyframes myAnimation {
from { opacity:0; }
to { opacity:1; }
}
div {
opacity:0;
animation-name:myAnimation;
animation-delay:1s;
animation-duration:2s;
animation-fill-mode:forwards;
}?
<div>just a test</div>?
在这个答案中,我读到animation-fill-modeChrome 16+,Safari 4 +,Firefox 5+支持.
但Chrome 1+和Opera也支持animation单独使用.因此,即使不支持,使用Modernizr进行的一般测试也可能会返回正值.fill-mode
目标animation-fill-mode我在Modernizr上添加了一个新的测试:
Modernizr.addTest('animation-fill-mode',function(){
return Modernizr.testAllProps('animationFillMode');
});
现在我有一个.no-animation-fill-modeCSS和Modernizr.animationFillModeJavaScript 的课程.
我还从CSS3动画规格中读到:
文档样式表中指定的动画将从文档加载开始
是否可以在动画结束的确切秒数内运行简单的jQuery函数
$(document).ready(function(){ …我一直在努力尝试在IE 8,7和6上使用旋转(xdeg)功能,为此我谷歌一段时间找到了cssSandpaper但是因为我必须加载4个不同的脚本我想只做它如果它是必要的im使用modernizr我尝试这样的事情:
<head>
<link rel="stylesheet" href="stilos/estilo.css" />
<script src="scripts/modernizr.custom.19387.js"></script>
<script src="scripts/jquery-1.8.1.js"></script>
<script src="scripts/misfallbacks.js"></script>
</head>
<body>
<div id="acerca"><a href="#">Acerca de mi</a></div>
</body>
我的css文件(estilo.css):
#acerca{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform:rotate(90deg);
-sand-transform:rotate(90deg);
position: relative;
top: -233px;
left: 462px;
width: 123px;
height: 23px;
z-index:100;
}
我的js文件(misfallbacks.js)
Modernizr.load({
test:Modernizr.csstransforms,
nope:['transformie/EventHelpers.js/','transformie/cssQuery-p.js','transformie/sylvester.js','transformie/cssSandpaper.js']
);//Fin de monernizr on load
它在safari,chrome,opera,Firefox和IE9上运行得很好但是当我尝试IE8或IE7时,我在控制台上收到以下错误
SCRIPT5007: Unable to get value of the property 'addEventListener': object is null or undefined EventHelpers.js, line 49 character 9
我添加了一个console.log来试图找出发生了什么并在这里去了那一行它是(EvenHelpers.js):
me.addEvent = function(obj, …我正在使用html5/javascript getUserMedia api编写一个js应用程序,如果可用的话,它将使用设备的相机.我正在使用Modernizr来检测(浏览器的)功能,如下所示:
if (Modernizr.getusermedia) {
并在真正的块内:
navigator.getUserMedia(
{ // we would like to use video but not audio
// This object is browser API specific! - some implementations require boolean properties, others require strings!
video: true,
audio: false
},
function(videoStream) {
// 'success' callback - user has given permission to use the camera
// my code to use the camera here ...
},
function() {
// 'no permission' call back
console.log("user did not give access to the camera");
} …我有RequireJS和Modernizr的问题.
我想要Modernizr资源.以及身体的其他一切.原因是Modernizr需要在DOMContentLoad之前做一些事情.我希望能够使用RequireJS将Modernizr模块加载到其他模块中.如何在开发和生产环境中实现这一目标？我使用requirejs来拉取所有依赖项并缩小所有资源.并且yeoman构建取代<script data-main="scripts/main" src="scripts/vendor/require.js"></script>了缩小版本.
在身体标签下:
<!-- build:js ikl.app.js -->
<script data-main="scripts/main" src="scripts/vendor/require.js"></script>
<!-- endbuild -->
<script>
requirejs.config({
paths: {
'jquery' : 'vendor/jquery',
'handlebars' : 'vendor/handlebars',
'ember' : 'vendor/ember',
'ember-data' : 'vendor/ember-data',
'modernizr' : 'vendor/modernizr' // This should be removed
},
baseUrl: 'scripts',
shim: {
'jquery' : {
exports : 'jQuery'
},
'ember': {
deps: ['jquery', 'handlebars'],
exports: 'Ember'
},
'ember-data': {
deps: ['ember'],
exports: 'DS'
},
'handlebars': {
exports: 'Handlebars'
},
'modernizr': {
exports: 'Modernizr'
}
}
}); …如果没有针对新输入类型的html 5本机浏览器支持,我想显示不同的控件.
我希望做这样的事情:
<p ng-show="{{Modernizr.inputtypes.datetime-local}}">Modernizr says datetime-local is supported!</p>
然而,似乎Modernizr不适用于Angular表达式.
是这样的方法将我感兴趣的所有Modernizr值放在启动时的根镜上,这样它们可以用在表达式中还是有更好的方法？
我曾经依赖
var supportsTouch = 'ontouchstart' in document;
测试移动和桌面浏览器中的触摸支持.基于该测试,我将eventListeners绑定到click或touch事件.这适用于所有当前浏览器版本,但Chrome Canary(24.0.1275.0 canary)的最新更新,当然DEV版本未通过此测试.
我检查了当前的modernizr测试,但也返回了误报,这意味着它表明即使该功能被禁用,chrome也支持触摸.
我目前的解决方法是首先测试任何类型的移动浏览器,并且仅当返回肯定时使用上述测试来检查触摸.缺点是你不能在chrome的开发工具中使用方便的"模拟触摸事件"选项.想法？
我正在尝试加载使用requireJS动态检测的Modernizr功能.
由于Modernizr内置了AMD支持,这应该不是问题.
我的requireJS配置包含Modernizr源目录和功能检测目录的路径:
requirejs.config({
paths: {
"modernizr" : "components/modernizr/src",
"feature-detects": "components/modernizr/feature-detects"
}
});
让我们假设我的一个观点需要svg测试.
我的视图定义可能如下所示
define(["feature-detects/svg"], function() { .. });
遗憾的是svg.js找不到Modernizr.js因为所有功能都检测到并且Modernizr源文件加载Modernizr而没有指定任何目录:define(['Modernizr'], ...
这导致了一个非常难看的require.config
requirejs.config({
paths: {
"Modernizr": "components/modernizr/src/Modernizr",
"addTest": "components/modernizr/src/addTest",
"ModernizrProto": "components/modernizr/src/ModernizrProto",
"setClasses": "components/modernizr/src/setClasses",
"hasOwnProp": "components/modernizr/src/hasOwnProp",
"tests": "components/modernizr/src/tests",
"is": "components/modernizr/src/is",
"docElement": "components/modernizr/src/docElement",
"feature-detects": "components/modernizr/feature-detects"
}
});
有没有更简洁的方法告诉requireJS components/modernizr/src/无法找到文件时进行搜索？
更新
我创建了一个示例github项目,其中包括基本设置和运行演示.
有没有办法用JavaScript检查客户端浏览器是否支持GEO-URI方案？
我想将不支持的浏览器的坐标显示为地图的链接
<a href='http://osm.org/#map=18/52.51627/13.37769'>Berlin</a>
以及支持的浏览器(如智能手机)作为其本机应用程序的链接.
<a href='geo:52.51627,13.37769'>Berlin</a>
javascript progressive-enhancement graceful-degradation modernizr polyfills