Grow your CSS skills. Land your dream job.

Modernizr, use generated class or not ?

  • # July 7, 2012 at 9:40 am

    hi,

    starting with Modernizr
    http://codepen.io/krsiakdaniel/pen/9/7

    what is correct use to target older browsers, using the default generated class in HTML (example 1.]) ?

    Test border shadow

    /* 1.] uses HTML classes */
    .no-borderradius .box {border: 3px solid green;}
    .borderradius .box {
    -webkit-box-shadow: inset 0 0 5px #333;
    box-shadow: inset 0 0 5px #333;
    }

    /* 2.] but this works too */
    .box {border: 10px solid red;}
    .boxshadow .box {
    border: none;
    -webkit-box-shadow: inset 0 0 5px #333;
    box-shadow: inset 0 0 5px #333;
    }

    I noticed you can use only class .box for older IE
    then just override it in modern browsers, supporting this feature.boxshadow .box with border: none;

    which one of these is correct use?
    (I believe no.1)

    # July 7, 2012 at 9:57 am

    QUESTION 2

    what to use Modernizr for?
    simple CSS styling stuff can be achieved without it like


    .ie7 #content {border: 1px solid #000;}
    # July 7, 2012 at 1:56 pm

    this is where I found it 1st time and it is slightly confusing to me

    http://uablogs.missouri.edu/wp-content/presentations/css3/13.2-modernizr.php

    # July 8, 2012 at 5:08 pm

    I never got into using Modernizr, but for question 2, rather then just applying a border, you can actually have modernizr create the box shadow for the user using java instead of a fallback.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".