Front End Development after Internet Explorer

[caption id="attachment_131153" align="aligncenter" width="700"] Artwork by SitePoint/Natalia Balska[/caption]

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:

1. Modern CSS properties and features;
2. HTML5 features;
3. JavaScript features...
4. ... 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:

• Migrating to Flexbox by Cutting the Mustard
• A Primer on Using Flexbox with Compass
• Flexbox Froggy - A game for learning CSS flexbox

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 Gradients: A Syntax Crash Course
• Lea Verou's Gradient Gallery

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:

• 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

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:

• Craig Buckler's series on CSS3 Transitions
• A Primer on CSS3 Transforms
• The Definitive Guide to CSS Transitions

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:

• 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%

by Adrian Sandu via SitePoint