modernizr

Modernizr: how do I detect CSS display:table-cell support?

由 橙三吉。 提交于 2020-01-02 09:54:05
问题 I want to use display: table and display: table-cell for my layout in browsers that support it. In IE7 I simply want to float my columns (since I assume it's not possible to get it to work in that browser), but cannot find anything about how to do it using Modernizr. Can anyone help me please? I suppose I could use a browser conditional, but was hoping to not have to break out another CSS file. Thanks! 回答1: If all you want to do is apply a single different rule for IE7 and less, I'd be

How to use Modernizr for input type=datetime?

由 自作多情 提交于 2020-01-01 09:57:45
问题 I made a custom build for HTML input fields & attributes and included that on my page in the <head> but that's not working. What else do I need to do? 回答1: Not sure what it is you are trying to accomplish, but the "Input Attributes" option adds tests for the following <input> attributes: autocomplete , autofocus , list , placeholder , max , min , multiple , pattern , required , and step . -- Not sure what this has to do with <input type="datetime" ...> elements? The "Input Types" option does

Modernizr checks to detect firefox [closed]

由 烈酒焚心 提交于 2020-01-01 05:49:06
问题 Closed . This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed 2 years ago . What are the possible checks can be made to detect firefox features using modernizr? 回答1: Browser detection is unfortunately still necessary for things like video and audio since all browsers promote different formats. I think you'll find your answer here, Natto: http:/

Add ancestor selector in current SASS nesting

由 |▌冷眼眸甩不掉的悲伤 提交于 2019-12-30 11:54:06
问题 I would like to use Modernizr classes but I can't see how to do it properly with SASS in a current nesting selectors. How to optimize: .page-home .content .rows .row background: blue .images width: auto html.no-touch .page-home .content .rows .row &:hover background: red html.touch .page-home .content .images max-width: 50px To render something like : .page-home .content .rows .row { background: blue; } html.no-touch .page-home .content .rows .row:hover { background: blue; } .page-home

Detect different kind of scrollbars (eg. normal / hidden osx)

由 守給你的承諾、 提交于 2019-12-30 06:22:05
问题 Using responsive Layout and a lot of CSS to create a Webpage, I am having a problem with scrollbars being hidden or shown and changing the layout by 17px. The main problem is that on OSX the scrollbars hover over the entire Layout without affecting it, but in any browser on Windows for example the scrollbar is part of the layout and therefore moving it to the left by its width of 17px. Trying to solve this I started to detect browsers like: if($.browser.chrome) { // adapt layout by 17px }

CSS3 animation-fill-mode polyfill

由 99封情书 提交于 2019-12-30 04:04:09
问题 Preface Let's pretend that a div is animated from opacity:0; to opacity:1; and i want to keep opacity:1; after the animation ends. That's what animation-fill-mode:forwards; does. @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>​ Run it on jsFiddle Note 1: i didn't include the vendor prefixes here to simplify Note 2: that's just an

How to detect if Media Queries are present using Modernizr

由 妖精的绣舞 提交于 2019-12-30 03:49:10
问题 I'm trying to detect whether media queries are present using Modernizr 2, then loading in respond.js if appropriate. I've put this in my script.js file... Modernizr.load({ test: Modernizr.mq, yep : '', nope: 'mylibs/respond.js' }); What am I doing wrong? I'm really surprised there isn't an example of how to do this with Media Queries on the Modernizr site. Here is the version of Modernizr I'm using... http://www.modernizr.com/download/#-backgroundsize-borderradius-boxshadow-iepp-respond-mq

如何检测是否禁用了JavaScript？

由 梦想的初衷 提交于 2019-12-29 14:25:10
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 今天早上有一篇帖子问有多少人禁用JavaScript。 然后我开始想知道可以使用什么技术来确定用户是否禁用了它。 有谁知道一些简单/简单的方法来检测JavaScript是否被禁用？ 我的目的是警告您，如果没有启用JS的浏览器，站点将无法正常运行。 最终，我想将它们重定向到可以在没有JS的情况下运行的内容，但是我需要将此检测作为占位符才能启动。 #1楼 在主体上使用.no-js类，并基于.no-js父类创建非javascript样式。 如果禁用了javascript，则将获得所有非javascript样式；如果有JS支持，则将替换.no-js类，从而照常提供所有样式。 document.body.className = document.body.className.replace("no-js","js"); 通过modernizr在HTML5样板 http://html5boilerplate.com/中 使用的技巧，但您可以使用一行JavaScript来替换类 Noscript标记还可以，但是为什么可以使用CSS完成HTML中的多余内容 #2楼 您可以使用简单的JS代码段来设置隐藏字段的值。 回发后，您知道是否启用了JS。 或者，您可以尝试打开一个快速关闭的弹出窗口（但是可能会看到）。 此外

Test whether a device has Flash enabled, Modernizr style

由 时光毁灭记忆、已成空白 提交于 2019-12-25 06:38:26
问题 Is there a way to test whether a device supports Flash, similar to the way http://www.modernizr.com can feature-detect browsers and add a class to the body? 回答1: The template files created by Flash or Flashbuilder etc. have javascript checks in place to verify the user has the correct flash player version installed, if not they are given the option to download the player. You can replace this download link with anything you want so it'll fall back on whatever you choose if there is no flash

Detecting for -webkit-apperance with Modernizr

由 こ雲淡風輕ζ 提交于 2019-12-25 03:52:26
问题 Can anyone tell me how to detect -webkit-appearance, moz-apperance, or appearance using Modernizr? I have custom selects, and checkboxes that use these and I need to ensure the additional styles are not applied on those browser that dont support these properties. Thanks 回答1: I'm pretty certain that Modernizr doesn't include a detection routine for this feature yet -- it's just too new. However, as it's a CSS property, you should be able to detect it fairly simply for yourself without needing
订阅 modernizr