Native CSS Grid Layouts ohne Framework – ein einfaches Beispiel

Für die nächste Ausgabe des t3n Magazin (Nr. 48) schreibe ich einen Artikel über CSS Grids… hier vorab ein kleiner Ausschnitt daraus.

Eine neue CSS Grid Layout Spezifikation gibt Webworkern nun die Möglichkeit eigene Grids nach den jeweiligen Anforderungen selbst zu definieren. Das ist nicht nur für Seitenlayouts, sondern auch für Modul-Layouts sehr nützlich. Aber zugegeben sind auch sehr viele neue Eigenschaften zu lernen, 17 neue Eigenschaften in Summe.

Native CSS Grid Layouts ohne Framework – ein einfaches Beispiel weiterlesen

Sass Parent Selector – ‚&‘ (ampersand)

Für eine Schulung zum Thema „Sass“ habe ich einige Möglichkeiten zum Einsatz des so genannten „Parent Selector“ zusammen gestellt.

Kurz notiert – was macht der „Parent Selector“?
Der „Parent Selector“ referenziert in einer verschachtelten Regel den Eltern-Selektor und verbindet beim Kompilieren die Knoten zum endgültigen Selektor. Das ‚&‘ Ampersand dient als Platzhalter. Hier ein einfaches Beispiel:

Sass Parent Selector – ‚&‘ (ampersand) weiterlesen

Nützliche PostCSS-Module

Gibt es die überhaupt, wird sich so mancher denken… und die Antwort ist wie immer – it depends™. Natürlich gibt es nützliche PostCSS-Module, die Entwicklern beim Schreiben von CSS unterstützen, für andere passt es eher nicht in den Workflow. Nur weil es das jetzt gibt, heißt es nicht, dass jeder Webworker es gleich einsetzen muss. Dennoch denke ich, dass bei vielen mindestens ein PostCSS-Modul Einzug in den Build-Prozess gefunden hat, nämlich Autoprefixer.

Nützliche PostCSS-Module weiterlesen

Flexbox Fallbacks

Aktuell bekomme ich des Öfteren eine Diskussion über den Einsatz von Flexbox in aktuellen Webprojekten mit. Häufiges Thema ist dabei, dass der IE9 Flexbox nicht unterstützt und aus diesem Grund lieber auf Flexbox verzichtet wird. Ich muss zugeben, dass ich seit mehreren Jahren in Mobile- oder Responsive-Projekten arbeite und dort nur äußerst selten noch IE9- oder IE8-Support benötigt wird. Somit kann ich schon länger fast ausschließlich Flexbox verwenden ohne einen Fallback inkludieren zu müssen. Deswegen kann ich die Diskussion vielleicht nicht so nachvollziehen, da Flexbox mittlerweile zu meinen täglichen Tools zählt. In diesem Blog-Post möchte ich mal ein paar typische Flexbox-Fallback-Möglichkeiten skizzieren.

Flexbox Fallbacks weiterlesen

Responsive iFrames

Responsive Retrofitting Teil 3

Ein Blogpost der nunmehr 3 Jahre auf Vollendung wartet, ist jetzt endlich fertig :)

Responsive iFrame? Das klingt schon falsch und ist auch ein schwieriges Pflaster. Grundsätzlich können iFrames responsive sein, Voraussetzung ist natürlich, dass sich deren Inhalt ebenfalls responsive verhält. Es ist ja quasi ein Browserfenster im Browserfenster. Doch die Anpassung der Breite ist nicht das Problem, die Anpassung der Höhe macht es kompliziert.

Responsive iFrames weiterlesen

Content Source Order in RWD

Responsive Retrofitting Teil 2

Diese kleine Serie gibt ein paar Beispiele, wie man ein paar knifflige Aufgaben beim „responsive-fähig-machen” einer Desktop-Seite lösen kann.

