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
Continue reading %Front End Development after Internet Explorer%