Internet Explorer support

Halfmoon is almost fully compatible with Internet Explorer 11. This page talks about the possible issues, and how to avoid them.

CSS variables #

The biggest issue with Internet Explorer compatibility is that it does not support CSS variables (also known as CSS custom properties). As you may know, Halfmoon is fully customizable thanks to the use of CSS variables. You can learn more about this in the customize docs section (opens in new tab).

While there are quite a few hacks out there that allow CSS variables to work on Internet Explorer 11 (such as polyfills), the most reliable way to make sure that your site works on IE11 is to simply avoid using CSS variables all together. This means that instead of using halfmoon-variables.css, you would have to use the halfmoon.css file, where the variables have been flattened out.

If you want to customize Halfmoon to fit your brand (and still make it work on IE11), that is still possible. Simply override the variables in halfmoon-variables.css to create your theme, and use this useful tool to flatten the variables.

Collapse component #

The collapse component (opens in new tab) uses the <details> and <summary> tags. These tags are not supported in Internet Explorer 11. Therefore, collapse panels will not work as expected.

However, it is important to note that the content will still be rendered properly, but the collapse panels will always be open. This means that users will still be able to view all of the content on the page, but the collapse component will lose its main functionality — its collapsibility.

Another minor thing to remember is that for collapse panels that are not open, ie, they don't have the open attribute, elements with the class .hidden-collapse-closed are given the display: inline-block property. This is because collapse panels are always open on IE11 (as mentioned above).

The component can still be used without much issue (since it renders properly), but this should at least be kept in mind.

Closing remarks

In short, as long as you take care of the issues discussed above, your site should be fully compatible with Internet Explorer 11.