0

I have something like this in my HTML document

<link href="<?= base_url('css/style.css') ?>" rel="stylesheet" media="(min-width: 1210px)"/>
<link href="<?= base_url('css/style-tablet.css') ?>" rel="stylesheet" media="(min-width: 740px) and (max-width: 1209px)"/>

So as you can see I have 2 css files with media in these link tags.

These 2 files are 80% the same, just with small changes that makes this layout 100% RWD.

But as I said 80% are the same. So this is redundant in size, in request count and processing needing/time.

I have already combined them into one, but I did it manually, I took my very long time, about an hour. Constantly checking what is different and manually writing in one bigger css media inside and things that are in tablet version that aren't in desktop version.

Maybe I could do this faster?

So my question is, is there a way to do this combining/merging somehow faster or automatically?

Krystian Polska
  • 1,286
  • 3
  • 15
  • 27

1 Answers1

1

You might want to use the @import method, which would allow you to have your main styles in one sheet and only the mobile styles in the other but only use one <link> element. There are some speed issues which, among other related information, is covered in This SO Answer, but the way this would work in your example is to only have one <link href="<?= base_url('css/style.css') ?>" rel="stylesheet" media="(min-width: 1210px)"/>

And inside the main file, you would have a width-dependent reference in that file that looks similar to this:

@import url("/css/style-tablet.css") (min-width: 740px) and (max-width: 1209px);

As far as speeding up a merge, WinMerge, is a great (and free) tool that has been useful for me in the past.

If you want to do merging like this automatically, you are probably going to need to work with a CSS preprocessor like LessCSS or SASS.

mtr.web
  • 1,505
  • 1
  • 13
  • 19