Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Beste Agenturen
  • Magazin
  • Beste Agenturen
  • Magazin
Dr. Web Logo seit 1997.
  • Kontakt
  • Anmeldung
  • Newsletter
  • Beste Agenturen
  • Magazin
Menü
  • Beste Agenturen
  • Magazin
Suche
Agenturpartner werden →
Dr. Web » Design » -prefix-free: Ein konsensfähiger Beitrag zur Prefix-Debatte

-prefix-free: Ein konsensfähiger Beitrag zur Prefix-Debatte

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 2 Minuten
  • von Dieter Petereit
  • 26. April 2012

Gibt es eine Webkit-Monokultur im Netz? Opera-Evangelist Bruce Lawson und einige andere Mitglieder der CSS Working-Group des W3C sehen es so. Die Dominanz des iOS auf mobilen Clients begünstige die Entwicklung hin zu einer rein webkit-fokussierten Auszeichnung der CSS-Dateien aktueller Webapps. Ein große Zahl von Developern würde ihre Apps nur auf iOS-Clients testen und sich nicht einmal dann um die standardkonforme Schreibweise kümmern, wenn es sie gäbe. So würden webkit-exklusive Websites auch dann entstehen, wenn es gar nicht erforderlich wäre.

Andere Meinungen schreiben am Markt verfügbaren Frameworks und Boilerplates die Schuld zu. Opera, Microsoft und Mozilla wollen auf diese vermeintliche Bedrohung, bald gänzlich vom mobilen Markt verschwunden zu sein, reagieren, indem sie Webkit-Prefixes in ihren eigenen Browsern unterstützen. Dass es auch anders gehen kann, zeigt Lea Verou mit ihrem Tool -prefix-free.

prefix free -prefix-free: Ein konsensfähiger Beitrag zur Prefix-Debatte

-prefix-free setzt erforderliche Prefixes zur Laufzeit selber

-prefix-free ist ein kostenlos verfügbares Javascript, das es erlaubt, CSS stets ohne Prefixing, also immer in der standard-konformen Auszeichnung zu schreiben. -prefix-free setzt etwa erforderliche browserspezifische Prefixes zur Laufzeit selber. Das Tool wird von Lea Verou sorgfältig fortentwickelt und unter MIT-Lizenz bereit gestellt. Selbst CSS-Guru Eric Meyer lobt Verous Script in den höchsten Tönen.

Browserprefixing ist eine zumeist lästige, weil aufwändige, aber unabdingbare Vorgehensweise bei der Erstellung von CSS-Stylesheets. Es ist jedoch immer noch um Längen besser als das in der Vergangenheit übliche CSS-Hacking. Browserprefixes sprechen gezielt Implementierungen der jeweiligen CSS-Elemente des jeweiligen Browsers an. So lässt sich sicherstellen, dass der Benutzerbrowser erkennt, wie eine bestimmte Anweisung mit seinem eigenen Featureset umgesetzt werden kann.

Das Problem ist, dass es viele verschiedene Browser mit vielen verschiedenen Implementierungen gibt, so dass ein CSS-File heutzutage schnell schwer lesbar ob der ganzen Prefixes wird. Dabei ist nicht nur die Lesbarkeit beeinträchtigt, auch die Wartung des Stylesheets wird schwieriger. Entwicklerin Lea Verou wollte sich den ganzen Kraut- und Rüben-Code nicht länger anschauen müssen und entwickelte eine Lösung.

Ihr Script -prefix-free erlaubt es dem Designer, CSS-Files zu schreiben, ohne dabei Browserprefixes zu verwenden. Prinzipiell müsste er sie nicht einmal kennen. Im Kopf der jeweiligen Seite eingebunden, idealerweise direkt nach dem Einbinden der Stylesheets, sorgt -prefix-free zur Laufzeit dafür, dass der Zielbrowser über das korrekte Prefix angesprochen wird. Die Einbindung zur Laufzeit ist das stärkste Argument für die Umsetzung des Scripts als clientseitige Implementation im Gegensatz zu einer serverseitigen Abwicklung dieser Aufgabe.

Wer für bestimmte Fälle sicherstellen will, dass auch tatsächlich das korrekte Prefix gesetzt werden wird, der kann natürlich weiterhin entsprechende Anweisungen manuell einbauen. -prefix-free übergeht bereits mit Prefixes versehene Anweisungen.

