CSS3 Vendor-Prefixes per JavaScript erzeugen: -prefix-free

prefix-free-css3-script-logo

Die meisten von euch wird es sicher genauso nerven wie mich. Sobald man eine Website mit CSS3 umsetzen möchte, muss man zusätzlich zu den normalen CSS3-Befehlen die so genannten Vendor-Prefixes schreiben damit auch alle Browser die Eigenschaften interpretieren können. Das ist nicht nur lästig, häufig weiß man auch gar nicht genau welcher CSS3-Befehl welche Prefixes benötigt.
Ein kleines JavaScript namens prefixfree.js erleichtert euch die Arbeit enorm.

Trainings für Unternehmen und Privatpersonen

Wir machen dich fit für die Zukunft des Web! In unseren Seminaren und Workshops lernst du wie moderne Websites entstehen.

Infos zu Inhouse-Seminaren
Infos zu öffentlichen Terminen

Prefix Free verwenden

Ladet euch das JavaScript von dieser Seite herunter und bindet es im <head> (empfohlen) eurer Seite ein. Das Script erkennt anschließend automatisch <link> oder <style>-Tags und fügt die benötigten Prefixes hinzu. Ihr müsst nur noch die normalen CSS3-Befehle schreiben.
Es existiert übrigens auch ein winziges jQuery-Plugin des Scripts.

Prefix-Free Website auf GitHub

Ein paar Ausnahmen gibt es allerdings auch:

  • Per @import eingebundene Stylesheets werden nicht berücksichtigt.
  • Stylesheets die nicht direkt mit der Datei verbunden sind in welcher prefixfree.js eingebunden ist werden nicht berücksichtigt.
  • In einer lokalen Umgebung kann muss für Chrome und Opera die Interpretation manuell eingerichtet werden. Inline-Styles werden hingegen von Firefox und IE in lokalen Umgebungen nicht korrekt interpretiert. Mehr dazu hier.