Media Queries with Respond.js or css3-mediaqueries.js

Has anyone had any success using either libraries to enable media query support with IE 8 and lower?

The problem I am seeing seems to stem from the fact that you cannot use them with @import rules.  If I directly link my stylesheet on my masterpage it works.  The issue with this is that I will have multiple copies of css as Sitefinity will automatically link my stylesheets from the theme and then it will load from my reference on the masterpage.

I would prefer not to move my stylesheets outside of the App_Data folder so that I can conform to how Sitefinity wants to operate.

Hi Stacey,

I have just tested similar scenario. The css3-media-queries.js is working fine but only when @import is not in use and this problem is not Sitefinity related. On their page in GoogleCode they have the following note:

Note: Doesn't work on @import'ed stylesheets (which you shouldn't use anyway for performance reasons). Also won't listen to the media attribute of the <link> and <style> elements. 

If you can provide us more information about your idea for the structure of the files may be we can provide you better solution.

Jodan,

Please understand I was not trying to implicate that this is Sitefinity's "issue".  I am fully aware that you cannot use @import with Respond and css3-media queries or I would not have made that statement in my first post.

You ask for more information on how I am using this.  I am using Sitefinity exactly how it is documented for people developing with masterpages.  My thought is that the way Sitefinity automatically loads themes somehow mimics the exact reason as to why @import cannot be parsed by Respond and css3-media.

Masterpage -> App_Data -> Sitefinity -> WebsiteTemplates -> Aardvark -> App_Master
Theme -> App_Data -> Sitefinity -> WebsiteTemplates -> Aardvark -> App_Themes -> Aardvark

Inside the Theme is Global, Images, Styles.  My stylesheet with the media queries is found in global.

Global looks like this: cssLoadOrder.xml, global.css, reset.css, structure.css

Note: I tried to do this without a cssLoadOrder.xml thinking it was also causing behind the scenes import.  Neither approach worked.


I know that it works if I put the link to the styles directly on my masterpage, but then I will have two instances of each style sheet.

Does this help you understand my structure better?

This is what my masterpage looks like

I suppose I could just make a seperate css file to hold all my media queries and store it outside of the App_Data folder and then link this file into the masterpage, but then it means I have style sheets being stored in two different locations which is not my preference.

Hey Stacey,

I don't have IE8 here atm, so haven't tested it but I noticed that you're using Modernizr and Respond.js. Have you tried downloading the production version of Modernizr (there's a checkbox there so it will include respond.js automatically). That might solve some incompatibility issues which may or may not cause the not firing of the media queries.
---
Have you checked the loading order css vs js ? If the respond.js gets fired before the css gets loaded you might want to defer script loading or place it at the bottom of the master page.
---
Secondly, I'm not sure I fully understand the problem with two css files, if you move them to a rootfolder, you don't have to leave them in App_Data no?

But if you'd like to stick to SF and store everything in the App_Data folder, you can always reference it directly. Next to the App_Master and App_Theme folder inside of 'Aardvark' I often create a JS folder that contains specific theming stuff and reference it by src="/Sitefinity/WebsiteTemplates/MyTemplate/JS/script.top.min.js"

VisualStudio will give you an error that the file won't exist, but besides that, works like a charm.

Jochem.

Hello Stacey,

So you don't want to put the styles directly in the master page and also don't want to put the CSS files in different places also without any @import rules, right? Here is what I have just tested:

1.I have recreated you files structure 

• ~/App_Data/Sitefinity/Aardvark/App_Themes
  
  • Global
    • main.css (regular styles)
    • ipad.css (media query for an iPad)
    • cssLoadOrder.xml (where first is main and then ipad)
• ~/App_Data/Sitefinity/Aardvark/App_Master
  
  • aardvark.master (with the HTML you have provided - I just removed the js references)

@Jordan
That process seems to do the trick for me.  I had tried to link Respond.js via the Sitefinity UI before I posted for help and it did not work.  After trying your suggestion with css3-mediaqueries I decided to try again with Respond.js and it still failed to work.

