Unfortunately, CSS variables are not supported in Internet Explorer. However, there is an option on the Advanced tab of the Target Editor that you can enable to correct this.
When you enable this feature, the CSS variable will be replaced with the actual value in the output. In other words, you will not see the var(--[VariableName]) instance. However, this will be done only if the CSS variable is declared in the :root or html selector.
Example
Example
Let's say you create a CSS variable on the :root selector and you name it "--Brand." On this variable, you set the color #bed420. Then, you insert that variable into the color property for your h1 style.
If you do not enable the option to resolve CSS variables, the color will not be seen in the topic in Internet Explorer. And if you inspect that topic in the output (e.g., right click on the topic and select Inspect element), you will see this:
But if you do enable the option, the color will be seen in the topic in Internet Explorer. And it will look like this if you inspect the topic:
How to Resolve CSS Variables for Internet Explorer
- Open an HTML5 target.
- Select the Advanced tab.
-
Select Resolve CSS variables (required for IE compatibility).
- Click
to save your work.
Note
Note: This option is not included in Eclipse and HTML Help targets, because the feature is always enabled for those outputs.