Best practices for resolution specific stylesheets

[meestevezaguado]

I wanted to comment on this article but the comments are closed =(

I’m a bit confused. Let me air my thoughts for a minute:

Let’s say I design mobile first and have a main.css with the whole design of the mobile layout. Then, suppose that I use two extra css files to add or modify the main.css so that it adapts to bigger sizes (tablets, desktops, etc). If I use the media queries in the link tag as shown in the article… Wouldn’t all the css files be downloaded independently of the device I use? Then it wouldn’t make any difference if I placed those modifications in the same css file, and I would also have only one http call… ¿?

Also some explorers don’t support media queries… =(

It shouldn’t be a big deal because I can make the design fluid, and it will work for mobile and desktop. But for example, images appearing in the DOM are downloaded to the smartphone even if there is a display:none in the pertinent css file.

I think the solution with jQuery if‘s and else would indeed download only one css, and I could also use jQuery in the img tag to load a bigger or smaller image in the src attribute depending on the viewport size. But then some people say you should avoid JavaScript in your mobile version because downloading JavaScript hurts performance on mobile devices… However there are solutions for device detection that use JavaScript… ¿?

But if you use other useful JavaScript files like modernizr.js, that only adds to the JS that you should load on the mobile…

I really don’t know what to do.

Excuse me if this topic has been already proposed for discussion and feel free to redirect me.

[Paulie_D]

You do realise that the linked article is 4 years old and things have moved on since?

[meestevezaguado]

No, I don’t know how to read dates.

Thank you for taking the time to answer my question. I thought we were here to learn. Anyway, I’ll use the Adaptive Images tool for the images and figure out the rest.

Have a good day sir.

[Senff]

If you’re worried about data being downloaded that the user is not going to need…. YES, the CSS styles for all screen sizes (media queries) will be downloaded if you put it all in a single CSS file, but they won’t all be executed. That’s OK though — unless your CSS file is ridiculously large, it’s fine that this happens.

Images is a different thing though. For years, this has been a problem because we (developers) wanted to come up with a way where mobile devices don’t actually download images that it’s not going to show anyways.

(Whereas it’s OK to load some CSS styles that are not being used, it’s a problem for images because this is where the data is significantly more).

This problem is being solved with the new PICTURE element — but not all browsers fully support it right now so you’ll have to be patient with that, and probably use a different solution for the time being (Adaptive Images tool is one of them).

[Paulie_D]

No, I don’t know how to read dates.

Unfortunately, not everyone notices the dates on older artices

Thank you for taking the time to answer my question. I thought we were here to learn.

My apologies, I fully intended to answer in greater depth but I was called away at short notice and was unable to do so.

However, I see that [EDIT] Senff has done his usual excellent job in his answer.

Peace.

[Senff]

….Wolfcry? Where?

[Paulie_D]

….Wolfcry? Where?

Oops….now I’m in trouble.

[meestevezaguado]

Paulie_D: No problem man, apology accepted =)

Senff: Thank you for your anwser.

Yeah, hopefully my css files aren’t too big for a mobile to complain if I just put all the media queries inside the main.css instead of having separate files.

My concern with the css downloading was more related with the @font-face property. I really enjoy tests like this one on font-face support (there is another nice test regarding image downloading here).

I suppose that if the css files are downoaded, so will be the fonts ¿?, and they can be a bit heavy. Google Fonts has a nice speedometer for each font where you can check that. If the mobile doesn’t understand the @font-face declaration, there’s no problem, but if it can, and the fonts are downloaded, that could be a performance issue. My thinking is to have the font-face declaration in a separate file that is only loaded for powerful devices.

Or maybe I’m boiling my head in excess with the performance issue, I really don’t know XD. So I would be glad to hear your best practices on this. How do you do it?

[Senff]

I suppose that if the css files are downoaded, so will be the fonts ¿?, and they can be a bit heavy.

Correct.

So I would be glad to hear your best practices on this. How do you do it?

I don’t really spend much time on it, to be very honest. The sites I usually work on aren’t very heavy (or attract thousands of visitors) so it’s not really something I try to optimize much. So in most cases, I just let the custom fonts be loaded on each device.

[Author]

Posts