kulturbanause Blog

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

#css

CSS Subgrid – verschachtelte Grids

Die CSS-Eigenschaft display:grid; hat Auswirkungen auf die 1. Ebene der Kind-Elemente. Bei der praktischen Arbeit mit Grids kommt man schnell an den Punkt, wo man Rasterlinien in tiefer verschachtelten Ebenen nutzen möchte und dies nur über komplizierte Umwege realisieren kann. Mit dem Ende 2019 eingeführten CSS Befehl »Subgrid« ist dies nun schnell und einfach möglich. In diesem Artikel zeigen wir euch, wie Ihr Subgrid verwendet und wie es um den Browser-Support steht.

Beitrag zu Ende lesen

#responsive-webdesign

CSS prefer-reduced-motion Media Query – Bei Bedarf weniger Bewegung

Die Berücksichtigung von Einstellungen, die Menschen auf ihren Geräten vornehmen, ist für moderne Websites von zentraler Bedeutung. Die Browser stellen immer mehr Funktionen zur Verfügung, die es uns ermöglichen, auf diese Präferenzen einzugehen. Analog zur Abfrage des bevorzugten Farbschemas mit prefers-color-scheme, ist es mit prefers-reduced-motion möglich abzufragen, ob die betrachtende Person eine Seite mit allen Animationen und Bewegungen sehen oder ausdrücklich darauf verzichten möchte.

Beitrag zu Ende lesen

#wordpress

WooCommerce – Probleme mit Preis-Abweichungen durch Rundungsfehler beheben

Rundungsfehler in WooCommerce treten vor allem dann auf, wenn Berechnungen mit Prozentwerten – wie beispielsweise der Angabe von Mehrwertsteuer – oder das Verwenden von prozentualen Gutscheinen zum Einsatz kommen. Mit den richtigen Einstellungen und einer kleinen Anpassung am Code lassen sich diese lästigen Rundungsfehler jedoch verhindern. Das verbessert nicht nur die Usabilty des Online-Shops, sondern vermeidet auch unangenehme Fragen beim Finanzamt.

Beitrag zu Ende lesen

#prototyping

Der Design/Development-Workflow und die »Single Source of Truth«

Digitale Design-Projekte sind modular aufgebaut, häufig sogar auf Grundlage eines Design Systems. Doch die starke Trennung der Bereiche Design und Development stellt nach wie vor ein Problem dar. Unternehmen und Agenturen propagieren zwar einen interdisziplinären Design/Development-Workflow, entwickeln dann aber doch zunächst im Design statische UI-Komponenten, die anschließend von Frontend-Teams im Code nachgebaut werden.

Beitrag zu Ende lesen

#javascript

WordPress: Beiträge via AJAX nachladen (inklusive Fallback)

Um auf einer Übersichtsseite weitere Beiträge zu erreichen, ist die Verwendung eines »Load More«-Buttons eine beliebte Methode. Hierbei werden via JavaScript (AJAX) weitere Beiträge unter den zuvor angezeigten Beiträgen geladen, ohne dass die gesamte Unterseite neu geladen werden muss. Wenn JavaScript deaktiviert ist oder nicht geladen werden kann, ist es sinnvoll, als Fallback die klassische Pagination zu verwenden.

Beitrag zu Ende lesen

#animationen

Title-Tag des inaktiven Browser-Tabs animieren

Eine Bewegung in einer ansonsten statischen Umgebung zieht den Blick auf sich. Der <title>-Tag einer Website, der im Browser-Tab angezeigt wird, ist in der Regel statisch und somit eher unauffällig. Wir archivieren in diesem Beitrag ein jQuery-Snippet, mit dessen Hilfe ihr den Inhalt des im Hintergrund geöffneten Browser-Tabs austauscht und auf Wunsch animiert.

Beitrag zu Ende lesen

#html

HTML-Inhalte mit CSS und ARIA barrierefrei verstecken

Es gibt zahlreiche Gründe, weshalb Inhalte auf einer Webseite versteckt werden sollen. Bei der handwerklich korrekten Umsetzung spielt Barrierefreiheit immer eine Rolle, denn neben dem vollständigen Verstecken von Inhalten für alle Personen können Elemente auch nur für sehende Menschen oder nur für assistive Technologien wie Screenreader versteckt werden. Wir geben einen Überblick wie Inhalte mit CSS im jeweiligen Anwendungsfall korrekt versteckt werden.

Beitrag zu Ende lesen

#svg

SVG als CSS-background verwenden und umfärben

Das Grafikformat SVG bietet sich aufgrund geringer Dateigrößen, verlustfreier Skalierung und zahlreicher Manipulationsmöglichkeiten für viele Anwendungsfälle an. Die verschiedenen Möglichkeiten SVG in eine Website einzubauen haben alle Vor- und Nachteile. Ein Nachteil beim Einsatz als background-image im CSS-Code besteht darin, dass die SVG nicht mehr umgefärbt werden kann. Insbesondere beim Einsatz von Icons kann das lästig sein. Mit Sass und Data URIs gibt es jedoch eine Lösung.

Beitrag zu Ende lesen