Published: May 13, 2021
Supporting IE11 while still using Modern CSS
Drupal currently supports IE11, and will do until Drupal 10 in about a year's time. Here's my proposal for how to support IE11 in a distribution without holding back from modern CSS.
Drupal will support IE11 until about this time next year. We have been seeing many clients say to us that they are happy to drop support for IE11 if it means they can have a better website. However, some organisations (government, etc) still use IE11 internally as their main browser, so those users need a website that works and is a pleasure to use. However, often the only users of these websites in IE11 are internal users - editors updating content - and not "visitors" to the website who are mostly using mobile browsers on their phones or modern browsers like Firefox, Edge, and Chrome on their computers.
Within LocalGov Drupal, we aim to support IE11 as long as Drupal does. However, I don't want us in a position this time next year needing/wishing to rewrite our frontend in modern CSS after we drop IE11 support. Here's my proposal to give IE11 users a really good experience via a default theme (like Wordpress does for mobile sites hosted on Wordpress.com) but uses progressive enhancement to supplement how the site works for visitors using modern browsers.
If we take the approach in this video, it means that all CSS properties are variables (fonts, line-heights, spacing, colours, etc) and then any council can use our base theme but brand it to their own brand guidelines simply using a variables.css file to override the base CSS variables. Since variables are calculated at run time, we don't need to recompile the theme to each time we make a simple change. Why is this so great/sustainable/scalable? It means sub-themes are very small, but also means we can create theme settings so editors can set some of these variables themselves (e.g. setting background colour via the CMS for Christmas, or when a notable person has passed away) all without needing to contact developers.
But won't the site look different in IE11 to other browsers? If you site uses the base theme, it will look the same in all browsers. If you site uses the base theme but extends it, then it will look like the base theme in IE11 but your branded theme in other browsers. Remember, sites already look different in different browsers - everything stacks in one column on phone browsers buy is side-by-side on desktop browsers, etc. Different does not mean bad.
I've started streaming some of my work, especially if it's contributions to open source, on twitch if you'd like to follow along/subscribe. As it turns out, Twitch deletes your videos after 14 days, so I have also been uploading them to YouTube. Feel free to subscribe.