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.
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.
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.
Die drei CSS-Funktionen min(), max(), und clamp() helfen euch, Websites dynamischer und responsiver zu machen, da sich damit flüssige Übergänge bei Größen, Abständen und Typografie umsetzen lassen. Außerdem machen sie den Code schlanker, was ihn lesbarer und wartungsfreundlicher macht. Beitrag zu Ende lesen
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.
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.
Benutzeroberflächen in verschiedenen farbigen Varianten müssen in vielen Projekten umgesetzt werden. Mal soll ein Farbleitsystem zur Unterstützung der Navigation integriert werden, dann wieder muss das Projekt den Dark Mode unterstützen oder für Kunden individuell anpassbar sein – Stichwort »Theming«. Mit Hilfe von CSS-Variablen lässt sich ein solches Farb-System mit geringem Aufwand in eine Website integrieren.
Immer größere Smartphones mit immer höher auflösenden Displays verleiten zusehends dazu, Viewport-Breiten von 320 Pixeln im Web Design zu vernachlässigen. …
Wer sich mit CSS beschäftigt, muss eine Vielzahl von Begriffen kennen. Es gibt Keywords, Values, Media Queries, Combinators, Attribute-Selectors, Rule-Sets, …
Moderne Web- bzw. Frontend-Entwicklung entwickelt sich rasend schnell weiter und umfasst zahlreiche Technologien und Tools. Es ist schwer den Überblick …
