Front End Development after Internet Explorer

Internet Explorer as an old man with the ducks — Artwork by SitePoint/Natalia Balska

Welcome to the second part of this small series dedicated to the beginning of the end of what the community calls oldIE (namely Internet Explorer up to and including version 10). The first part in our series listed the obsolete techniques and practices that can be discarded in order to simplify the front-end development process. It also sparked a very interesting discussion in the comments that makes me add the following disclaimer (which, in hindsight, should have been included in the first part as well):

The decision process regarding whether or not to drop support for oldIE is a totally different subject, that is not part of the topics covered by this series. If the specifics of your website or application force you to maintain support, you have my sympathy. If you can close that chapter for good, join the rest of us for the ride.

That being said, today we will start exploring the long list of modern features that we are now free to use without restrictions. Many thanks go to the creators of CanIUse.com — without their wonderful tool, this article would have been a lot more difficult to document properly.

We will split these features into four main groups:

Modern CSS properties and features;
HTML5 features;
JavaScript features…
… and anything else that doesn’t fit above.

To keep things tidy we will discuss only those features that lacked proper support on oldIE but can be used safely on Internet Explorer 11 or Microsoft Edge. In this article, we will look at the first two of these feature groups. Let the show begin.

1. Modern CSS properties and features

The main source of complaint regarding oldIE was usually its poor support for modern CSS properties and features, due to the slow update cycle. It makes sense then to start our journey in this area.

Flexbox

Flexbox is the third major step in creating web layout, after tables and floats. Foundation 6 offers already a Flexbox-powered alternate grid and the future version 4 of Bootstrap will include the same feature. There are also many small grids based on Flexbox, a few of them already mentioned here on SitePoint, like sGrid.

There are still issues and bugs (especially with the Internet Explorer 11 implementation), but they are well documented and people can find ways around them. Therefore, if you haven’t already, it’s time to start experimenting with Flexbox and use it in your projects. Here are a few resources to get you started:

CSS Gradients

CSS gradients allow you to create smooth visual transitions between two or more specified colors. With a bit of creativity, you can also generate patterns that can be repeated like any other background-image. There is no longer any need to chop images for page backgrounds, buttons or other UI elements. Just whip a gradient in place and you’re done. If you don’t know where to start learning about them, here are some helpful links:

CSS Animations

For a long time, the animation on the web happened with the use of either Flash or JavaScript. CSS3 brought us an alternative with the Animation Module. With Flash delegated to a back row seat, the main advantage CSS animations have over the JavaScript-powered animations is the fact that they are executed in a different thread, without blocking the rest of the scripts on the page. Not every property can be animated and some properties require a larger performance price than others. Modern browsers help some more, with built-in support for hardware acceleration. This means that, when properly tuned, CSS animations can be very smooth (at least 60 fps) and with minimum performance impact. This topic has been very popular recently on SitePoint, with many articles discussing the fine points of tuning CSS animations. Here are only a few examples:

2D/3D transforms and transitions

Transforms and transitions are the main building blocks of CSS animations. With proper care and attention to detail, we can do things that a while ago required Flash. While this is not the only modern animation technique available (with alternatives like SVG, Canvas and various JavaScript techniques coming to mind), it is one of the easiest to learn, use and maintain. Fellow SitePoint authors have written plenty articles on these topics, making it easy for everyone to start learning these useful techniques:

Border image

The common way to alter the look of borders is to use the options available for the border-style property. In the times of oldIE, the only way to add fancy decorative elements (like custom borders) was to use complex markup constructs and sliced images. Today we can use another technique based on the border-image property without further restrictions. This technique allows you to take an image, cut it in virtual slices and use those slices to compose the border. Not much different from the old technique, but without the messy markup and using only one image.

Here are some articles that will teach you all you need to know about border-image:

Multi-column layout

Despite the overwhelming popularity of the Web, printed magazines still have their own glamour – and a good reason for that is the carefully crafted layout, often split in multiple columns. The digital medium tried for a long time to mimic the options of the printed world. Today, we are collecting the first fruits of this effort, as we can now make use of the option to arrange the content in multiple columns. And if you don’t know where to start, here are some pointers:

