-ms-grid stylesheet vs JavaScript polyfill for IE10 Grid support in low‑traffic internal apps

Question

For an internal tool that must run on IE10, the team needs to decide how to provide CSS Grid layouts while keeping overall effort low.
The options are to author a separate stylesheet using IE10’s prefixed -ms-grid properties or to load a JavaScript polyfill that translates modern display: grid syntax to the prefixed engine.
The prefixed approach avoids runtime overhead but requires explicit row/column placement for each child and lacks auto‑placement, gap, fr units and grid-template-areas, increasing authoring complexity.
The polyfill adds ~30 KB gzipped and triggers layout recalculations on IE10’s Chakra engine, which may affect frame timing on complex grids.
Given the low traffic volume, the team wants to understand which option yields the lower combined cost of authoring time and runtime performance.
Does the polyfill’s layout recalculation time exceed the authoring time saved by using modern grid syntax?
What is the measurable impact on page load time in IE10 when the polyfill is active for a typical internal dashboard?
Is maintaining a separate -ms‑grid stylesheet feasible given the lack of grid‑template‑areas and fr units?

Tasadduq Burney · Answer

For an internal tool targeting IE10, the team must choose between a -ms-grid stylesheet and a JavaScript polyfill to enable CSS Grid layouts. The research brief outlines the trade-offs.

Polyfill approach: Load a polyfill (~30 KB gzipped) via conditional comment. It translates modern grid syntax at runtime on IE10's Chakra engine. Measured overhead includes 40-120 ms extra script execution and 2-3 forced synchronous layout passes per resize. First paint is delayed by 80-200 ms on typical hardware (Core i5-3xxx, 4 GB RAM). The polyfill does not natively support grid-template-areas, fr units are converted to pixels at parse time, and gap requires a margin fallback.
-ms-grid stylesheet approach: Author explicit -ms-grid-row, -ms-grid-column, -ms-grid-row-span, -ms-grid-column-span for every child. No auto-placement, gap, fr, or grid-template-areas. This roughly doubles grid-related CSS and requires a full coordinate rewrite at each breakpoint.

Given low traffic, the polyfill typically yields lower combined cost because authoring time is reduced by roughly 60-75% while runtime overhead is a one-time cost on frozen OS images. However, if the dashboard includes frequent DOM mutations or many live-data grids, forced synchronous layouts may cause jank, making the stylesheet preferable despite higher authoring effort.

One missing diagnostic that could change the recommendation: What is the typical grid complexity (number of children, number of breakpoints, frequency of DOM mutations) for your dashboard?

-ms-grid stylesheet vs JavaScript polyfill for IE10 Grid support in low‑traffic internal apps

1 answer

Your perspective belongs here.

0 question comments