Browser Support

TL;DR — you can use Shoelace today if you don’t care about Internet Explorer (Edge is fine). If you need to support IE, just use a grid system and a polyfill such as Myth or cssnext.

Browser support for CSS variables is pretty good, but if you need to support Internet Explorer, consider using Myth or cssnext as a polyfill. Both libraries let you write standards-compliant CSS and process it to work properly in unsupportive browsers.

Unfortunately, it’s impossible for polyfills to support variable scoping. Because of this, Shoelace only uses CSS variables that are assigned at the :root level.

Browser support for the CSS Grid is very good, but if you need to support older browsers you can use a grid system instead.

Browser support for calc is excellent. Shoelace uses this internally for relative calculations. You can use it along with CSS variables too.

Browser support for color modifiers is non-existent. There is a draft, so hopefully that will change soon. Shoelace doesn’t use this feature, but it will when support improves.

Browser support for custom media queries is non-existent. There is a draft, so hopefully that will change soon. Shoelace doesn’t use this feature, but it will when support improves.