-prefix-free steht zur kostenlosen Verwendung unter GitHub zur Verfügung. Es kann auch als jQuery-, sowie als Dynamic DOM Plugin verwendet werden. Unberechtigterweise muss sich Lea Verou aus den Reihen der Standardverfechter Kritik gefallen lassen. Sie begünstige die Webkit-Monokultur noch, wird ihr vorgeworfen. Dabei ist bei verständiger Betrachtungsweise das Gegenteil der Fall. Lea plädiert auf Einhaltung der Standards durch den Webdeveloper. Das Prefixing macht die Maschine…

Offtopic: Es lohnt sich auch, Lea Verous Projekt Animatable, eine Galerie mit CSS Transitions im Auge zu behalten!

Dieter Petereit

Dieter Petereit

Dieter Petereit ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für Technik-affine Medien wie T3N und Dr. Web. Dieter war acht Jahre lang Chefredakteur des Dr. Web Magazins.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Logo der Adfera Webdesign Agentur Erfurt.

ADFERA – Webdesign & Online Marketing

Erfurt

Rocket Backlinks Logo.

Rocket Backlinks

Aalen

Trend Maker Marketing Agentur Regensburg Logo

Trend Maker Marketing – Webdesign Agentur Regensburg

Regensburg

Logo der Online Solutions Group. Motto: Your Link to Success.

Online Solutions Group

München

WP Agentur

wp-agentur.de | WordPress-Agentur

Köln

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
Junger Mann, der in einer SEO-Agentur arbeitet arbeitet und in die Kamera lächelt.
SEO

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Inhaber einer WordPress-Agentur, am Tisch sitzt und in die Kamera schaut.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

