Using media queries in the head of the index html doc, is it possible to tell the visitors browser to use a separate style sheet independently of the original stylesheet?
Currently, what I use uses the mobile_specific stylesheet in addition to the original one which is becoming tricky to style.
<link type="text/css" media="screen" href="styles.css" rel="stylesheet">
<link href="styles_mobile.css" media="only screen and (max-device-width: 480px)" type="text/css" rel="stylesheet">
So syles_mobile.css is used in addition to styles.css. How do I tell the browser to use ONLY "styles_mobile.css" and not both the stylesheets together?
Add a media query to the regular stylesheet who is the oposite of your mobile query:
<link rel="stylesheet" href="styles.css" media="only screen and (max-device-width: 480px)">
<link rel="stylesheet" href="styles_mobile.css" media="only screen and (min-device-width: 480px)">
PS: I suggest you to use a standard order of attributes. And the type attribute is not required, as it has a default value of text/css with link and style elements and a default value of text/javascript on script elements.
Related
I am trying to get the right points of my application that brakes so i can add a media query to my application. I found a great website called http://responsivepx.com/ to test my application out on.
I ran my application and seen that it shows my application brakeing between 1257 width and 1576 width and then after that my application will be fine again. So i edit my query to fill the needs of the resolution issue and still it is not working?
Here is the querys i have at the moment:
<link rel="stylesheet" media="(min-width: 1600px)" type="text/css" href="../Style/CommonStyle/Common1600Style.css"/>
<link rel="stylesheet" media="(max-width: 1280px)" type="text/css" href="../Style/CommonStyle/Common1280Style.css" />
And then i added this to the media querys and it still doesnt work:
<link rel="stylesheet" media="(min-width: 1258px) and (max-width: 1576px)" type="text/css" href="../Style/MaxWidth1280StyleSheet.css" />
Does anyone know the reason my application is breaking and not hitting that media query?
What do you mean by 'not hitting that media query'? I'm a bit in the dark here because you haven't given an example css rule which isn't applied or provided the contents of any of the stylesheets, or even stated what your window size is when you see a problem. But here goes.
Are you sure it's not a rule precedence issue? If your browser window is between 1257px and 1280px then there will be two sets of rules the browser is trying to apply e.g. both stylesheets Common1280Style.css and MaxWidth1280StyleSheet.css are loaded and a more specific rule in Common1280Style.css will still override one in MaxWidth1280StyleSheet.css.
This assumes you are loading the stylesheets in the order shown e.g.
<link rel="stylesheet" media="(min-width: 1600px)" type="text/css" href="../Style/CommonStyle/Common1600Style.css"/>
<link rel="stylesheet" media="(max-width: 1280px)" type="text/css" href="../Style/CommonStyle/Common1280Style.css" />
<link rel="stylesheet" media="(min-width: 1258px) and (max-width: 1576px)" type="text/css" href="../Style/MaxWidth1280StyleSheet.css" />
To illustrate what I mean, here's a http://codepen.io/anon/pen/Bjwsa notice the color rule for (max-width: 1280) takes precedence over the one for (min-width: 1258px) and (max-width: 1576px) if the browser width is between 1258px and 1280px . Because its more specific e.g. a rule for body #example is considered more specific than just #example
I have a master page inside which I've added two css files for print and screen medias:
<link rel="stylesheet" type="text/css" href="theme.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
Where I've added some codes for my css:
#media print
{
p.test {font-size:20px;color:red;}
}
#media screen
{
p.test {font-weight:bold;}
}
it works fine when user viewing the pages in the browser or when clicking on the print button of the browser.
But how to force the page to be shown in print media when browsing in my desktop (screen media)?!
Basically, I'd like to show a print friendly version of the page in HTML.
You can't do directly with a media (or a media query) since you can't mark a "local" page or a web page.
HTML5 helps you with cache-manifest.
Docs: http://www.w3.org/TR/2011/WD-html5-20110525/offline.html
your html must to have:
<html manifest="print.appcache">
<link rel="stylesheet" type="text/css" href="print.css" media="screen">
<link rel="stylesheet" type="text/css" href="theme.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
and the manifest must contains:
CACHE MANIFEST
print.css
Online you'll override print.css with theme.css (but pay attention on !important css attribs), offline you'll not have at all theme.css
I have to define four css imports in a file :
<link rel="stylesheet" media="not screen and (device-width: 1200px) and (device-height: 900px)"
href="lib/sugar-web/graphics/css/sugar-96dpi.css">
<link rel="stylesheet" media="screen and (device-width: 1200px) and (device-height: 900px)"
href="lib/sugar-web/graphics/css/sugar-200dpi.css">
<link rel="stylesheet" media="screen"
href="lib/sugar-web/graphics/css/sugar-200dpi.css">
<link rel="stylesheet" href="css/activity.css">
I want, the simple screen media css (third line : without any condition) to be imported only if the above screen media definitions fail.
Is the order of tags correct ?
(What I want to avoid, is that third screen css is loaded in any case).
tried to search your issue?
what you exactly mean with 'without any conditions' ? if none of the media querys is firing none if the linked css files will be imported. for that your order is the right one.
is this the answer?!
How can I set a CSS file for print & screen?
I tried to set both values on the tag (like for a class attribute) but it doesn't work:
<link href="style.css" rel="stylesheet" media="screen print">
The question goes also for CSS in body.
You need a comma:
<link href="style.css" rel="stylesheet" media="screen, print">
The question goes also for CSS in body.
If you're referring to the style attribute, this cannot be done because you can't embed media queries in inline styles.
I have a question about CSS media queries. I'd like to know if CSS media queries affects the number of http requests on the web page.
For example:
<link rel="stylesheet" href="file.css" media="only screen and (max-width: 640px)">
<link rel="stylesheet" href="file2.css" media="only screen and (max-width: 960px)">
<link rel="stylesheet" href="file3.css" media="only screen and (max-device-width: 480px)">
My question is: From my understanding of CSS media queries, if the visitor of the web page is using one device/monitor then the other stylesheets don't apply. If the media query doesn't apply to the visitor, then does it still add an http request to the page?
HTTP requests are made to download all stylesheets linked, regardless of what is in their media attribute, so:
<link rel="stylesheet" href="devices.css" media="only screen and (max-width : 767px)">
<link rel="stylesheet" href="wider.css" media="all">
would result in two HTTP requests. See section 4.12.5.11 of the working draft of the HTML5 spec for links: http://www.w3.org/html/wg/drafts/html/master/links.html#link-type-stylesheet
The appropriate time to obtain the resource is when the external resource link is created or when its element is inserted into a document, whichever happens last. If the resource is an alternative stylesheet then the user agent may defer obtaining the resource until it is part of the preferred style sheet set.
To minimize HTTP requests, combine your stylesheets into a single file and wrap them in #media (max-width:767px){ ... }, etc.