CSS3 Trick – Box Schatten und Modernizr

Beispiel zum Einsatz vom Modernizr Artikel, Umsetzung der Klassen.

HTML

<div id="test">Medieninformatik Rocks!</div>

CSS

.boxshadow #test {
    -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.5);
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    border-width: 0;
}

#text {
    /* modernizr hin oder her, diese Formatierung geht immer */
    border-right: 1px solid #000;
    border-bottom: 2px solid #000;
}

.no-boxshadow #test {
    /* ersatz code für browser bei denen der schatten nicht greift */
}

Wird Box Shadow unterstützt fügt Modernizr die Klasse hinzu, somit greift der erste Block. Ist es nicht im Browser ausführbar, also kein Box Shadow erstellt Modernizr die no-boxshadow Klasse. Done.

Ist JavaScript deaktiviert wird die modernizr.js nicht aktiviert. Dies kann natürlich wieder von Modernizr festgestellt werden.
Eine Klasse no-js heißt JavaScript ist deaktiviert.

.no-js #test {
    /* ist JavaScript deaktiviert kommt dieser Block zum Einsatz in der Formatierung */
}
Advertisements

Kommentare

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s