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.
Related
I have a banner which appears at the top fold of the page. To improve my LCP score, I am preloading the banner image to make it as a critical resource but I can see that for my mobile resolution, the tablet, mobile version of banner image is preloaded.
Please find below the markup of my banner image
`
<picture><source srcset="mobile.jpg" media="(max-width: 767px)">
<source srcset="tablet.jpg" media="(max-width: 1024px)">
<!-- [if IE 9]></video><![endif] -->
<img src="/desktop.jpg" width="1920" height="1080" alt="Kia Sportage">
</picture>`
I am using below preloads to load images as per viewport sizes:
<link rel="preload" href="mobile.jpg" as="image" importance="high" media="(max-width: 767px)">
<link rel="preload" href="tablet.jpg" as="image" importance="high" media="(min-width: 768px) and (max-width: 1024px)">
<link rel="preload" href="desktop.jpg" as="image" importance="high" media="(min-width: 1025px)">
For Tablet, Desktop size viewport I can see respective images getting preloaded but for mobile resolution I see that mobile.jpg and tablet.jpg is loaded and in console I can see Chrome complaining with below warning:
The resource tablet.jpg was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.
Am I missing something here?
I found the cause!
Apparenntly The meta tag <meta name"viewport" content=”width=device-width, initial-scale=1"> was defined way below in head tag in which case the viewport has not been configured when the media query is evaluated.
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
I don't know much about webdesign and I am now trying to make iPhones load another CSS than desktops. Been trying for 4 hours now and I am falling into a deep depression now. All I do is
<link rel="stylesheet" type="text/css"
href="iphone.css"
media="only screen and (max-device-width:
480px)" />
<link href="styleT.css" rel="stylesheet" type="text/css" media="screen" />
iphone.css doesn't even exist but iPhones keep loading styleT.css
What can I do? Desktops load the styleT.css perfectly fine.
I messed up the order of the styles. I did it the other way around before, but forgot the <meta name="viewport" content="width=device-width, initial-scale=1.0"> (had it in there before but then somehow commented it out)
I am so happy I am a programmer and not a web dev I couldn't have the patience for stuff like this
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'm having a problem getting my conditional IE8 and below stylesheet to work. I've placed the conditional statement below the regular stylesheet links but with no result.
This is my current setup:
<link rel="stylesheet" type="text/css" media="all and (max-width: 640px)" href="/css/mobile-new.css" />
<link rel="stylesheet" type="text/css" media="all and (min-width:641px) and (max-width: 768px)" href="/css/tablet.css" />
<link rel="stylesheet" type="text/css" media="all and (min-width:769px) and (max-width: 1024px)" href="/css/tablet-landscape.css" />
<link rel="stylesheet" type="text/css" media="all and (min-width:1025px)" href="style.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="style.css" />
<![endif]-->
As you can see it should use the regular 'desktop' stylesheet as media queries are not supported in IE8 and below. If I just place
<link rel="stylesheet" type="text/css" href="style.css" />
in the head it works fine and the styles are also displayed in IE8 but I really need to seperate the stylesheets for the mobile/tablet versions.
I've already tried respond.js and css3-mediaqueries.js to skip the conditional stylsheet part but with no result.
Since you are using Internet Explorer 11 trying to emulate Internet explorer 8, you will find that it does a very poor job of it.
Use a site like Browserstack and you can run it from an actual computer running IE8 and then there, you should find that your code now works as it is supporting conditional statements, unlike IE11, which has dropped conditional statements.
You could also try testing IE8 in Windows XP Mode, which is available through Windows Virtual PC.
This Virtual Machine is made by Windows, and comes with IE8, and has helped me personally for testing with IE8.
http://windows.microsoft.com/en-ca/windows7/install-and-use-windows-xp-mode-in-windows-7