I am not entirely sure of the best way to place declarations such as
#media screen and (max-width: 600px) {
//
}
in my stylesheet. If, for example, I have a block of rules pertaining to some element (say, the sidebar) and I want to include some responsive rules with it, then it is tempting to insert the above code along with all the other rules for the sidebar. But then I might have some other element (say, the header) that also needs to change in some way when the screen width is below 600px. Then I'll end up with several #media screen and (max-width: 600px) declarations scattered up and down my CSS file. But it makes more sense- to me- to prioritize grouping together CSS rules according to the HTML elements they control.
So can I do this? Is there a negative performance impact from having
#media screen and (max-width: 600px) {
.sidebar {
font-size: 12px;
}
}
#media screen and (max-width: 600px) {
.header {
font-size: 16px;
}
}
rather than
#media screen and (max-width: 600px) {
.sidebar {
font-size: 12px;
}
.header {
font-size: 16px;
}
}
?
There is no notable loss of performance using several media queries instead of only one. However, if
you resize or zoom-in/out your browser, there can be a peak of memory and CPU load.
You will not resize your browser, but partially-sighted users needs to zoom your website, etc.
You should consider using a CSS Preprocessor like Less, SASS, or Stylus. A media query can be placed as a CSS property in your rule:
// app.less
#max-width: 600px;
.sidebar {
background: #2c2c2c;
#media screen and (max-width: #max-width) {
font-size: 12px;
}
}
If you can't use a CSS Preprocessor, then don't duplicate your media queries because of maintenance nightmare.
I think it would just bulk up your css file size, but if you minify it, you should be fine. It is best practice though to accomplish as much as you can in as little code as possible.
Related
This question already has answers here:
CSS media queries - Order matters?
(3 answers)
Closed 8 months ago.
So I understand the (min-width: 1400px) and (max-width: 1400px) are break points for when the CSS reaches those breakpoints it supposed to go back to its default sizing.
This is what I have done. I have my main CSS file that has its default sizing and another CSS file called query.css that controls the responsiveness of the web page.
This is how I have certain parts of both files to adjust accordingly
main CSS
.h1,.h2,.h3 {
font-size: 70px;
font-family: Cinzel, sans-serif;
}
.nav-link {
padding-left: 10rem !important;
}
query CSS
#media (min-width: 1400px) {
.h1,.h2,.h3 {
font-size: 1em;
}
.nav-link{
padding-left: 5em !important;
}
}
This is where it confuses me. The main CSS file settings are meant to be the main one, but the query CSS seems to overwrite the main CSS and it really messes up when I try and do responsive design.
I get that this min-width:1400px is meant to say if it goes from 2000px down to 1400px it must keep the min-width:1400px, but then what is the point of having the main CSS if the min-width:1400px just negates the main CSS file settings.
Its very frustrating working like this.
... it must keep the min-width:1400px ...
That's not how min-width works with media queries.
The min-width rule effectively says "apply this block of CSS if the viewport is at least this wide", in this case at least 1400px. if the viewport width is less than 1400px then the CSS surrounded by the media query will not be applied and the styles defined in main.css will take precedence.
#media (min-width: 1400px) {
/* CSS that is only applied if the viewport is >= 1400px */
}
Also, be careful about the order that the CSS files are included in the page. If query.css was included before then the media query it contains would always be over-ruled by the CSS in main.css.
It's a little more complicated than this when you take specificity in to account, but you should get the general idea.
For more info, take a look at the documentation for the media query min-width rule.
An important aspect of media-queries is structuring them correctly - especially if you're using a combination of #media (min-width: x) and #media (max-width: x).
CSS is read from top to bottom - this means that the last property applied to your desired selector will take priority, as long as its valid. This means that a more "precise/accurate" media-query rule prop will not take priority over another, if the media-query is placed below the other and both of their rules are valid. This means you can't just throw in media-queries at random locations in your CSS-file, because the CSS is just going to be overwritten.
Note that this doesn't apply on more specific selectors, but in my personal preference, I don't like mixing the specificity on a selector across multiple media-queries.
Because of this, you should always make media-query-rules with:
A descending pixel value if you're using max-width
An ascending pixel value if you're using min-width
In this example, the min-width-media-queries below the max-width-media-queries
This way, the first media-query will always take priority as long as its rules apply. When the second media-query's rule apply, that will take priority instead and so on. Try dragging the screen size of this code snippet in full page and you'll see how this code structuring works.
div {
width: 150px;
height: 150px;
background-color: red;
}
#media screen and (max-width: 412px) {
div {
background-color: green;
}
}
#media screen and (max-width: 360px) {
div {
background-color: yellow;
}
}
#media screen and (min-width: 320px) {
div {
background-color: orange;
}
}
#media screen and (min-width: 414px) {
div {
background-color: black;
}
}
#media screen and (min-width: 428px) {
div {
background-color: purple;
}
}
#media screen and (min-width: 768px) {
div {
background-color: pink;
}
}
#media screen and (min-width: 800px) {
div {
background-color: gray;
}
}
#media screen and (min-width: 820px) {
div {
background-color: limegreen;
}
}
#media screen and (min-width: 834px) {
div {
background-color: blue;
}
}
#media screen and (min-width: 884px) {
div {
background-color: teal;
}
}
<div></div>
I learned about media queries and learned that there should be major breakpoints for layout dramatic changes and minor breakpoints for things like paddings and font-size.
but is it okay to declare multiple media queries for each section of the page?
for example: three for the navigation and three for each section of main content
I think this would be better than changing the whole layout on 4 or 5 media queries.
why not, I do sometimes.. e.g.
#media (max-width: 600px){
body {
background: green;
}
}
#media (max-width: 500px){
body {
background: red;
}
}
#media (max-width: 400px){
body {
background: blue;
}
}
DEMO
In my opinion it is different for every site. If it works on your site and it isn't too complex than why not? There are no 'rules' that apply to every site. Some people don't like to use it, so they don't. And some do like it thus use it.
first thing, I'm a hacker when it comes to CSS. Trying to read and practice as much as possible to get better. Currently, I'm trying to add a set of media queries to a row to control padding, margins, and font sizing from mobile up so my text is positioned exactly where I want it. My question is how do I create a class for a row, so these styles only apply to this row of content. In this case, it's the first(hero) row on my website that has html text over an image. Below is what I'm trying to write, give or take a couple fine tuning adjustments. How do I create a single class to control the styling of the h2 and h3 classes?
#media only screen and (max-width: 481px) {
#wrapper .hero h2 {
font-size: 36px!important;
}
}
#media only screen and (max-width: 481px) {
#wrapper .hero h3 {
font-size: 22px!important;
}
}
I appreciate any guidance or support the community can share!
#media only screen and (max-width: 481px) {
#wrapper .hero h2 {
font-size: 36px!important;
}
#wrapper .hero h3 {
font-size: 22px!important;
}
}
Else you can use less or SASS preprocessor for control multiple property in single class
From your CSS, it's clear that your want to apply different font size to different child elements in the same viewport. It will not be possible to define two values for same property i.e font-size in this case and expect the browser to use both for different elements. However, you need to define the media query only once:
#media only screen and (max-width: 481px) {
#wrapper .hero h2 {
font-size: 36px!important;
}
#wrapper .hero h3 {
font-size: 22px!important;
}
}
So I am currently building a system which allows the CSS to be stored within MariaDB (MySQL) database. I am currently going over the logic flow for this, and wondered what is preferable in terms of media queries.
So, what I really want to know is;
Should I load the media queries at the top of the CSS file or the non media query selectors at the top of the CSS file? Which one is preferable? Or is this subjective, because of how things are overwritten by code further down the page.
Thanks in advance everyone.
Actually this could be subjective, however, there is the best practice for that.
What I prefer is to keep your normal CSS selectors in one file like app.scss and keep your media-query in another file like responsive.scss while developing. so even would be better to make all modules separate. However, at the end, you need to concatenate them and the best would be to keep your normal CSS selectors first and then load Media-Query right after that.
#import 'custom/app';
#import 'custom/responsive';
The reason to follow this practice is that CSS will be read from TOP to BOTTOM, thus, you may understand that all your media query rules will be implied right after their original rules and it won't affect responsiveness.
All in all, that could be very subject and may other developers would prefer to write their CSS and media query CSS rules right after each other but that would be obvious that they most likely to code media query right after main rules. TO clarify, I will write only one sample code in my perspective:
GOOD
body {
background-color: lightblue;
}
#media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
BAD
#media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
body {
background-color: lightblue;
}
Update:
I'd like to also mention two different approaches.
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.
body { background: lightblue; }
#media (min-width: 480px) {
body { background: lightblue; }
}
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.
body { background: lightblue; }
#media (max-width: 480px) {
body { background: lightblue; }
}
It doesn't matter. For practical purposes i put the media queries after the modelled element but you could put all the queries in the top or in the bottom of the page and it would be indifferent (it won't load faster or slower). For debugging purposes i think it's better my method.
For example:
.box { max-width: auto; }
#media (min-width: 1200px) {
.box {
max-width: 10px;
}
}
(this may have been answered already - couldn't find the answer though)
The traditional #media query override tends to group all the override for one size/medium under the same bracket group.
e.g.
.profile-pic {
width:600px;
}
.biography {
font-size: 2em;
}
#media screen and (max-width: 320px) {
.profile-pic {
width: 100px;
float: none;
}
.biography {
font-size: 1.5em;
}
}
In Sass, there's a really nifty way to write #media query overrides within the nested declaration, like so:
.profile-pic {
width:600px;
#media screen and (max-width: 320px) {
width: 100px;
float: none;
}
}
.biography {
font-size: 2em;
#media screen and (max-width: 320px) {
font-size: 1.5em;
}
}
now, when compiled, sass doesn't group the #media query blocks together, so the output ends up being something like this:
.profile-pic {
width:600px;
}
#media screen and (max-width: 320px) {
.profile-pic {
width: 100px;
float: none;
}
}
.biography {
font-size: 2em;
}
#media screen and (max-width: 320px) {
.biography {
font-size: 1.5em;
}
}
I've used this technique for a recent project and when you apply that principle to a much bigger project you end up with multiple #media query section disseminated throughout your css (i've got about 20 so far).
I quite like the sass technique as it makes it easier to follow the flow of overrides (and also makes it easier to move things around).
However, I'm wondering if there is any disadvantage in having multiple #media section through the CSS, particularly performance wise?
I've tried the chrome css profiler but I couldn't see anything specific to #media queries.
(More info on #media in sass on this page)
A bit late to the party, but based on the tests below the performance impact seems to be minimal. The test shows the rendering times for an example page with 2000 separate and combined media queries, respectively.
http://aaronjensen.github.com/media_query_test/
The main benefit seems to be in file size more than anything else - which, if you're compressing your CSS for production, will be substantially reduced anyway.
But ultimately, as the linked post below puts it:
"If you have 2000+ media queries in your CSS, I think that you may want to reconsider your UI development strategy versus using a gem to re-process your CSS."
Blog post detailing the issue: https://web.archive.org/web/20140802125307/https://sasscast.tumblr.com/post/38673939456/sass-and-media-queries
I would assume that just having to run the media query check once (and then loading all the styles within it) would be less taxing than checking on every selector but I've got no hard evidence of this. If you get the Canary release of Chrome there are media query tools in there.
As you're using SASS this article might be of some interest - http://css-tricks.com/media-queries-sass-3-2-and-codekit/