Skip to main content


Internet Explorer Is Out: 10 Cool Website Features That Will Soon Become More Available

By on August 10th, 2021 in Web

Internet Explorer may have been innovative when it launched, but it has long been left in the dust by other browsers. Abandoned by Microsoft in favor of the newer Edge, it received its last major update six years ago. It doesn’t support most of the new code options added to the web since 2015; its security is lacking; it is slow… the cases for ending its use multiply by the year, but a small percentage (less than 1%) of users still use it.

Web developers generally choose one of three ways to deal with Internet Explorer:

  1. They can simply not support it–many major sites, including Facebook, have already dropped support.
  2. They can use the newer features, but add extra fallback code to make Internet Explorer usable.
  3. Although this option seems to provide the best of both worlds, it increases code weight (which slows down websites) and development time
  4. They can build primarily around the features Internet Explorer supports, ensuring greater consistency across browsers at the expense of not being able to use some of the features that have been added to the web since 2015.

LKCS has primarily taken the third approach so that our sites will maintain maximum compatibility with a minimum of code weight. Nevertheless, since Microsoft will no longer support Internet Explorer in its apps in August 2021 (Google already dropped support in March and WordPress dropped support in July), and Internet Explorer will be fully dropped by Microsoft in June next year, the time has come to say goodbye to Internet Explorer– And hello to the new edge of web design.

Let’s take a look at some of the expanded options dropping support for internet explorer will open to web designers:

Blend Modes

In modern browsers (Chrome, Safari, Firefox, Edge, etc), blend modes such as overlay, multiply, screen, burn, and dodge are available to create more dynamic and colorful effects.

Modern Browsers:

Blend modes in a modern browser overlay in different colors and intensity of blue over a mountain background.

Internet Explorer:

Blend Mode in Internet Explorer is only a slightly transparent blue overlay over the mountain background.

Cool Shapes

Clip-path adds a world of dynamic shapes to the web. Developers often use images to mimic the more unusual shapes, but fewer images means a faster load time for the page and more template flexibility!

Modern Browser

Clip path created smooth and curved shaped background over a mountain background.

Internet Explorer

Flat lined background shaped with no curve over a mountain background

More Fluid Layouts

From elements that conform to the maximum size of the text inside them, to text and elements that can dynamically resize in a range from minimum to maximum, to the upcoming queries for containers, modern browsers support a host of tools for liquid layouts that will make sites adapt to each user’s device size more gracefully.

For example, a button element that uses max-content to fit the button to the width of the text dynamically (with some padding) will not work in internet explorer:

Modern Browser

A green button with text on it that reads "This button resizes with its text"

Internet Explorer

A green button with text that says "This button resizes with its text" but the button's width stretches past the size of the text

The death of IE will also allow much more fluid grids. While developers are good at tweaking things into position, the css grid module allows a much wider range of layout possibilities without as many container boxes. Grid-gap for both grid and flexbox will also render manual column gap calculations obsolete, allowing elements to take full advantage of the flexibility of flexbox and grid.

Modern Browser

3 different size boxes lining up event next to each other

Internet Explorer

The same 3 boxes only stacked on top of each other in rows, with one large box stretching farther than the other.
The same 3 boxes, only 2 smaller ones side by side, and the large box underneath, but only stretching the width of half of the boxes.

Multiple Backgrounds

IE does not allow elements to have multiple backgrounds– but modern browsers do! From placing a logo with a fixed size over a fluid-width background image to creating a dynamic sparkle effect (like the card hover on BLCCB), multiple background images bring with them a host of design possibilities.

Modern Browsers

An image of a mountain, an image of a lake, and an illustrated pine tree all serving as backgrounds for one element of code.

Internet Explorer

Internet Explorer only shows one mountain background for an element of code.

Cooler Animations

Internet Explorer’s end of life will open up a wider range of css animation possibilities. Between multiple backgrounds, motion paths, and clip path animations, the web will become more dynamic than ever.


