Revision 143: CSS, Performance, Hörerfragen

Mit fast voller Stammbesatzung (Schepp, Stefan, Hans und Peter) stellten wir uns den CSS-Themen der Woche und nahmen uns auch eine Hörerfrage vor.

[00:00:12] News

LESSCSS 1.5

Totgesagte bringen mehr neue Versionen raus. Jetzt mit Source Maps!

Schaunotizen

[00:00:40] CSS best practices

Artikel über Cargo Cult CSS und eine Herangehensweise mit vielen Klassen laden zur Diskussion über CSS best practices ein. Wir sind nicht die einzigen, die beide postulierten Methoden etwas krass finden. Konventionen und Systeme schön und gut, aber SMACSS, BEM, OOCSS, und Konsorten scheinen uns in ihrer Gesamtheit (Stefan findet BEM zumindest in Teilen gut) dann doch Probleme lösen zu wollen, die mit CSS allein nicht zu bewältigen sind. Wir sind uns einig, dass sehr viele Probleme einfach aus der Welt zu schaffen wären, wenn man nur einen Präprozessor benutzen würde.

[00:19:11] Introducing layout boundaries

Der Summus Pontifex Ecclesiae Performansis erklärt, wie (nach den Informationen von Wilson Page) bestimmte CSS-Eigenschaften genutzt werden können, um die Auswirkungen von Reflows (layout thrashing) auf Teilbereiche der Webseite zu beschränken. Des weiteren regen wir uns darüber auf, dass es nur in Chrome (und neuerdings im IE11) Devtools gibt, die die Diagnose solcher Probleme/Features erlauben und reden über die Performance-Sünder CSS-Gradients, Box-Shadow und Border-Radius. Schepps Tipp, in Mobile-Media-Queries solcherlei Spielkram auszuschalten (z.B. per Präprozessor-Mixin) findet großen Anklang.

[00:28:57] Batching image insertion

Sie kennen das: sie wollen über 9000 Bildelemente mit Data-URLs einfügen und plötzlich ruckelt der Browser. Wilson Page hat eine Technik bzw. mit fastdom eine JS-Library ausgegraben, mit der sich dieses Problem in den Griff bekommen lässt. Auch Performance-Papst Schepp und sein treuer Kardinal Stefan schwören drauf.

[00:47:59] Hörerfrage: Wie geht ihr vor, wenn ihr ohne Designer arbeiten müsst/dürft?

Peter bruteforced mangels Designtalent seine Webdesigns mit viel Zeit und natürlich im Browser. Ansonsten finden wir Webdesigner doch ganz praktisch (vor allem wenn sie zur entspannten Zusammenarbeit bereit sind) und fabulieren ein bisschen über Transitions und Hover-States (die manch ein Designer gern vergisst), Browserdesign versus Photoshop, Flash und Hitler.

[00:50:08] Glücksrad

Das img-Element

Zum img-Element fällt uns nicht viel Intelligentes oder gar spannendes ein und so reden wir stattdessen über den Coolness-Faktor von Image Maps. Das crossorigin-Attribut klingt zwar interessant, aber so richtig viel Plan haben wir davon auch nicht. Mehr Plan und Verwendung hätten wir da schon von und für die lazyload und postpone-Attribute aus der Resource-Priorities-Spec, deren flächendeckende Unterstützung allerdings noch auf sich warten lässt.

[00:56:28] Keine Schaunotizen

Snap.svg und BonsaiJS

SVG-Grafiklibraries.

1. Kasseler Web Montag

18. November, 19:00 Uhr.

Automating Front-end Workflow

Episches Slide Deck von Addy Osmani.

localtunnel

Schnell eine Web-URL für ein lokales Projekt anlegen.