Außerdem: Text und Icons in CSS vertikal ausrichten

Fast Forward Spezial: Inline CSS, Einstieg in CSS Grid Layouts & SVG-Balkendiagramme erstellen
Keine Kommentare

Auftakt für unsere Reihe „Fast Forward Spezial 2016“: Wie schon im letzten Jahr wollen wir euch auch dieses Mal rund um die Feiertage mit nützlichen und interessanten Tutorials sowie Best Practices zu verschiedenen Themen bieten. Los geht es in der heutigen Ausgabe mit dem Thema CSS: Wir schauen uns unter anderem an, wie sich Text und Icons in CSS vertikal ausrichten lassen, wie der Einstieg in CSS Grid Layouts klappt und worauf es bei der Nutzung von Inline CSS zu achten gilt.

Text und Icons in CSS vertikal ausrichten

Die CSS-Eigenschaft vertical-align ist für die vertikale Ausrichtung von Elementen zuständig. Es gibt verschiedene Wege, um Texte oder Icons vertikal auszurichten. Simpel ist zum Beispiel die Anpassung der line-height. Solange die height eines Elements bekannt ist, kann mit einer line-height gleicher Wertigkeit eine vertikale Ausrichtung der Child-Elemente erreicht werden. Für eine flexible Anpassung kann man mit position und transform arbeiten. Mit dem klassischen Box-Modell funktionieren diese beiden Methoden sehr zuverlässig. Alternativ kann auch das Flexbox-Modell Verwendung finden. Über alle drei Varianten klärt Guy Routledge in seinem Quick Tip aus der neuen AtoZ-CSS-Serie auf.

CSS Grid Layouts: Getting Started

CSS Grid Layouts sollen ab Anfang 2017 für die Darstellung von Inhalten in Browsern verfügbar sein; in Chrome Canary und Firefox Nightly können Entwickler die Spezifikation bereits jetzt ausprobieren. Die Implementierungen in Microsofts Browsern IE und Edge entsprechen dagegen derzeit nicht der gegenwärtigen Spezifikation und sollten somit nicht verwendet werden, um herauszufinden, wie die neuen Layouts benutzt werden. Aber was können CSS Grid Layouts denn überhaupt? Das verrät Oliver Williams. Zu seinen Tipps für den Umgang mit CSS Grids gehört der Hinweis darauf, dass nur rechteckige Grid Areas möglich sind, die Spezifikation dazu gedacht ist, im Kombination  mit Flexbox verwendet zu werden und man dringend in Erwägung ziehen sollte, seinen Grid Lines Namen zu geben. Warum? Das könnt ihr im Einsteiger-Guide für CSS Grids von Oliver Williams nachlesen.

Fast Forward Spezial im Überblick

Alle Beiträge aus unserer Reihe Fast Forward Spezial finden sich hier.

Inline CSS: Wann, Warum und Wieso

Die Ladegeschwindigkeit von Websites trägt maßgeblich zur UX und zum Gesamterfolg der Präsenz bei. Eine Methode setzt bei den Ladezeiten des kritischen und nicht-kritischen CSS an. Kritisches CSS styled jene Abschnitte, die der User beim ersten Laden der Website zu Gesicht bekommt und die „above the fold“ stehen; also beispielsweise die Navigation. Mit wirksamen Methoden kann man die Blockaden im HTML-Rendering beeinflussen. Eine davon ist das Inline-CSS, späteres Aufrufen und Nachladen sowie das asynchrone Laden der CSS-Dateien. Beim asynchronen Laden wird so unkritisches CSS – also CSS, das nicht für den sichtbaren Bereich der Site benötigt wird – dann später geladen und beim Inline-CSS das CSS direkt in das HTML eingebunden, um externes Herunterladen zu verhindern und das Rendering zu blocken. Zusätzliche Details erfahrt ihr im Artikel von Asha Laxmi.

SVG-Balkendiagramme selbst erstellen

Mit einem SVG und ein wenig CSS lässt sich recht simpel ein eigenes Balkendiagramm erstellen. Das erweckt den Anschein von mehr Kontrolle und eigener Gestaltungsfreiheit. Mit der viewBox und den x– und y-Koordinaten sowie Attributen wie text-anchor und CSS-Wertigkeiten wie text-align lassen sich die Elemente innerhalb des SVG nach Belieben anpassen und so ein Balkendiagramm individuell erstellen. Wie das alles im Detail funktioniert, erfahrt ihr im CSS-Tricks-Artikel von Robin Rendle.

CSS: Alles oder Nichts

Mit dem all-Property lassen sich sämtliche Properties eines Elements resetten. Die Properties können dann entweder mit initial blank gesetzt werden oder sie können mit inherit den Parent-Wert erben. Jonathan Snook prüft auf seinem Blog, wie und ob sich all sinnvoll anwenden lässt. In seinem Beispiel zeigt Snook, wie man einen Link als Button verkleidet und wie verschiedene Browser dann unterschiedlich auf all reagieren. Lässt sich dieses Problem lösen?

Unsere Redaktion empfiehlt:

Relevante Beiträge

Abonnieren
Benachrichtige mich bei
guest
0 Comments
Inline Feedbacks
View all comments
X
- Gib Deinen Standort ein -
- or -