Less CSS Syntax Useful for Modernizr

LESS CSS syntax useful for modernizr

You can now use the & operator to address this very problem. The following syntax should work in less.js, lessphp, and dotless:

b {
  a & {
    color: red;
  }
}

This is compiled into:

a b { color:red; }

So, for the given example you could use the following syntax:

#header {
    .logo { color:white; }
    .no-rgba &,
    .no-js & {
        .logo { color:green; }
    }
}

... which would be compiled into:

#header .logo {
    color:white;
}
.no-rgba #header .logo,
.no-js #header .logo {
    color:green;
}

Improve Less nesting for this rule?

Simply add the & (parent selector) as one of the comma separated selector list within the top level nesting. Less compiler would automatically replace it with the full parent selector as it always does.

body.my-class {
  &, /* this will replaced with body.my-class as is always the case with parent selectors */
  html.ie7 &,
  html.ie8 &,
  html.ie9 &{
    background: red;
  }
}

The above code when compiled would result in exactly the same CSS output as required.

body.my-class,
html.ie7 body.my-class,
html.ie8 body.my-class,
html.ie9 body.my-class {
  background: red;
}

Two instances of Modernizr on one page

It definitively is possible to have two instances of Modernizr on one page; but in order to have that you have to manually rename the global object to something else since Modernizr is exposed to window directly:

    e.Modernizr = Modernizr // e is internal ref. to window object
}(window, document);

This however may be considered a dirty patch since you have to alter the production code (& to maintain that alteration through update cycles manually), download and execute exactly the same basic functionality twice, which is less optimal.

Another approach would be to build all that is needed immediately for first batch of (essential) tests and than to utilize Modernizr.addTest (it has to be included in build) later on, for non-essential functionality.

Source and doc-like comments.

Of course, you'd have to write your tests. You may relay on official Modernizr tests, but addTest called outside of the Modernizr's factory method lacks some useful methods (for example, things like Modernizr's internal createElement()).

You have to make choices since there is no way to subsequently add other tests out of the box.

Less CSS - How to return value in viewport with (vw)

The best way to achieve the expected output would be to multiply the value by 100vw. This would be the most meaningful and easily understandable method.

a{
  width: 700/1400 * 100vw;
}

The below method of using unit() function works too but I wouldn't really recommend it.

One of the primary reasons why I wouldn't recommend it is because I am not sure if that is supposed to work as it does. The unit() function is supposed to take a number as its first parameter and add the units to it but a percentage value is not exactly a number and this may not work in future versions depending on how the Less core team view it.

I read the docs and it seems like the first parameter can be a number with or without a dimension but I still wouldn't recommend it because the earlier method is far more easier to understand than the usage of functions.

b{
  width: unit(percentage(700/1400), vw);
}

Look Up Modernizr Settings

Yes! If you view the source of your custom build, you'll see on the second line a link to the custom configuration, i.e.:

/* Modernizr 2.7.1 (Custom Build) | MIT & BSD
 * Build: http://modernizr.com/download/#-fontface-borderradius-boxshadow-opacity-cssanimations-csstransforms-csstransitions-geolocation-inlinesvg-svg-touch
 */

Copy/paste that link in your browser, and there's your custom config.

The least expensive method for old IE fallback: modernizr, star hacks or otherwise?

For this kind of style, the correct answer is the first one you listed:

.class {
     background: grey;
     background: rgba(0,0,0,0.3);
}

Specify the fall-back options first, followed by the preferred option.

IE will set the background to grey because it doesn't support rgba; other browsers will use the rgba version as intended.

The reasons this is the best answer are:

1. It is the canonical "correct" answer for this exact scenario: CSS was designed to work this way, with exactly this kind of situation in mind.

2. It is the least expensive option, because no browser has to do any extra rendering or scripting. IE will completely ignore the second background, so nothing extra happens there; other browsers will parse both, but parsing the second will overwrite what has been parsed for the first, so the only overhead is the parsing, which would have to be done anyway for whichever option you pick.

Of the other possible solutions, Modernizr is great, but is overkill for this scenario -- if you have a solution that doesn't involve any scripting, there's no need to use a scripted solution. And the CSS hacks should be avoided at all costs. There may be cases where they are worth using, but I personally haven't seen a legitimate use for one since I stopped trying to support IE6.

The other solution that is available but which you didn't mention is conditional comments: ie use IE's <!--[if IE]> syntax to load an alternative stylesheet for IE. However I would avoid this as well if possible, and again, the need for this kind of solution is fading away as IE6 and IE7 become more distant memories.

Finally, a slightly different option for you: Just ignore old IE. For some things, IE8 may not render things the way you want, and it's a pain to make it do so. In these cases, it is a perfectly legitimate strategy to just let it fail. For the example in the question, this isn't necessary, as we have a perfectly good CSS solution, but for other more complex styles, consider how bad the site will look if IE doesn't get things right; if it's still usable, then there may be a case for simply letting it slide. This option needs to be weighed against the number of users that will be affected and how much of a problem it causes for them, and also the requirements you're working to, but it should be considered as an option.

Javascript (Modernizr/YepNope.js) syntax and usage

You are correct that you can paste the JavaScript code without the script tags into your Modernizer file as long as you do it after the Modernizer object has been defined—that is, at the end of the Modernizer file.

The console.log function does not log to a file on your server but to the JavaScript console in your web browser. Not all web browsers have a JavaScript console, but those that do you can view log messages and error messages there. Both Firefox and chrome have JavaScript consoles you can open. Remember console.log should only be in your code for debugging.

One caveat is that some versions of Internet Explorer do not have console.log defined when the JavaScript console is not open in the window.
This will cause your JavaScript to halt unexpectedly. Use Firefox or Chrome to examine how your code runs if you have a choice, it may save you a lot of time.

The alert function is a less convenient way to debug. It will popup a dialog window in your browser with your message. You will need to dismiss the message to continue running the JavaScript program. Again, nothing will be logged serverside.

---

Related Topics