We wanted to load certain files based on breakpoints for all devices. Below is a sample what the HTML output we are generating, but are unable to get the files to load based on the media attribute in the <link> field.
Question
How can we load certain files based on a breakpoint?
What we tried
<html>
<head>
<link rel="stylesheet" media="all" href="some/path/all.css">
<link rel="stylesheet" media="all and (min-width: 480px)" href="some/path/all-480.css">
<link rel="stylesheet" media="all and (min-width: 768px)" href="some/path/all-768.css">
<link rel="stylesheet" media="all and (min-width: 1200px)" href="some/path/all-1200.css">
</head>
<body>
<p> Some body</p>
</body>
</html>
Current Problem
When we open Chrome Dev tools, we noticed that on page load all the files are fetched.
Expected Results
some/path/all.css should be loaded for all breakpoints.
some/path/all-480.css should only be loaded if the window on load or resize is greater than 480px
some/path/all-768.css should only be loaded if the window on load or resize is greater than 768px
some/path/all-1200.css should only be loaded if the window on load or resize is greater than 1200px
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 been coding and running my application in IE, i have downloaded Safari to test to see if my application works with that browser and when i load up my home screen the CSS isnt getting called.
I have developed my program using media screen and having 2 different style sheets:
<link rel="stylesheet" media="(min-width: 1600px)" type="text/css" href="../../Style/MinWidth1600StyleSheet.css" />
<link rel="stylesheet" media="(max-width: 1280px)" type="text/css" href="../../Style/MaxWidth1280StyleSheet.css" />
I have used absolute positioning but will be creating more style sheets when coming to the end of my application as I feel this is my way of comfortably coding.
Does anyone know the reason for Safari not calling any of my style sheets?
<link rel="stylesheet" media="(min-width: 1600px)" type="text/css" href="../../Style/MinWidth1600StyleSheet.css" />
<link rel="stylesheet" media="(max-width: 1280px)" type="text/css" href="../../Style/MaxWidth1280StyleSheet.css" />
According to https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
../../Style/MinWidth1600StyleSheet.css will be loaded IF min-width: 1600px : the viewport is 1600px width, or wider.
../../Style/MaxWidth1280StyleSheet.css will be loaded IF max-width: 1280px : the viewport if 1280px width, or narrower.
There is no css for displays wider than 1280px and narrower than 1600px. Please check documentation about CSS media queries.
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.
I am using major media breakpoints in the head of the doc:
<!-- Base = Normalize for basic and small screens -->
<link rel="stylesheet" href="css/base.css">
<!-- Enhanced = Styles for devices that understand media queries -->
<link rel="stylesheet" href="css/enhanced.css" media=”screen, handheld” />
<!-- Medium = Devices larger then generlized phone size -->
<link rel="stylesheet" href="css/medium.css" media=”only screen and (min-width:37em)”/>
<!-- Large = Larger tablets and desktops -->
<link rel="stylesheet" href="css/large.css" media=”only screen and (min-width:45em)”/>
<!-- Extralarge = Large displays and tv -->
<link rel="stylesheet" href="css/extralarge.css" media=”only screen and (min-width:60em)”/>
The four stylesheets are made up of several _partials. When I save in one of the scss files codekit runs and Chrome refreshes and everything renders just fine. However when I refresh the browser all the styles are not applied. The css files are present but nothing gets applied. Everything worked fine when I had one screen.scss file with media queries inside that file but now that they are split up nothing applies. What am I missing here?
I see curly fancy quotes in your HTML. Fixing them should cause your media queries to be recognized:
<!-- Base = Normalize for basic and small screens -->
<link rel="stylesheet" href="css/base.css">
<!-- Enhanced = Styles for devices that understand media queries -->
<link rel="stylesheet" href="css/enhanced.css" media="screen, handheld" />
<!-- Medium = Devices larger then generlized phone size -->
<link rel="stylesheet" href="css/medium.css" media="only screen and (min-width:37em)"/>
<!-- Large = Larger tablets and desktops -->
<link rel="stylesheet" href="css/large.css" media="only screen and (min-width:45em)"/>
<!-- Extralarge = Large displays and tv -->
<link rel="stylesheet" href="css/extralarge.css" media="only screen and (min-width:60em)"/>
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.