I use gulp and gulp-less to preprocess my .less files, and over time I've come up with some pretty complex structures that, while allowing me some real flexibility, also sometimes make debugging difficult.
Currently, I have the following output at the beginning of my main.css file:
#media screen and (max-width: 767px) {
}
#media (min-width: 768px) {
}
#media (min-width: 768px) {
}
#media (max-width: 767px) {
}
#media (min-width: 768px) {
}
#media (min-width: 768px) {
}
#media (max-width: 767px) {
}
#media (max-width: 767px) {
}
Since all of my media queries are defined with variables and called with a mixin, it seems like it should be pretty is easy to debug....but, there is nothing in any of my files that should produce this - at least as far as I can tell - in fact there aren't even that many candidates to parse through that could potentially produce this - so I'm a little stuck.
But really, the larger question - regardless of what's causing this - is, how to debug potentially complicated less output. Aside from sticking comments everywhere, there are no obvious tricks that I know of.
Any help?
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.
I swear I had this working, but it's not. Is such a thing possible?
I don't want to prefix the 100's of styles with body:not(.phone)
Thank you.
#media only screen and (max-width: 768px) and (body:not(.phone)) {
}
NO. That's not how can do with #media queries. You must use like below:
#media only screen and (max-width: 768px) {/*css rules not applicable before curly brace*/
body:not(.phone){/*css rules must be within curly braces*/
color: #f00;
}
}
So, what you mean with #media queries is not possible.
I've been testing Bootstrap LESS 3.1.1 a bit and found that on making the site responsive some styles don't look that well when the page is large and when it's small, etc.
So I was trying to make some changes like adding a font-weight:bold to some element or more padding or aligning it to the left, etc. just because I like the columns to collapse into one column when the screen is "xs" but that changes the layout so much I need to redefine some of the styles.
I am using custom styles and combining them with Bootstrap LESS using mixings etc. and I was wondering if there is a way of saying "do this when small" or "do this when medium". I know I have the media queries but unless I have a "#media #small" or similar it just won't fit with bootstrap as it should, and even if I go that way, I still feel like Bootstrap may already include some mixing to do that.
Does anyone know a good way to do this?
Cheers.
I think the answer may be this as it's at Bootstrap documentation:
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
#media (max-width: #screen-xs-max) { ... }
#media (min-width: #screen-sm-min) and (max-width: #screen-sm-max) { ... }
#media (min-width: #screen-md-min) and (max-width: #screen-md-max) { ... }
#media (min-width: #screen-lg-min) { ... }
Even so, I would like to wait and see if there is any other way, but it looks like this is it (as it uses Bootstrap variables it will always fit).
I try to do this in LESS
#screen-lg : 1200px;
#laptop : ~"only screen and (min-width: 768px) and (max-width: #{calc(screen-lg - 1px)})";
to target until 1199px. But its doesn't like it.
Is it possible to operate with calc() function in a string var ?
Thanks.
I don't think that you need any calc there. You can get what you want with:
1
#screen-lg: 1200px;
#screen-lg-max: (#screen-lg - 1);
#laptop: ~"only screen and (min-width: 768px) and (max-width: #{screen-lg-max})";
#media #laptop {
color: red;
}
2
#screen-lg: 1200px;
#laptop: ~"only screen and (min-width: 768px) and (max-width:" (#screen-lg - 1) ~")";
#media #laptop {
color: red;
}
3
(Less 1.7.0):
#screen-lg: 1200px;
.laptop(#styles) {
#media screen and (min-width: 768px) and (max-width: (#screen-lg - 1)) {
#styles();
}
}
.laptop({
color: red;
});
All three snippets above result in the following CSS:
#media only screen and (min-width: 768px) and (max-width: 1199px) {
color: red;
}
Media queries must be evaluated at runtime, and less is usually compiled at build time. To do this kind of stuff you'll probably need client side Javascript version http://lesscss.org/#client-side-usage , and recompile less script each time there's a window resize, so probably has no point to do it using less and you'll do it faster (and cleaner) in Javascript.
That being said, if you try this you'll probably have to do it backwards (i.e. wrap your less variable inside a media query). But I'm not sure at all this makes sense.
Since Less is parsed at build time, you can just use the built in math features. There is no need for calc. This works just fine:
#screen-lg : 1200px;
#laptopsize: #screen-lg - 1px;
#laptop: ~"only screen and (min-width: 768px) and (max-width: #{laptopsize})";
#media #laptop {
div{background: black;}
}
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;
}
}