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

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

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

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

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

Responsive Imagemap

Ein Relikt aus dem Web 1.0 ist die Imagemap, bei der man Klickflächen über ein Bild positionieren kann. Der Vorteil zum normalen "Link um Bild" ist, dass dabei geometrische Formen und individuelle Polygone verwenden können, also z.B. eine Form die im Bild sichtbar ist, nachgebildet werden kann. Die Positionswerte dieser Klickflächen basieren allerdings auf Pixelwerten, und hier beginnt unser Problem. Responsive Imagemap weiterlesen