Forums

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

Feed from this thread

Stacey Intermediate

Posted on Jan 10, 2012 (permalink)

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.

Reply

Jordan Jordan

Posted on Jan 11, 2012 (permalink)

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.

Greetings,
Jordan
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Reply

Stacey Intermediate

Posted on Jan 11, 2012 (permalink)

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?

Reply

Stacey Intermediate

Posted on Jan 11, 2012 (permalink)

This is what my masterpage looks like

<%@ Master Language="C#" %>

<!DOCTYPE html>

<html class="no-js" lang="en">

<head runat="server">

    <title></title>

    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1, maximum-scale=1, width=device-width" />

    <link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />

    <script src="/Scripts/modernizr-2.0.6.js"></script>

    <script src="/Scripts/respond.min.js"></script>

</head>

<body>

    <form runat="server">

        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

        

        <div id="Wrapper">

            

            <div id="Header">

                <div class="content-wrapper">

                    <div class="logo">

                        <asp:ContentPlaceHolder ID="LogoContentPlaceHolder" runat="server" />

                    </div>

                    <div class="nav">

                        <asp:ContentPlaceHolder ID="NavContentPlaceHolder" runat="server" />

                    </div>

                </div>

            </div>

            



            

            <asp:ContentPlaceHolder ID="MainContentPlaceHolder" runat="server" />

            

            

            <div id="Footer">

                <div class="f-bg">

                    <div class="f-address">

                        <asp:ContentPlaceHolder ID="FooterAddressContentPlaceHolder" runat="server" />

                    </div>

                    <div class="f-right-info">

                        <asp:ContentPlaceHolder ID="FooterInfoContentPlaceHolder" runat="server" />

                    </div>

                </div>

            </div>

            

        </div>

        

    </form>

</body>

</html>

Reply

Stacey Intermediate

Posted on Jan 11, 2012 (permalink)

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.

Reply

Jochem MVP

Posted on Jan 11, 2012 (permalink)

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.

Reply

Answer Jordan Jordan
Posted on Jan 12, 2012 (permalink)
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)
2. I added a template based on the master page and dropped the JS widget with a reference to css3-mediaqueries.js

Then I have tested this under IE8 and everything works fine. Here is the sample media query in my ipad.css file:

@media all and (max-width: 1024px) {

    h1{

        color: #333;

        background-color: #f5f5f5;

    }

}

Regards,
Jordan
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Reply

Stacey Intermediate

Posted on Jan 12, 2012 (permalink)

@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.

Reply

Jordan Jordan

Posted on Jan 16, 2012 (permalink)

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) :)

All the best,
Jordan
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Reply

Stacey Intermediate

Posted on Jan 16, 2012 (permalink)

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.

Reply

Forums

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

DevTools for .NET

Kendo UI

Test Studio

Sitefinity

TeamPulse

Call us

Anonymous

About Telerik