Thinking more on Jochem's point about loading order of the script I decided to set Respond.js to load before the </body> tag and now it works for me.  Looks like I can use either one now to handle my media queries.  I have read that Respond.js is faster due to how lightweight it's functionality is so I might stick with that for now.

Jochem
I actually had tried using the production version of Moderniz without any success.
--
"Secondly, I'm not sure I fully understand the problem with two css files, if you move them to a rootfolder, you don't have to leave them in App_Data no?" 

Yeah, if push came to shove I would just move the files.  I was getting at that I wanted to keep in conformance with how SF states to store css files for themes and I would not want them missing from that directory if I were to hand the site over to another developer whom might be using SF documentation.
--

But if you'd like to stick to SF and store everything in the App_Data folder, you can always reference it directly. Next to the App_Master and App_Theme folder inside of 'Aardvark' I often create a JS folder that contains specific theming stuff and reference it by src="/Sitefinity/WebsiteTemplates/MyTemplate/JS/script.top.min.js"

Technically I could also just move the css from Global over to the Styles folder as it is not dynamically loaded.  This would still let me keep the css within the App_Theme folder.  I would still have the same Visual Studio warning.

Hello Stacey,

May be respond.js needs a jQuery and this is the reason to works when is it placed before the closing body tag.

Are you planning to make your website cross-device compatible? Since IE8- are desktop browsers they will work fine with your default website version as a fallback (960px for example). All other versions customized with media queries will work fine with iPad, iPhone and the other modern mobile devices. So, I am not sure if you need a support of media queries in IE8-.

This is just a personal opinion (if that is the case of your project) :)

Jordan,

I am creating a site for a client that I am using responsive design techniques in for mobile friendly pages.  I have created another site using the jQuery Mobile UI framework when it was in its alpha release so now I am trying the "responsive" approach which seems to be gathering a lot of attention in the industry.  This is more of an experimentation for me to find the pros and cons. I see validity in using either approach for different scenarios.

I understand that Microsoft will be pushing browser updates harder in the future and that most mobile devices will be using browsers that are already compatible, but I still occasionally run into situations where companies are not up to speed in browser version and are still stuck with ancient monitor resolution.  My plan is not necessarily to spend all my time making a site compatible for every single browser and resolution, but I needed to find out for myself what hoops I may need to use to meet possible requirements for future projects.

Hi below is my header of my page

<head>

<script src="jquery-2.1.1.js" type="text/javascript"></script>
<!--[if IE 8]>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<script src="jquery-1.11.1.js" type="text/javascript"></script>
<script src="selectivizr.js" type="text/javascript"></script>
<link href="//netdna.bootstrapcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
 <script src="html5shiv.js"></script>
    <script src="respond.min.js"></script>
    <script src="respond.js"></script>
 <script src="respond.matchmedia.addListener.min.js"></script>
<script src="css3-mediaqueries-js.googlecode.com/.../script>
<![endif]-->
<!--[if gt IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=11">
<script src="jquery-2.1.1.js" type="text/javascript"></script>
<![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <link href="//netdna.bootstrapcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
 <script src="html5shiv.js"></script>
    <script src="respond.min.js"></script>
    <script src="respond.js"></script>
 <script src="respond.matchmedia.addListener.min.js"></script>
<script src="css3-mediaqueries-js.googlecode.com/.../script>
    <![endif]-->

</head>

below is my simple media query

<style>

@media (min-width: 800px)
 and (max-width: 1023px)

  #boxColor
   font-size:48px;
   color:#000;
   background-color:#CC66FF;
 
   

@media (min-width: 600px)
 and (max-width: 799px)

   #boxColor
     
   font-size:26px;
   color:#fff;
   background-color:#000066;
 

@media (min-width: 300px) and (max-width: 600px)
   #boxColor
     
   font-size:18px;
   color:red;
   background-color:#fff;
 

</style>

in media query I tried both approach using with width: 600px) AND width: 600px) but both approach did not worked in IE8. I tried to download mediaqueries.js file but gives page not found error then I hard coded this to header. But still it is not working in IE8. Please suggest me what should I do to run it on IE 8. I am using bootstrap 3.0x for my website. I need to work my webpage based on media query.

 Thanks