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...
Related
I would like to find a way to detect device type of visitors in order to load only the relevant stylesheet. ( Either desktop or mobile css )
Indeed, the CSS is render blocking, so, I would like to avoid 2 .CSS to be loaded every time ( style.css AND mobile.css )
Maybe there is another way to do it?
Regards,
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
Above will apply css only for device with screen with between 701px and 900px.
You can use media queries and set breakpoints. Refer below link for more information.
https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/
https://css-tricks.com/resolution-specific-stylesheets/
A css question about meta tags in head
<link rel="stylesheet"media="screen and <min width npx)" href="assets/stylesheets/large.css">
Does the code below still need to go in?
<link rel="stylesheet" href="large.css">
Do not use multiple stylesheets for responsive design. This just creates more HTTP requests which are not necessary. Read here for why
Instead, use media queries within your CSS file. Like so:
#media (min-width: 10em) and (max-width: 20em) {
/* responsive styles go here */
}
Read here for more on how to use these: http://css-tricks.com/logic-in-media-queries/
Media queries are a feature of the CSS language within a single stylesheet.
You do not need to change the <link> tag at all.
The <link media="..."> tag is only useful if you have an entire stylesheet of rules that should only be applied under a specific media query; this allows the browser to skip downloading the file if the media query doesn't match (saving bandwidth)
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]-->
Alright so I'm attempting to build a responsive design, and one of the things that needs to be done is to ignore an entire style-sheet for an image slider (as the one I'm using has fixed dimensions when using a particular theme).
So, is there any way to just ignore every css rule that's in that particular file?
The most simple way would be to not load the css on that page programmatically.
Otherwise you could specify the device or viewport width (whatever you use for sizing) to only load your stylesheet when the screen size matches.
Something like:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="alternate.css" />
Can't you just display:none on the sliders container on each media query you dont want it featured?
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" />