Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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.

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 6 Kommentare

  1. 23 neue Tools, Scripte und Frameworks für Webdesigner – März 2013 | kulturbanause blog
    schrieb am 22.03.2013 um 08:39 Uhr:

    […] Das Script fügt die notwendigen Vendor-Prefixes automatisch ein und ist sehr vergleichbar mit -Prefix-Free. Polyfill für CSS3 […]

    Antworten
  2. Michael
    schrieb am 27.10.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 ;)

    Antworten
  3. René
    schrieb am 26.10.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é

    Antworten
  4. Dieter
    schrieb am 19.10.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.

    Antworten
  5. Michael
    schrieb am 19.10.2011 um 09: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).

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 19.10.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.

      Antworten

Schreibe einen Kommentar zu 23 neue Tools, Scripte und Frameworks für Webdesigner – März 2013 | kulturbanause blog Antworten abbrechen

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →