Skip to main content

Mojave theme media queries and WebKit

Posted Apr 12, 2019

Safari 12.1 introduces some great new WebKit features including the ability to identify your users’ Mojave theme preference.

MacOS Mojave introduced the ability for Apple users to set up their computers with a light or dark theme. However, we developers had no way to identify what this theme setting was, until now.

Safari 12.1 has given us a new media query that allows us to style our websites dependent on your user’s theme settings:

@media (prefers-color-scheme: dark) { ... }
Now we can target light or dark theme users with a dark or light property.

This gives us the opportunity to make using the web more comfortable for users that potentially suffer from light sensitivity, such as photophobia, or other common side effects of looking at a bright white monitor for extended periods such as eye fatigue or flicker problems.

On learning this, I have since updated my own site to utilise this new feature to make reading my content less painful than it already is! 😂

🎨 More WebKit changes in Safari 12.1

Two new input types. Safari 12.1 introduces the <input type='color'> and <datalist> input types. Both of these fields have been in other WebKit browsers such as Chrome and Opera for some time, but now they’re coming to Safari too.

Note that the datalist input type still isn’t featured in Firefox (as of version 66.0.2), but it falls back to a text input by default.

Again, this is a feature that is already native in other WebKit browsers, but now we can better control our text underlines with text-underline-offset and text-decoration-thickness. Both of which I have been using in projects over the last few months and it really does make using the default browser underline styling more attractive.

Alongside these three front-end focussed improvements to Safari there are many new features such as changes to the inspector and more.