modernizr | 易学教程

How can I use Modernizr to get border-radius working in IE8?

阅读更多关于 How can I use Modernizr to get border-radius working in IE8?

I know there has been numerous articles about obtaining rounded corners in IE8. My question is, how to use Modernizr to support CSS3/HTML5 features? For example to show rounded corners in IE8, I am using CSS-3 property -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; I have included Modernizr in my page, but still not able to see rounded corners in IE8. Modernizr does not enable features, it just tests if they are available. For CSS, it can also remove the need to use vendor specific properties such as -moz-* and -webkit-* allowing you to simply use the standard

Zerb Foundation 3 - IE7 Fix not working?

阅读更多关于 Zerb Foundation 3 - IE7 Fix not working?

问题 I am having an issue getting the IE7 fix for Zerb Foundation 3 (found HERE) I have changed the following: * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; *behavior: url(../javascripts/boxsizing.htc); } as well as: .button.dropdown > ul { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; *behavior: url(../javascripts/boxsizing.htc); display: none; position: absolute; left: -1px; background: #fff; background: rgba

Yepnope & Modernizr screen.width Conditions

阅读更多关于 Yepnope & Modernizr screen.width Conditions

问题 I am trying to (locally) use Yepnope with Modernizr to load CSS & JS Files. So I can manage the files better, and code easily. This is the currently layout: Modernizr.load([ { test: Modernizr.mq('all and (max-width: 1070px)'), yep: '/css/smartdevice.css','/js/smartdevice.js', } , { test: Modernizr.mq('all and (min-width: 481px) and (max-width: 1069px)'), yep: '/css/tablet.css','/js/tablet.js', }, { test: Modernizr.mq('all and (max-width: 1070px)'), yep: '/css/screen.css','/js/screen.js', } ])

Detect viewport units (with modernizr or normal js) and serve appropriate stylesheet

阅读更多关于 Detect viewport units (with modernizr or normal js) and serve appropriate stylesheet

I actually have an issue im trying to solve since 3 weeks. Im trying to test support for vw units and serve a seperate stylesheet when the browser doesnt support the unit I read the modernizr tutorials and am familiar with modernizr css detects but testing for vh units (viewport relative units) is something I didnt find on the net. So basically: Scenario 1: Browser supports vw unit then serve stylesheet A. Scenario 2: Browser doesnt support it then serve stylesheet B. I did find out that there is a non-core detect called Modernizr.cssvwunit but I honestly have no idea where to start or how to

Modernizr How to do border-radius

阅读更多关于 Modernizr How to do border-radius

问题 Could you please make me little bit clear about Modernizr . If I use a feature (say, border-radius ) and I run it using an older browser. Will the modernizer automatically add css to the page OR should I write code to render the control to view like having borders. If the second case is true, then WHY should I use Modernizr? 回答1: Modernizr gives you mostly ways to test for HTML5 support, and then load in shims for what you're missing so that you can code to one, modern standard. It doesn't

how to detect if browsers support custom elements

阅读更多关于 how to detect if browsers support custom elements

问题 I'm looking at modernizr which is supposed to help with feature detection which is supposedly the bees knees in figuring out if your website is compatible with a given web browser but I do not see anything that indicates that I can use it to detect custom HTML elements that we create & define in our content. If it's not modernizr, how do I reliably detect whether a browser is capable of handling custom HTML elements the "HTML 5" way? 回答1: Modernizr doesn't have a test for this at the moment,

Modernizr testing

阅读更多关于 Modernizr testing

How come this alerts both, yes and false? Modernizr.load([ { test: Modernizr.cssgradients, yep: alert('Supports it!'), nope: alert('Oh, damn! This browser sucks!') } ]); I'm using the latest chrome on OS X. Because you're calling alert() directly there, and the result from alert() (always undefined ) is assigned to the yep and nope properties. You need to wrap alert() in a function and assign that function instead: Modernizr.load([ { test: Modernizr.cssgradients, yep: function () { alert('Supports it!') }, nope: function () { alert('Oh, damn! This browser sucks!') } } ]); This still won't work

Conditionally load polyfills

阅读更多关于 Conditionally load polyfills

问题 I'm building a website which my target group is very general (ages 13-oo, so hello IE9, hello ancient android browser), so I need polyfills for some stuff (viewport, calc etc). Before I used Modernizr and some conditionals user agents to target IOS 6-7 etc. Then with yepnope.js I was loading the specific polyfills. Now that modernizr 3.0 is out, I noticed that the Modernizr.load() is deprecated. Also the yepnope.js library is deprecated. As they say on their website "There are new best

Is Modernizr.load (Yepnope) meant to be used in the <head>

阅读更多关于 Is Modernizr.load (Yepnope) meant to be used in the

Since Modernizr.load and Yepnope are asynchronous loaders, is it better performance-wise to use them in the <head> or at the end of the page? It depends on the resources being loaded. See this thread where Yepnope developer Alex Sexton says to combine all the resources into one call to the loader. In practice, if any of the resources you want to load with Modernizr.load or Yepnope affect what the user sees or needs when the page first loads, then IMO in most cases you want to call the loader after your critical resources but still in the <head> . Comment from yeapnope developer: It's better at

Why does accessing the localStorage object in Internet Explorer throw an error?

阅读更多关于 Why does accessing the localStorage object in Internet Explorer throw an error?

I'm working on a client issue where Modernizr unexpectedly does not detect the support for the localStorage object in Internet Explorer 9. My page correctly uses the HTML 5 doctype ( <!DOCTYPE html> ) and the developer tools report the page has a Browser Mode of IE9 and a Document Mode of IE9 standards so I would expect this to work. I've debugged into the following try / catch block in Modernizr and discovered a JavaScript error is thrown as soon as the localStorage object is accessed. tests['localstorage'] = function() { try { localStorage.setItem(mod, mod); localStorage.removeItem(mod);