Rem and viewport units

CSS units are a large family, even though most developers are mostly familiar with pixels and (perhaps) ems. With big bad oldIE sent to retirement, we can get now more of their siblings out to play, especially rem and viewport units. Let’s have a look at what these units are and what we can do with them.

Pointer events

For a long time, JavaScript was the main way to add interactivity to elements other than links and buttons. Things have changed with the wider adoption of pointer events. Although their origin lies with SVG, pointer events allow developers to specify if/when a graphical element can respond to mouse events. This can have interesting applications, like this Mars telescope to view the London Olympics. The guys at Microsoft also look at pointer events as a way to unify interaction, whether it’s done using touch, mouse, stylus or graphic pen. Let’s see what else we can do with them:

SVG Filters

For all the advancements that happened on the Web, for all the new fonts and techniques to manipulate images, we still return to a graphics editor whenever any fancier effect is required. Color blending, text effects, masking and other similar requirements still get us running to the designer, asking for an image with the desired result.

Well, now you can give the poor guy (or lass) a well-deserved break. All the modern browsers support a feature called svg-filters that allow you to recreate most of the effects that previously required an image editor. While you don’t quite get Photoshop in a web page, things are not that far away either. Don’t believe me? Have a look at this demo hosted on GitHub: FILDROP – SVG Filters. Pretty neat, right?

Now, before you rush to fire up your code editor, take a small break first to brush up on the theory. Find out why SVG filters are awesome, learn the right way for applying SVG effects to HTML content or check out advanced techniques from the mistress of SVG herself, Sara Soueidan.

2. HTML5 Features

HTML5 brought more than a new set of tags and attributes — it enabled native browser support for some actions that previously required the use of JavaScript or other scripting methods. Let’s have a look at the new set of shiny things we can now play with.

Autofocus

This attribute does exactly what the name says — it puts the focus inside an input. Think about how you can type directly as you arrive on the Google search page (note — they are using a different solution). If you do want to integrate a fallback using JavaScript, be sure to use the DOM ready event instead of window.load. It is not a good idea to have the page jump to the input location (and maybe even bring up the onscreen keyboard) when the user already started interacting with the content.

For more info you can check the following resources:

classList (DOMTokenList)

Manipulating classes on a DOM element is not a new idea. As proof of the popularity (and usefulness), jQuery has great support for these actions, at the cost of carrying the entire library along. Native support for DOMTokenList allows you to do the same operations faster and more efficiently. While support in IE11 is not 100% complete, this shouldn’t stop you exploring the possibilities offered by this functionality.

To get a better understanding of the details of DOMTokenList, you can consult the following resources:

Dataset & data-* attributes

Storing data inside the markup is not a new idea. Developers have been doing this for a while, initially with custom class names, later with data-* attributes. jQuery has been very helpful in this direction, with their .data() functionality. In our context though, you can go around jQuery completely and use the native support to handle the data-* attributes directly.

If you need a refresh on the native support for dataset and data-* attributes, you can get started with the following resoruces:

Email, telephone & URL input types

Form validation has always caused headaches for web developers everywhere. How many times have you searched the Internet for the perfect regular expression to validate emails? Fortunately, the HTML5 Constraint API can make this task easier with minimum JavaScript involved, with the help of the email, telephone or URL input types. Here are a few examples on how to do it:

Shiny new attributes: hidden, placeholder, spellcheck, pattern

HTML5 brought a set of new helpful attributes meant to provide native support for some techniques that usually are integrated using JavaScript. Most of them extend the functionality of input fields, enhancing the usability and the validation process. While none of them are a real surprise (having existed already for a while), now it’s the first time they have such a broad support, that makes them easy to use without deploying polyfills. If you need a refresh on the HTML5 client-side validation, check this article – Client-Side Form Validation with HTML5. Otherwise, let’s have a look at what’s on the list:

