0

I have a bunch of content pages that follow a modular design with 10 or so variable components on the page. It's relatively complicated in that there are a whole bunch of media queries to make the various components responsive and to ensure that they adapt at the same times.

The pages are single column.

I've been tasked with ingesting this content into 50+ other sites that have varying available widths for their content with left and/or right columns either side of the content.

With the single-column media query snap-points the content doesn't resize as desired so I need to use different snap-points for all of the sites that are ingesting the content.

I've looked at using a CSS preprocessor but that unfortunately isn't available and a large number of our users are stuck using IE11 so I don't think I can use regular CSS vars.

I'm hoping to avoid needing a fresh copy of the CSS for every site that ingests the content.

I'll be ever so grateful for any suggestions of a solution or any ideas of avenues that I can explore.

Marc
  • 1
  • 2
  • As you can't use CSS variables, could you instead set the media queries up with Javascript, using JS variables instead? – A Haworth Mar 01 '21 at 16:22
  • That's kind of where I'm trying to get :) Either rewriting the CSS or with JS vars or breaking up the CSS into a bunch of sheets based on the media query and only loading as appropriate. There are 32 queries so it would be a lot of stylesheets but since real users don't resize our pages between the different options it mightn't matter too much. If the media queries alone didn't account for 1700 lines I may have just written the CSS on the fly with JS. – Marc Mar 01 '21 at 16:54

2 Answers2

0

So here's what I've ended up doing.

First I separated the CSS into individual stylesheets per media query e.g. 1024.css, 768.css etc

Then I added some basic JS for vars and to add import statements for each sheet (there will be a bunch more imports and vars but essentially):

// vars
widerBy = 300;
media1200 = 1200;
media1024 = 1024;
media768 = 768;

theLinker = '<style>'+
'@import url(css/'+media1200+'.css) only screen and '+
'(max-width: '+(media1200+parseInt(widerBy))+'px)';

$(document).ready(function {
  $('head').append(theLinker);
});

Not very fancy but it solves my issue.

Edit: Since the new pages are going to be various predetermined numbers of px wider, based on their additional columns, I'm also setting a var with that difference to add to the original values for calculating when the CSS should be imported rather than needing to create 32 vars for each new site.

Will also need to account for responsive changes of new sites so as to alter the 'widerBy' var as needed.

Marc
  • 1
  • 2
0

You can accomplish this with matchMedia.

I gave a usage example in this answer.

According to MDN, it is supported by IE10+, but I haven't tested in IE.

grandinero
  • 1,155
  • 11
  • 18