Anselm, Schepp und Stefan nehmen sich zwei herumsurrende Artikel als Anstoß für ein ausgedehntes Plaudern aus dem Nähkästchen.
Schaunotizen
- [00:00:27] Converting Font Icons to SVG
- Sara Soueidan erklärt den Icon Fonts den Tod mit diesem ausführlichen Migrations-Guide. Wir sprechen über unsere Erfahrungen und den Problemchen, loben aber auch gleichzeitig neue Workflows und ein viel „sauberes“ Entwicklungserlebnis.
- [00:25:20] Container Queries: Once more unto the breach
- Media Queries sind fein, man stößt allerdings schnell an seine Grenzen wenn man nicht das gesamte Bild betrachten möchte, sondern im Detail pro Komponente das Look and Feel bestimmen möchte. Container Queries sind der Titel einer neuen Spezifikation, die sich genau um solche Dinge kümmern wollen. Wir erklären warum die ehemals genannten „Element Queries“ nun anders heißen, welches grundlegende Problem mit dieser Neubenamsung umgangen wird und wie man sie heute schon einsetzen kann. Schepp zum Beispiel schwört auf diesen Polyfill.
[00:51:21] Keine Schaunotizen
- Hotel
- Hotel lässt alle eure Entwicklungsserver und die damit verbundenen Host-Einträge bequem über eine Weboberfläche verwalten.
- Riot.js
- Eine User Interface Bibliothek, die sich an React hält aber mit deutlich geringerem Footprint auskommt.
- Stylefmt
- Coding Guidelines sind wichtig, sie einzuhalten kann schwer sein. Stylefmt formatiert eure Stylesheets nach einem festgelegten Regelwerk. Pre-Commit-Hook, und fertig ist die Einheitlichkeit.
- Rollupify
- Rollup ist groß. Browserify ist groß. Beides zusammen gibt laut Engineering-Meister Rodney in seinem Projekt über 40% Platzeinsparung. Hossa!
Kommentare
ausi #
Geschrieben am 19.05.2016 um 01:01
Interessante Revision! Sie hat genau zwei Themen getroffen mit denen ich mich in letzter Zeit auseinandergesetzt habe, da dachte ich: ich gebe mal meinen Senf dazu :)
Das große Manko an SVG-Icons sehe ich auch wie Stefan darin, dass sie nicht rein über CSS eingebunden und eingefärbt werden können, was mit Icon-Fonts problemlos möglich ist.
Ich hatte es auch zuerst mit `background-blend-mode` versucht, kam aber nicht weiter als bis hier: http://codepen.io/anon/pen/GZbgKR
Mit `mask-image` würde es funktionieren http://codepen.io/anon/pen/RazwXX der Browser-Support dafür ist aber leider noch sehr dürftig: nur Blink/Webkit http://caniuse.com/#feat=css-masks
Bezüglich des Container Queries Prolyfill: Dort gibt es auch die Möglichkeit ohne Ajax-Requests für die CSS-Dateien auszukommen mithilfe von PostCSS https://github.com/ausi/cq-prolyfill/blob/master/docs/postcss.md oder Sass https://github.com/ausi/cq-prolyfill/issues/17
Der aktuelle Status ist meines Wissens von einer Spezifikation noch weit entfernt. Dave Rupert hat Anfang dieses Jahres mal ein „The State of Container Queries“-Gist verfasst: https://gist.github.com/davatron5000/bbede54cf189bf53e4de
Die Erzeugung eines „Viewports“ für Elements oder Containers war soweit ich weiß nur einer der ersten Vorschläge von Tab Atkins http://www.xanthir.com/b4PR0 und wird nicht unbedingt als die Lösung des Problems angesehen.
Dass der Sprung von Element zu Container Queries das Recursion-Problem nicht löst, sehe ich auch so https://github.com/ResponsiveImagesCG/cq-demos/pull/2 allerdings ist es meiner Meinung nach möglich „recursion-free“ Container Queries zu implementieren https://github.com/ResponsiveImagesCG/container-queries/issues/3 was mein Prolyfill versucht zu zeigen.
Den Grund warum Browser-Entwickler Container Queries als problematisch ansehen sehe ich nicht nur im Recursion-Problem sondern vor allem auch in der Schwierigkeit der Umsetzung. Aktuell arbeiten die Rendering-Engines der Browser (soweit ich das bis jetzt verstanden habe) in den Schritten Compute Style -> Layout -> Paint. Mit Container Queries müsste jedoch mehrfach zwischen den Schritten Layout und Compute Style hin und her gesprungen werden, was offenbar kompliziert und nicht performant ist.
Wenn jemand den Container Queries Prolyfill mal ausprobieren möchte, darf er mich gerne mit Fragen, Wünschen oder Feedback löchern :) https://github.com/ausi/cq-prolyfill
RSS-Feed zu diesem Beitrag
Kommentare sind für diesen Beitrag geschlossen.