modernizr

Add ancestor selector in current SASS nesting

由 只谈情不闲聊 提交于 2019-12-01 13:06:23
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 .content .images { width: auto; } html.touch .page-home .content .images { max-width: 50px; } SuperSkunk

How to load css3 pie only for ie7 and 8? But not for 9

由 牧云@^-^@ 提交于 2019-12-01 11:14:30
This is css to use CSS3 PIE border: 1px solid #696; padding: 60px 0; text-align: center; width: 200px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; background: #EEFF99; behavior: url(/PIE.htc); Specially behavior: url(/PIE.htc); My question is will this PIE.htc be downloaded by all browser or only in IE 7 and 8? I need to show round corner in IE7 and 8 too. So i thought instead of using Modernizr and writing another class and and image for round corner, CSS3 PIE will be good solution because whenever we will change the color and thickness of border and height of

How to load css3 pie only for ie7 and 8? But not for 9

由 匆匆过客 提交于 2019-12-01 08:53:30
问题 This is css to use CSS3 PIE border: 1px solid #696; padding: 60px 0; text-align: center; width: 200px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; background: #EEFF99; behavior: url(/PIE.htc); Specially behavior: url(/PIE.htc); My question is will this PIE.htc be downloaded by all browser or only in IE 7 and 8? I need to show round corner in IE7 and 8 too. So i thought instead of using Modernizr and writing another class and and image for round corner, CSS3 PIE

how would I detect if “multiple” attribute is supported for file input elements?

由 别来无恙 提交于 2019-12-01 04:13:11
Internet Explorer does not support the multiple attribute for <input type="file" /> . However, its not only IE that lacks this support... also certain mobile browsers do not support the multiple attribute. So simply detecting that the browser is IE is not the ideal solution. So how would I detect if the multiple attribute is supported for for <input type="file" /> with JavaScript? UPDATE It seems like Modernizr has support for new HTML5 input element attributes: http://modernizr.com/docs/#input The accepted solution seems to work, however, since I'm already using Modernizr, my solution is the

how would I detect if “multiple” attribute is supported for file input elements?

由 微笑、不失礼 提交于 2019-12-01 00:43:41
问题 Internet Explorer does not support the multiple attribute for <input type="file" /> . However, its not only IE that lacks this support... also certain mobile browsers do not support the multiple attribute. So simply detecting that the browser is IE is not the ideal solution. So how would I detect if the multiple attribute is supported for for <input type="file" /> with JavaScript? UPDATE It seems like Modernizr has support for new HTML5 input element attributes: http://modernizr.com/docs/

Modernizr reporting laptop as touch device in Chrome and FF

由 不羁的心 提交于 2019-12-01 00:01:11
问题 Bit of a weird one. I have a site I am working on. But, on my laptop (ASUS Zenbook) some of the features do not work. We spent a good amount of time using Firebug to try and get it working/work out what it was, with no joy! I then noticed that these features were actually created in CSS using :hover classes, but were also disabled for touch devices by including the class ".no-touch". I then looked at the classes that Modernizr had added to the HTML tag and ".touch" had been added along with

html5 form validation modernizr safari

由 我们两清 提交于 2019-11-30 20:46:12
this is the working example: http://jsfiddle.net/trustweb/sTSMW/ i notice an errore using safari 5.05 if i set a form as in an html5 page and i repleace the functionality with jquery if modernizr fail the test: Modernizr.inputtypes.email && Modernizr.input.required && Modernizr.input.placeholder with other browsers (firefox, chrome and opera) the browser validate the form in ie jquery replace the validation function in safari it dosen't work, modernizr seems to return true while testing html5 compatibilies: yepnope( { test : Modernizr.inputtypes.email && Modernizr.input.required && Modernizr

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

由 和自甴很熟 提交于 2019-11-30 19:31:07
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 } else if ($.browser.mozilla) { // adapt layout by 17px } else if ($.browser.safari) { // dont adapt layout

Modernizr Media query doesn’t work when resize browser

由 倾然丶 夕夏残阳落幕 提交于 2019-11-30 14:36:00
I use a Modernizr media query in JavaScript to change an element margin and add a class "small". My Modernizr media query doesn't work when I resize my browser, but when I refresh the page then it works. I know I can solve this problem using the jQuery $( window ).resize() function, but I want to solve it using a media query. Can any one tell me how I can solve this problem? <html class="no-js"> <head> <title>Foundation 5</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="modernizr.js"></script> <script type="text/javascript"> $

Modernizr Causes Content Security Policy (CSP) Violation Errors

由 痞子三分冷 提交于 2019-11-30 11:49:48
问题 I am attempting to use the new Content Security Policy (CSP) HTTP headers on a test site. When I use CSP in conjunction with Modernizr I get CSP violation errors. This is the CSP policy I am using: Content-Security-Policy: default-src 'self'; script-src 'self' ajax.googleapis.com ajax.aspnetcdn.com; style-src 'self'; img-src 'self'; font-src 'self'; report-uri /WebResource.axd?cspReport=true These are the errors from the Chrome browser console: Refused to apply inline style because it
订阅 modernizr