Anyone using Modernizr?

Posted by Community Admin on 03-Aug-2018 18:02

Anyone using Modernizr?

Sitefinity - General Discussions

All Replies

Posted by Community Admin on 17-Nov-2011 00:00

I am looking for tips on using this library with Sitefinity.  I tried to add the it to my master page with a normal script tag, but it does not seem to be working.

I wanted to use it for the shim support on html 5 tags with IE.  I also just want to start learning some of it's other features.

Here is what my masterpage looks like

<%@ Master Language="C#" %>
 
<!DOCTYPE html>
<script runat="server">
 
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="/Scripts/modernizr.dev.js" />
</head>
<body>
    <form runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <!-- Wrapper -->
        <div id="Wrapper">
            <header>
                <div class="content-wrapper">hello
                    <asp:ContentPlaceHolder ID="HeaderContentPlaceHolder" runat="server" />
                </div>
            </header>
            <!-- Content Wrapper -->
            <div>
                <asp:ContentPlaceHolder ID="MainContentPlaceHolder" runat="server" />
            </div>
            <!-- End Content Wrapper -->
            <footer>
                <asp:ContentPlaceHolder ID="FooterContentPlaceHolder" runat="server" />
            </footer>
        </div>
        <!-- End Wrapper -->
    </form>
</body>
</html>

The page loads, but I am not sure where to head from here.  Without the script the header tag is getting styled correctly in IE 9 and Firefox 7, but with the script it is no longer getting styled.

The script path is correct so at least I know that is getting loaded.  I grabbed the development version so that I can be assured that it contains all the features that I may or may not use.  I know in production I would want to custom build for better optimization.

Edit:  My css is styling the header as such.

header
    display: block;
    height: 90px;
    border: 4px solid #978764;
    border-width: 0 0 4px 0;


Posted by Community Admin on 17-Nov-2011 00:00

Stacey,

I've modified your code a little, try this one out.

Note the difference on the script tag, that was the main issue that was causing problems. Also, I changed the CSS a little bit as HTML5 headers are block level elements by default. You shouldn't need to explicitly set them to "display: block;".

Hope this helps!

<%@ Master Language="C#" %>
  
<!doctype html>
<html class="no-js" lang="en">
<head runat="server">
    <title></title>
    <script src="/Scripts/modernizr-2.0.6.min.js"></script>
     
    <style>
        header
        
            height: 90px;
            border: 4px solid #978764;
            border-width: 0 0 4px 0;
        
    </style>
</head>
<body>
    <form runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <!-- Wrapper -->
        <div id="Wrapper">
            <header>
                <div class="content-wrapper">hello
                    <asp:ContentPlaceHolder ID="HeaderContentPlaceHolder" runat="server" />
                </div>
            </header>
            <!-- Content Wrapper -->
            <div>
                <asp:ContentPlaceHolder ID="MainContentPlaceHolder" runat="server" />
            </div>
            <!-- End Content Wrapper -->
            <footer>
                <asp:ContentPlaceHolder ID="FooterContentPlaceHolder" runat="server" />
            </footer>
        </div>
        <!-- End Wrapper -->
    </form>
</body>
</html>

Posted by Community Admin on 10-Jan-2012 00:00

Tim,

Thanks for the advice.  That seems to work.  Why would adding the script type affect it from working?

"display:block" is being set because it is not the default behavior in IE 7 or IE 8.

Posted by Community Admin on 10-Jan-2012 00:00

Stacey,

It's not the "type" that was breaking it, it was the self closing script tag. I replaced it with one that ended in </script> and it fixed the issue. I didn't include the "type" at all because when using the HTML 5 doctype, "type" is optional. Browsers should default to Javascript when they see the <script> tag.

The default behavior you stated is correct. I suggest using something like this in your CSS file. It's from the HTML5 boilerplate.

/* =============================================================================
   HTML5 display definitions
   ========================================================================== */
 
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section display: block;
audio, canvas, video display: inline-block; *display: inline; *zoom: 1;
audio:not([controls]) display: none;
[hidden] display: none;

This thread is closed