LESS.CSS and CSS file replacement with JS on the fly issue

Question

I've got the following problem - I'm using a simple JS code to replace CSS file on the fly, depending on the browser window size. It looks like this:

<script type="text/javascript">
//<![CDATA[
<!--
function adjustStyle(width) {
    width = parseInt(width);
    if (width < 701) {
        $("#size-stylesheet").attr("href", "narrow.css");
    } else if ((width >= 701) && (width < 1120)) {
        $("#size-stylesheet").attr("href", "medium.css");
    } else {
       $("#size-stylesheet").attr("href", "wide.css"); 
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

-->
//]]>
</script>

However, in addition to that - I'm also using LESS.CSS (http://lesscss.org/). Well, those two don't work together well - with LESS, as I understand, CSS is embedded into HTML document itself, so the CSS file isn't replaced. Is there any way to make it work? Or maybe a better way ?

"with LESS, as I understand, CSS is embedded into HTML document itself" Incorrect. LESS simply compiles into plain CSS. Do it server-side for production, and you're golden. Simply link to the .less files instead and have your server do the compiling (and caching) — xec
– xec, Commented Oct 29, 2013 at 15:56

Prisoner · Accepted Answer · 2013-10-29 15:52:43Z

2

Can't you just use media queries?

<link rel='stylesheet' media='screen and (max-width: 701px)' href='narrow.css' />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 1120px)' href='medium.css' />
<link rel='stylesheet' media='screen and (min-width: 1120px)' href='wide.css' />

answered Oct 29, 2013 at 15:52

Prisoner

27.7k11 gold badges78 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Irminsul Over a year ago

Well, I was thinking about it. I decided to use jQuery instead, because of browser compability - versions below IE9 don't support media queries?

Collectives™ on Stack Overflow

LESS.CSS and CSS file replacement with JS on the fly issue

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related