- This topic is empty.
June 29, 2014 at 3:15 pm #174066
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
linktag 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:nonein the pertinent css file.
I think the solution with jQuery
elsewould indeed download only one css, and I could also use jQuery in the
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.June 29, 2014 at 11:27 pm #174075
You do realise that the linked article is 4 years old and things have moved on since?June 30, 2014 at 4:58 am #174090
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.June 30, 2014 at 7:00 am #174112
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).June 30, 2014 at 7:18 am #174115
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.June 30, 2014 at 7:23 am #174116
….Wolfcry? Where?June 30, 2014 at 7:41 am #174117
Oops….now I’m in trouble.June 30, 2014 at 7:53 am #174118
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-faceproperty. 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-facedeclaration, 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?June 30, 2014 at 8:52 am #174121
I suppose that if the css files are downoaded, so will be the fonts ¿?, and they can be a bit heavy.
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.
- The forum ‘Other’ is closed to new topics and replies.