kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

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 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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

5 Kommentare

  1. Michael

    Verfasst am 19. Oktober 2011 um 9:23 Uhr.

    Hallo Jonas,

    mich würde wirklich einmal deine Meinung dazu interessieren. Würdest du das auf Dauer einsetzen wollen, oder eher nicht?
    Ich sehe das aus drei Gründen kritisch:
    1. werden keine CSS-Dateien unterstützt, welche mit @import nachgeladen werden, 2. benötigt man immer JavaScript, damit meine CSS3-Styles angezeigt werden und 3. ist es meiner Meinung nach ein unnötiger HTTP-Request.

    Punkt 3 kann man noch aus der Welt schaffen, wenn man die Datei einfach in eine andere geladene integriert, aber Punkt 1 und 2 stören mich noch immer. Auch wenn @import keine gute Lösung für Live-Webseiten ist, so entwickle ich immer mit importierten Stylesheet-Dateien. Das erleichtert die Übersicht enorm. Abschließend wird das dann zwar mit dem Build-Script zusammengefügt, aber ich würde mein CSS3 auch schon gerne während der Entwicklung begutachten können.

    Mein Fazit: Ich verzichte gerne auf dieses tolle Script.
    Mich wundert, dass etwas so in meinen Augen so überflüssiges, so die Runde macht (TechCrunch, t3n und hier).

    • Jonas Hellwig

      Verfasst am 19. Oktober 2011 um 10:14 Uhr.

      @Michael: Ich kann deine Kritikpunkte nachvollziehen – sehe das persönlich aber (mittlerweile) etwas anders.

      zu 1) @import nutze ich aus Performance Gründen nie. Natürlich kann man auch das wieder gerade biegen – ich verzichte nur von vorne herein darauf.
      zu 2) Das mit dem JavaScript ist natürlich vollkommen richtig. Aber um CSS3 im IE8, IE7 etc. nachzurüsten benötigt man natürlich auch JavaScript – und welche moderne Website kommt heute noch ohne aus? Eine vernünftige Fallback-Lösung muss dann natürlich her.

  2. Dieter

    Verfasst am 19. Oktober 2011 um 13:47 Uhr.

    Den Stress tue ich mir nicht mehr an, wenn man eh schon Scripte einsetzt, dann doch gleich jQuery / ExtCore / usw. dann kann man sich das rumgehampel mit CSS2/3 und verschiedenen Browsern komplett sparen.
    Die Seiten werden so umgesetzt, dass sie auch ohne Skripte funktionieren, aber man evtl. gewisse optische Abstriche machen muss.

  3. René

    Verfasst am 26. Oktober 2011 um 11:31 Uhr.

    @ Dieter es gibt aber ein schöne js die ich nicht mehr Missen möchte…

    Sieht in WordPress bei mir so aus :) –>

    <!--[if lt IE 9]>-->
    <script src="/js/html5.js" type="text/javascript">

    —————–
    Ich hab eine frage zum css Import.
    Das Problem habe ich aber nicht, wenn ich mit:

    arbeite oder??

    LG
    René

  4. Michael

    Verfasst am 27. Oktober 2011 um 19:52 Uhr.

    @Jonas: Ich verwende gerne @import bei der Entwicklung, da ich so einen bessern Überblick habe. Das bleibt aber natürlich jedem selbst überlassen ;) Was die Performance angeht, so hast du natürlich recht. aus diesem Grund nutze ich am Ende eines Projekts dann das Build-Script von Paul Irish, welches alle CSS-Dateien in eine packt und dabei direkt Kommentare entfernt.

    Ich verfolge dann immer noch den Standpunkt, dass ich dem Client möglichst alles abnehme, was ich ihm an Arbeit abnehmen kann. Das heißt: So wenig JavaScript, Grafiken, Requests wie nötig und so viel wie nötig.
    Auch wenn es nur 5kb und ein Request mehr sind, so kann ich mir diese in modernen Browsern sparen. Da ist mir schon fast der Ansatz von Andy Clarke lieber, der CSS3 den alten Browsern komplett verweigert und sie eben nicht mit JavaScript nachrüstet. Pech gehabt ;)

    Mit SASS oder LESS kann man dann solche Prefixes auch automatisiert erstellen lassen, ohne dass eine weitere JavaScript-Datei benötigt wird. Mit einem guten Editor kann man auch selbst ein paar ZEN-Shortcuts definieren, die einem die Arbeit abnehmen. Es gibt also viele Alternativen, die einem die Tipparbeit abnehmen ;)

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.