“Hidden” attribute – This is actually an offshoot of CSS, as it behaves exactly as display: none. It can even be overridden with CSS using the display property and it can be applied to any HTML element. As a solution, it is more semantically correct and should more efficiently aid screen readers.
“Pattern” attribute – The automatic validation for some fields can’t be standardized though. Let’s consider the <input type="tel">. Phone formats are different from country to country so you can’t have a generic validation model. That’s where the pattern attribute kicks in. You can specify a regular expression as its value and the browser will use it to validate the user input. For a great collection of various patterns, you should check HTML5Pattern.
“Placeholder” attribute – The placeholder attribute specifies a short hint that describes the expected value of an input field. Some people even use them as a replacement for labels, but that opens a good deal of usability problems — once the fields are populated, the placeholder disappears. Cumulated with the lack of visible labels, this can cause a lot of confusion. While there is plenty of room for abuse, when wisely used, the placeholder can give many helpful hints to the user.
“Spellcheck” attribute – We are already used to seeing textareas doing a spellcheck correction on the text we write. What most developers don’t know is that you can control this function, turn it on or off and even enable it on normal text input fields. Why would you want do to that, you might ask? You might want to spellcheck the query of a search field or disable the function when the textarea is used for inputing code, for example. For more details, you can check the following article from Mozilla Developer Network — Controlling spell checking in HTML forms.

New semantic elements

Semantic elements in HTML5 are tightly related to machine-processing of the web content, with two main fields that benefit the most — indexing and search engines on one hand, and assistive technologies on the other hand. Support is still not 100%, there are minor hiccups here and there and choosing the right element in each case can be daunting in the beginning. The debate is still going strong on the use cases and it’s up to each one of us to choose how much of these elements we deploy and where. HTML5Doctor.com has a great article on the topic of HTML5 semantics, with plenty of information and points outward to plenty relevant resources.

PNG favicons

Back in 1999, Internet Explorer 5 introduced a new feature, called the favicon — a tiny image that sits next to the website URL in the address bar, in the bookmark list and, more recently, in the tab where the website is loaded. The old .ico format still has a degree of versatility (it can encapsulate multiple image formats at 16×16, 32×32 and 48×48 pixels), but it has become obsolete in the age of high-density screens. Fear not though, as now you can use PNG images as favicons. Just keep an eye at the peculiarities of each browser, as they are detailed in this great CSS-Tricks article on favicons.

Progress element

The progress bar has been a constant on the computer screen from the birth of the first graphical operating system. There are various implementations on the web too. Today, we can use a native control for the progress bar, as long as we pay attention to the specifics of each browser integration. Fortunately, we have already great guides and resources, such as the ones below:

Range input type (sliders)

Like the progress element we mentioned above, sliders have been another constant on computer screens everywhere for decades. It didn’t take long to land on web pages either, with the help of various JavaScript solutions. Finally, you can now create a slide control natively with a single HTML tag. There are multiple situations when this element is the most intuitive solution. Find out how and when to use it:

Iframe sandbox

Iframes have become increasingly common in recent years, even though the end user barely perceives them. Social media plugins, banners and other adverts – all of them end opening up iframes to display their intended content. With so many doors open into your page, the chance for a malicious script to make a successful attack on your website increases as well.

Here is where the sandbox mode for iframes comes into play. It instructs the browser to cut down on the privileges (like running JavaScript or triggering popups). Both Microsoft and Chromium teams have documented this feature for your convenience:

Session History Management

“Old school” website behaviour is that as you load new pages, the URLs change and get stored into the browser history. With this, you can go back and forth through your history when you want to have another look at a page you just moved away from. The rise of “Single Page Apps” brought a great challenge — everything happens in the same page, via AJAX calls, yet we still need distinct URLs for various states of the application. This is solved with the latest updates to the history management, namely the popstate event, the history.pushState and history.replaceState methods. You can check the following resources for an in-depth analysis of the feature:

Conclusion

That was quite a list and I’m still saving about the same amount for another article. None of the features outlined in this article are new. Most have been available, in one way or another, for a few years. What has changed is the native support accross the mainstream browsers, together with the reduction in market share for the oldIE. The most important consequence is that, most of the time, we no longer need countless polyfill solutions. So take a look at the analytics of your website and, if possible, drop the polyfill training wheels and make use of the full capabilities of modern browsers. Your clients will be grateful for the improved performance and experience.