Since June 15, 2022, support for Internet Explorer 11 (IE) has officially ended. Starting with certain versions of Windows 10, users can no longer use IE and must instead rely on Microsoft Edge. For sites and apps that depend on IE, Microsoft Edge offers an Internet Explorer mode, which ensures backward compatibility and will be supported at least until 2029. The end of IE support opens the door to removing many CSS-related limitations.

Flexbox, introduced in 2013, and Grid Layout, introduced in 2017, were both foundational technologies for web layouts. However, they were not fully implemented in IE, which meant developers had to accommodate IE’s limitations. In particular, Grid Layout was practically unusable because IE stopped receiving updates in 2015. While the end of IE support doesn’t mean all CSS specs will be updated overnight, it does create long-term opportunities to leverage new CSS technologies.

[Figure 1. Global Browser Market Share as of September 2022]

Globally, IE’s market share had already dropped to a mere 0.84% by September 2021.

[Figure 2. IE Market Share Changes in Korea After Support Ended]

In Korea, IE had a relatively high share—around 8% between August 2020 and August 2021. However, since support ended in July 2022, its share has fallen to around 1%. This further raises expectations for adopting new CSS specs.

For example, developers often used SCSS to implement CSS Variables smoothly in IE. Now, variables can be freely used in CSS files without relying on SCSS.

[Figure 3. Example of Variable Usage in E-GENE’s color/main.css File]

Without IE support, E-GENE’s solution can use variables in CSS files as shown above. By simply modifying the global variable definitions at the top, all CSS using those variables can be updated at once. 

This makes changing base styles within the solution easier and provides flexibility for a more user-friendly experience.

What path will CSS take when IE’s market share reaches 0%?

One alternative could be TailwindCSS, a CSS framework introduced in 2017. TailwindCSS is utility-first, offering easy customization and extensibility, along with well-documented features and plugin support. Unlike semantic web standards, it uses a direct approach where intuitive properties are expressed as classes. Experienced HTML/CSS developers can often predict the actual UI just by looking at the HTML file.

[Figure 4. TailwindCSS Applied: Screen and Coding Style]

TailwindCSS eliminates the need to create custom class names or link CSS files in HTML. It includes built-in breakpoints for responsive design and works even better in environments using frameworks like React or Vue. Developers can customize breakpoints, colors, and other settings to fit project needs. When creating new components, predefined classes can be used without generating separate CSS files, which is a major advantage for long-term maintenance.

However, there are drawbacks. While the code is intuitive, readability suffers, and the HTML can look cluttered. Additionally, TailwindCSS does not support IE. Projects that exclude IE can adopt TailwindCSS, but in reality, few projects can completely ignore IE at this point. Still, monitoring CSS trends and planning for future adoption will allow solutions to evolve alongside IT trends once IE is fully phased out.

Considering the current market situation, CSS’s potential and usability are expected to expand rapidly. Therefore, we can look forward to significant upgrades in the CSS structure applied to E-GENE solutions.

Kim Sena, R&D Team, STEG Inc.