Wie schon in Teil 1 zum Thema „Responsive Tabellen“, nochmals vorab der Hinweis, dass man bei einer umfangreicheren Seite mit neuer Code-Basis im Mobile-First-Modus starten sollte.

Ein häufiges Problem beim sogenannten „Responsive Retro Fitting”, also bestehende Desktop Webseiten „responsivefähig” zu machen, ist die visuelle Neuordnung von Inhalt, wenn man am bestehenden Markup nichts ändern kann/darf.

Content Source Order in RWD weiterlesen

CSS clip-path

clip-path ist eine neue CSS-Eigenschaft, die wie viele andere CSS3-Eigenschaften ebenfalls den Ursprung in SVG hat. Wie bei shapes-outside kann man clip-path über Pfadfunktionen wie circle(), ellipse(), inset() oder polygon() eine Form zuweisen, die dann das Bild oder den Container in der jeweiligen Form beschneiden. Alles, was außerhalb der definierten Form ist, wird entfernt und der Hintergrund des Elternelements erscheint.

Die alte Eigenschaft clip gibt es zwar schon länger in CSS, wurde jetzt aber überarbeitet spezifiziert. Der aktuelle Einsatz von clip ist sicherlich ein anderer als ursprünglich angedacht. Meist nutzen Webworker clip für barrierefreies Verstecken von Elementen wie <input type="radio" /> um ein Custom-Design zu integrieren und gleichzeitig die Browser-Funktionen zu erhalten. Die HTML-Boilerplate nutzt dies in der .visuallyhidden Definition. CSS clip-path weiterlesen

CSS Shapes – neue Formen braucht das Web

Die Welt ist eine Scheibe und das Web ist eckig… so ungefähr könnte man anfangen um in das Thema einzusteigen. Aber ihr wisst ja, dass es anders ist.

Nachdem wir mit CSS3 schon die Möglichkeit bekommen haben, die Ecken einer Box optisch abzurunden, bleibt natürlich eines offen – der Text bricht nach wie vor an der „geraden” Box-/Bildkante um, dass heißt er orientiert sich z.B. nicht an der Kante von border-radius, erst recht nicht am Inhalt des Bilds. Die eigentliche Box bleibt viereckig. Das ändert CSS-Shapes.

CSS Shapes – neue Formen braucht das Web weiterlesen

SVG Sprites vs. Icon-Fonts

Aktuell stellt sich mir häufiger die Frage „SVG-Icons oder Icon-Fonts” zu verwenden. Wer für ein Multi-Display-Web entwickelt, kommt nicht drumherum Bilder und Icons hochauflösend bereit zu stellen. Mit dem iPhone4 und dem sog. „Retina Display” hat man schnell gemerkt, dass normal auflösende Bildinhalte auf dem Display pixelig aussehen. Bisher war die einfache Lösung, die Icon-Sprites (PNG) in doppelter Auflösung anzulegen bzw. generieren zu lassen. Das Problem, dass die Icons dann trotzdem nur in einer „Ansichtsgröße” vorliegen, bestand weiterhin.

Iconfonts, also Schriften á la Dingbats, die anstatt Buchstaben und Ziffern Symbole haben, wurden bisher als ein adäquates Mittel für skalierbare Icons eingesetzt. Dass das auch immer mit Problemen behaftet ist, werden viele Webentwickler schon festgestellt haben.
SVG Sprites vs. Icon-Fonts weiterlesen

Webfonts *richtig* verwenden

Da fragt sich jetzt der ein oder andere Webentwickler „Was kann man da falsch machen? Man bindet den (new) Bulletproof @font-face Syntax ein und gut ist“. Problem hierbei wie immer unser geliebte OldIE, der Webfonts zwar schon im zarten Alter von Version 5.5 beherrschte, aber immer noch einen „alten“ Syntax braucht.

Das Problem: faux-bold

faux bold text
Fehldarstellung – der Browser interpoliert die Schriftfetten

Webfonts *richtig* verwenden weiterlesen