kulturbanause Blog

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

CSS


CSS display: contents;

Als Frontend-Designer steht man ab und zu vor dem Problem, dass die semantisch beste HTML-Struktur mit CSS nicht in die gewünschte Form gebracht werden kann. Oft werden daher Abstriche im HTML-Markup in Kauf genommen. Dieser Fall tritt auch dann ein, wenn Layout-Techniken wie Flexbox oder Grid genutzt werden. Mit dem CSS-Befehl display: contents; gehören solche Schwierigkeiten der Vergangenheit an.

Beitrag zu Ende lesen

Schärfere Bilder im Chrome

Im responsive Webdesign werden Bilder gegebenenfalls automatisch verkleinert.
Leider rendert Google's Browser Chrome Bilder beim Verkleinern nicht so, wie es bei guten Bildbearbeitungsprogrammen der Fall ist und gibt diese daher nicht mit der gleichen Schärfe, wie das ursprüngliche Bild aus. Artem Syzonenko stellt einen kleinen Hack vor, um verkleinerte Bilder im Chrome schärfer darzustellen.

Direkter Link zum Artikel

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