Four cool features you can use with HTML5 today

When developers like me talk or write about forward-looking topics such as HTML5 and CSS3, we sometimes focus too much on the things we cannot do rather than on the things we can do today.

One reason is probably that the term "HTML5" covers a wide array of developments that are at varying levels of completeness. However, a large reason is likely that, as lovers of technology, we tend to be overly enthralled by the newest and shiniest features. In consumer electronics, the device that hasn't yet been released always looks more exciting than the device we have in our hands. The same is true for HTML5: the features that are coming soon always seem much cooler than the features we can already use today.

To begin to rectify this situation, this article focuses on several cool features that are already available, at some level, in the current desktop browser releases of Google Chrome, Mozilla Firefox, Apple Safari, Opera, and Microsoft Internet Explorer. Many of these features are also available in mobile browsers on Android and iOS. As a recent research report by Forrester noted, "Nearly 75% of users in North America and 83% in Europe are running browsers that support a large segment of the HTML5 feature set." This article presents just a few of the HTML5 features you can, and likely should, take advantage of today.

Browser support

I chose the four HTML5 and CSS3 features I discuss in this article because they have broad support across all the major browsers, both desktop and mobile. However, as discussed in my previous article on taking advantage of web standards, you still need to carefully manage the experience of users with older browsers or with browsers that don't fully support a particular feature. In some cases, there may be differences in how these features are implemented across browsers, or some features may require vendor-specific prefixes for each browser engine you wish to support. The goal of this article is to introduce the features and show you some of the things you can do with them as well as recommend various resources that provide more in-depth implementation details. As such, I don't focus on the differences across browsers in detail or the code required to work around these differences. In addition, I strongly recommend using a tool like Modernizr to ensure you offer the best possible experience to all your site's visitors.

CSS 2D transforms

Once upon a time, the web was only capable of the most simple layouts. In fact, many designers and developers were forced to overuse images to achieve effects that simply were not possible using HTML or CSS. Times are changing quickly, and soon you'll be able to achieve magazine-like layouts on the web and other graphical effects like blending that were formerly limited to Adobe Photoshop. Nonetheless, you can already achieve many visual effects today using CSS 2D transforms on HTML elements.

CSS 2D transforms are actually made up of several 2D effects that you can apply to any HTML or SVG element on the page, including translate, scale, rotate, and skew. (Note that there are also CSS 3D transforms, but this article does not cover them because browser support is less widespread at the moment.) One benefit of 2D transforms is that, in most cases, they are hardware accelerated, meaning you should get better performance than other techniques that may achieve similar effects, especially when combining 2D transforms with CSS transitions. The following are some simple examples.

Translate transforms

By using the translate, translateY, or translateX transforms, you can move an element up, down, left, or right. While this is very similar to what you might do with standard CSS positioning, the translate transform can be especially useful for transitions when you need to move an element. The following example uses transformY to shift an image down 100 pixels:

transform:
translateY(100px);

In Figure 1, you can see the image on the left without the transform applied and the image on the right with the transform applied that is shifted down. (Note, Figure 1 is resized so the difference will appear to be less than 100 pixels.)

Figure 1. The logo on the right has the translateY transform applied.

Scale transform

You can also use the scale transform to modify the size of an image, shrinking it by 50% (which is indicated by the .5 setting in the scale whereby 1 would represent 100% or unchanged):

transform:
scale(.5);

Figure 2 shows the result of this transform on the right compared with the unaltered image on the left. As you might imagine, this transform combined with a transition can create interesting interactions with buttons or other elements on the page.

Figure 2. The logo on the right has a 50% scale transform applied to it.

Using scale, you can also achieve slightly more complex transformations. For example, you can scale differently horizontally and vertically — as you might in Photoshop by resizing without the aspect ratio locked. For instance, you could scale by 50% horizontally and 25% vertically:

transform:
scale(.5,.25);

This would give you a slightly distorted version of the image as you can see in Figure 3 on the right.

Figure 3. The logo on the right has been scaled 50% horizontally and 25% vertically using the scale transform.

Rotate and skew transforms

Translate and scale may create transformations that could be achieved through normal HTML and CSS by using positioning or by modifying the height and width of an element. However, rotate and skew are where transforms really become interesting because you can use them to achieve effects that you couldn't create using only HTML and CSS. For example, I can use rotate to turn the image clockwise or counterclockwise:

transform:
rotate(70deg);

As you can imagine, this code will rotate the element 70 degrees clockwise (see Figure 4). It is important to note that while you can use this transform on an image, you can also apply it and other transforms to things like divs or other HTML elements, thereby rotating and skewing even plain text.

Figure 4. The image on the right has a rotate transform applied at 70 degrees.

Skew is even more interesting because it essentially tilts the image along the x or y axis or both at the same time. You can create fairly complex real-time distortions on HTML elements using this method. In the following line of CSS, the image element is skewed along the x axis by 15 degrees:

transform:
skewX(15deg);

This transform causes the image to tilt as shown in Figure 5.

Figure 5. The image on the right has a skewX transform applied at 15 degrees.

