Interview mit webinale-Speakerin Rachel Andrew

CSS vs Präprozessoren – kein Wettbewerb, sondern Performancefrage
Kommentare

CSS ist aus dem Websdesign schon lange nicht mehr wegzudenken. Dabei machte die Sprache anfangs nicht unbedingt wegen ihrer Fähigkeiten beim Umgang mit komplexen Layouts von sich reden. Heutzutage erfordern Websites aber immer öfter genau diese komplexen Layouts. Deren Umsetzung gelingt mit den aktuellen Funktionalitäten von CSS, insbesondere den neuen CSS Modules, immer besser. Wir sprechen mit Rachel Andrew über CSS3 Layout Modules, CSS Regions und Shapes sowie über Tools und Vorteile für Content-Produzenten.

CSS wird immer leistungsstärker. Aber viele Entwickler vermissen weiterhin einige der Funktionalitäten, wie sie z.B. von Präprozessoren angeboten werden. Wie siehst du diesen Aspekt?

Rachel Andrew: Es macht wenig Sinn, die Funktionalität von CSS mit der von Präprozessoren zu vergleichen. Das sind zwei völlig verschiedene Sachen. CSS rendert live im Browser. Das heißt, dass im Vorfeld jedes neue CSS-Feature ausgiebig getestet werden muss, um sicherzustellen, dass beim Laden einer Seite keine Performanceprobleme auftreten. Es liegt in der Natur von Präprozessoren, dass sie Dinge prozessieren bevor sie überhaupt in die Nähe eines Browsers kommen. Indem sie auf simpleres CSS gerendert werden, lassen sich Sachen realisieren, die sonst die Browserperformance erheblich beeinträchtigen würden.

Indes haben sich in letzter Zeit auch in CSS einige beliebte Gründe herauskristallisiert, die dafür sprechen, einen Präprozessor zu nutzen. Die CSS Custom Properties (CSS Variables) sind eines dieser Features. Sie sind sogar mächtiger als es Variablen in Präprozessoren je sein könnten, weil sie live im Browser laufen und daher während der Runtime aktualisiert werden können.

Wir sollten darüber nachdenken, was sinnvollerweise live im Browser passieren kann und was nicht. Es geht hier nicht um einen „Wer ist besser?“-Wettbewerb zwischen CSS und Präprozessoren. Wenn etwas nicht „live“ geschehen muss, gibt es keinen Grund dafür Performanceeinbußen hinzunehmen. Besteht allerdings die Möglichkeit, dass ein Feature in CSS leistungsfähiger sein könnte, sollte man dem durchaus nachgehen.

Zur Person: Rachel Andrew

Rachel AndrewRachel Andrew ist Front- und Backend-Webdeveloper, Autorin, und Speaker. Rachel schreibt regelmäßig Beiträge für diverse Online- und Offline-Publikationen und ist eine der Entwicklerinnen des Content Management Systems Perch. Mit dem im Sitepoint Verlag veröffentlichten Buch „CSS Anthology“ landete sie einen Bestseller. Auf ihrer eigenen Website rachelandrew.co.uk schreibt sie über Business- und Technologiethemen. Über ihre 2001 gegründete Firma edgeofmyseat.com bietet sie Consutling-Services an.

Du arbeitest intensiv mit CSS3 Layout Modules. Was ist deine bevorzugte Technik?

Rachel Andrew: In den letzten drei Jahren habe ich sehr viel mit dem CSS Grid Layout Module gearbeitet. Ich freue mich sehr darüber, dass es langsam seinen Weg in die Browser findet. Meiner Meinung nach stellt uns Grid neben Flexbox und dem Box Alignment Module endlich ein vernünftiges Layoutsystem für das Web zur Verfügung. Das gab es vorher nicht und deswegen ist es so aufregend, den Entstehungsprozess zu verfolgen.

CSS Regions und CSS Shapes werden schon seit Jahren sehnlichst erwartet, aber der Browsersupport ist enttäuschend. Was sind deiner Meinung nach die Gründe dafür?

Rachel Andrew: Ich glaube nicht, dass beide Module wirklich „sehnlichst erwartet“ wurden, was vielleicht den schlechten Browsersupport erklärt. Regions hat eine schwierige Vergangenheit und wurde sogar aus der Blink Engine entfernt. Shapes dagegen werden von Chrome unterstützt und stehen auf „Medium Priority“ im Edge Backlog.

Entwickler müssen beweisen, dass ihnen Features etwas bedeuten.

Wenn Entwickler wirklich möchten, dass es bestimmte Features in die Browser schaffen, dann müssen sie beweisen, dass sie ihnen auch etwas bedeuten. Bislang wurde nur wenig über Shapes und Regions geschrieben. Shapes Level 1 etwa ist in Chrome voll funktionsfähig, aber man hört wenig bis gar nichts darüber. Die Browser-Hersteller und die CSS Working Group warten auf Zeichen und Signale aus der Community:

  • Reden die Leute über diese Spezifikation?
  • Schreiben sie darüber, halten sie Vorträge auf Konferenzen?
  • Fordern sie die Features unmittelbar an?

Auch wenn man selbst gerade nichts zur Working Group beiträgt, kann man helfen, indem man deutlich macht, dass Publisher eine bestimmte Spezifikation gerne implementiert sähen. Einen Blogpost schreiben, darüber reden, Slides veröffentlichen – so zeigen wir als Community, was wir implementiert haben möchten.

Aber es existieren bereits Möglichkeiten, die genannten Techniken zu benutzen?

