Tomorrow's Web Standards

WEBINAR:On-demand webcast

How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >

Premise

I hope by the end of this article you will have a good grasp on the current draft of upcoming web standards. This includes HTML5, CSS3 and newer JavaScript updates.

I'm going to assume that you are up-to-date on current web standards. If you do not know HTML5 or XHTML, CSS, or JavaScript then this article is not for you. I suggest you come back after obtaining a basic understanding of the three.

Also note that most links in this article will direct to w3.org or w3schools.com. Those are the two leading websites for any web based information you can find. Some other sites can provide more detail and are sometimes a bit clearer, but those two sites should be your first stop in the world of web development.

The HTML5 Umbrella Myth

When most people hear of our upcoming web standards, they tend to lump CSS3 and newer JavaScript solutions into HTML5 explanations. Right off the bat, I want to clarify that confusion. HTML5, CSS3, and JavaScript are three completely separate languages, but have a huge impact on each other. When the new standards are solidified, it will be impossible to build a well presented website/page without both HTML5 and CSS3 being used. If you want any user interaction at all, you will need to add JavaScript. Although JavaScript has been around a while, new methods and events are being created to interact with the new elements and properties.

Official Start Date of the New Web Standards?

While not yet accepted in final draft, HTML5 and CSS3 are supported to a good extend in most modern web browsers. The biggest exception to this is Microsoft's Internet Explorer. They are usually two years behind in accepting most W3 standards. And even when the newest standards are accepted, there's no law stating that browsers must implement every aspect. Until then, you can always start building web solutions for browsers that already support the greatly needed modifications. Here's a rather comprehensive list.

Tomorrow's Web Standards

WEBINAR:On-demand webcast

How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >

HTML5

In an environment that is constantly changing and inundated by large variations in presentation, the new standards are attempting to unify and simply the development experience. This results in revision and addition to HTML. Here you will see a list of the newest and major changes and developments in HTML5.

Better form interaction with new inputs (calendar, date/time, e-mail, etc.)

Built-in support for local device storage

Addition of error handling in markup

Note: Since the beginning of HTML, certain attributes were available to every tag. Now in HTML5, they have been given the name global attributes. In this article I will not cover them in depth. For more information, please see the following links.

Drawing Canvas

As I stated earlier, new elements mean more JavaScript interaction. For one specific new element, JavaScript is needed in order to see a visual difference. Here's an example of how you can now draw directly to a page using JavaScript and the new <canvas> element.

<canvasid="drawingCanvas"width="720"height="480">
HTML5's canvas element is not supported in your browser.</canvas><script type="text/javascript">var obj = document.getElementById("drawingCanvas");// get the elementvar objContext = obj.getContext("2d");// not all browsers yet support the 3D context
objContext.moveTo(42,36);// create the start point
objContext.lineTo(656,362);// draw a line from the start point to new
objContext.stroke();// commit the drawing</script>

The canvas also supports solid color fills, gradient fills, and even images. For a much more in-depth look, see the following links.

Video/Audio

When full support for common video and audio formats is accepted by the major browsers, developers will find less of a need for 3rd party plugins when incorporating multimedia into a page. In its current stages, there's not a good support for streaming or security in multimedia...but it's a start.

Since the audience for this article should already be acquainted with HTML basics, the following code should not need any explanation.

Form Controls

The updates for inputs within forms came about because of two major necessities: 1. ease for mobile device input with on-screen keyboards and 2. less need for JavaScript in harvesting certain types of data.

Since on-screen keyboards tend to compact the amount of visible keys, certain ones are hidden at times. This forces the user to toggle the keyboard view in order to reach non-alphanumeric keys. So, for users wanting to fill in URLs, e-mail addresses or just plain numbers, this results in a much more difficult typing experience. A few new input types were added to fill this void.

For many current form implementations, developers have resorted to using JavaScript for calendars. Unfortunately, this solution still has a way to go before developers will jump on board. As it currently stands, for most browsers this will only format the input into hyphenated date formats.

Date: <inputtype="date"name="date"/>

While there are a few other examples of specific inputs, W3 will continue to add more as HTML5 comes closer to final draft. Until then, please see the following links for more detail.

Error Handling

The best part of this section of the new HTML5 is that developers don't need to even think about it. Now, it is true that any web developer should follow web standards! However, what about older browsers that don't support the newer implementations? What about the accidental typos in the markup? Not to worry.

Once HTML5 is accepted, it provides for browsers to read HTML in a way that errors and older support is automatically handled without any headaches for the developers. I wish I could expound more, but to this point, neither has W3!

Summary of HTML5

For the most part, that covers the major updates to HTML. Unfortunately, the ability to cover every single aspect would be futile. For more information, please see the following links.

Tomorrow's Web Standards

WEBINAR:On-demand webcast

How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >

CSS3

The changes to CSS3 are slightly smaller than that of HTML5. For the most part, truly great web design will still use images to capture the details. CSS simply cannot provide that amount of detail. Until all major browsers accept CSS3, it makes it even harder to get a consistent appearance across the browsers; whereas, all browsers display images the same way.

Note: Many CSS3 attributes are still in their development stages in some browsers. Therefore, to implement some, you may have to refer to the -webkit or -moz extension.

