Daniel Pietzsch

Nifty text highlight styling

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

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.

Automatic dark mode for focal length equivalents

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.

Horizontally scrolling table with fixed headings

For my Focal Length Equivalent utility, I created a alternative view for when you don’t have JavaScript enabled (as you should, if you can).

Instead of dynamically showing the conversion based on the position of the range slider input element, I simply show a good old table with calculated equivalents at pre-defined focal lengths.

I wanted this table to list the focal lengths vertically – with one film- or sensor-format on one row – so you can easily parse the result. As such a table gets easily too wide for the parent elements container, I wanted

1. the table to be scrollable horizontally and
2. have the format name headings keep their position, so that you never lose track of which row represents which format.

Here’s the simplified table markup:

<figure><table><tbody><!-- ... --><tr><th scope="row">35mm</th>
        <td>10 mm</td>
        <td>16 mm</td>
        <td>24 mm</td>
        <td>28 mm</td>
        <td>35 mm</td>
        <td>50 mm</td>
        <td>85 mm</td>
        <td>100 mm</td>
        <td>135 mm</td>
        <td>200 mm</td>
        <td>300 mm</td>
        <td>500 mm</td>
      </tr><!-- ... --></tbody></table></figure>

The “scrolling” bit is easily done: simply put a overflow-x: scroll; on the table’s container element, which in my case is a <figure> element (a <div> or any other block element would also do of course, if the <figure> semantic doesn’t work for you):

figure {
  overflow-x: scroll;
}

In order for the film-format name headings to keep their position, I resorted to a fairly new value of the CSS position property: sticky. I added this to the th selectors, in combination with left: 0; so the headings stay at their original positions:

figure table tr th {
  position: sticky;
  left: 0;
  // you might also want a bg color, so the th covers the table
  // that scrolls through underneath
  background-color: white;
}

You can take a look at this when you go to the tool and disable JavaScript in your browser. Or you can simply look at this table here:

Here’s the full CSS.