I wan't to load the correct css file for any webpage based on the INITIAL window size.
I'm currently including files like so:
<link rel="stylesheet" media="(max-width: 1250px)" href="file1.css">
<link rel="stylesheet" media="(min-width: 1251px) and (max-width: 1700px)" href="file2.css">
<link rel="stylesheet" media="(min-width: 1701px)" href="file3.css">
This code loads the correct css on load, but it will also change according to screen resizes.
Is there a way native to CSS to prevent the responsize file change?
I can write a script to remove the unused queries once the initial CSS was loaded but I wanted to know if there's a more native way.
Thanks!
You can't. matchMedia JS property specially created for this. Using matchmedia you can execute blocks of JavaScript only when a certain mediaquery condition is met. For example:
if (window.matchMedia('(max-width: 1250px)')){
document.write('<link rel="stylesheet"
href="file1.css">');
}
Related
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?
If I have a CSS media query as follows
<link rel="stylesheet" media="only screen and (max-width:1024px)" href="css/ipad.css">
<link rel="stylesheet" media="only screen and (min-width:1024px)" href="css/desktop.css">
I see that it loads both the CSS desktop.css and ipad.css
This is the case even if I change the min/max-width to min/max-device-width
Why is this so AND how do I ensure that only the relevant CSS gets loaded ?
I say, it's normal that the browser loads both files. But it should apply only one style. What happens to you, are both styles applied, or only one?
You could also work with the orentation parameter btw.
I have a web application that produce some reports in HTML format. I have different styling options to display these forms. Normally whenever I want to print these pages, I lose all CSS styling features. How can I make a print without any change in appearance?
<link rel="stylesheet" href="./public/css/print.css" type="text/css" media="screen, print" />
As far as I know the print-out should use the same css-styling as the screen unless you specify something else.
Do you specify "media" in the css link?
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
You could try to either make sure there is no media specified or to set media="screen, print"...
If you use some JavaScript plugin (like: jQuery-Print) you would lose your appearance in the other way if you use CSS correctly it's impossible to have a change in your print usually?!
if your problem don't solve tell me which language do you use for your application?
I'd like to change some things on my web page. Also I would like to make some things hidden. Is there a way I can do this with CSS when I print? In particular I want to be able to hide some DIVs and all that they contain.
This can be achieved with a separate print stylesheet. The media attribute is the key:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Yes, you need to use the media attribute when you include your css. E.g.
<link rel="stylesheet" href="my_print_style.css" media="print">
Or, you can use the media rule in your stylesheets if for example, you do not have enough changes to warrant a whole new stylesheet. Something like this,
#media print {
// print specific styles.
}
See http://www.w3.org/TR/CSS2/media.html#at-media-rule, for details and valid media types.
Answer is the CSS #media rule: http://www.w3.org/TR/CSS2/media.html#at-media-rule
I've used
<link href="print.css" type="text/css" rel="stylesheet" media="print">
To achieve this. Assign #ids or .classes to elements you don't want to display. And use display: none for those elements in print.css stylesheet.
So most of the time my stylesheets appear properly. The standard/original one always works flawlessly, however it seems sometimes the mobile one is disregarded when looked at from a mobile device
I have them designated as follows:
<link href="CustomStyleSheets/standard.css" rel="stylesheet" type="text/css" />
<link href="CustomStyleSheets/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 799px)" />
I'm using a Droid X to view the page, in portrait mode, so the device width shouldn't be exceeding the max-width specified above, but sometimes, randomly, it still reverts back to the original css page.
Any way to keep it from doing so?
Make sure your standard.css isn't affecting the cascade of what you expect to see with the mobile.css. It looks as though a mobile device will load your standard.css first then the mobile.css - so styles in both stylesheets are affecting display. I usually wrap my stylesheet link elements in logic that only displays a mobile stylesheet to a mobile device - not both stylesheets at the same time.
Also, don't forget to include this meta tag to make sure your page is being scaled correctly to the device dimensions:
<meta name="viewport" content="width=device-width" />
Try using the media type "handheld".
<link href="CustomStyleSheets/standard.css" rel="stylesheet" type="text/css" />
<link href="CustomStyleSheets/mobile.css" rel="stylesheet" type="text/css" media="handheld" />
Maybe use media="screen" for standard.css? Maybe it helps (:
Or check user-agent in server side. If it is mobile device loading only mobile css otherwise load standard.css.
I use WURFL to find out if it is mobile device...
I've see that happen before. I believe it was the size of the body element that was getting changed. The correct doctype is important. It should be:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">