对于那些没有完全实现html5表单的浏览器(涉及Modernizr,YepNope,Jquery验证的解决方案......),我已经看到了很多不同的回退建议,但是我还没有设法得到任何有效的工作.
基本上除了添加一个我已经设法使用Modernizr和JQuery datepicker的日期选择器,我真正需要做的是让验证在所有浏览器中工作(主要优先级是电子邮件验证)
Chrome和FF一切似乎都是本机工作,但令人惊讶的是Safari没有正确的电子邮件地址验证.IE显然也不支持它
任何人都可以帮助一个相当简单的后备(可能通过Modernizr)？
谢谢
我似乎无法在我的网站上使用modernizr.我已将javascript文件添加到文件夹中并调用它们.我还在html中添加了no-js,但仍然没有.
当我查看源代码时,它不会像它应该填充html.
我没有将它用于css3元素,所以我不需要任何后备样式,我只是希望能够使用更多的语义标签,如标题,导航,页脚等...
这是我的文档代码:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset=utf-8>
<title></title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<script type="text/javascript" src="/js/modernizr-1.7.min.js"></script>
我一直在测试库以启用HTML5和加载JavaScript.我在IE7中使用现代化器2,在XP上使用Firefox 4等等时遇到了一些奇怪的现象.(在IE6和8中正常工作)
当包含脚本时,浏览器只是将屏幕呈现为空白.
http://ibob.dk/velkommen-narrow-head-modrn.html
如果删除所有样式,我已设法让它显示内容.但是向下滚动会导致浏览器污染内容.
我没有看到JavaScript或HTML解释错误.有人暗示发生了什么事吗？
我为HTML输入字段和属性创建了一个自定义构建,并将其包含在我的页面中,<head>但这不起作用.我还需要做什么？
如何使用Modernizr测试浏览器是否支持CSS3 calc()属性？
我试过了:
if (Modernizr.testProp('cssCalc')) {
console.log('CSS calc() supported');
}
但这只会在控制台中返回" undefined ".
(我使用的是modernizr-2.6.2.js).
使用Modernizr进行浏览器功能检测的正确方法是什么？
由于一天,我发现了自耕农,我用它为我所有前端项目.
它包括grunt-modernizr - 至少我认为 - 下载库并在我调用构建任务时动态编译它
grunt build
但我有一个小问题:默认情况下,它不包括我们在网上可以看到的"非核心检测":modernizr custom builder
这是我的grunt-modernizr任务配置(Gruntfile.js文件的一部分):
modernizr: {
devFile: '<%= yeoman.app %>/components/modernizr/modernizr.js',
outputFile: '<%= yeoman.dist %>/components/modernizr/modernizr.js',
extra: {
'shiv' : true,
'printshiv' : false,
'load' : true,
'mq' : false,
'cssclasses' : true
},
extensibility: {
'addtest': true,
'prefixed': false,
'teststyles': false,
'testprops': false,
'testallprops': false,
'hasevents': false,
'prefixes': false,
'domprefixes': false
},
files: [
'<%= yeoman.dist %>/scripts/{,*/}*.js',
'<%= yeoman.dist %>/styles/{,*/}*.css',
'!<%= yeoman.dist %>/scripts/vendor/*'
],
uglify: true
}
实际上我想使用Modernizr.getusermedia,但作为非核心功能,它没有定义...因为grunt-modernizr配置似乎不允许非核心检测到包含.关于这一点的任何想法？
编辑:现代化任务不再起作用; …
我正在使用此脚本来显示和隐藏模态视图,但是我想在打开模态视图时禁用主体上的滚动,并在关闭时禁用它.
我试图修改JS代码,但它工作但它打破了开始动画.这是修改后的代码:
(function() {
var triggerBttn = document.getElementById( 'trigger-overlay' ),
overlay = document.querySelector( 'div.overlay' ),
bodyTag = document.querySelector( 'body' ),
closeBttn = overlay.querySelector( 'button.overlay-close' );
transEndEventNames = {
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd',
'msTransition': 'MSTransitionEnd',
'transition': 'transitionend'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
support = { transitions : Modernizr.csstransitions };
function toggleOverlay() {
if( classie.has( overlay, 'open' ) ) {
classie.remove( overlay, 'open' );
classie.add( overlay, 'close' );
var onEndTransitionFn = function( ev ) { …我是响应式设计界的新手.
我在我的设计中使用http://www.responsivegridsystem.com/.它告诉我添加以下标记
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements and feature detects -->
<script src="vendors/responsive/js/modernizr-2.5.3-min.js"></script>
由于媒体查询在IE8中不起作用,根据IE7的这个问题,IE8支持css3媒体查询我也使用以下标记
<!--[if lt IE 9]>
<script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
这些都需要吗？什么是html5shim,modernizr和css3mediaqueiries之间的区别？
我需要使用modernizr吗？因为我在js文件中没有做任何事情,比如jQuery.
现在使用modernizr加载条件javascript文件有哪些好的做法,因为在最新版本的modernizr中不推荐使用yepnope和.load.
以前能够使用.load函数. http://modernizr.com/docs/#load
Modernizr.load({
test: Modernizr.geolocation,
yep : 'geo.js',
nope: 'geo-polyfill.js'
});
现在.load与yepnope一起被弃用. https://github.com/SlexAxton/yepnope.js/
在yepnope被弃用之前参考答案 使用Modernizr加载脚本...不工作
我正在建立一个我的目标群体非常普遍的网站(年龄13岁,所以你好IE9,你好古老的android浏览器),所以我需要polyfills一些东西(视口,计算等).之前我使用Modernizr和一些条件用户代理来定位IOS 6-7等.然后使用yepnope.js我正在加载特定的polyfill.
既然modernizr 3.0已经出现了,我注意到了Modernizr.load()已被弃用.此外,不推荐使用yepnope.js库.正如他们在他们的网站上所说
"有一些新的最佳实践,你可能应该遵循."
但我找不到他们中的任何一个.谷歌搜索一段时间后,每个人都推荐Modernizr和Yepnope.但是这个问题是如此新鲜(弃用,新版本的Modernizr),我找不到任何新的替代方法.
也许使用一些模块加载器(如require.js)可以完成这项工作吗？如果是,怎么样？
modernizr ×10
javascript ×6
css3 ×3
html ×3
html5 ×3
polyfills ×2
css ×1
datetime ×1
forms ×1
getusermedia ×1
gruntjs ×1
html5shiv ×1
scroll ×1
validation ×1
yepnope ×1