Rachel Andrew: Man kann jede Technik benutzen, solange man die Einbindung schrittweise verbessert. Und zwar so, dass Browser, die die Technik nicht unterstützen, keine Probleme bekommen.

Sind Tools wie Modernizr und Co. die richtigen Treiber für diese Techniken?

Rachel Andrew: Bei Modernizr handelt es sich um eine Library zur Feature-Ermittlung, mit der man seinen Code forken kann, sollte ein Feature nicht existieren. Ansätze wie Shapes funktionieren als progressive Verbesserung: Ohne Browser-Support sieht man die normalen eckigen Kanten, mit Browser-Support sieht man das Shape. Ich glaube nicht, dass es viele Vorteile bringt, hier Modernizr zu nutzen. Stattdessen sollte man alles so coden, dass es lesbar bleibt, auch wenn das Shape nicht aktiviert wird.

Lass uns über die praktischen Vorteile für Contentproduzenten reden: CSS Shapes sind insbesondere für Online-Magazine interessant bzw. praktisch. Gleichzeitig könnte sich die Integration von Shapes in einen CMS-Editor als schwierig erweisen. Sollten Redakteure sich besser mit Webtechnologien auskennen oder sind Shapes eher eine nette Spielerei für statische Seiten?

Eigentlich ist das alles nur eine Frage der verfügbaren Tools.

Rachel Andrew: In Sachen Content Management hat man durchaus mehrere Optionen. Einige Methoden zur Erzeugung von Shapes können von Content-Erstellern vollständig nachvollzogen werden. Sofern sie in der Lage sind, ein Image mit Alphakanal hochzuladen – was die Beherrschung von Photoshop oder Ähnlichem voraussetzt – könnte das Shape den Alphakanal nutzen. Wenn man will, dass die Leute Shapes in Bezug auf bestimmte Bilder definieren können, sehe ich keinen Grund, warum ein CMS nicht ein Shapes-Tool in die Bild-Upload-Funktion integrieren könnte. Content-Ersteller wären so in der Lage, eine simple Form auszuwählen oder Polygone zu zeichnen. Eigentlich ist das alles nur eine Frage der verfügbaren Tools. Möglich ist alles!

Viele der Techniken scheinen sich stark zu ähneln, bspw. Shapes und Exclusions. Würdest du da zustimmen oder übersehe ich etwas?

Rachel Andrew: Es lohnt sich, einen Blick auf die Geschichte dieser Spezifikationen zu werfen. CSS Shapes war einmal Teil des „Exclusions and Shapes“-Moduls, das von Adobe entwickelt wurde. Jedoch führen beide eine unterschiedliche Funktionen aus. Exclusions muss man sich als verankerte Float-Funktion vorstellen. Ein innerhalb des Contents platziertes Element wird vom Content gewissermaßen umflossen. Shapes ermöglicht es, Text nicht nur anhand gerader Linien auszurichten. CSS selbst wird immer modularer; anstelle von ähnlichen Specs kommt es immer häufiger vor, dass aus normalen Tasks eigenständige Module werden. Das passiert bspw. gerade mit dem Box Alignment Spec. Dies nimmt die Alignment- und Content Distribution-Eigenschaften von Flexbox und macht sie für andere Methoden verfügbar. Im Augenblick ist das namentlich Grid, aber in der Zukunft wahrscheinlich auch für andere.

Auf der Webinale wirst du einen Workshop mit dem Titel „CSS Layout for the Modern Web“ geben. Welche Themen wirst du dort behandeln?

Rachel Andrew: Ich werde einige der neueren, gerade immer nützlicher werdenden CSS-Module vorstellen, um die Leute auf den neuesten Stand zu bringen. Wir werden uns ferner das Multiple-Column-Layout anschauen und versuchen, es für etwas weniger offensichtliche Dinge einzusetzen.

Außerdem wird es einen detaillierten Abschnitt über Flexbox geben, hauptsächlich, um mit einigen der Missverständnisse aufzuräumen. Und wir werden uns meinem Lieblingsaspekt CSS-Grid-Layouts widmen und untersuchen, wie es mit Flexbox zusammenarbeitet und dabei ein neues Layoutsystem fürs Web entwirft. Auch das neue Modul „CSS Box Alignment“ nehmen wir ins Visier. Es übernimmt die Alignment- und Content-Distributions-Eigenschaften von Flexbox und wendet sie nicht nur auf das CSS Grid Layout, sondern letztendlich auch auf andere Layoutmethoden an.

Desweiteren beschäftigen wir uns mit CSS Shapes, Exclusions und einigen interessanten Features anderer, neu entstehender Spezifikationen. Mein Ziel ist, die Leute dazu zu bringen, mit dem Spezifikationen zu experimentieren. Am Ende sollen die Workshop-Teilnehmer sowohl bei der Auswahl als auch beim Einsatz neuerer Techniken selbstbewusster sein, vor allem hinsichtlich der Kompatibilität mit älteren Browsern.

International JavaScript Conference 2017

The Vue of Search Engine Optimization – How to make your Single-Page App rank well

mit Dennis Schaaf (futurice) & André Scharf (DigitasLBi)

Von 0 auf 100 – Performance im Web

mit Sebastian Springer (MaibornWolff GmbH)

I didn’t know the Browser could do that

mit Sam Bellen (madewithlove)

 

Aufmacherbild: HTML CSS3 code in code editor for digital agency via Shutterstock / Urheberrecht: Melody Smart

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -