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

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

Responsive Tabellen

Responsive Retrofitting Teil 1

Wenn wir mit bestehenden Inhalten planen müssen, kommt es oft vor, dass wir Daten-Tabellen responsive darstellen sollen. Diese Tabellen sind naturgemäß meist sehr schwierig auf kleinen Bildschirmen abzubilden, viele Tabellen sind sehr groß und enthalten viele Daten. Das rührt daher, dass Redakteure (bzw. diejenigen, die für den Inhalt verantwortlich sind) versuchen über Excel-Tabellen komplexe Daten abzubilden und die Daten so ins Web übernommen werden (sollen). In der Vergangenheit war der Platz auf großen Bildschirmen vorhanden, im Multi-Screen-Zeitalter und in einer responsiven Website heutzutage, meist nicht mehr.

Responsive Tabellen weiterlesen

Der Viewport — das unbekannte Wesen

Seit wir uns mit Responsive Webdesign „herumschlagen müssen“, begegnet uns immer wieder das Wesen der Post-PSD-Ära – der Viewport.

Mittlerweile beherrscht er unser Tun und stellt uns immer wieder Fallen. Wir versuchen ihn zu beherrschen. Wir versuchen ihn einzugrenzen. Oft schlägt dies fehl. An dieser Stelle möchte ich meine Feldforschungsergebnisse der letzten Monate mit Euch teilen.

Browser resizing – daily business (danke an @scheibo_ für das wiederfinden des GIFs)
Browser resizing – daily business (danke an @scheibo_ für das wiederfinden des GIFs)

Vielerorts findet man Anwendungen, die über einen iframe die eingegebene Website „responsive“, also in einem bestimmten Viewport darstellen. Soweit so gut. Das ist durchaus nützlich, spiegelt aber oft nicht das Ergebnis auf den echten Geräten wieder. Man kann dabei lediglich sehen, ob die Layout-Container entsprechend umbrechen oder wie Texte laufen und Bilder sich anpassen, häufig reicht das ja auch. Vieles hängt aber bei der Darstellung auf den mobilen Endgeräten von den verwendeten Media-Queries und dem Viewport-Meta-Tag ab.
Der Viewport — das unbekannte Wesen weiterlesen

Fortgeschrittene Webtypografie mit Canvas und CSS – CSS3 Adventskalender Tag 21

Die letzten 3 Jahre haben uns Designern aufregende neue Möglichkeiten für die typografische Gestaltung von Schrift im Internet geschenkt. Schriften über @font-face direkt ins Dokument einzubinden ist mittlerweile zur Selbstverständlichkeit geworden, neue CSS Filter und Transformationen haben unser gestalterisches Vokabular entscheidend erweitert. Darüber hinaus versprechen neue CSS Eigenschaften wie „mask-image“ (derzeit nur Webkit) und Javascript Libraries wie lettering.js nie dagewesene Kontrolle über die Schriftdarstellung im Web.

Und trotzdem reichen alle diese Lösungen noch immer bei weitem nicht aus, um an die Grenzen des Möglichen zu kommen. Jeder, der einmal versucht hat, einen HTML-Text mit einem Verlauf zu füllen, weiss wovon ich rede.

Ich möchte hier eine Methode vorstellen, die zu Unrecht noch nicht die Beachtung gefunden hat, die Sie verdient: das Gestalten von Text mit der HTML5 Canvas.
Fortgeschrittene Webtypografie mit Canvas und CSS – CSS3 Adventskalender Tag 21 weiterlesen