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:
Related
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.
I am trying to make a website responsive with WORDPRESS, so when checking the website with different devices and using different browsers, every where the same css is used.
So I decided to use the following format to divide my website into 3 different section for normal pc, tablets and smart phones:
#media (min-width:767px){}
#media (max-width:766px) and (min-width:400px) {}
#media only screen and (max-width: 399px) {}
then for different browsers I am doing:
/*edge*/
#supports (-ms-ime-align:auto) and (max-width:400px) {}
/*chrome*/
#media (-webkit-min-device-pixel-ratio:0) and (max-width: 766px) and (min-width: 400px) {}
the problem is I cant make the same for opera and firefox, I mean I made this for firefox:
/*firefox
#supports (-moz-appearance:none) and (max-width: 399px){
#pg-4-0{
height: 1400px!important;
}
#newROW{
margin-top: 20px;
}
}
*/
/*
#supports (-moz-appearance:none) and (max-width: 399px) {
#pg-4-0{
height: 1150px!important;
}
#newROW{
margin-top: 20px;
}
}
*/
but it wasnt working correctly and I had to remove it. Is this correct way of implementing the responsiveness?
is there a better way to do this?
how can I do this for firefox and opera? (I made the website using wordpress: https://www.haagsehof.nl/)
Is this correct way of implementing the responsiveness?
is there a better way to do this?
Can't say if this is the best way to go about it but here's my advice: don't do browser detection. It's a cat-and-mouse game, you'll never see the end of it.
Back in the days when IE was a popular browser (eww), we had to do browser detection to apply custom "hacks" to make sure sites looked & behaved mostly the same on all major browsers - including Internet Explorer itself.
However, nowadays most major browsers follow the same web standards and so most CSS rules / properties behave pretty much the same way in every one of them so browser detection isn't really necessary anymore. What we do now is feature detection: check if the browser supports a given feature (eg. multiple background images), and if it doesn't then provide a suitable fallback.
Also, to make sure every HTML element behaves & looks the same way in most modern browsers (since each browser often has their own set of default CSS rules) independently of what screen resolution is being used you can use CSS resets which -as the name implies- resets the styling of all HTML elements to a consistent baseline. Personally, I prefer using normalize.css as it isn't as aggresive as CSS resets are and also includes a few useful rules.
Finally, here's a nice article from Google on Responsive Web Design that should help get you on the right track: Responsive Web Design Basics.
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.
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 have a very large and complicated stylesheet. Because of the way I've built the organization of the styles, it would make sense to me to put in some media queries for smaller resolutions throughout the stylesheet, rather than group them all into one at the end like I normally see.
For example, here's some pseudo-code for what I mean:
.navbar { width: 300; height: 20px; background: gray; }
.navbar ul { etc etc }
#media screen and (max-width: 800px) {
.navbar ul { something to make it smaller..... }
}
.....30 some-odd lines later....
#contentblock { some styles }
#media screen and (max-width: 800px) {
#contentblock a { something that makes this one smaller and stuff }
}
^^Hope that all makes sense.
My question is: although I am allowed to do this, does it dramatically impact the load/processing time? Is it a memory hog that should be avoided by grouping all the media queries at the bottom of the sheet, or for the sake of my own convenience, I can go ahead and do it with minimal negative impact?
Negligible.
Have you not seen the big sites and their 30k+ line stylesheets? Browsers can load it very fast, it shouldn't make a difference whether or not they are grouped together.
The real difference is on your end. Make it so that it's efficient for you to develop. Personally I think it looks better for them to be next to related styles rather than on the bottom. But be mindful that newer styles override older ones, that may be where the practice of grouping media queries on the bottom came from.
Unless you're sending your code back in time to the AOL dial-up days, this will not have any noticeable impact on performance/processing time.
That being said, don't forget your order of operations. You'll have to be careful not to overwrite your media queries. Keeping them all at the end of the stylesheet helps in preventing that and ensures that your media queries are at the end of the cascade.