I'm in the process of re-writing the CSS for our website, as the previous one became a huge bloat (one of the CSS files along was approximately 180kb). Is that normal?
I'm interested in finding out what is the most productive & efficient way of storing CSS code for the website. Because of the nature of devices nowadays, I don't think its possible to write media queries targeting devices (e.g. responsive.smartphone.landscape, responsive.tablet.portrait etc etc). Furthermore, using the breakpoint methodology, a lot of the media queries will overlap.
I'm considering writing CSS files by media queries, with separate ones for media queries that overlap. How can I reduce the bloat & not have to send 200kb CSS files to smartphones or tablets, when only a small code of the file is relevant to the device itself?
For smartphones, etc, you could move the media queries from with-in the css files to the link elements as shown below. This way you're only loading a single css file for each.
<link rel='stylesheet' media='screen and (max-width: 320px)' href='css/mobile.css' />
<link rel='stylesheet' media='screen and (min-width: 321px) and (max-width: 768px)' href='css/tablet.css' />
<link rel='stylesheet' media='screen and (min-width: 769px)' href='css/desktop.css' />
I don't think IE8 or less will support media queries like this so you should also provide a fallback:
<!--[if lte IE 8]>
<link rel='stylesheet' media='screen' href='css/desktop.css' />
<![endif]-->
Related
First of all I know that this question was asked a lot before, but every answer was false or outdated.
Here is my problem: I want to load different CSS files based on device width. Here is the answer that is always given and that is false:
<link media="screen and (min-width: 721px)" rel="stylesheet" href="./cs/styles.css" />
<link media="screen and (max-width: 720px)" rel="stylesheet" href="./cs/styles-min.css" />
The problem with this answer is that the both files are loaded --->> both files are sent to us on HTTP request. Here is the proof on mozilla:
My question is how do I get only one to be loaded/sent to us on HTTP request. Btw I don't want to use js or server-side language if not necessary, if I really really have to, thats ok but give me reasons why your way is better. Thanks a lot!
Why don't you try using media queries in your css file. Only one css file is needed, and you specify when the screen size is smaller, then the style wrapped inside media queries will override
IE 9+, Firefox 3.6+, Safari 3+, Any Chrome, Opera 10+. Mozilla suggests starting the media attribute of the with “only” which will hide the stylesheet from older browsers that don’t support media queries. That may or may not be what you actually want to do… case dependent of course.
<link rel='stylesheet' media='screen and (max-width: 700px)' href='css/narrow.css' />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
<link rel='stylesheet' media='screen and (min-width: 901px)' href='css/wide.css' />link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css"/>
Are seen this ref : https://css-tricks.com/resolution-specific-stylesheets/
Demo : https://css-tricks.com/examples/ResolutionDependantLayout/example-one.php
Our designer was testing a responsive site on his 4k monitor. One of the breakpoints is as follows:
<link rel="stylesheet" media="all and (min-width: 1000px)" href="/css/desktop.css" type="text/css" />
<link rel="stylesheet" media="all and (min-width: 640px) and (max-width: 999px)" href="/css/tablet.css" type="text/css" />
Simple enough. He managed to find a point in between 999 and 1000 pixels where the CSS broke and the page went out of whack. After some serious head-scratching, this fixed the issue:
<link rel="stylesheet" media="all and (min-width: 640px) and (max-width: 999.9px)" href="/css/tablet.css" type="text/css" />
I couldn't find anything about using fractional pixels in media queries when I Googled it. Is it even a thing? Is this the best way to do it, or is there a better alternative?
It seems like it did come up for Chromium as a bug but was marked fixed and thus should not be possible: https://bugs.chromium.org/p/chromium/issues/detail?id=689096
In this old thread about a bug in Firefox they are speaking about the same issue, although this is not marked fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1120090
In that thread the fractional pixels in media queries are mentioned like they would be a normal thing.
I do web development on a high DPI screen for 7 years now and this has not happened to me yet. I would say it's not really a thing. One way to avoid it completely would be designing from the biggest or smallest screen upwards (or downwards), just overwriting and thus exclusively using min-width or max-width.
Is there a preference to where CSS media queries are defined? I.e. should I call them from my html like this:
<link rel="stylesheet" media="only screen and (min-width: 350px)" href="../assets/css/350.css" />
<link rel="stylesheet" media="only screen and (min-width: 768px)" href="../assets/css/768.css" />
<link rel="stylesheet" media="only screen and (min-width: 992px)" href="../assets/css/992.css" />
Or should I maintain one CSS file and define the media queries there?
Whatever works best for you, really.
Personally I prefer defining them inside my main CSS file, alongside the rules that they affect. For example:
#someElement {font-size:24pt;}
#media all and (min-width:350px) {
#someElement {font-size:12pt}
}
This keeps them close together so I don't lose track of them. It also means fewer HTTP requests.
Personally I would go for everything in a single file. You could (or should) manage the size and structure of your code by using a css preprocessor like less or sass. This way you can develop in multiple files, and combine / minimize them before you upload them to your webserver.
The main reason to use a single file is speed. Usually an extra request takes a lot longer then downloading a few extra kilobytes. It is also what is advised by the 'big ones' like Yahoo and Google...
I was thinking the link target on the stylesheet would make my css file only load when it loads on a tablet or iphone. But the elements I'm trying to hide are still there. Im currently using (media="handheld")
<link rel="stylesheet" type="text/css" hrf="css/media.css" media="handheld" />
There are too many mobile device models out there to write stylesheets for; you'd be better off adjusting your CSS based on Screen Size.
This is especially helpful for targeting Android Tablets which comes in different sizes.
See this useful tutorial for further explanation:
http://css-tricks.com/resolution-specific-stylesheets/
So, instead of targeting a specific screen dimensions (which would keep changing as more devices are released), you'd want stylesheets that change according to the screen size.
Then you'll add several stylesheets:
<link rel="stylesheet" media="screen and (min-width: 480px) and (max-width: 700px)" href="css/small.css" />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
etc.
So iPhones would use the small.css, and tablets larger than 700px will use medium.css.
Handheld is more for devices like PDAs or feature phones than iOS or Android devices. You're much better off using media queries to detect device capabilities and then adjust accordingly. Here's an example article: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
I am creating a mobile version of my website. It is nothing fancy, just a few pages. I would like to be able to share the content in both form, without having to update it in two places. Is the easiest way to do this with CSS? Or can I create some sort of XML or text file and read it in both sites?
Here is what I ended up using:
<!--[if IE]>
<link rel='stylesheet' href='ie.css' type='text/css' />
<![endif]-->
<link rel='stylesheet' media='screen and (max-device-width: 480px)' href='mobile.css' type='text/css' />
<link rel='stylesheet' media='screen and (min-device-width: 481px)' href='standard.css' type='text/css' />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
This works for:
Windows IE 8,
Windows Firefox 3.6.7,
Mac Safari 5.0.2,
Mac Firefox 3.0.6,
iPhone 4 Safari,
Android Web Browser (Emulator)
You have to put everything in this order otherwise it will not work. You also have to make sure that the standard.css has all the same css attributes as the mobile.css. For instance, if in mobile you say #myitem { border:1px solid black; } but you do not want a border for #myitem in the standard view, you have to put #myitem { border:none; } inside standard.css, otherwise Mac Firefox will pickup the value from the mobile.css file and show a border on the item.
CSS is your best bet.
By using media queries you can decide which stylesheet to use to display your content.
<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
This link may help you: http://css-tricks.com/resolution-specific-stylesheets/
If you really want to share the entire content of the page and just have things positioned and styled differently, CSS is your best bet. If you want to serve a "mobile-optimized" version of the page, obviously CSS won't let you do much about that. In that case, there are a lot of options, such as storing the real meaty "content" in a database or static files and generating a page with the relevant data through PHP or equivalent, or do the same with a source XML file and generate the page through XSLT.