Backgrounds

Since the first iteration of CSS, background images were easy to apply. Even the positioning was controllable. Finally, now in version 3, developers have control over the size of the image being used.

There are also two other new background properties. They are a lot less likely to be used, so I will just simply explain them. The background-origin can specify whether the image is retained in the actual content area, padding area, or border area of an element. If specified, background-clip basically cuts off the background at the specified content/padding/border areas. For more specifics, please see the following links.

Borders

Since the beginning of CSS, elements have been square. Additions of curved borders and shadowing finally give the elements a bit of depth and class. There is also the ability to add an image, but unless sized just right, it can look pretty strange.

Text

Ironically, most of the text changes in CSS3 have been used by many web developers for years. Most even considered them CSS2.1. Since many CSS3 text attributes are not yet available in any browser, not all will be covered in this article.

The biggest disappointment in this area is that Microsoft still have yet to support the ever so basic and greatly needed text-shadow attribute. Other attributes are pretty self-explanatory.

While not specifically part of the text additions, columns relates more to the text aspect of web pages. If you've every read really wide text, then you probably know what it's like to skip lines. That's why newspapers have multiple columns with smaller widths. It's much easier to keep your place while reading. CSS3 has finally added that support as well. No more need to build separate <div> tags and fill the content yourself. Now you just need one element and the text overflows automatically to multiple columns.

Fonts

Probably my favorite addition to CSS3 is the expanded font options. Finally, developers will not be dependent upon web-safe fonts, but instead can add their own. Remember that there are legal ramifications with adding licensed fonts.

Transforms

As of the time of writing this article, only webkit based browsers (Safari > Chrome) are able to support 3D transformations. Due to this fact, I will not be covering them in the article. However, there are a number of 2D transformations so long as you specify the browser extension.

Animations

Animations are also limited in their browser acceptance at this current time. Only Safari, Firefox, and Chrome support them with their extensions. This can make it tedious in code since you will have to duplicate the keyframe percentages for each browser. Always specify 0% and 100%. From there, you can fill in others as you want in the animation. When animations are done, they return back to original state. Here's a simple text color change example.

Transitions

Similar to animations are transitions. They allow elements to change between styles. At this current time, Internet Explorer does not support transitions. Here's a basic example making text transition in size and weight. These are pretty much linked to the :hover pseudo-class. Once again, it can be a pain coding for each browser.

Tomorrow's Web Standards

WEBINAR:On-demand webcast

How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >

JavaScript

Remember that as new elements are introduced, new JavaScript methods will be created for more control to make them more dynamic. For that reason, you've already seen some smaller examples of JavaScript with the <canvas> tag. Also, the interfacing with local device storage is completely controlled by JavaScript interaction. As well, the new <audio> and <video> tags are easily controlled by new JavaScript calls.

This is just one small example of how new elements can create new JavaScript calls. There's no way I could explain every single existing one in this article. So to find more specific examples, you will need to look into the documentation on w3.org.

Events

The biggest additions to JavaScript come in the form of window events. There's no need to teach much here since they all are called the exact same way any event has ever been called in JavaScript. That being said, here's the list of new events.

Remember that some of these have already existed in some browsers and some still don't exist in some browsers.

Local Device Storage

Currently, there are 3 proposed ways to implement new data storage methods: localStorage, sessionStorage, and local database.

Both localStorage and sessionStorage act the exact same way. The major differences are in scope and persistence. localStorage is available to all instances of the browser and will remain until removed programmatically or through the browser preferences. sessionStorage is only accessible in the browser instance in which it was created and is deleted when that instance is closed.

Local databases within browsers are in SQLite format. It's a more compact, yet powerful SQL based database system. Each database is confined within one file and is completely portable. Most developers should have a good background in SQL and understand the needs such a database system fills, so I'll just provide a simple source code example.

The only major problem I see with local databases is that most implementations are based on accessible information from multiple locations. Any implementation of this form can only ever be small-scale since this database implementation is only accessible to the browser in which it was created.

Web Workers

One of the most valuable additions to the prospect of greater web applications is Web Workers. Just like multicore processing happens on a computer, finally JavaScript can do the same thing. Executing JavaScript no longer means that the window has to process and then come back before the user can have control. Now, you can set scripts to run behind with Web Workers.

Note: Since Web Workers run on a separate thread, the executed code must be contained within a separate JavaScript file.

Remember that this is simply a basic example. If you want more control over the processing, it's best to pass JSON objects as the message.

Note: Web Workers do not have access to the DOM nor window, document, nor parent objects. Other than that, other JavaScript features are accessible.

Geolocation

The ever growing mobile device market has also contributed to certain JavaScript additions. Primarily, this has resulted in the addition of geolocation. While this is more accurate for mobile devices, it is not only constrained to such devices.

Tomorrow's Web Standards

WEBINAR:On-demand webcast

How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >

Summary

It would be almost impossible to give you detailed examples and explanations over all the changes to the newer technologies. Since others have done it and continue to expand their knowledge-bases, it would be best for you to see the links below for more detail.

Conclusion

I hope that this article has given you some good insight into the upcoming web standards. Unfortunately, there's no way to tell you when and if all of these will be supported across the board. Here's to hoping it happens soon!