Tag: modernizr

检测对背景附件的支持：已修复？

有没有办法检测浏览器对后台附件的支持：修复？ 编辑：虽然这个function在桌面浏览器上得到广泛支持，但它在便携式设备上的支持很差，我希望能够检测到该function。

如何测试移动webkit

我正在寻求建立一个新的网站，并希望采取负责任的“移动优先”的方法。 这种方法的一个原则是只加载你需要的东西，并避免包含大量浪费的库和框架，直到你真正需要它们为止。 为此，我打算使用modernizr2来测试function，然后只加载所需的文件和库。 在javascript方面，我真的很有兴趣使用类似zepto.js（ http://zeptojs.com/ ）的东西，这是一个小巧的javascript库（2-5k），针对移动webkit（和单独的移动webkit）进行了优化一个jquery兼容的语法。 它也被设计为具有全开jquery的“热插拔”。 所以我的策略是（伪代码）： 测试移动webkit 如果（true）加载zepto.js if（false）加载jquery 但现在我的问题是：你们建议用什么（未来certificate）技术来检测移动webkit，最好是以纯粹的javascript方式（不使用jquery，插件或其他库）并且可以与modernizr的测试API集成？

html5表单validationmodernizr safari

这是工作示例： http ： //jsfiddle.net/trustweb/sTSMW/ 我注意到使用safari 5.05的错误 如果我在html5页面中设置一个表单，如果modernizr测试失败，我将使用jquery来补充function： Modernizr.inputtypes.email && Modernizr.input.required && Modernizr.input.placeholder 与其他浏览器（firefox，chrome和opera）一起，浏览器validation表单 在ie jquery中替换validation函数 在safari中它不起作用，在测试html5兼容性时，modernizr似乎返回true： yepnope( { test : Modernizr.inputtypes.email && Modernizr.input.required && Modernizr.input.placeholder, nope : ‘http://www.trustweb.it/webforms_home.js’ });

Modernizr加载方法

我有使用Modernizr加载的问题。 我正在使用Modernizr，jQuery和Nivo滑块。 有时当我刷新我的主页时，我的滑块显示不正确，有时候一切都很棒。 我的方法是正确的吗？ HTML： 在master.js中： Modernizr.load([ { load: ‘https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’, complete: function () { if ( !window.jQuery ) { Modernizr.load(‘js/plugins/jquery-1.7.1.js’); } init(); } }, { load: ‘https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js’, complete: function () { if ( !window.jQuery ) { Modernizr.load(‘js/plugins/jquery-ui-1.8.16.js’); } } } ]); // START ****** function init() { $(document).ready(function(){ // Home > Slider ———————————————- if($(‘#slider’).length){ Modernizr.load([ […]

resize浏览器时，Modernizr Media查询不起作用

我在JavaScript中使用Modernizr媒体查询来更改元素边距并添加“小”类。 当我调整浏览器大小时，我的Modernizr媒体查询不起作用，但是当我刷新页面然后它工作。 我知道我可以使用jQuery $( window ).resize()函数解决这个问题，但我想用媒体查询来解决它。 任何人都能告诉我如何解决这个问题吗？ Foundation 5 $(document).ready(function() { if (Modernizr.mq(‘(max-width: 767px)’)) { $(“#secondary”).addClass(“small”); $(“#secondary”).css(“margin”, ” 25px”); } }); #primary { width: 300px; height: 200px; background-color: black; } #secondary { margin: 0 auto; width: 250px; height: 150px; background-color: white; position: absolute; }

CSS3动画填充模式polyfill

前言 让我们假设一个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; }​ just a test​ 在jsFiddle上运行它 注1：我在这里没有包含供应商前缀以简化 注2：这只是一个例子，请不要回答“只使用jQuery fadeIn函数”等。 有些事要知道 在这个答案中，我读到Chrome 16+，Safari 4 +，Firefox 5+支持animation-fill-mode 。 但Chrome 1+和Opera也支持 animation 。 因此，即使不支持fill-mode使用Modernizr的一般测试也可能返回正值。 为了定位animation-fill-mode我在Modernizr上添加了一个新测试： Modernizr.addTest(‘animation-fill-mode’,function(){ return Modernizr.testAllProps(‘animationFillMode’); }); 现在我有一个CSS的.no-animation-fill-mode类和JavaScript的Modernizr.animationFillMode 。 我还从CSS3动画规格中读到： 文档样式表中指定的动画将从文档加载开始 […]

如何禁用响应式设计的JavaScript

我一直在使用超大型jQuery来浏览我网站的幻灯片背景。 我正在使网站响应并使用css媒体查询。 我希望能够在480px以下时禁用该脚本。 这是实际滑块背景的脚本 $(document).ready(function(){ jQuery(function($){ $.supersized({ // Functionality slideshow : 1, // Slideshow on/off autoplay : 0, // Slideshow starts playing automatically start_slide : 1, // Start slide (0 is random) stop_loop : 0, // Pauses slideshow on last slide random : 0, // Randomize slide order (Ignores start slide) slide_interval : 3000, // […]

通过Modernizr加载jQuery后运行自定义代码

我正在开发一个新网站，并决定第一次使用Modernizr。 我很确定它是如何工作的一般要点，但我正在寻找关于加载jQuery然后运行jQuery代码的最佳实践的一些建议。 我目前有以下内容作为我页面上的最后一项加载： Modernizr.load([ { load: ‘//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js’, complete: function(){ if( !window.jQuery){ Modernizr.load(‘/scripts/jquery-1.11.1.min.js’); } } }, { load: ‘//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js’, complete: function () { if ((typeof $().emulateTransitionEnd == ‘function’) == false) { Modernizr.load(‘/scripts/bootstrap.min.js’); } } } ]); 这会尝试从CDN检索jQuery，如果无法执行此操作，则会加载本地版本。 然后它使用我的站点上的引导程序组件所需的Javascript重复该过程。 我遇到的问题是我之后直接有一些jQuery代码： $(document).ready(function () { $(‘.wishlist-toggle’).click(function () { var nodeId = $(this).data(“node”); var id = $(this).data(“id”); var type = […]