kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …


Firebug wird ab Firefox 57 nicht länger unterstützt

Das Firefox-Plugin Firebug ist eines der einflussreichsten und beliebtesten Frontend-Tools der letzten Jahre. Mit der Veröffentlichung 2005 war Firebug das erste Tool, dass es ermöglichte den HTML-, CSS- und JavaScript-Code einer Website zur Laufzeit zu debuggen und zu editieren. Firebug legte den Grundstein für die heutigen Developer-Tools der Browser und erreicht mit Firefox 57 das Ende seiner Lebenszeit. Da die modernen Developer-Tools das Plugin ohnehin überflüssig gemacht haben ist der Verlust aus meiner Sicht zu verkraften. Dennoch lohnt es sich den Abschieds-Artikel von Mozilla zu lesen, indem die Entwicklung des Tools über die vergangenen 12 Jahre zusammengefasst wird.

Direkter Link zum Artikel

Interessante Features des CSS Grid Layouts

CSS Grids erlauben Layouts die weit über die Gestaltungsmöglichkeiten von Floats und auch der Flexbox hinausgehen. Manuel Matuzovic präsentiert einige interessante und nützliche CSS Grid Layout-Features – beispielsweise negative Werte – und veranschaulicht diese anhand von Beispielen.

Direkter Link zum Artikel

Häufige Fehler im Webdesign kennen und vermeiden

Webdesign-Defizite wie zu kleine Schriften, geringe Kontraste, der Einsatz von Slidern usw. führen nachweislich zu schlechteren Konversionsraten. Kissmetrics hat zahlreiche Websites analysiert und die aus Conversion-Sicht schlimmsten Fehler zusammengefasst. Selbstverständlich inkl. einer Erklärung wie optimiert werden kann.

Direkter Link zum Artikel

Explicit und Implicit Grids im CSS Grid Layout

Das CSS Grid Layout bietet die Möglichkeit, Raster in CSS zu definieren und Objekte in Rasterzellen zu platzieren. Dabei müssen wir nicht jede Zelle, Spalte und Zeile manuell angeben und ebenso wenig müssen wir jedes Objekt manuell platzieren. CSS Grids sind flexibel genug, um sich Objekte automatisch zu platzieren. Dies wird durch das so genannte explizite und implizite Raster gehandhabt. Um was es sich dabei handelt und worin der Unterschied besteht erläutert Manuel Matuzovic.

Direkter Link zum Artikel

Die CSS-Eigenschaft »font-display«

Webfonts sind heutzutage eine Selbstverständlichkeit. Allerdings wird die Schrift von modernen Browsern so lange versteckt, bis sie komplett geladen ist. Mit der CSS-Eigenschaft font-display kann der Fallback- und Ladeprozess (FOIT, FOUT) von Webschriften ähnlich gestaltet werden wie mit JavaScript-basierten Lösungen. Allerdings ist dafür nur noch eine Codezeile nötig. Jeremy Wagener erklärt, wie font-display eingesetzt wird und welche Auswirkung die verschiedenen Werte haben.

Direkter Link zum Artikel