This 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
CSS Position Sticky
And when you’re building websites, there tends to be a navigational menu. This leads to the third feature in this list — CSS Position Sticky.
Instead of having the menu scroll off the page, it can stay stuck to the top of the page. That’s very handy for making floating menus.
.stick {
position: sticky;
}
You don’t need to add a plugin, a module, or lines of JavaScript code. Just a little bit of CSS gets the job done. This is especially useful with modern design, where single-page websites are fairly common. By using CSS, you can make your website more usable and dynamic. This is especially important with today’s websites, as the layout needs to be fluid and flexible.
https://caniuse.com/css-sticky
CSS Math Functions
With CSS Math Functions min(), max(), and clamp(), you can set limits to your styling. This is important because of sizing. Your websites could be viewed on an original iPhone SE in portrait mode or in landscape on a 4K monitor. That’s a big difference.
It’s been challenging on web developers and web designers to support such a wide range of displays. That’s why new features like this are so important. It can help you to build styling that’s more dynamic. But if you are going to use this feature, it might be helpful to familiarize yourself with the CSS units of measurement, especially VW and VH, which stands for Viewport Width and Viewport Height.
https://caniuse.com/css-math-functions
This feature could be a topic by itself. If you’d like to request such a tutorial, you can post a comment on Photics.TV (YouTube) or use the Photics.com Contact Form. For now just know that CSS is becoming more like a programming language. With the addition of CSS variables and functions, a modern website can natively do things that would be difficult recreate on IE.
RRGGBBAA
But just so we don’t overwhelm the designers, that might be apprehensive towards programming, the fifth feature is a little silly — RRGGBBAA. If you drop support for Internet Explorer, you can add an alpha channel to colors using hexadecimal notation.
This feature might seem frivolous, until it’s not. As an example, marketers might have strict file size limits on their banner advertisements. If you’re 1K over a 150K limit, every character you can safely eliminate matters.
So, if you wanted a 50% gray background, you might use rgba(128,128,128,0.5), but a shorter alternative could be #80808080. And if a slightly different shade of gray is OK, that color value can be shortened to #8888. That’s 21 characters down to 5 characters.
Is this a practical example? Maybe it is or maybe it isn’t, but the general idea is that without the burden of supporting Internet Explorer, you could have more freedom to make more interesting advertisements.
https://caniuse.com/css-rrggbbaa
Details and Summary HTML Tags
Not everyone is into marketing though. What if you’re just making a Frequently Asked Questions page, a page where you need to cram a lot of text into a single space. That’s where you might use a collapsible box.
Question Goes Here!
Answer Goes Here!
This leads to the sixth feature — the Details and Summary HTML tags. They’re perfect for when you want to show or hide text, like on an FAQ page. The “Details” tag creates the main box and the “Summary” tag creates the text that toggles the box.
<details>
<summary>Question Goes Here!</summary>
<p>Answer Goes Here!</p>
</details>
This feature is so simple that it doesn’t need a separate tutorial. Just look at it. This is so easy to make. You don’t need JQuery, a plugin, a module, or even JavaScript to add this feature. It’s just pure vanilla HTML. However, those tags can be styled with CSS to create an even better look.
The philosophy at Photics is to avoid third-party software as much as possible. This feature is a perfect example. You don’t need the burden of downloading the JQuery JavaScript library when native features can do the job.
But when you simply cannot avoid it, and you’re loading files remotely through a content delivery network, then the seventh feature on this list is critical.
Subresource Integrity
Let’s say you were loading a JavaScript file from a third-party server. What if that server was compromised by Hacker Cat and then he added cryptomining code to the external JavaScript file? It was modified to secretly mine DOGECOIN.
Hacker Cat is especially crafty, knowing to strike when the system admins are asleep or on a long vacation. How would you know something went wrong? How long would this go on undetected? More importantly, how would you prevent it?
The easiest third-party code to secure is no third-party code. But if a CDN simply must be used, you can verify that code with a cryptographic hash.
See the Mozilla Developer Network for additional information, but the short version is this — you generate a hash of the file that you determine to be safe and then you add that hash to your HTML code using the “integrity” attribute. So, if the JavaScript file was altered, either in transit or on the third-party server, the web browser is supposed to reject that file.
But if the web browser is Internet Explorer, that check doesn’t occur. It doesn’t support the Subresource Integrity feature. If you need to argue why support for Internet Explorer support should be dropped, that’s a pretty strong reason.
https://caniuse.com/subresource-integrity
https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity
Input Type “Date”
Security is an important part of building a website, and it is related to the eight feature on this list. If your visitors can enter data, that data needs to be sanitized. Typically, there are two sides to sanitization. The first side is client side. Before the data is sent to the server, the user is alerted to possible errors — such as entering February 31st. That date is not valid.
That’s why this input type is really nice. With the pop-up calendar grid, it automatically enters in an appropriate value — including the full year. The user only needs to click or tap a date.
This input field is not connected to anything. It’s just so you can see how the new calendar popup works. This is only part of the picture, as it’s just client-side. If this value is being sent to a server, then additional checking would be necessary on the server-side. Also, this feature is still a little new, as Safari and Firefox could use some more work.
But overall, I certainly see potential here. With the “Reminders” widget, there isn’t the option to set a date on new reminders. But now that I know about this new feature, it might not be so difficult to improve the widget.
https://caniuse.com/input-datetime
Animated Portable Network Graphics (APNG)
There are other improvements available if you’re not supporting Internet Explorer, the ninth item on this list is another example. The ability to use Animated Portable Network Graphics is an upgrade — if for no other reason than we can stop having to debate on how to pronounce GIF.
Although, I’m not sure if APNG is the correct pronunciation for this new format. I assume the acronym is just spelled out.
Anyway, the GIF image format is surpassed by APNG. While the former was a pillar of the early Internet, the latter can display 24-BIT images and with 8-BIT transparency. Also, the file size for an APNG can be smaller than a GIF.
Honorable Mentions
Now, before we get to the tenth item on this list, here are a few honorable mentions. The first is Lazy Loading. This is a new feature to help speed up the initial loading of your website.
Instead of loading all of the images all at once, images that are off-screen can be loaded later. You can use the “loading” attribute, with a value of “lazy”, to specify which images don’t need to be loaded right away.
The only reason this feature didn’t make the main list is because of Safari. In that browser, on both iOS and macOS, it’s still an experimental feature.
https://caniuse.com/loading-lazy-attr
For this next honorable mention feature, Safari is not the problem. Instead, according to the Can I Use website, the Android browser is the one that doesn’t support the Gamepad API. The website states that this API is “to support input from USB gamepad controllers through JavaScript.” Admittedly, I haven’t used this feature yet. But now that I’m aware of it, wow, that sounds like a lot of fun.
As for the last honorable mention feature, that’s SVG Favicons. A Favicon is an iconic representation of your website. Originally, they were very tiny — only 16×16 pixels. You can barely see it on a 4K display. But now, there are so many different sizes. That’s why the ability to use a vector shape can be very useful. But sadly, the support is not quite there yet.
https://caniuse.com/link-icon-svg
That why the global usage number is very important. Aiming for 100% support is tough. A modern website typically uses JavaScript, but not 100% of visitors in the world have JavaScript enabled.
That leaves you with a tough decision. What’s your tolerance for support? Does a feature need 90% of acceptance before you use it? That’s still one out of every ten visitors missing out.
Is it 99%? Are you comfortable with 1% of your website visitors missing out on a feature? If so, then it’s important to know that Internet Explorer has less than 1% of usage worldwide. As of July 2021, it’s at 0.57% and falling.
https://gs.statcounter.com/browser-market-share
If it takes double the work and expense to support Internet Explorer, does it justify supporting that 1% of website visitors? And as you can see by the features on this list, it can actually be much more work that that. What’s the Internet Explorer alternative for dynamic filter effects, CSS Variables, or CSS Math Functions? That’s why double can actually be a conservative estimate.
So are you convinced? Are you ready to drop support for Internet Explorer? If not, maybe the tenth and final item on this list might convince you.
Media Query Prefers Color Scheme
Some of you might be wondering, “What’s that?” Well, there is an easier way to describe it… Dark Mode!
This is one of those features where luxury becomes necessity. I do some of my best work when it’s late at night. And when I work late, I don’t want my monitor glaring at me like it was the noontime sun. Now like I was saying before, you could hack a nighttime theme into a website for Internet Explorer. But wow, that’s going to be a lot more work than simply adding some additional CSS.
With less than 100 lines of CSS, the popular WordPress Theme “Twenty-Sixteen” was given a Dark Mode appearance. Internet Explorer users are missing out.
https://caniuse.com/prefers-color-scheme
But the real point of this article is not to gloat over the demise of Internet Explorer. Instead, it’s more about you thinking about what you can do next with your website. Aside from Dark Mode and Lazy Loading, and before this this article was written, none of these cool new features were used at Photics.com.
What about your website? Are you using any of these new features? If not, why not?! The excuse of supporting Internet Explorer is going away. This is our opportunity as website creators to bring back the fun to the Internet. There are many other features that are not supported by Internet Explorer. See caniuse.com for a list of new features.
https://caniuse.com/?compare=ie+11&compareCats=all
You could also subscribe to Photics.TV, as the Web Design & Web Development playlist is just getting started. Photics.com & Photics.TV are great resources to learn more about making websites and enjoying technology. Together we can make the Internet even better.