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;
- … 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 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:
- Migrating to Flexbox by Cutting the Mustard
- A Primer on Using Flexbox with Compass
- Flexbox Froggy – A game for learning CSS flexbox
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:
- An Introduction to Hardware Acceleration with CSS Animations
- Animation Advice from a CSS Master
- Syncing CSS Animations with HTML5 Audio
2D/3D transforms and transitions
- Craig Buckler’s series on CSS3 Transitions
- A Primer on CSS3 Transforms
- The Definitive Guide to CSS Transitions
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
- Decorating the Web with CSS Border Images
- CSS3 Border-Image
- CSS3 Border Images for Beautiful, Flexible Boxes
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:
- CSS3 Columns and Paged Reflowable Content
- Guide to Responsive-Friendly CSS Columns (CSS Tricks)
- Using CSS multi-column layouts (MDN)
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.
- CSS3 Gems: The pointer-events Property
- How Pointer Events Will Make Cross-Browser Touch Support Easy
- Unifying Touch and Mouse with Pointer Events
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
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:
- 6 Nifty, Time-Saving HTML Attributes
- HTML5 and Even Fancier Forms
- Input Attr : Autofocus (HTML5Tutorial.info)
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
data-* attributes, you can get started with the following resoruces:
- Managing Custom Data with the HTML5 Dataset API
- How to Use HTML5 Data Attributes
- Using data attributes (MDN)
Email, telephone & URL input types
URL input types. Here are a few examples on how to do it:
Shiny new attributes: hidden, placeholder, spellcheck, pattern
- “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
displayproperty 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
patternattribute 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.
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.
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)
- Input Type : Range (HTML5Tutorial.info)
- How To Style HTML5 Range Slider Across Multiple Browsers (Hongkiat.com)
- Playing With The HTML5 range Slider Input (The New Code)
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.
- How to Safeguard your Site with HTML5 Sandbox (MSDN)
- Security in Depth: HTML5’s @sandbox (Chromium Blog)
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.replaceState methods. You can check the following resources for an in-depth analysis of the feature:
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.