I am wanting to break apart my rather large CSS file into separate, specialised, stylesheets - one for mobile, tablet and desktop. The purpose being I want to reduce the amount of data being downloaded on mobile (why download 600kb css file containing mobile tablet and desktop styles when I can download a 40kb file just for mobile instead?).
Is there a way to use media queries to load only the required stylesheet?
I have tried:
#import url(mobile.css) (max-width:599px);
#import url(tablet.css) (min-width:600px);
#import url(desktop.css) (min-width:1200px);
and
<link rel='stylesheet' media='screen and (max-width: 599px)' href='mobile.css' />
<!-- and again for tablet and desktop -->
but in developer tools I can see that the browser downloads all three css files regardless of which technique I use.
Is it possible to load only the wanted resource using media queries?
I am aware of a JS approach using matchMedia but I am looking for a CSS only solution.
Edit
Please read the question - I want to load a specific stylesheet based on media query. ALL browsers download ALL stylesheets regardless of media query attribute, which defeats the point in having a mobile-only stylesheet! How do I download ONLY the stylesheet I want based on media query?
If you make this, your site will not be responsive. Responsive said that design adapts to resolutions, not only devices, and when a desktop screen has a 600 px width you must to show tablet version, no? The best way to reduce the files is minifying all your css in one file in production version, and in dev version you have got all splitted css
Try doing it within the HTML, for example:
<link rel="stylesheet" media="only screen and (handheld)" href="example.css" />
source
I can't see why this would not work with a (min-width: 1200px)` (for instance).
Normally though css for small screens would be very small, with the small screen using most of the styling in the desktop version, with a few elements hidden and some resized.
Related
I'm using Google fonts in a responsive site like:
<link href='http://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>
However I only want to use this font when the screen is wider than 1024.
Is it possible to only link it if the screen is wider than 1024 and how?
Update: I can usee #media queries to keep the font from being displayed. What I want is for mobile devices to not have to download the font file.
Yes:
<link href='http://fonts.googleapis.com/css?Bangers'
rel='stylesheet'
media='screen and (min-width: 1024px)'
type='text/css'>
You can use media queries inside you CSS as well. That way you don't need to have multiple stylesheets for different screen sizes. The download size will be bigger (the whole file is downloaded), but is saves on the number of requests, so often it's still more efficient.
I tested this using this fiddle. In my (Chrome, desktop) browser, it does still download the CSS file, but it doesn't download the fonts it refers to. The actual fonts are in separate files. Only when I decrease min-width from 5000px to 500px it actually downloads the fonts as well.
Technically it wouldn't need to download the CSS file, but maybe it wants to have it just in case, after all the CSS file could contain other styles that are important to have when the screen size suddenly changes (rotation of device, maximation of browser window, etc). For a font it's usually not a problem if it takes a second to download, but visibility of elements, colors, sizes should be present immediately, so that might be a good reason to download the CSS files.
Still, whether or not the fonts are downloaded immediately depends on the optimization features of the browser. Chrome seems to be at least half-smart. Other browsers may make similar decisions. Personally I wouldn't bother to do a lot a scripting to prevent the font CSS files to be downloaded. They won't cause that much overhead (unless you have many fonts, defined in different CSS files, but that indicates poor design too).
Yes, you can use #import and media queries:
#import url('http://fonts.googleapis.com/css?Bangers') screen and (min-width: 1024px);
But note that the file will be downloaded anyway, the difference is that it will be applied only when the media query is true (the same applies to <link> media attribute.
I'm making a website, the design is responsive. But for the menu I'm choosing a simple toggle button, where the menu will reside when loaded on a mobile device. When the button will be hit, the menu will appear with a simple <ul><li> rendering bulleted list. But the thing is that, for the site, I did complex CSS for the menu; when I load the site in mobile device what should I do?
Do I need to reset all the CSS properties done into the menu CSS, and then to do the mobile device-specific CSS into the media query?
I think that's not a viable idea.
Then, what should I do? A colleague of mine suggested me to load different CSS for different media-width, but how?
I want to avoid #import in CSS, as it decreases site speed.
Yes, you can load different CSS for different viewport/media-width. Suppose, you made your site menu CSS into menu.css, and your mobile device's menu CSS into mobile.css then:
<link rel='stylesheet' href='css/menu.css' type='text/css' media='screen'/>
<link rel='stylesheet' href='css/mobile.css' type='text/css' media='screen and (max-width: 800px)'/>
The second stylesheet is specifically designed for mobile-device-friendly CSS, as you want, and the additional portion and (max-width: 800px) will load this stylesheet only on the specific viewport size.
So cheers!
I have a website already made. I want to make a mobile version of this. I basically want to import a table from the main site into the mobile site. I want to take the CSS code from the main site that covers the table and then input in my CSS file for the mobile site (I already put the HTML code into the mobile site). The problem is, when I do that it starts to overwrite the current CSS file and change the design.
Help please!!
You will need to use media queries. This is a css3 function.
In the top of your html, you need to put the following:
<meta name="viewport" content="width=device-width" />
Then, in your css, you will do something like this:
#media only screen and (max-width : 320px) {
/* Styles */
}
This is a reference site for commonly used media queries.
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
You will basically need to do this for each size device you are optimizing for.
Also, if you have several of these, you might end up with a very large css file.
That could impede download speed especially on a phone. In that case, create
separate smaller css files and use conditional statements in your html to specify
which css to call. In that case, you will need to use something like this in your html:
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="/assets/css/small-device.css" />
I am building a PhoneGap/Cordova project for iPhone.
I have 2 css files - one for general CSS rules and one for iPad relevant css that look like this:
<!--Main Style Sheet-->
<link rel="stylesheet" href="css/styles.css" />
<!-- iPad specific css-->
<link rel="stylesheet" media="only screen and (max-device-width: 768px)" href="css/ipad.css" type="text/css" />
The issue is that the iPad css is just behaving like normal css. CSS I put in there appears when I run both iPhone and iPad simulators.
Can anyone help me out?
Thanks!
For iPad you want min-device-width, not max-device-width (ie. an iPad has a minimum width of 768px in Portrait mode)
max-device-width gives us a maximum not a minimum, so it will affect all devices below 768 px including the iphone. Giving a min width too should fix it. Probably (min-device-width:481px)
In case the aforementioned solutions do not solve the problem for some readers, this question is directly relevant to responsive web design.
I would recommend utilizing only one style sheet with a media query inside of it.
#media screen and (max-width:768px){
/* Device Specific CSS rules here */
}
I have chosen max-width here because anything above that will render the normal CSS. You my then set up another media query with max-width of approximately 500px to target smart phones. Keep in mind that the media query automatically inherits all of the normal CSS rules specified and the only rules that need to be defined inside of the media query is the device specific styles.
This does exactly the same thing; however, this only requires the browser to parse one style sheet, generating a faster load time (minimal, but faster none-the-less.
When using a media query, you are also required to have a viewport meta tag in your HTML. Otherwise, your devices will render the same CSS as a desktop.
Also, CSS3 Media Queries are supported by most modern mobile browsers.
I have one webpage that I want to pull different stylesheets for print, mobile, screen, etc.
I have screen and print working perfectly. I have two different stylesheets for mobile - one for modern smartphones (iPhone/Android), one for Blackberries. They're called mobile.css and blackberry.css respectively.
How can I simply have my page load the mobile stylesheet when iPhone/Android accesses the page, and the blackberry stylesheet when most Blackberries load the page?
Using max-width: 480px will work, but it will also force the mobile stylesheet upon a Blackberry (whose screen is also 480px wide), which is undesired behavior.
Any help?
For Printing:
<link rel="stylesheet" href="print.css" media="print">
For targetting the Blackberry specifically, you may have to do some User-Agent sniffing.