10 Reasons To Stop Supporting Internet Explorer

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.


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.


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.


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.


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.

     <summary>Question Goes Here!</summary>
     <p>Answer Goes Here!</p>

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.