kulturbanause Blog

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

CSS


Bootstrap 4 ist da!

Es hat über drei Jahre gedauert aber jetzt ist es da – Bootstrap 4. Die Beta Phase ist offiziell vorbei und die stabile Version der Frontend-Library in Version 4 ist zum Download verfügbar. Neben der Überarbeitung der Print Styles, dem Umgang mit Borders und der Erweiterung der Flexbox-Grids wurde in den letzten Zügen der Beta Phase auch das Markup von Checkboxen und Radio-Controls auf die Validierungsmöglichkeiten von Formulareingaben ausgerichtet. Außerdem wurde daran gearbeitet die Dokumentation und Beispiele auf den neusten Stand zu bringen.

Direkter Link zum Artikel

CSS asynchron laden

Laut dem Analyse-Tool PageSpeed Insights von Google sollen JavaScript- und CSS-Ressourcen, die das Rendering blockieren, nicht in Inhalten »above the fold« (ohne Scrollen sichtbar) vorhanden sein.
Code, der nicht inline im Dokument eingebunden sondern in eine eigene Datei ausgelagert ist, blockiert das Rendering. Daher empfiehlt es sich JavaScript am Ende der Seite vor dem schließenden <body>-Tag anzubringen. Für CSS-Dateien muss jedoch eine andere Methode angewandt werden, wenn der HTML-Code valide nach den Richtlinien des W3C-Konsortiums sein soll. Eine Möglichkeit hierfür ist das asynchrone Laden. Wie das umgesetzt wird beschreibt Scott Jehl ausführlich.

Direkter Link zum Artikel

Variable Fonts

Bei sog. »Variable Fonts« handelt es sich um ein neues OpenType Feature, dass zunehmend an Bekanntheit gewinnt und darüber hinaus im neuesten Update der Adobe Creative Cloud verfügbar ist. Variable Fonts bieten eine Reihe neuer Möglichkeiten über die sich vor allem Webdesigner (aber nicht nur) freuen dürften. Im Typekit-Blog wurde bereits 2016 darüber berichtet und die neuen Features zusammengefasst.

Direkter Link zum Artikel

CSS Text Decoration Styling – Farbig unterstrichene Texte, Unterbrechungen bei Unterlängen, Effekte für Linien usw.

Links werden in HTML automatisch unterstrichen dargestellt. Ein unterstrichenes Wort auf einer Website wird daher vom Anwender intuitiv als Hyperlink interpretiert – weshalb man das Gestaltungsmittel der Unterstreichung bewusst einsetzen sollte. Der CSS-Befehl text-decoration:underline; sorgt dafür, dass ein Text unterstrichen wird. Wenn mehr gestalterische Freiheit gewünscht war, haben Designer häufig border-bottom eingesetzt. Das CSS Text Decoration Module Level 3 erweitert die Möglichkeiten von text-decoration um Farben, Abstände und Effekte.

Beitrag zu Ende lesen

Explicit und Implicit Grids im CSS Grid Layout

Das CSS Grid Layout bietet die Möglichkeit, Raster in CSS zu definieren und Objekte in Rasterzellen zu platzieren. Dabei müssen wir nicht jede Zelle, Spalte und Zeile manuell angeben und ebenso wenig müssen wir jedes Objekt manuell platzieren. CSS Grids sind flexibel genug, um sich Objekte automatisch zu platzieren. Dies wird durch das so genannte explizite und implizite Raster gehandhabt. Um was es sich dabei handelt und worin der Unterschied besteht erläutert Manuel Matuzovic.

Direkter Link zum Artikel

Die CSS-Eigenschaft »font-display«

Webfonts sind heutzutage eine Selbstverständlichkeit. Allerdings wird die Schrift von modernen Browsern so lange versteckt, bis sie komplett geladen ist. Mit der CSS-Eigenschaft font-display kann der Fallback- und Ladeprozess (FOIT, FOUT) von Webschriften ähnlich gestaltet werden wie mit JavaScript-basierten Lösungen. Allerdings ist dafür nur noch eine Codezeile nötig. Jeremy Wagener erklärt, wie font-display eingesetzt wird und welche Auswirkung die verschiedenen Werte haben.

Direkter Link zum Artikel