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.
Related
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.
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'm trying to find out if it will be a better use of my time (now and in the long-run) to make a separate style sheet for my mobile site (which will look drastically different, but use the same database information and elements), or , make a whole new mobile page and steal what I need from my desktop site.
Does anyone have an advise or know what most developers practice when it comes to mobile sites?
you can use media queries.
<link rel="stylesheet" media="screen" href="style.css" type="text/css" />
<link rel="stylesheet" media="handheld" href="mobile.css" type="text/css" />
Or in css3
http://www.w3.org/TR/css3-mediaqueries/
A lot of sites these days are concentrating on mobile first, then porting to a full web app for desktops. More and more peyote are using their mobiles to browse the web and a site designed for mobile will generally support desktops better than a desktop site will support mobile browsers.
I read about device.is at HTML5 rocks here: http://www.html5rocks.com/en/mobile/cross-device/
There's a lot of controversy in that. I personally prefer media queries. and it they aren't TOO complex, I put them right in my css file using #media FOO and ( max-size: ### ) { /*stuff*/ }
A "mobile website" usually like m.domain.com, is usually a very stripped down version. containing some products, info, and a way to contact.
Why would you hide the rest of your valuable site info just because someone is on a smaller device? the load time can be a bit longer since there is more content, just make sure you super important stuff is above the fold. (or at least higher up in the draw order)
You can also very easily include click to call and click for map buttons that appear at a certain size using media queries.
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.