CSS

A long time ago, I once noted down some CSS code that uses Helvetica or similar typefaces if they are locally available on the respective system. Recently, I needed something comparable for code—that is, typefaces with a fixed character width. After doing some research, I came up with the following code. font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Cascadia Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace; The text was automatically translated from German into English. The German quotations were also translated in sense. ...

In his article »Did you know, that you can style RSS Feeds?«, Nils Riedemann explains how to make your RSS feed more attractive. Although this isn’t relevant to me at the moment, I’ll note it here anyway. The text was automatically translated from German into English. The German quotations were also translated in sense.

Like Matsuko, I also sometimes find videos too dark when watching Netflix or YouTube in the evening. Usually I just turn up my screen brightness, but I’d prefer to brighten only the video itself. The following code snippet lets you do exactly that. /* Brighter Netflix and YouTube videos */ video[src^="blob:https://www.netflix.com/"], video[src^="blob:https://www.youtube.com/"] { filter: brightness(1.4); } The text was automatically translated from German into English. The German quotations were also translated in sense. ...

If you’re using a device that supports dark mode, this little blog will now adapt its appearance to match your system settings. With the help of Jeremy Keith’s description, I was able to implement this very quickly. It’s actually incredibly simple. Just drop the following code into your style.css and define whichever CSS properties you want to apply in dark mode. @media (prefers-color-scheme: dark) { /* Dark mode CSS properties go here */ } You might also consider adding a switch to the blog so users can override the default setting. Thomas Steiner explains this quite well here. ...

Writing shadows in CSS by hand is possible, but it’s a pain. There have been various tools for years to visually create nice-looking shadows. Another tool is from Philipp Brumm. Smooth Shadow For anyone who doesn’t know what I mean, a simple shadow in CSS can look like this: box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px rgba(0, 0, 0, 0.028), The text was automatically translated from German into English. The German quotations were also translated in sense. ...