CSS3 valide bekommen

[Modulfux]

Wer kennt das nicht, viele moderne Browser unterstützen immer mehr die CSS3-Eigenschaften, doch leider scheinen die Leute bei W3C, bzw. jigsaw ein wenig zu schlafen und der Validator haut doch prompt die furchteinflößende Meldung raus:

Die Eigenschaft ... existiert nicht.

Hmm, was nun? Der große Vorteil an CSS3 ist doch, dass man sich durch Eigenschaften wie border-radius (runde Ecken) oder box-shadow (Schlagschatten) viele Grafiken spart. Das macht nicht nur die Webseite schlanker, weil eben keine Grafiken mehr geladen werden müssen, sondern auch die Arbeit einfacher, weil man die Grafiken nicht mehr erstellen muss.

Ganz nach dem Motto "Wir machen eine Mandeloperation rektal" habe ich mal gegrübelt und schon war die Idee da. Standardmäßig hat der modified eCommerce Shopsoftware das Javascript Framework jQuery an Bord, also wieso nicht hier einfach die CSS3 Stile hinzufügen. Also schnell die general.js.php im Template öffnen und folgende Zeilen hinzufügen:

Code: Javascript  [Auswählen]

$(function() {
        $("input[type=text], input[type=password], select").css({
        'box-shadow' : 'rgba(0,0,0, 0.1)0px 0px 8px',
        '-moz-box-shadow' : 'rgba(0,0,0, 0.1)0px 0px 8px',
        '-webkit-box-shadow' : 'rgba(0,0,0, 0.1)0px 0px 8px'
        });
});
 

Erläuterung:
In diesem Beispiel gebe ich den input[type=text], input[type=password] und dem select zu den normalen Stylesheets aus der CSS-Datei noch Schlagschatten mit, welcher von modernen auch dargestellt wird.

Und das Ende vom Lied? Valider Quellcode, valides CSS und schon, sofern man diese Addons für den Firefox installiert hat, sind auch überall grüne Häkchen gesetzt.

Gruß
Ronny



Linkback: https://www.modified-shop.org/forum/index.php?topic=10428.0

[h-h-h]

WOW, das war mir halbwegs bekannt.

Doch diese Lösung ist sehr gut.

Danke für's Teilen

h-h-h