#CSS

Den „Dark Mode“ mit CSS abfragen

Mein Blog präsentiert sich seit Kurzem im Dark Mode, wenn das System und der Browser das unterstützen. In der Safari Technology Preview für macOS Mojave ist das zum Beispiel bereits möglich:

Seit Jahren verwende ich bereits dunkle Themes für die Editoren meiner Wahl, darum mag ich auch einen systemweiten Dark Mode. Ich finde ihn viel angenehmer für die Augen, und längere Texte lassen sich so – gerade am Abend – viel besser lesen. Darum denke ich auch, dass jedes Blog ein dunkles Theme mit sich bringen sollte. Ich habe das hier kurzerhand mit CSS Custom Properties (oder einfacher gesagt: CSS-Variablen) gelöst, etwa so:

:root {
  --text: gray;
  --background: white;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: white;
    --background: gray;
  }
}

Schon ziemlich lässig.

Entdeckt habe ich das übrigens ursprünglich in den Show Notes zu ATP #299 und dem anschließenden Forschen im CSS. Dort war zunächst das bereits seit dem IE9 in allen großen Browsern unterstützte @media (color-index: ...) im Einsatz, der technischen Basis von prefers-color-scheme.

Die Syntax ist allerdings deutlich kruder:

  • @media (color-index: 48) ist das Pendant zu @media (prefers-color-scheme: dark), weil 48 der Keycode für 0, dem Hexidezimalwert von Schwarz ist.
  • @media (color-index: 70) ist das Pendant zu @media (prefers-color-scheme: light), weil 70 der Keycode für F, dem Hexidezimalwert von Weiß ist.
  • @media (color-index: 22) ist das Pendant zu @media (prefers-color-scheme: no-preference).

Völlig Banane.

Andy Clarke geht in seinem Artikel Redesigning your product and website for dark mode noch etwas mehr ins Detail und zeigt auch einige typografische Anpassungen für den Dark Mode auf.

CSS verkleinern mit CSSTidy

Zum Bloggen gezwungen, wieder mal. Diesmal aber nicht von Ina, sondern vom Kollegen gegenüber. Es geht sich um das Zusammenführen und Verkleinern von CSS-Dateien.

Weiterlesen …

hasLayout

Ich wusste doch, dass es gut war, für neu.de die CSS-Klasse .hasLayout einzuführen:

.hasLayout {
  zoom: 1;
}

Was uns das bringt, erfährt man in dem wirklich hervorragenden Artikel Über hasLayout – Das Konzept des IE/Win.

Via Gerrit.

Rounded Corners: Out! Square Corners: In!

Während wir uns in der Firma noch über runde Ecken und mein neues Datenbankformat »CSSsql« beömmeln, gibt es bei Drivl schon den neuesten Hit:

So macht Ihr eckige Ecken mit CSS!

Der Feuerkäfer ist da

Es gibt jetzt nur noch zwei Erweiterungen, die man als Webentwickler unbedingt für seinen Firefox haben sollte:

  • Firebug ist jetzt endlich in der Version 1.0 erhältlich, wenn auch erstmal nur als Beta. Die Erweiterung bietet Werkzeuge zur HTML-Analyse, CSS-Fehlersuche und -Layout, lässt das DOM erkunden, die Kommunikation mit dem Server analysieren und JavaScript debuggen oder testen.
  • Die Web Developer Toolbar ist wie eh und je auch ein Muss für Webentwickler. Sagt ja allein schon der Name. 🙂

Download- und Installationsbefehl!

A List Apart spinnt

Wieder einmal hat sich das normalerweise ganz nette Webdesigner-Magazin A List Apart einen Schnellschuss geleistet, ohne über die Konsequenzen nachzudenken…

Weiterlesen …