:root imported CSS not working in safari and IE 11

:root Selector is not working in some of the browsers.

Code:

:root {
    --blue: #4d6fd3;
    --yellow: #d8c812;
}
h1{
    color: var(--blue);
}
h2{
    color: var(--yellow);
}

<h1>This is a heading with blue color</h1>
<h2>This is a heading with yellow color</h2>

These imported CSS are not applied in Safari 5.1.7 and IE11.