CSS-Angaben vor dem Internet Explorer 8 mit Selektoren verstecken

Manchmal möchte man bestimmte Formatierungen vor älteren Internet Explorern verstecken. Im Beitrag zeige ich zwei Möglichkeiten, wie man Selektoren formuliert, dass sie vom IE8 ignoriert werden.

Eine Lösung besteht darin, den Selektor um Bestandteile zu ergänzen, die die älteren IEs (d.h. IE < 9) nicht verstehen – etwa durch :root.

Weiterlesen

Unterrichten: Was man von Einsteigern lernen kann ….

Ich gebe immer wieder mal Einstiegskurse in HTML, CSS oder auch in PHP. Und es ist immer wieder spannend und – auch für mich – lehrreich. Dass ich dabei so viel lernen kann, musste ich auch erst einmal kapieren.

Ganz zu Anfang meiner Trainingstätigkeit habe ich sogar den Einstieg ins Internet vermittelt. Dabei habe ich mühsam versucht, den Teilnehmern den Unterschied zwischen einer Internet-Adresse und der Suche in einer Suchmaschine beizubringen. Die tippten einfach in die Adresszeile die Suchbegriffe oder in das Feld der Suchmaschine die Adresse.

Weiterlesen

Browser-Entwicklertools: Laden der Dateien untersuchen

Um die Performance von Webseiten zu verbessern, muss man wissen, welche Dateien wann geladen werden. Das sieht man einem Dokument nicht unbedingt direkt an … dafür verraten es die Entwicklertools zuverlässig. Wie man mit dem Netzwerk-Tab der Browser-Entwicklertools arbeitet, zeige ich in einem Video.
Weiterlesen

Videotraining Responsive Webdesign – Performance-Tuning

Responsive Webdesign – Performance-TuningHeutzutage müssen Webseiten responsiv sein. Ein Problem dabei kann aber die Ladegeschwindigkeit darstellen. Glücklicherweise gibt es eine Reihe von Techniken, um die Performance zu verbessern. Und wie das konkret geht, zeige ich in meinem Videotraining:

Responsive Webdesign – Performance Tuning – Online-Videotraining bei LinkedIn Learning

Laufzeit: 1 Std. 41 min

Weiterlesen

isolation: isolate: Das Vermischen bei den Blendmodi genau steuern (CSS3)

will it blend?

Gute Nachricht: Firefox 36 unterstützt die Eigenschaft isolation bei den Blendmodi. Das habe ich zum Anlass genommen, meinen Artikel zu isolation: isolate vom Juni 2014 zu aktualisieren.

In den beiden bisherigen Teilen meiner Artikelserie habe ich schon die Eigenschaft background-blend-mode und mix-blend-mode vorgestellt. Jetzt fehlt noch die Eigenschaft isolation. Bei der Eigenschaft geht es um die Frage: Mit welchen Elternelementen finden Vermischungen statt, wenn man mix-blend-mode verwendet?

Weiterlesen

Bildunterschrift an Bild anpassen mit min-content (inklusive IE)

Häufig möchte man, dass die Beschriftung zu einem Bild genauso breit wird wie das Bild selbst – und das soll möglichst natürlich auch dann funktionieren, wenn wir die Breite des Bildes nicht im Voraus wissen. Möglich wird das über den CSS3-Wert min-content. Und für den IE klappts über ein bisschen Trickserei mit Gridlayout.

Weiterlesen

CSS-Grids: Raster im IE10+ und in neuer Syntax definieren

css-grids

CSS-Grids sind das CSS3-Layoutmodul für Raster. Relevant sind heute zwei Versionen von CSS-Grids: die aktuelle Spezifikation und die veraltete Version von 2011.

Die aktuelle Version funktioniert in Chrome ab 57, in Firefox ab Version 52, in Safari 10.1 und ebenfalls in Edge ab 16.

Die veraltete Version ist im Internet Explorer 10+ und in Edge < 16 implementiert und deswegen ist diese alte Syntax heute noch relevant.

An einem kleinen Raster möchte ich ein paar Beispiele für die unterschiedliche Syntax/Herangehensweise zeigen.

Weiterlesen

CSS-Pseudoelemente der nächsten Generation

W3C Pseudo-Elements Module Level 4

Das W3C hat den Arbeitsentwurf für die CSS-Pseudoelemente überarbeitet. Ich war gespannt, welche Pseudoelemente wir in Zukunft benutzen können und habe einmal reingeschaut. Neben klassischen, schon lange bekannten Pseudoelementen findet sich im Arbeitsentwurf Nützliches wie ::selection oder ::placeholder, die bereits (teilweise in leicht modifizierter Variante) in den aktuellen Browsern funktionieren.

Im meinen Beitrag geht es neben diesen neuen Pseudolementen außerdem um die klassischen Pseudoelemente, um doppelte und einfache Doppelpunkte und um die Darstellung der Pseudoelemente in Browserentwicklertools.

Weiterlesen