Mordernizr, ett smart script för kräma musten ur CSS

16 Maj 2010

Jag har lekt lite med CSS3 tidigare men mest på ett hypotetiskt plan. Typ vad man skulle kunna göra om det fanns ett brett implementerat stöd för CSS3 i våra webbläsare. Enda gången då man i lugn och ro kan använda CSS3 är när man gör iPhone-sajter eftersom man då vet precis vad man har att leka med.

Men Mordernizr är en ganska finurlig bit kod som gör det enklare att extenda sina sidor med CSS3-stöd men samtidigt behålla ett alternativt utseende för alla andra. Genom att lägga in ett JS-script som bara tar 1.1kb får man helt plötsligt en rad nya CSS-klasser att leka med. En för varje CSS3-funktion som man vill använda. Så om du t.ex. vill presentera två olika utseende för en box. En som använder border-radius och en som du gör på vanligt vis använder du t.ex. följande kod:

/* Remember: use the Cascade and default values whenever possible! */

nav a {

background: #ccc url(not_adjustable_tab_image.png) bottom left no-repeat;

}

/* Note: Gecko uses non-compliant syntax! */

.borderradius nav a {

background: #ccc;

border-radius: 4px 4px 0 0;

-moz-border-radius-topleft: 4px;

-moz-border-radius-topright: 4px;

-webkit-border-top-left-radius: 4px;

-webkit-border-top-right-radius: 4px;

}

.borderradius nav a:focus,

.borderradius nav a:hover {

background-color: #fff;

}

Rätt simpelt och straight-forward. Fördelen är att man slipper att kolla vilken browser användaren kör och sedan hålla reda på vilken browser som har stöd för vad. Med detta script blir det lite enklare.

Smart och smidigt.

Mordernizr, ett smart script för kräma musten ur CSS

Kommentera inlägget