When you use skewY, you can tilt the image –15 degrees along its y axis:

transform:
skewY(-15deg);

This causes the image to be transformed like the one on the right in Figure 6.

Figure 6. The image on the right has a skewY transform applied at –15 degrees.

You can combine skewing along the x and y axis within a single skew statement in your CSS:

transform:
skew(20deg,15deg);

This skews the image 20 degrees along the x axis and 15 degrees along the y axis (see the image on the right in Figure 7).

Figure 7. The image on the right has a skew transform applied at 20 degrees along the x axis and 15 degrees along the y axis.

These are purposefully simple examples to demonstrate the capabilities. (Note that if you intend to use these examples, some browsers may require a vendor-specific prefix on the CSS for these transforms to work). As I mentioned before, you can combine these transforms with CSS transitions to create some impressive effects. For more detailed information about how to use CSS 2D transforms, read Chris Coyier's article on transforms, which also briefly covers 3D transforms. Adobe evangelist Kevin Hoyt did a video tutorial for Adobe TV that shows how to use transforms with transitions to achieve more complex visualizations.

CORS

One of the great things that has happened across the web in recent years is the widespread adoption of open, public-facing APIs for popular web services. An API is an application programming interface that enables software components to communicate with one another. For example, if you wanted to integrate note-taking into your web application, you might integrate the Evernote API rather than building the feature yourself. The Evernote API would offer you access to a lot of the functionality of note-taking within the Evernote service. APIs enable developers to focus on enhancing their core product and expertise while allowing users to leverage services they already use without having to re-enter similar information on a variety of websites.

While these open APIs are a good development, connecting to them has been complicated by browser restrictions that prevent one site from accessing resources on another. Getting around this has often required creating server-side components to connect to the API or using a format called JSONP, which was not always supported by the API and was limited to reading from the API, as opposed to posting to the API. These problems are all overcome by cross-origin resource sharing (CORS), which eliminates the security restrictions and even enables more complex requests like POST, PUT, and DELETE.

There are two aspects to CORS. The first is connecting to an API that has enabled CORS, and the other is enabling CORS requests on your API. From the developer's standpoint, making a request to a CORS-enabled API is not much different than making a standard XMLHttpRequest (more commonly called an Ajax request), but now you can call a service on an external site directly from the browser using JavaScript without encountering a security error. The other aspect is on the server, where enabling CORS for your API requires your web server administrator to pass several host headers on each request. There are many security customizations you can add that are too complex for me to cover in this article, but enable-cors.org is a great place to get more detail about them.

A growing number of APIs, including popular APIs like YouTube and GitHub, now support CORS requests that enable you to add features delivered by these APIs without the need for a server-side component. If you want more detail on how to use CORS, including detailed browser support information and code samples, read my recent blog post on the topic. HTML5 Rocks also posted an excellent CORS tutorial that covers both client and server-side setup.

Generated content

While it is technically part of the CSS 2.1 specification rather than CSS3, generated content enables you to define text that should be automatically added within your HTML content at specified points. To specify these points, you can use pseudo-elements in CSS, like ::before or ::after.

For example, the following CSS would make every link on the page have the text "(click me!)" added after it, so a link that once read "Adobe" would now read "Adobe (click me!)":

a::after {
content: " (click me!)";
}

You may be wondering why you would ever need to use generated content. While you probably would never use this particular example, you may find generated content useful in other ways. For example, Chris Coyier's article on CSS content shows a variety of interesting ways to use generated content mixed with content properties to create worthy features. Content properties enable you to extract information from an HTML element and use it within your generated content. Modifying the prior example, you can use the content property for the link's href attribute and add the URL to the end of the actual link, so the link "Adobe" would read "Adobe (http://adobe.com)":

a::after {
content: " ("
attr(href) ")";
}

As Chris shows, this type of feature could be useful to display the URL on a print style sheet, to put check marks next to visited links, or even to create custom tooltips, all of which he demonstrates in his post. Another article by Trevor Davis entitled My New Best Friend: CSS Generated Content shows how he used generated content in CSS to add arrows to buttons, icons next to in-stock or out-of-stock items, and even complex shadows on product color swatches. While generated content may not be a tool you use every day, it seems to offer a simple solution to occasional complex problems such as those presented by Chris and Trevor. I imagine that in combination with the CSS4 specification that Adobe recently submitted for extending pseudo-elements, even more uses will arise.

Where to go from here

Of course, these are only a few of the many HTML5 and CSS3 features that you can safely use today. I hope to cover many more in upcoming issues of Adobe Inspire, including drag and drop, web storage, web workers, and geolocation. While some impressive features are on the horizon, many features are ready for you to take advantage of today.

If you want a quick visualization to see which features you can use in which browsers, check out HTML5 Readiness. If you are specifically interested in mobile browser support for these types of features, Maximiliano Firtman created a mobile HTML5 compatibility table that is a useful resource.

Brian Rinaldi is a content and community manager for the Adobe Developer Connection team, where he helps drive content strategy for HTML5 and JavaScript developer content. Brian blogs regularly at remotesynthesis.com and is an unreformed Twitter addict @remotesynth.