Workaround for CSS Variables in Ie

Working with var css in internet explorer using Angular 7

The solution was very simple.

1- npm i css-vars-ponyfill --save.

2- in app.component.ts you have to do this:

import cssVars from 'css-vars-ponyfill';

constructor() {... }

ngOnInit() {
    cssVars();
    ...
    ...
}

Any workaround for the CSS var?

No CSS variables solution

.container {
  position: relative;
  height: 100px;
  width: 300px;
  padding: 24px;
  box-sizing: border-box;
  color: black;
  border: 2px solid black;
}

input[type="checkbox"] {
  height: 40px;
  width: 40px;
  position: absolute;
  top: 12px;
  right: 12px;
  appearance: none;
  outline: none;
  cursor: pointer;
  border: none;
  background:
    url("https://svgshare.com/i/Qo7.svg") calc(50% + 1px) 50% /60% 60%,
    radial-gradient(farthest-side,#D9DEEA 99%,transparent) center/ 0px 0px;
  background-repeat:no-repeat;
  transition:0.5s;
}
input[type="checkbox"]:hover {
    background-size:
     60% 60%,
     100% 100%;
}

input[type="checkbox"]:checked {
  background-image:
    url("https://svgshare.com/i/Qmp.svg"),
    radial-gradient(farthest-side,#D9DEEA 99%,transparent);
}

<div class="container">
  <input type="checkbox" >

</div>

Set custom style attribue doesn't work in IE11

IE11 doesn't support css custom properties, therefore it doesn't supports this setProperty method.

Checkout this css-vars-ponyfill, which aims to add basic support.

IE11 - does a polyfill / script exist for CSS variables?

Yes, so long as you're processing root-level custom properties (IE9+).

• GitHub: https://github.com/jhildenbiddle/css-vars-ponyfill
• NPM: https://www.npmjs.com/package/css-vars-ponyfill
• Demo: https://codepen.io/jhildenbiddle/pen/ZxYJrR

From the README:

Features

• Client-side transformation of CSS custom properties to static values
• Live updates of runtime values in both modern and legacy browsers
• Transforms <link>, <style>, and @import CSS
• Transforms relative url() paths to absolute URLs
• Supports chained and nested var() functions
• Supports var() function fallback values
• Supports web components / shadow DOM CSS
• Watch mode auto-updates on <link> and <style> changes
• UMD and ES6 module available
• TypeScript definitions included
• Lightweight (6k min+gzip) and dependency-free

Limitations

• Custom property support is limited to :root and :host declarations
• The use of var() is limited to property values (per W3C specification)

Here are a few examples of what the library can handle:

Root-level custom properties

:root {
    --a: red;
}

p {
    color: var(--a);
}

Chained custom properties

:root {
    --a: var(--b);
    --b: var(--c);
    --c: red;
}

p {
    color: var(--a);
}

Nested custom properties

:root {
    --a: 1em;
    --b: 2;
}

p {
    font-size: calc(var(--a) * var(--b));
}

Fallback values

p {
    font-size: var(--a, 1rem);
    color: var(--b, var(--c, var(--d, red))); 
}

Transforms <link>, <style>, and @import CSS

<link rel="stylesheet" href="/absolute/path/to/style.css">
<link rel="stylesheet" href="../relative/path/to/style.css">

<style>
    @import "/absolute/path/to/style.css";
    @import "../relative/path/to/style.css";
</style>

Transforms web components / shadow DOM

<custom-element>
  #shadow-root
    <style>
      .my-custom-element {
        color: var(--test-color);
      }
    </style>
    <div class="my-custom-element">Hello.</div>
</custom-element>

For the sake of completeness: w3c specs

Hope this helps.

(Shameless self-promotion: Check)

CSS Variables don't work in Microsoft Edge

CSS variables are not supported by IE nor will they ever be.

Update:

CSS variables are supported in Edge since EdgeHTML 15 (packaged with Windows 10 version 15063, available since March 2017.

See here under Browser Compatibility.

Also, the W3C spec.

---

As an alternative you can use a CSS pre-processor to compile your CSS using variables in the way you describe.

Docs on Sass

Docs on Less

How to write a CSS hack for IE 11?

Use a combination of Microsoft specific CSS rules to filter IE11:

<!doctype html>
<html>
 <head>
  <title>IE10/11 Media Query Test</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <style>
    @media all and (-ms-high-contrast:none)
     {
     .foo { color: green } /* IE10 */
     *::-ms-backdrop, .foo { color: red } /* IE11 */
     }
  </style>
 </head>
 <body>
  <div class="foo">Hi There!!!</div>
 </body>
</html>

Filters such as this work because of the following:

When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1), it must ignore the selector and the following declaration block (if any) as well.

<!doctype html>

<html>

 <head>

  <title>IE10/11 Media Query Test</title>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <style>

    @media all and (-ms-high-contrast:none)

     {

     .foo { color: green } /* IE10 */

     *::-ms-backdrop, .foo { color: red } /* IE11 */

     }

  </style>

 </head>

 <body>

  <div class="foo">Hi There!!!</div>

 </body>

</html>

Why does the CSS box-shadowing work in IE11 on a Meteor app, but not on a Sharepoint CEWP?

SharePoint 2010 tells Internet Explorer to run in compatibility mode in order to retain functionality associated with its various ActiveX controls and Office extensions. Compatibility mode is essentially equivalent to IE8 in terms of HTML, CSS, and ECMAscript compliance.

If you wanted to, you could sneak <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> between the <head></head> tags in the masterpage that SharePoint uses (with no preceding elements that aren't also <meta> tags) to tell IE11 to actually behave like IE11, but that could come at a loss of SharePoint functionality.

If you have the Publishing Infrastructure site collection feature and the Publishing site feature activated on your site, it makes it easier to manipulate masterpages and page layouts. You can have multiple masterpages in your SharePoint site's masterpage gallery, giving you the ability to have some pages that render in IE8 mode for legacy functionality and some pages that render in Edge mode for modern HTML/CSS. (I would download a copy of the existing masterpage, add or update the meta header tag, and re-upload it as a new masterpage.)

While the masterpage for the site as a whole is determined by a setting in Site Settings (found at /_layouts/changesitemasterpage.aspx), you can also hardcode a masterpage reference into a page layout. Then you can create a new page using that page layout and it should render as IE11 instead of IE8.

Edit: Or yes, you could instead use jQuery to work around the problem with the CSS not being recognized. Just be aware that if you go this route, you're essentially supporting IE8, so the newest versions of jQuery probably won't work (but the venerable version 1.1 should be fine).

---

Related Topics