Css Media Queries single file or multiple files

Forum Moderators: not2easy

Message Too Old, No Replies

Css Media Queries single file or multiple files

analis

4:44 pm on Apr 15, 2018 (gmt 0)

Hi

hi I need a thing,
use 2 css one for desktop / tablet and one for mobile.

is it better to keep 2 separate files or is it better to have a single file with media queries inside?

<head>
<link href="desktop.css" media="screen and (min-width: 768px)">
<link href="mobile.css" media="only screen and (max-width: 767px)">
</head>

thanks

lucy24

7:23 pm on Apr 15, 2018 (gmt 0)

My personal opinion is that it is a matter of personal opinion. You can come up with pros and cons, but ultimately it comes down to which one you’re more comfortable working with.

Recursively: I, personally, would stick with a single stylesheet, because the vast majority of styling--colors and fonts and so on--will be the same regardless of media type, so you’d have to say the same thing twice.

Someone else, personally, would use two or more stylesheets, for equally good and valid reasons.

In the case of multiple stylesheets, would the two URLs represent two physical, hard-coded plain-text files? or would both be assembled via php-or-similar?

analis

7:29 pm on Apr 15, 2018 (gmt 0)

Two normal text files.

And for the loading speed of the page what do you think?

not2easy

7:38 pm on Apr 15, 2018 (gmt 0)

Do you have two entirely different CSS files for each media query? Aren't those two files mostly duplicate? Except for the few elements that need different settings, I mean. It doesn't seem to "save" any real loading time, if the purpose is page speed. If your page speed is a problem, image optimization might be more helpful.

NickMNS

12:01 am on Apr 16, 2018 (gmt 0)

I strive for no css files. This is a requirement of AMP, but I have adopted it for non-amp projects as well. This saves server requests, and forces you to be very frugal with styling. Also, the CSS request will not block first paint.

As to the specifics of this case. What happens when a device spans both conditions. Example would be the Pixel2 XL with a screen size of 411 x 823. What happen when the user changes the orientation from portrait to landscape? Does this force a new request for the second CSS file, or are both pages loaded immediately?

Also have you minified your CSS?
Are you serving compressed CSS files?

tangor

12:55 am on Apr 16, 2018 (gmt 0)

For some it is the number of server requests because CSS files are rather lightweight compared to other types. If the question is media queries being separated you have to ask why this would be a good thing and go from there.

Me? All in one so it loads once and is done. YMMV

analis

1:24 pm on Apr 16, 2018 (gmt 0)

not2easy: the contents of the two css files are completely different.

NickMNS: in the AMP news sites it's good for others I do not see any benefits. I will use it maybe in the future. The number of devices that change the orientation changes css is very low I have never raised the problem. In pagespeed insign my score is good enough 93/94 on mobile and 95/96 on desktop, in the pages there are banner ads. The only problem concerning css is: Your page has 1 blocking CSS resources. But joining the two CSS does not solve the problem.

tangor: the size of each css file is about 35kb

not2easy

2:07 pm on Apr 16, 2018 (gmt 0)

If you are seeing any Blocking notifications, you should check into that and see if it is something you control. In the (old version) GSC it is listed under the Google Index section in the left column menu, look for Blocked Resources to see if you are blocking access to something that you can correct. Sometimes you'll find that the Blocked Resources are their own AdSense scripts and files, but sometimes you may find a background image or other file that is blocked by your robots.txt file. It will tell you if it is important or not important.

analis

2:15 pm on Apr 16, 2018 (gmt 0)

the problem of the block is the asynchronous loading of CSS files, it is not a problem of robots.txt

NickMNS

4:17 pm on Apr 16, 2018 (gmt 0)

@analis I am not suggesting that you switch to AMP. The reason, or one of the reasons that AMP forces users to inline css (use style tags, not inline in the tag) is that this prevents blocking of page rendering. Basically if you request a CSS file, you will block rendering until the request is returned, this is simply an avoidable fact. The only way around it is to include the CSS on the page. Pagespeed insights suggests that you do this for above the fold content. Now for most of the work that I have done about 90% of the CSS is used, is already required for above the fold content, so at that point I figure I should just put it all there.

The number of devices that change the orientation changes css is very low I have never raised the problem.

That may very well be the case, have you checked the impact. I suspect that it might break the page. The impacted devices tend to be latest and most advanced devices, Google Pixel2 XL, Iphone X, Nokia N9. These devices may not account for that many page-views presently, but this is the leading edge and if the trend continues the popularity of these devices and other copy-cat devices will grow.

analis

5:10 pm on Apr 16, 2018 (gmt 0)

to remove the block there is a javascript code picks up the score on pagespeed insign at 99

[developers.google.com...]

but the page when it opens does not load css for 1 second and is not nice to see

All google devices are 0.17% -> of total visitors, nokia 9 is not there, nokia 10 -> 0,20%, google analytics not from data on iphone x.

NickMNS

5:32 pm on Apr 16, 2018 (gmt 0)

Try this report in GA
Audience -> Mobile -> Devices -> secondary dimension "Screen Resolution"

Based on my stats, for March, Iphones that would require both CSS files account for >3% of all sessions. But my point is simply that these large screen sizes appear to be increasing in popularity. It may not be the norm now but the number of users is growing.

analis

8:39 am on Apr 17, 2018 (gmt 0)

you're right is something that must be kept under control, but at the moment it is not very relevant.

375x812 1,15%
412x846 0,73%
480x800 0,69%
480x853 0,25%
720x1280 0,25%
480x854 0,10%

3,2%

Pavithraramesh

5:46 am on Apr 30, 2018 (gmt 0)

I also use single stylesheet for all media queries.

Earlier, I used to use multiple stylesheets during the development to make the job easier. Later, I would combine all the CSS code into one single stylesheet.

Unlike most of you, I also include the CSS reset codes in the main stylesheet.

All these helps to reduce the HTTP requests which I think more important.

If you are worried about the maintainability, it is not a big issue if the code is written well.

Martin Potter

11:47 pm on Apr 30, 2018 (gmt 0)

If you are seeing any Blocking notifications

Basically if you request a CSS file, you will block rendering until the request is returned

@not2easy and @NickMNS : Thank you! I always wondered why tests of my pages produced a warning about blocking resources, and yet any speed tests claimed that they loaded faster than average. My (one) CSS file for all media is 18.8 kB and doesn't seem bloated to me, though I could probably find some economies in combining a few classes or just leaving stuff out. Do you think that de-commenting and minifying would save me much time or be much advantage?

not2easy

2:20 am on May 1, 2018 (gmt 0)

I keep a copy for editing, then remove commenting and minify the one to upload. File size is between 12 - 18% smaller. The larger the file, the higher the percentage that is removed.

The loading of files can block rendering, but is not the same thing as blocked resources. The notification about blocked resources is not related to rendering. Blocked resources are usually .js files, image files or other files referenced in a page that are not accessible to the Googlebot. They may be third party resources, AdSense can trigger a Blocked Resources alert. Some may be files in a directory that is Disallowed in robots.txt or file extensions that are disallowed. Note that they even notify you of Blocked Resources when those resources are blocked by the robots.txt file on the third party (such as Google's AdSense). That's why it clears confusion to click through and see what they are calling Blocked Resources.

Martin Potter

4:43 pm on May 1, 2018 (gmt 0)

@not2easy: Thanks! Got some checking to do! Thanks again!