kulturbanause Blog

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

Frontend


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

CSS Container Queries mit @container

Das Abfragen der Viewport-Größe ist mit Media Queries seit langem möglich und zentraler Bestandteil des Responsive Web Design. Allerdings haben sich in der Weiterentwicklung von RWD und in der parallelen Entwicklung hin zu modularen Layouts neue Anforderungen ergeben. Der Platz, den eine einzelne Komponente zur Verfügung hat, ist heute meist relevanter als die Breite des gesamten Browserfensters. Die Web-Community wünschte sich eine entsprechende Technologie und hat jahrelang an Übergangslösungen gearbeitet. Mit der CSS-Rule @container beginnt die Spezifikation einer nativen CSS-Technik.

Beitrag zu Ende lesen

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: 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

Farbige Listenpunkte mit CSS ::marker

Geordnete und ungeordnete Listen erhalten vom Browser ein Standard-Styling für Aufzählungspunkte: <ol> wird nummeriert, <ul> erhält grafische Aufzählungszeichen. Diese Aufzählungszeichnen lassen sich mit der CSS-Eigenschaft list-style-type gestalterisch verändern, doch bleiben sie immer in Farbe des Textes. Mit der Pseudoklasse ::marker könnt ihr die Aufzählungszeichen umfärben. In Kombination mit counter() sogar noch weiter anpassen.

Beitrag zu Ende lesen

text-overflow & line-clamp – Text mit CSS kürzen

Um robuste Layouts zu erstellen, kann es notwendig sein, Texte, unabhängig von ihrer Zeichenanzahl, auf eine bestimmte maximale Länge zu kürzen. Vor allem, wenn wir Layouts für Websites entwickeln, die via CMS von einem Redaktionsteam gepflegt werden, müssen wir uns darauf verlassen können, dass die Layouts möglichst unabhängig von ihren Inhalten ihre Symmetrie und Ästhetik bewahren. Dafür gibt es verschiedenste Herangehensweisen. Die wahrscheinlich einfachste ist mit CSS text-overflow und line-clamp.

Beitrag zu Ende lesen