I trying to understand the logic behind media queries in sass.
For example, if I want to set media queries for my container in css in will be:
#media only screen and (max-width: 37em){
.container{
some code
}
}
But in sass it will be:
.container {
#media only screen and (max-width: $bp-medium){
some code
}
}
As you can see it the upset!
how the sass look after it compiled?
In sass you can e.g. set standard values - just like in your example $bp-medium. If you set this value to 37em, it will behave similar to your css example.
By the way, you can just as well use the css way for sass. Wouldn't recommend though, since this is what sass makes powerful.
By moving the media query inside a selector, you are organising all styles relevant to a component in the same place. When you choose to do it the CSS way, you'll organise the styles based on the media queries. This will give you a bad overview of what the component would look like in big projects and large files.
Related
The issue: https://output.jsbin.com/donapohuci
This is a two column layout on desktop. Using a CSS media query, I have set it to be one column when the viewport is 800px or less:
div {
float: left;
width: 50%;
}
#media (max-width:800px) {
div {
width: 100%
}
}
The issue is that when you go to print this (at the moment, using Chrome) it decides that a letter sized piece of paper is smaller than 800px so prints using the media query styles.
We're using Bootstrap where it uses media queries like this. One solution is to modify the CSS so that it adds the 'screen' modifier:
#media screen and (max-width:800px)
Alas, this is a giant enterprise project with multiple teams all contributing so we'd really rather not mess with any of the foundational CSS at this time (as that usually causes a domino effect of other issues on other teams...)
Is there a way to workaround this short of writing a separate print style sheet just for this one particular page we need to have printed "as you see on screen"?
I'm thinking along the lines of some way to tell the browser "pretend the paper is wider than it is and use the desktop layout when you print..."
The way I would solve this is by adding the media screen attribute in the link to the regular CSS so it doesn't apply to print, and create a separate custom print stylesheet to be called after, again, using the print media attribute:
<link href="print.css" rel="stylesheet" media="print">
It is possible that the default Bootstrap has an include to a print file, but this should be easy to remove, and ultimately if it's not possible the latter stylesheet will still overwrite those styles.
Say I want my footer to be orange for XS resolutions.
I can of course write a media query to do this.
#media (max-width:767px) {
.footer {
background-color:orange;
}
}
But this is kind of cumbersome. It would be nice if there was another way of doing this without using a media query?
Say a bootstrap option of "enable breakpoint wrappers". This would use js to apply say wrapper-sm or wrapper-lg to the body tag which I could use as a descender.
eg
.wrapper-sm .footer {
background-color:orange;
}
Does such a mechanism or something similar exist?
If not, is there a clever way to facilitate this with LESS (or js)?
...or you can write your own classes inside media queries and use those instead, for example:
#media (max-width:767px) {
.wrapper-sm {
background-color:orange;
}
}
...and then simply apply it on your class as you asked for.
..and do the same for the other classes.
Is it possible to write a wrapper for it, but why would you do that?
I want to recommend SASS if it is because of your overview. You can use multiple files for different screen-sizes.
Suppose 1 css file, and 3 #media formats, say:
#media (min-width:1280px)
#media (min-width:640px) and (max-width:1279px)
#media (max-width:639px)
Is there a significant performance difference between using each #media format once and cramming all appropriate CSS rules inside, such as:
#media (min-width:1280px) {
/* all css for this format */
}
#media (min-width:640px) and (max-width:1279px) {
/* all css for this format */
}
#media (max-width:639px) {
/* all css for this format */
}
VS
Using as many #media declarations as necessary (about as many as you have CSS rules/sections)... such as:
div.some-class-name {
/* styles */
}
#media (min-width:1280px) {
div.some-class-name {
/* styles for this format */
}
}
#media (min-width:640px) and (max-width:1279px) {
div.some-class-name {
/* styles for this format */
}
}
#media (max-width:639px) {
div.some-class-name {
/* styles for this format */
}
}
I personally prefer version 2 (though maybe not so excessive), as it's much easier to track a specific pair of styles for each #media query.
thx for feedback!
I'm not an expert on this, but I found a decent article addressing this:
https://helloanselm.com/2014/web-performance-one-or-thousand-media-queries/
It doesn’t matter if you use one big or multiple media-queries in your code assuming your values are mostly the same. It shouldn’t matter if your values are different for each(!) of your hundreds of media-queries but could affect performance (found no way to track this down). The only thing I could add here is that using many inline media queries often is that they’re increasing the size of your CSS (unless your gzipping it) and that affects performance as it’s loaded blocking.
Makes sense to me. I personally like to group element styles rather than grouping media queries (version 2 in your question). In my mind, CSS's goal is to style your elements and styling them based on screen size is a secondary goal.
In practise no there shouldn't be a significant performance difference, there shouldn't be one at all. Browsers generally serialise and strip out duplicate media queries.
The only potential issue is if the extra MQs add bloat to your css file and thus it takes longer to download, delaying the render. It is pretty unlikely for this to happen.
You can read a little more about it here
The performance difference issues in your examples are extremely small. The only thing I can tell you about performance is this: If you use stylesheets, ALL stylesheets will be loaded by the browser. Only the one that matches the media query will be applied.
Basically, just use whichever method is easier to change, organize, etc. . . my guess is stylesheets.
About the NUMBER of queries, there will be no performance changes. Most browsers automatically calculate the width, height, screen, type etc., even without media queries.
Hope that helps!
Your version 1 is very similar to v2. The difference I see is you wrote "all CSS" versus "styles for this format". In the case of writing all of the CSS you will have a much larger file than V2. Loading a larger file takes extra time than a smaller file, so version 2 will be more efficient.
In any case, use these 2 rules for performance:
1) Shorten your CSS as much as possible. Avoid redundancy wherever you can. If in the top media query you use "h2 {padding: 0 }, then don't use that in the other queries as that would be completely unnecessary.
2) Look at the number of characters or file size of your CSS. The smaller file will always load faster.
I am wondering if CSS can be 'heavy', e.g. use a lot of parsing time from a browser.
For example I use a CSS sheet with a lot of specific selectors, like
:last-child,
:nth-child(n)
table.sortable thead tr th:not(.table-th-nosort):hover
etc. Can that noticably influence performance?
Same for using media-queries. I want to make a site accessible for mobile devices using CSS3 media queries:
#media screen and (max-width: 600px) {
#sidebar {
display: none;
// etc
}
}
For now I have about 600 lines of CSS (not minified) in my main file, and for some specific pages include extra CSS files (between 10-300 lines).
Using media queries would add substantially to that I expect. Will that have an effect on performance?
The easiest way to check is to grab a webkit nightly, or Chrome Canary, then check out the new audit for CSS performance. It lets you see how long each selector takes to run, as well as the % of overall time taken. The new builds of Opera also have a similar tool.
Here's a small screenshot of what it looks like:
I want to use some css framework but hate its unsemanticness. So I want to use LESS. The basic idea is mixin framework's css into my own classes. But I feel LESS can't handle some scenarios. For example, some classes are define in the framework as:
div.prepand = {...}
or
* html .span-1 = {...}
LESS mixin doesn't seem to support the above situations. Any idea?
I'm not sure which framework did you mean by saying that "some classes are define in the framework as:".
In Less, you don't declare mixins the way you showed it. You do it like so:
.my_mixin { ... }
And then below in the file you can (re)use it like so:
div.content {
.my_mixin;
}
Other than that, I don't understand your question. You want to mixin framework's CSS into your own classes? What does that mean? You write CSS in Less or you don't ...
I've just put together the grid portion of blueprint.css in LESS here. You can set the column and gutter widths, then use mixins like this:
#header {
.span(20);
.prepend(2);
}
I've added a couple of example #media queries as well, allowing for responsive layouts.
I hope it might be of use to someone.