kulturbanause Blog

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

Media Queries


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

Video: Responsive Webdesign ohne Media Queries

Responsive Design und Media Queries sind per Definition eng miteinander verbunden. Die Media Query definiert einen Breakpoint, der wiederum dafür sorgt, dass das Layout an den gewünschten Stellen umbricht und somit den Wechsel von Smartphone zu Desktop meistert. Doch seit Ethan Marcotte 2010 seinen populären Artikel zum Thema RWD veröffentlichte, hat sich viel verändert. Heute stehen neue Technologien zur Verfügung und auch die modulare Denkweise im Designprozess hat viel verändert. Grund genug, sich anzuschauen, wie es besser gehen könnte.

Beitrag zu Ende lesen

Media Queries zusammenfassen und in einer Zeile schreiben

CSS Media Queries zur Definition von Breakpoints sind die entscheidende Technologie im Zusammenhang mit responsive Design. Bei komplexen Projekten stellt sich allerdings oft die Frage wie und wo im Stylesheet die Breakpoints notiert werden. Präprozessoren wie Sass bieten zahlreiche Möglichkeiten um Media Queries komfortabel zu organisieren. Doch auch CSS selbst biete die Möglichkeit mehrere Bereiche über einen Befehl anzusprechen.

Beitrag zu Ende lesen

CSS-Hack für den Internet Explorer 10 (IE10)

Der Internet Explorer von Microsoft ist bekannt für die fehlerhafte Interpretation von CSS-Eigenschaften. Um das Problem zu lösen, greift man häufig auf Conditional Comments zurück, um gezielt einzelne Versionen des Internet Explorers anzusprechen und die Fehler zu korrigieren. Für den IE10+ existieren leider keine Conditional Comments mehr und ihr bekommt Schwierigkeiten, falls ihr speziell für diesen Browser Elemente gesondert ansprechen wollt. Doch mit einem CSS-Hack lässt sich das Problem lösen.
Beitrag zu Ende lesen

Responsive Masonry Layouts mit CSS erstellen

Mit dem sog. Masonry-Layout können Inhalte wie Bilder oder Card-Elemente ansprechend und platzsparend auf einer Website angezeigt werden. Im Gegensatz zu »klassischen Rastern« zeichnet es sich durch eine versetzte Kachel-Optik aus – daher auch der Name (Masonry = Mauerwerk). Aus technischer Sicht ist das echte Masonry-Layout nicht einfach umsetzbar – zumindest nicht ohne JavaScript und wenn es responsive sein soll. Wir stellen die verschiedenen Lösungen vor; u. a. auch eine sich abzeichnende native CSS-Lösung mittels CSS Grid.

Beitrag zu Ende lesen

Retina Media Queries / Media Query

Retina Media Queries

Wenn ihr die Gestaltung eurer Website für hochauflösende Displays optimieren möchtet, führt einer der unkompliziertesten Wege über spezielle Media Queries. Zunächst fragt ihr mit Hilfe des entsprechenden Media Query die Displayauflösung ab, anschließend werden hochauflösende Grafiken nachgeladen. Leider ist der Syntax für Android und iOS nicht einheitlich. Aus diesem Grund archiviere ich in diesem Beitrag die notwendigen Code-Snippets.

Beitrag zu Ende lesen