Daniel Pietzsch

Nifty text highlight styling

Tue, 21 May 2019 23:00:15 +0200

Wanted to jot down this nice text highlighting CSS snippet I just discovered on basecamp.com:

With its varying opacity, it’s simulating a person’s variable pressure when marking text on an actual piece of paper. I like!

Here’s the CSS:

border-radius: 1em 0 1em 0;
background-image: linear-gradient(-100deg, rgba(250,247,133,0.3), rgba(250,247,133,0.7) 95%, rgba(250,247,133,0.1));

Instead of using <span class="highlight">, though, you should probably rather simply use the <mark> tag, which is more semantically correct.

Super simple Dark Mode

Fri, 10 May 2019 16:13:11 +0200

I just read the article “Dark Mode Support in Webkit” on the Webkit blog. Among other things, it describes how you can opt-in to have your website auto-darkened by Webkit (which means Safari in this case):

Not all web content is simple. For this reason Safari and WebKit do not auto-darken web content — documents will need to opt-in to dark mode. The main way to signal that your content supports dark mode it to adopt the new color-scheme style property […].

Specifying the values light and dark on the root element lets the engine know both modes are supported by the document. This changes the default text and background colors of the page to match the current system appearance. Also standard form controls, scrollbars, and other named system colors change their look automatically.

So, to opt-in, you add this bit of CSS:

:root {
  supported-color-schemes: light dark; /* For current Safari versions */
  color-scheme: light dark; /* Available with Safari TP 81 */
}

This will tell the browser that your website supports both light and dark modes, and will automatically darken your website when dark mode is selected in the OS preferences. Without any additional CSS (via @media (prefers-color-scheme: dark)). That’s a super simple and convenient way to have a dark theme.

Existing issues

[UPDATE 28.05.2019]

Got some feedback from the original article’s author:

However, it is not an auto-dark mode. That property gives you dark mode ready defaults for the body background and base text color, along with form controls. Any custom colors will need handled with the prefers-color-scheme media query.

And I also re-read the article and the spec regarding this topic. And the issues listed below are no bugs. According to the spec, the user agent should indeed only change the background and text colour plus form elements, and not much more.

So, I think the below still applies. But, that it’s not “perfect” is intentional and merely gives you a mechanism to opt-in to support a very basic version and is expected to be further extended and adjusted via custom CSS statements inside a prefers-color-scheme block.

[UPDATE END]

This automatic dark mode is not perfect. While updating my Focal Length Equivalent page to use it (which previously had a complete custom – but very similar – dark theme already), I noticed a few things:

:hover and other pseudo-classes are not darkened.
border-color and outline-color are not darkened.
Link colour don’t seem to get adjusted.

For border-color and outline-color, I could remove those statements from the standard (light mode) CSS to rely on the page’s standard colours. Then, the borders got auto-darkened, too. For the :hover-issues, I kept my custom CSS rules around.

Verdict

Relying on this auto-dark mode reduced the number of CSS statements I had to overwrite in the @media (prefers-color-scheme: dark) section of my stylesheet and made it much simpler.

Generally, for simple sites likes this one, I think it’s very handy to be able to rely on Webkit to do most of the dark-mode work for you. And then only adjust things where you see the need for.

I am definitely going to experiment with this some more.

clamp()

Fri, 10 May 2019 00:02:24 +0200

Just learned about the CSS clamp() function. This would actually be really handy for specifying a width based font size, without the need for an extra media-query.

Unfortunately, this does not have any browser support right now.

I amended my photo journal’s design once again. I wanted to make all images fit completely on...

Wed, 08 May 2019 23:59:46 +0200

I amended my photo journal’s design once again. I wanted to make all images fit completely on screen, no matter what the actual dimensions of the image are.

That images wouldn’t fit was mainly an issue with photos shot in portrait orientation or in square format. If a screen was wider than it’s tall – typical for most non-mobile devices – and you had less than 960px available vertical space, those images would be cropped. That’s no longer the case. And I find it much more enjoyable when the whole picture fits on screen.

As a minor downside, this update also decreases the size of landscape-oriented images, which would still have fitted previously. But this way, everything’s aligning well and portrait and landscape images still have the same size.

Automatic dark mode for focal length equivalents

Tue, 26 Mar 2019 23:57:21 +0100

My little Focal Length Equivalents tool now features “automatic dark mode” on supporting operating systems and browsers. Meaning, when you have your operating system set to prefer a “dark” styling – like macOS Mojave offers for example – and you are using a compatible browser, the page will show with a dark background and bright text. If your operating system is set to something else, it will show the default white background and black text.

Unlike for my blog, this solution uses CSS only. I simply put the required media query at the end of the CSS file(s) and by doing so, overwriting existing default colours with the ones used for dark mode.

/* AT THE END OF THE CSS FILE. DEFAULT STYLING ABOVE THIS MEDIA QUERY */
@media (prefers-color-scheme: dark) {
  body {
    color: #DDD;
    background-color: #222;
  }

  a { color: #88F; }
  a:visited { color: #AAF; }

  body > footer {
    border-top-color: white;
  }
  /* ETC ETC */
}

Overwriting the colours like this could become unmaintainable in a more complex setup, but for this little page, this works just fine.

Dark Mode based on OS preference

Tue, 19 Mar 2019 23:45:21 +0100

This blog has had a dark mode for a while now. Toggling it on and off could be done manually, and the selected preference would be stored in your browser for the next time you return.

I’ve now extended the script that handles the switching to respect your operating system’s preference for dark mode. This uses matchMedia and MediaQueryList.addListener to do so. Take a look at the whole script, if you like.

I don’t know, if any other operating systems other than macOS Mojave have a “Dark Mode” preference. But, if you happen to run Mojave and use the Safari 12.1 Beta or Technology Preview, you can try this out yourself. But here’s a little GIF of what it looks like:

The whole usability around this feature is not ideal currently. For example, I should probably have a 3-way switch – On, Off, Auto – instead of a simple checkbox toggle. And I should make an “Auto” setting work without JavaScript. But I didn’t have the time for this tonight, and so this will be a little project for another time.