Revision 143: CSS, Performance, Horerfragen

Published: Nov. 2, 2013, 11:33 a.m.

Mit fast voller Stammbesatzung (Schepp, Stefan, Hans und Peter) stellten wir uns\nden CSS-Themen der Woche und nahmen uns auch eine H\xf6rerfrage vor.\n\n\n[00:00:12] NEWS\n\nLESSCSS 1.5\n\nTotgesagte bringen mehr neue Versionen raus. Jetzt mit Source Maps!\n\n\nSCHAUNOTIZEN\n\n[00:00:40] CSS BEST PRACTICES\n\nArtikel \xfcber Cargo Cult CSS und eine Herangehensweise mit vielen Klassen laden\nzur Diskussion \xfcber CSS best practices ein. Wir sind nicht die einzigen, die\nbeide postulierten Methoden etwas krass finden. Konventionen und Systeme sch\xf6n\nund gut, aber SMACSS, BEM, OOCSS, und Konsorten scheinen uns in ihrer Gesamtheit\n(Stefan findet BEM zumindest in Teilen gut) dann doch Probleme l\xf6sen zu wollen,\ndie mit CSS allein nicht zu bew\xe4ltigen sind. Wir sind uns einig, dass sehr viele\nProbleme einfach aus der Welt zu schaffen w\xe4ren, wenn man nur einen Pr\xe4prozessor\nbenutzen w\xfcrde.\n\n[00:19:11] INTRODUCING LAYOUT BOUNDARIES\n\nDer Summus Pontifex Ecclesiae Performansis erkl\xe4rt, wie (nach den Informationen\nvon Wilson Page) bestimmte CSS-Eigenschaften genutzt werden k\xf6nnen, um die\nAuswirkungen von Reflows (layout thrashing) auf Teilbereiche der Webseite zu\nbeschr\xe4nken. Des weiteren regen wir uns dar\xfcber auf, dass es nur in Chrome (und\nneuerdings im IE11) Devtools gibt, die die Diagnose solcher Probleme/Features\nerlauben und reden \xfcber die Performance-S\xfcnder CSS-Gradients, Box-Shadow und\nBorder-Radius. Schepps Tipp, in Mobile-Media-Queries solcherlei Spielkram\nauszuschalten (z.B. per Pr\xe4prozessor-Mixin) findet gro\xdfen Anklang.\n\n[00:28:57] BATCHING IMAGE INSERTION\n\nSie kennen das: sie wollen \xfcber 9000 Bildelemente mit Data-URLs einf\xfcgen und\npl\xf6tzlich ruckelt der Browser. Wilson Page hat eine Technik bzw. mit fastdom\neine JS-Library ausgegraben, mit der sich dieses Problem in den Griff bekommen\nl\xe4sst. Auch Performance-Papst Schepp und sein treuer Kardinal Stefan schw\xf6ren\ndrauf.\n\n[00:47:59] H\xd6RERFRAGE: WIE GEHT IHR VOR, WENN IHR OHNE DESIGNER ARBEITEN\nM\xdcSST/D\xdcRFT?\n\nPeter bruteforced mangels Designtalent seine Webdesigns mit viel Zeit und\nnat\xfcrlich im Browser. Ansonsten finden wir Webdesigner doch ganz praktisch (vor\nallem wenn sie zur entspannten Zusammenarbeit bereit sind) und fabulieren ein\nbisschen \xfcber Transitions und Hover-States (die manch ein Designer gern\nvergisst), Browserdesign versus Photoshop, Flash und Hitler.\n\n\n[00:50:08] GL\xdcCKSRAD\n\nDAS IMG-ELEMENT\n\nZum img-Element f\xe4llt uns nicht viel Intelligentes oder gar spannendes ein und\nso reden wir stattdessen \xfcber den Coolness-Faktor von Image Maps. Das\ncrossorigin-Attribut klingt zwar interessant, aber so richtig viel Plan haben\nwir davon auch nicht. Mehr Plan und Verwendung h\xe4tten wir da schon von und f\xfcr\ndie lazyload und postpone-Attribute aus der Resource-Priorities-Spec, deren\nfl\xe4chendeckende Unterst\xfctzung allerdings noch auf sich warten l\xe4sst.\n\n\n[00:56:28] KEINE SCHAUNOTIZEN\n\nSNAP.SVG UND BONSAIJS\n\nSVG-Grafiklibraries.\n\n1. KASSELER WEB MONTAG\n\n18. November, 19:00 Uhr.\n\nAUTOMATING FRONT-END WORKFLOW\n\nEpisches Slide Deck von Addy Osmani.\n\nLOCALTUNNEL\n\nSchnell eine Web-URL f\xfcr ein lokales Projekt anlegen.