0 Antworten

  1. 32bitfloat sagt:
    28. April 2012 um 12:22 Uhr

    Ich würde das Skript einerseits gerne zur Entlastung einsetzen, andererseits grauts mir dann vor den Usern mit deaktiviertem Javascript (auch wenn der Anteil gering ist), sodass ich die Prefixes zur Sicherheit doch wieder selbst reinkloppen würde…

    Antworten
    1. Dieter Petereit sagt:
      30. April 2012 um 12:56 Uhr

      In diesem Falle wäre wohl der weiter oben verlinkte CSS Prefixer empfehlenswert.

  2. Michael sagt:
    27. April 2012 um 14:29 Uhr

    Hier schließe ich mich Jens vollkommen an. Ich sehe da neben der Performance noch einen anderen Punkt: CSS-Prefixes wurden nicht ohne Grund eingeführt. Der Sinn ist schließlich der, dass noch nicht fertige CSS-Features bereits im Draft verwendet werden können. Anhand der Gradients sieht man deutlich, wie sich hier alles innerhalb von kürzester Zeit doch wieder ändern kann.
    prefix-free geht nun aber hin und erhebt alle Prefixes für jeden Browser in ein Release-Stadium, da automatisch alle Prefixes gesetzt werden. Das ist aber unlogisch, da es auch vorkommen kann, dass ein CSS-Feature mit Prefix im Browser integriert ist, aber nur fehlerhaft funktioniert.

    Man sollte als Webentwickler schon wissen, wann man welchen Prefix verwendet. Dafür gibt es, wie Jens schon erwähnte, auch Präprozessoren (SASS, Compass, LESS, Stylus) oder Code-Snippets im Editor, welche man alle nach seinen Bedürfnissen anpassen kann.

    Die Performance wird in den meisten Fällen zwar durchaus marginal in Mitleidenschaft gezogen, aber in Anbetracht der zur Verfügung stehenden Geräte kann man hier durchaus Requests und Performance einsparen. Selbst mein iPhone 4 hat scheinbar nicht genug Power um JavaScript in annähernd gleicher Geschwindigkeit auszuführen wie ein Desktop-Rechner. Es verträgt sich nun einmal nicht, wenn man auf der einen Seite Bytes und Requests sparen will, womöglich über Responsive Images nachdenkt, dann aber wieder ein unnötiges Script drauf packt.

    Antworten
    1. Dieter Petereit sagt:
      27. April 2012 um 19:32 Uhr

      Ich will da keinen Glaubenskrieg vom Zaun brechen, gebe aber noch zweierlei zu bedenken:

      1. -prefix-free ermöglicht dem Developer, der W3C-Empfehlung zu folgen, die da lautet „Authors should avoid vendor-specific extensions“.
      2. Dadurch das -prefix-free nicht alle Prefixes zwanghaft reinkloppt, sondern vorab ermittelt, was der Browser, der eben die Seite aufruft, kann, unterlässt -prefix-free das Setzen nicht mehr erforderlicher Prefixes. Ob der Developer das auch tut? Hier ist ja zusätzlich zu beachten, dass sich die Fähigkeiten der Browser permanent ändern. Ich habe für meine Stylesheets bei den Kunden keine Patenschaft übernommen.

    2. Michael sagt:
      28. April 2012 um 14:03 Uhr

      1. Ok, der Developer hält sich dann daran, aber -prefix-free nicht.
      2. Nicht mehr erforderliche Prefixes weg zu lassen ist je nach Browser auch gut, aber ist man sich dann immer sicher, dass -prefix-free das auch korrekt macht? Außerdem findet dann wohl nicht nur ein automatisiertes Setzen von Prefixes statt, sondern ein Feature-Test. Verwendet man gleichzeitig Modernizr, dann werden beim Rendern einer jeden Seite bestimmte Featur-Tests doppelt ausgeführt. Das macht nun überhaupt keinen Sinn.

      Des weiteren holt man sich wieder ein unnötiges fremdes Script in die Seite, welches außerdem Bugs enthalten kann (siehe Github Commits und Issues). Ich halte da nichts von. Setze ich die Prefixe in SASS oder per Snippet, dann erzeugt das zumindest keine JavaScript-Bugs 😉

      Die Frage ist doch, ob der Vorteil (Prefixe nicht mehr schreiben) den Nachteilen überwiegt. Das trifft nur in meinen Projekten nie zu.

  3. Jens Grochtdreis sagt:
    26. April 2012 um 17:04 Uhr

    Leas Skript macht in meinen Augen Sinn, wenn ich es im Rahmen des Prototypings oder bei einer HTML-Präsentation nutze. Für eine echte Seite empfinde ich die Idee eher als Frechheit, denn als gut.

    Warum soll der Endnutzer unter der Faulheit des Entwicklers leiden? Das ist ja das Ergebnis dieser Generierung zur Laufzeit. Sie verlangsamt die korrekte Darstellung, weil ja erstmal die korrekten Prefixes erzeugt werden müssen.

    Wer sich Arbeit sparen möchte, sollte Snippets in seinem Editor einrichten oder einen Präprozessor wie Sass oder Less nutzen.

    Antworten
    1. Dieter Petereit sagt:
      26. April 2012 um 17:24 Uhr

      Hmm. Na ja, als Frechheit würde ich die Arbeit Leas nicht bezeichnen wollen. Ich sehe auch nicht, dass es auf Faulheit des Entwicklers schließen lässt, wenn er sich eines Prefixers bedient. Ich bin immer froh, wenn ich meine Arbeit mit Tools beschleunigen kann und ich bin bestimmt nicht faul.

      Tatsache ist natürlich, dass der Einsatz von -prefix-free einen – wenn auch minimalen – Effekt auf die Performance hat. Bei großen Stylesheets könnte es allerdings durchaus sein, dass die mit -prefix-free zu parsende Datei aufgrund ihrer weit geringeren Größe den Performancenachteil durch den Downloadvorteil wieder wett macht.

      Wer den unbestreitbaren kleinen Performanceeffekt scheut, der muss dennoch nicht alles zu Fuß prefixen, sondern könnte sich beispielsweise des Tools CSS Prefixer von myfreeweb bedienen. Der macht ein Rewrite und parst nicht zur Laufzeit: https://github.com/myfreeweb/cssprefixer

  4. Need_you sagt:
    26. April 2012 um 13:40 Uhr

    Klasse Tipp! Deswegen schau ich jetzt hier wirklich beinahe jeden Tag wieder vorbei!

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.
Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Allgemein
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress
  • Allgemein
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • VPN
  • Webdesign
  • WordPress

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