ThemeShaper Forums » Thematic

[closed]

Trying to get Modernizr working in IE 7 and *

(4 posts)
  • Started 7 years ago by lotsamottsa
  • Latest reply from lotsamottsa
  • This topic is not resolved

Tags:

  1. Hello, I'm new to Modernizr and can't seem to get it to work.

    I've completed this tutorial: http://scottnix.com/2012/adding-modernizr-to-thematic/

    and have read over this post: http://forums.themeshaper.com/topic/html5-boilerplate-header-with-thematic

    I downloaded the custom build for border-radius only from Modernizr. I renamed the file Modernizr.js, put it in a js folder inside my child theme and pasted this into my function php:

    function childtheme_script_manager() {
    
    	// wp_enqueue_script template ( $handle, $src, $deps, $ver, $in_footer );
    
    	// deregister standard jquery
    	wp_deregister_script('jquery');
    	// loads modernizr-js script, local path, no dependency, no version, loads in header
    	wp_enqueue_script('modernizr-js', get_bloginfo('stylesheet_directory') . '/js/modernizr.js');
    	// loads jqery script, from google cdn url, no dependency, yes version, loads in footer
    	wp_enqueue_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"), false, '1.7.1', true);
    
    	}
    add_action('wp_enqueue_scripts', 'childtheme_script_manager');

    I do not see the classes applied to the html tag. Also, border-radius is not working in IE7 or 8. My css is:

    #primary {
        border:2px solid white;
    	border-radius:25px;
    	-webkit-border-radius: 25px;
    	-moz-border-radius:25px;
        padding:18px 0 0 0;
        margin-bottom:22px;
    	color:#6f6f51;
    }

    Should I be applying the css in another way? Here is my link (it's the white outline around the sidebar which should have rounded corners.. it works in 9, firefox, safari and chrome. http://anderson-lawoffices.com/2012/

    Any help is appreciated.. thanks!

    Posted 7 years ago #
  2. you sure this is live? i see WP is still enqueuing the default jquery.

    maybe try adding a higher priority:

    add_action('wp_enqueue_scripts', 'childtheme_script_manager',99);
    Posted 7 years ago #
  3. Modernizr won't do anything to help and isn't needed in this instance. You won't see the rounded corners because the IE browsers 6 ,7 and 8 don't support rounded corners through CSS.

    In the best scenario, you tell clients tough (probably in a nicer way). The older browsers don't support it and you would have to charge more to support those out of date browsers due to the fact you have to go back and use images to reproduce the rounded corners and only apply that style to those outdated browsers. You can say you are providing a lesser experience for the older browsers, while providing a faster and smoother experience to those who primarily use the newer browsers. It is going to be like this for a long time....

    If it is a must, you can use images to reproduce the rounded corners for old IE's through conditional classes or an IE specific stylesheet, or.... you could actually use polyfills which is a JavaScript that gives the older IE's the functionality, both are just more work than explaining that older browsers can't support that and anyone on a older browser probably won't notice.

    For references check http://html5please.us/ to know what needs to be done for the latest and greatest.

    Also, the polyfill you would need is CSS3 PIE, which will provide support for a few things for IE, including rounded corners. https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

    Posted 7 years ago #
  4. Ohhhhhhhh ok, I totally misunderstood the point of Modernizr. I thought it was a fall back to make css3 and html5 features work on unsupported browsers.

    I guess I could leave the square corners for IE7 and 8. I did let my client know it may not work (just in case).

    ScottNix... thanks for the links, I'll definitely check those out!

    Posted 7 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.