10 Reasons To Stop Supporting Internet Explorer

Web #6 Thumbnail — No Internet ExplorerThis article is available as a video on Photics.TV (YouTube). Part of determining the requirements for your web project is choosing which web browsers to support. So, while Internet Explorer is not quite dead yet, it’s really close. That’s the point of this article. If you’re having trouble deciding to include Internet Explorer in your next or current web project, here are 10 native web features that you can probably use if you drop support for Internet Explorer.

But before we get started, this article doesn’t focus on JavaScript. These 10 features are either HTML or CSS. These are cool little features that you might have overlooked or couldn’t use because of older web browsers.

ES6 features, like Asynchronous Functions, are powerful. As an example, I use that technology in the Widgets & Apparatuses apps in order to fetch the latest weather reports from weather.gov. I was astonished at the power and simplicity.

However, we’re still in the early stages of the Web Design and Web Development series of videos, so the features presented here are better suited for beginners. So, with that out of the way, let’s get to feature #1.

CSS Filter Effects

😻

I first learned about this feature in Tumult Hype. It’s pretty neat. And yet, I rarely use it. That’s because of the warnings. Internet Explorer is the main blocker. But if you drop support for IE, then you can modify the visual appearance of elements — including images. There are functions for blur, brightness, contrast, drop-shadow, grayscale, hue, opacity, sepia, and saturate.

There’s even the ability to invert the coloring. That effect can recreate the appearance of a photographic negative. That might be interesting for a photography website. Anyway, the point is that an image or HTML element can be modified in the browser — even dynamically — but not if you’re using Internet Explorer. The other major browsers support CSS Filter Effects.

https://caniuse.com/css-filters

CSS Variables

Being able to change styling dynamically is very helpful with animation and interactivity, which is why I especially enjoy the second feature on this list. If you’re using the same value for your styling, such as a particular color set for your website, you can use variables to centrally manage those values. Make one change to the variable and all of the other styles using that variable are updated — nice and easy.

1
2
3
4
5
6
:root {
     --photics-blue: #4080bb;
}
body {
     background-color: var(--photics-blue);
}

You don’t have to compile your styles sheets to enjoy this feature. You just have to drop support for Internet Explorer. What’s even better is that the values can be changed dynamically with JavaScript.

Once again, the Widgets app is an example of a modern web feature in action. The appearance is customizable. You can change the border, margin, coloring, or other styling to match your preferences. This feature is managed with CSS Variables. Work on this app started over two years ago. Since I didn’t have to worry about Internet Explorer support, I could add this nice feature. That’s because it’s a WebKit WebView app. CSS Filters work in Safari, so it can work in an iPhone or iPad app.

Yet, this feature is not limited to WebView based apps. It can be added to websites. All you have to do is drop support for Internet Explorer.

https://caniuse.com/css-variables