Modern browsers also allow a host of filters such as blurs, greyscale, hue shifts, negative… naturally, not supported by IE.

Modern Browsers

4 images of a mountain and text overlay on each. One image in 100% grayscale, one with a 10px blur, one set at 50% sepia, and one with a 90 degree hue.

Internet Explorer

Internet Explorer displays 4 image settings exactly the same.

Pictures That Resize Themselves

Modern browsers offer the picture element, which allows optimized images to be delivered based on-screen size. This natural html solution creates an experience tailored to the user’s device — no complicated show/hides or weighty javascript libraries required. Once internet explorer is out of the picture, it’s only a matter of time until most major content management systems offer this option.

Modern Browsers

3 photos of a mountain resized at different proportions to fit a desktop, tablet or mobile screen

Internet Explorer

3 photos of a mountain resized to the same proportions at different screen levels for desktop, tablet and mobile devices.

Modern browsers also offer object-fit which adds much greater control over how the browser treats images and fits them to their boxes.

Modern Browsers

Object Fit Cover is a black rectangle that is the container element. The black rectangle is not visible with an image of a mountain in the same element.

Internet Explorer

Object fit with a black rectangle as a container element. The rectangle is visible under an image of a mountain.

Color Options

CSS Variables will make it possible for users to change the colors, box shapes, and various options on landing pages just by adjusting one variable. While this may seem unexciting compared to some of the other items on this list, it could allow more developers to offer flexible templates with much less code complexity. It could also allow users of content management systems such as Sitefinity and WordPress to adjust the colors on individual landing pages without needing to generate extra templates or spend hours tracking down each use of the color in the code.

Improved Accessibility

Modern browsers have also added more accessibility features which are unavailable to users of Internet Explorer! For example, tab navigation has been vastly improved by the addition of focus-within (which, for example, allows the styles for hover dropdowns to apply while the user is tabbed on a link within the dropdown) and focus-visible (which allows special styling on tab navigation that doesn’t activate on click).

Focus-within opens the dropdown on focus with no javascript and stays open as long as the focus is within the dropdown! It is not available in Internet Explorer.

A dropdown menu displaying Focus within on a navigation link that's outlined.

Cool Text Effects

In addition to offering the benefits of kerning and variable fonts, modern browsers allow font to contain images and gradients!

Modern Browser

An image of a mountain is contained within text that says "Cool Text". A green gradient is coded into text that says "Cool Text".

Internet Explorer

Internet Explorer overlays the words "Cool Text" over a mountain image and green gradient background.

Outlined text is also back on the table (though not via standards):

Modern Browsers

The word "Cool Text" is outlined with a green border

Internet Explorer

The word "Cool Text" does not display a green border outline

Modern Browsers

A paragraph of text curves around an image

Internet Explorer

A paragraph of text wraps under an image with no curve

Looking Ahead

Although some of these options can be mimicked by clever web development workarounds and polyfills, being able to use them without needing workarounds or polyfills will make future code lighter, more compliant, and faster– and speed and compliance are important in 2021 and the future, considering both usability and Google’s SEO policies. (That’s not even mentioning the added benefits of Javascript ES6.)

With Internet Explorer not only on the way out, but mostly out the door, LKCS has made the decision to start phasing out our support for Internet Explorer on September 1, 2021. We will no longer be fixing non-critical internet explorer-specific issues, and new sites will not be built to look good in IE (only to be usable.)

We suggest advising your users to upgrade via a news post or announcement; LKCS can also install browser-sensitive ‘browser outdated’ warnings as requested. As part of its effort to get users to upgrade, Microsoft even has a page for users to refer to, which can be linked or referenced for ideas.

We believe that the decision to drop Internet Explorer will allow us to create more innovative, future-proof websites, and look forward to being able to bring the benefits of up-to-date browsers to our clients.