Due to my vague understanding of tools I am using I failed to identify the source of the problem. node-sass does not provide media-queries aggregation, but css-mqpacker does, that is where I had to look for the problem resolvation. https://github.com/hail2u/node-css-mqpacker/issues/49.
What would be your way out of the following situation.
I merge two partial .scss files by #importing them to base file. Each file has media queries, and they provide styles for respective element of a page.
/* contents of index.scss */
#import "_block.scss", "_block-2.scss";
First file introduces two breakpoints, and order of appearance for these breakpoints in sass compiled stylesheet is defined by order in this file.
/* contents of _block.scss */
.block {
#media (max-width: 500px) {...}
#media (max-width: 450px) {...}
}
The #import of the second file has the same set of breakpoints plus one for max-width: 550px.
/* contents of _block-2.scss */
.block-2 {
#media (max-width: 550px) {...}
#media (max-width: 500px) {...}
#media (max-width: 450px) {...}
}
Identical breakpoints are aggregated during compilation, but a new one is placed at the end of compiled stylesheet, overriding properties for all breakpoints for particular element, which is not desirable behavior.
/* stylesheet compiled by sass */
#media screen and (max-width: 500px) {
.block {...}
.block-2 {...}
}
#media screen and (max-width: 450px) {
.block {...}
.block-2 {...}
}
#media screen and (max-width: 550px) {
.block-2 {...}
}
What would be a right solution?
This example represents a project where I cannot import second file before the first one because it introduces another problems with overriding.
I ended up defining style specifically to order all existing breakpoints, and introducing it early, but it is a hack I do not like at all, so I still in need for elegant solution.
It concerns me whether there is a use for media queries nested in CSS rules if it leads to such implications. In desktop first and mobile first media queries order matters, but I do not have sufficient control of it even in this simple case.
.block {
background-color: lightblue;
}
#media screen and (max-width: 500px) {
.block {
background-color: lightgreen;
}
}
#media screen and (max-width: 450px) {
.block {
background-color: lavender;
}
}
Also see https://www.w3schools.com/css/css_rwd_mediaqueries.asp
I added your current setup & and a suggested solution.
This is assumed you really need to run the 2 css files in the order you explained. It is also assumed that you want to keep as-is but have the final result working.
Since you might (for some reason) not want to delete the original values in CSS, you will have to set the ones you do not want to use, to transparent. That is background-color original default.
As a second step you need to decide which max-width you really want. When you know that you can secure the system uses that by adding "!important".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* Current setup */
#media (max-width: 500px) {body {background-color: red}}
#media (max-width: 450px) {body {background-color: blue}}
#media (max-width: 550px) {body {background-color: green}}
/* Solution */
#media (max-width: 500px) {body {background-color: transparent}}
#media (max-width: 450px) {body {background-color: yellow !important;}}
#media (max-width: 550px) {body {background-color: transparent}}
</style>
</head>
<body>
test
</body>
</html>
Related
Working a lot now with CSS media queries, I wondered in which order it's best to use them.
Method 1
#media only screen and (min-width: 800px) {
#content { ... }
#sidebar { ... }
}
#media only screen and (max-width: 799px) {
#content { ... }
#sidebar { ... }
}
Like this obviously the code is shorter, but with a lot of CSS you end up having the CSS of one container spread to multiple places in your stylesheet.
Method 2
#media only screen and (min-width: 800px) {
#content { ... }
}
#media only screen and (max-width: 799px) {
#content { ... }
}
#media only screen and (min-width: 800px) {
#sidebar { ... }
}
#media only screen and (max-width: 799px) {
#sidebar { ... }
}
Like this if you specify the screen size (at which the CSS is active) for each container a new, the overview in my humble opinion is much better.
But with a lot of CSS you will use the #media query dozens and dozens times.
Does the second method cause significantly longer load time or has any other disadvantages?
EDIT:
I might have been not clear enough. My question doesn't really concern the order or the queries as such or about overwriting CSS declarations.
What I wonder about is rather the norms how other people include the media query "statments" into their css.
Lets say I have only one breaking point where I switch some CSS.
So I have one media query for min:800px and a second for max:799px.
Should I use both query "statements"
#media only screen and (min-width: 800px) { ... }
#media only sreen and (max-width: 799px) { ... }
only once in my whole stylesheet and include ALL the CSS for ALL containers into the two media query "statments"?
Or is it okay as well to use the media query "statments" mutiple times?
I mean instead of making two seperate areas in the stylesheet (one for CSS above and one for below 800px), if there are any concerns about the method of using the media query "statments" instead multiple times (for each part of the page again, like for Content, Widgets etc to make them responsive)?
I would just like to have the CSS for above and below 800px in two different parts of my stylesheet.
I know that ofc both methodes are working, I am jsut curious about the norms and if using the media query "statements" dozens or hundreds of times within a CSS sheet (instead of just twice in the case I jsut mentioned) will increase the loading times?
My answer on how you should use media queries can be applied to your question:
Here is how you should use media queries:
Remember use the sizes you like/need. This below is just for demo
purposes.
Non-Mobile First Method using max-width:
/*========== Non-Mobile First Method ==========*/
#media only screen and (max-width: 960px) {
/*your CSS Rules*/
}
#media only screen and (max-width: 768px) {
/*your CSS Rules*/
}
#media only screen and (max-width: 640px) {
/*your CSS Rules*/
}
#media only screen and (max-width: 480px) {
/*your CSS Rules*/
}
#media only screen and (max-width: 320px) {
/*your CSS Rules*/
}
Mobile First Method using min-width:
/*========== Mobile First Method ==========*/
#media only screen and (min-width: 320px) {
/*your CSS Rules*/
}
#media only screen and (min-width: 480px) {
/*your CSS Rules*/
}
#media only screen and (min-width: 640px) {
/*your CSS Rules*/
}
#media only screen and (min-width: 768px) {
/*your CSS Rules*/
}
#media only screen and (min-width: 960px) {
/*your CSS Rules*/
}
Here is a good tutorial from W3.org
Based on your edited question:
I guess this depends on each developer and how they need/think to develop his/her project.
Here is what I use to do ** (when not not using Pre-compliers)**:
I create a file styles.css which includes the general styles that will apply to the project like this:
/*========== All Screens ==========*/
{
/*General CSS Rules*/
}
Then having the media queries below, either using the non-mobile or mobile approach method explained above (in my case I usual use the non-mobile approach method).
But, depending on the projects you may need to have some other breaks besides the "standard" which can led you to use the rules in the way you mentioned.
Plus there are developers who prefer to separate into 2 files, the one with general styles CSS and other one with media queries styles.
Important: There is one difference from creating a file with general styles + 1 media queries (min-width:800px or max-width:799px), then only having a file with 2 media queries (min-width:800px/max-width:799px), which is when you have the general rules it will apply to ALL widths, therefore you just need to set the rules for 1 media queries.
Based on your last comment, the answer I could give you would be opinion-wised, so the best I can do for you is to give you a few articles so you can have your own opinion on this topic:
How many media queries is too many?
Web Performance: One or thousands of Media Queries?
Debunking Responsive CSS Performance Myths
It means that, if you apply two rules that collide to the same elements, it will choose the last one that was declared, unless the first one has the !important marker
The second one will always display the content at 799px and whatever content has been styled as the style allocated for 799 rather than 800px if the device is 800px, in this case because it's 1px difference it doesn't make much different, but if you did it at around 200px different it would cause problems for your design.
Example:
if you have it this way:
#media (max-width: 800px) {
body {
background: red;
}
}
#media (max-width: 799px) {
body {
background: green;
}
}
The background would be green if the device is 799px in width or less.
if it was the other way round
#media (max-width: 799px) {
body {
background: red;
}
}
#media (max-width: 800px) {
body {
background: green;
}
}
if the device width was less than 799px the background would be green because no !important keyword has been defined.
when the !important keyword has been defined, result for example one will be the same
#media (max-width: 799px) {
body {
background: red; !important
}
}
#media (max-width: 800px) {
body {
background: green;
}
}
It won't take the processor longer unless the two elements collide. You'll be fine to vary min-width and max-width.
I suggest you to use the first method.
If you are developing a site mobile first then you won't need media queries for mobile but for tablet and desktop only.
//Mobile first
.your-mobile-styles-also-shared-with-tablet-and-desktop{
}
//Tablet
#media only screen and (min-width: 641px) {
#content { ... }
#sidebar { ... }
}
//Desktop
#media only screen and (min-width: 1025px) {
#content { ... }
#sidebar { ... }
}
If you are using a CSS pre-processor like SASS or LESS you can always create many LESS or SASS components that you will include in your main.less or main.scss / .sass file.
So each component will have not so many media queries and you can divide each component with some comments like shown above.
Your code this way will be easier to read and also much shorter, because all properties shared by tablet and desktop can be defined at the beginning of you CSS component file.
This question already has answers here:
How do I combine two media queries?
(2 answers)
Closed 2 years ago.
How could i apply different media queries in a single CSS file.I am applying the below queries but only the latest one works..
#media only screen and (max-width: 500px){
css styling here
}
#media only screen and (max-width: 600px){
css styling here
}
If you're defining the same CSS properties of the same elements, the last definition will have priority.
In this case, here is a solution :
#media only screen and (max-width: 500px){
/* CSS apply on width between 0 and 500px */
}
#media only screen and (max-width: 600px) and (min-width: 501px){
/* CSS apply on width between 501px and 600px */
}
The meta tag should be added in the <head> tag in HTML document. Please check that have you added
<meta name="viewport" content="width=device-width, initial-scale=1">
The sequential order of css code also matters. Please change sequence by following:
#media only screen and (max-width: 600px){
body{ background:green;}
}
#media only screen and (max-width: 500px){
body{ background:red;}
}
I am having an issue that I can't find an answer. I am using the #media code below and it works when I use inline CSS, but when I remove the inline code and add it to a CSS file it stops working.
Here is what I am using to test it.
#media all screen and (max-width: 480px) {body{font-size: 8px; }}
#media all screen and (min-width: 481px) and (max-width: 768px) {body{font-size: 28px; }}
#media all screen and (min-width: 769px) {body{font-size: 38px; }}
Any ideas why it stops working when it is added to an external CSS file??
Most likely you need to add the following in the <head></head> section of your html file.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
replacing mystyle.css with the name of your external css file.
...and in your css file something like:
body {
#media all screen and (max-width: 480px) {
font-size: 8px;
}
}
#media only screen and (min-width : 1824px) {}
#media only screen and (min-width : 1224px) {}
I am using these mediaqueries and these are working fine but when I see my website at 1280px resolution, it does not work
Try like this:
#media screen and (min-width: 1024px) and and (max-width:1280px)
{
.....
}
#HMS Designz, If you want to access media query 1280 to 1024 resolution. You can try like this.
#media screen and (min-width:1024px) and (max-width:1280px) {}
#media all and (min-width: 1280px) {
/* css for width greater than 1280px */
}
#media all and (max-width: 1280px) and (min-width: 1024px) {
/* css for width between 1280px and 1024px */
}
#media all and (max-width: 1023px) {
/* css for width less than 1024px */
}
Here is detailed explainition of media queries.
include this in <head></head> (if you have not)
<meta name="viewport" content="width=device-width, user-scalable=no" /> <-- user-scalable=yes if you want user to allow zoom -->
change you #media style as this // change width as per your requirements
#media only screen (max-width: 500px) {
// or as per your needs, as I try to explain below
}
Now I try to explain maybe..:)
#media (max-width:500px)
for a window with a max-width of 500px that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases.
#media screen and (max-width:500px)
for a device with a screen and a window with max-width of 500px apply the style. This is almost identical to the above except you are specifying screen as opposed to the other media types the most common other one being print.
#media only screen and (max-width:500px)
Here is a quote straight from W3C to explain this one.
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
As there is no such media type as "only", the style sheet should be ignored by older browsers.
If
That's what media queries are: logical if statements. "If" these things are true about the browser, use the CSS inside.
And
The keyword and.
#media (min-width: 600px) and (max-width: 800px) {
html { background: red; }
}
Or
Comma separate.
#media (max-width: 600px), (min-width: 800px) {
html { background: red; }
}
Technically these are treated like to separate media queries, but that is effectively and or.
Not
Reverse the logic with the keyword not.
#media not all and (max-width: 600px) {
html { background: red; }
}
Just doing not (max-width: 600px) doesn't seem to work for me, hence the slightly funky syntax above. Perhaps someone can explain that to me. Note that not only works for the current media query, so if you comma separate, it only affects the media query it is within. Also note that not reverses the logic for the entire media query as a whole, not individual parts of it. not x and y = not (x and y) ≠ (not x) and y
Exclusive
To ensure that only one media query is in effect at time, make the numbers (or whatever) such that that is possible. It may be easier to mentally manage them this way.
#media (max-width: 400px) {
html { background: red; }
}
#media (min-width: 401px) and (max-width: 800px) {
html { background: green; }
}
#media (min-width: 801px) {
html { background: blue; }
}
Logically this is a bit like a switch statement, only without a simple way to do "if none of these match do this" like default.
Overriding
There is nothing preventing more than one media query from being true at the same time. It may be more efficient to use this in some cases rather than making them all exclusive.
#media (min-width: 400px) {
html { background: red; }
}
#media (min-width: 600px) {
html { background: green; }
}
#media (min-width: 800px) {
html { background: blue; }
}
Media queries add no specificity to the selectors they contain, but source order still matters. The above will work because they are ordered correctly. Swap that order and at browser window widths above 800px the background would be red, perhaps inquisitively.
Mobile First
Your small screen styles are in your regular screen CSS and then as the screen gets larger you override what you need to. So, min-width media queries in general.
html { background: red; }
#media (min-width: 600px) {
html { background: green; }
}
Desktop First
Your large screen styles are in your regular screen CSS and then as the screen gets smaller you override what you need to. So, max-width media queries in general.
html { background: red; }
#media (max-width: 600px) {
html { background: green; }
}
You can be as complex as you want with this.
#media
only screen and (min-width: 100px),
not all and (min-width: 100px),
not print and (min-height: 100px),
(color),
(min-height: 100px) and (max-height: 1000px),
handheld and (orientation: landscape)
{
html { background: red; }
}
Note the only keyword was intended to prevent non-media-query supporting browsers to not load the stylesheet or use the styles. Not sure how useful that ever was / still is.
And for media queries priorites
sources : one two three four five
You are not create any media query for 1280 px resolutions. First create media query for that resolution using following media query.
#media screen and (min-width:1024) and (max-width:1280px)
{
}
I've seen a lot of posts about nesting media queries in LESS so I dont want to repeat any of that or waste anyones time but my question is slightly different. I have a nested media query inside a .less file with this code:
#media only screen and (max-width: 420px), only screen and (max-device-width: 420px){}
So that is on my login.less so my login page will be more responsive. I want to make another page responsive as well so in my aboutMe.less I also added the same code:
#media only screen and (max-width: 420px), only screen and (max-device-width: 420px){}
but its not triggering at all. Can you not have two media queries of the same type in css? So I would need to make a .less file mediaqueries.less and only have one instance of this:
#media only screen and (max-width: 420px), only screen and (max-device-width: 420px){}
and put all the sites code that I want that query to trigger in there, or is it possible to add the same query anywhere you want inside nested less files and im just doing something wrong?
Thanks!
CSS supports multiple identical media queries, if you like, but CSS doesnt support nesting.
LESS, on the other hand, does support a few methods for nesting media queries. You can read about it here: http://lesscss.org/features/#extend-feature-scoping-extend-inside-media
Example:
#media screen {
#media (min-width: 1023px) {
.selector {
color: blue;
}
}
}
Compiles to:
#media screen and (min-width: 1023px) {
.selector {
color: blue;
}
}
LESS also supports nesting media queries below selectors like this:
footer {
width: 100%;
#media screen and (min-width: 1023px) {
width: 768px;
}
}
Compiles to:
footer {
width: 100%;
}
#media screen and (min-width: 1023px) {
footer {
width: 768px;
}
}
If this doesnt answer your question, then please post the relevant part of your LESS file(s).
For media rules on less my recommendation is use Escaping.
Sample
#min768: (min-width: 768px);
.element {
#media #min768 {
font-size: 1.2rem;
}
}