CSS Grid Layout Module

grid-layout-module

CSS bietet verschiedene Ansätze um das Layout einer Website zu konstruieren. Neben Hilfstechnologien wie Floats, mit denen es ebenfalls möglich ist ein Layout aufzubauen, existieren auch einige »echte« Layout-Modelle die nur zu diesem Zweck entwickelt wurden. Der Unterschied ist, dass ihr mit Hilfe eines echten Layout-Modells deutlich flexibler seid was die Anordnung von Elementen über verschiedene Displaygrößen hinweg angeht. Neben dem Flexbox-Modell existiert auch das sog. CSS Grid Layout Module.

Beitrag zu Ende lesen

Automatische Kompression beim Upload von Bildern in die WordPress-Mediathek deaktivieren

wordpress-kompression-mediathek

WordPress komprimiert Bilder beim Upload in die Mediathek automatisch. Das kann praktisch sein, muss es aber nicht. Insbesondere bei Portfolios mit dem Fokus auf Design oder Fotografie stört die Kompression, da JPG-Artefakte sichtbar werden können. Mit einer kleinen Anpassung schaltet ihr die Kompression ab.

Beitrag zu Ende lesen

Prüfen, ob ein WordPress-Navigationsbereich (wp_nav_menu) ein Menü enthält

wp-nav-menu

In WordPress können über die Funktion wp_nav_menu Navigationsbereiche registriert und im Template platziert werden. Im Administrationsbereich hat der Administrator anschließend die Möglichkeit die Navigationsbereiche mit Menüs zu bestücken.
Je nach Theme sollte geprüft werden, ob ein Bereich auch eine Navigation enthält. Beispielsweise weil die Navigation auf dem Smartphone hinter einem Button versteckt wird und dieser Button natürlich keinen Sinn macht, wenn gar keine Links vorhanden sind.

Beitrag zu Ende lesen

CSS counter() – zählen mit CSS

css-counter-schema

In CSS existieren verschiedene Selektoren um ein Element über zählen zu identifizieren. Mit h2:nth-of-type(4) lässt sich beispielsweise die vierte »Überschrift 2« in einem bestimmten Abschnitt auswählen und entsprechend gestalten.
CSS Counter verhalten sich anders, denn es handelt sich hierbei nicht um einen Selektor, sondern um eine Eigenschaft die zählt und einen Zahlwert ausgeben kann. Mit einem Counter würde also nicht die vierte Überschrift ausgewählt, sondern auf der Website angezeigt, dass es sich um die vierte Überschrift handelt.

Beitrag zu Ende lesen

Berechnungen mit CSS calc()

css-calculations

Moderne Web-Layouts werden zunehmend komplex, gleichzeitig versuchen Entwickler den Code immer weiter zu verschlanken und zu optimieren. Insbesondere im Responsive Design verwendet eine Website beispielsweise mehrere Gestaltungsraster mit unterschiedlichen Spaltenzahlen. Das führt oft zu Problemen bei der Vergabe von CSS-Klassen. Eine schöne Möglichkeit den Code von solch überflüssigen CSS-Klassen zu befreien bieten die Kalkulationsmöglichkeiten mit Hilfe der CSS-Eigenschaft calc(). Ähnlich sieht es aus, wenn Pixelwerte von Prozentwerten abgezogen werden sollen. Beispielsweise um Werbebanner in einem ansonsten flüssigen Layout zu platzieren.

Beitrag zu Ende lesen

CSS Regions mit Adobe Edge Reflow

css-regions-reflow-grafik

CSS Regions sind eine CSS-Technologie mit deren Hilfe Inhalte durch verschiedene Container geleitet werden können. Sollte euch das Konzept hinter CSS Regions unbekannt sein, lest bitte zunächst meine Einführung in dieses Thema. In Adobe Edge Reflow – einem Design-Tool für Responsive Web Design – sind CSS Regions nun ebenfalls verfügbar. Die Einführung in Edge Reflow findet ihr wiederum hier.

In diesem Beitrag erkläre ich wie CSS Regions in Edge Reflow aktiviert und eingesetzt werden können.

Beitrag zu Ende lesen