Tomorrow's Web Standards

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.

HTML5 & CSS3 Support

Tomorrow's Web Standards

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.

  • Less 3rd party plugins due to increased multimedia support (drawing canvas, video/audio elements)
  • 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.

W3C Global Attributes
W3Schools: HTML5 Global Attributes

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.

<canvas id="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 element
var 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.

W3Schools: HTML5 Canvas
MDN: Drawing Graphics with Canvas


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.

<!-- video example -->
<video width="853" height="480" controls="controls">
  <source src="thevideo.mp4" type="video/mp4" />
  HTML5's video element is not supported in your browser.
</video>

<!-- audio example -->
<audio controls="controls">
  <source src="theaudio.mp3" type="audio/mp3" />
  HTML5's audio element is not supported in your browser.
</audio>

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.

E-mail: <input type="email" name="email" />
URL: <input type="url" name="url" />
Numbers: <input type="number" name="numbers" min="1" max="42" />
Range (slider) <input type="range" name="range" min="1" max="42" />

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: <input type="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.

W3C: HTML5
W3Schools: HTML5 Input Types

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.

W3C HTML5
W3Schools HTML5 Tutorial
Dive into HTML5
Wikipedia: HTML5

Tomorrow's Web Standards

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.

.image_background {
  background: url(background.png);
  -moz-background-size: 42px 64px; /* Firefox 3.6 and older */
  background-size: 42px 64px;
  background-repeat: no-repeat; /* if your sizing...you're probably not repeating */
}

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.

W3C: CSS Backgrounds and Borders Module Level 3
W3Schools: CSS3 Backgrounds
CSS3: background-origin and background-clip


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.

.rounded_box {
  border-radius: 10px;
  -moz-border-radius: 10px; /* Firefox 3.6 and older */
}

.shadow_box {
  box-shadow: 0px 3px 5px #999999;
  -webkit-box-shadow: 0px 3px 5px #999999; /* Safari */
}

.image_border_box {
  border-image: url(border.png) 24 24 round;
  -moz-border-image: url(border.png) 24 24 round; /* Firefox */
  -webkit-border-image: url(border.png) 24 24 round; /* Safari and Chrome */
}

W3C: CSS Backgrounds and Borders Module Level 3
W3Schools: CSS3 Borders


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.

.shadow {
  text-shadow: 0px 1px 1px #999999;
}

.word_wrap {
  word-wrap: break-word; /* split long words onto new lines */
}

.text_overflow {
  text-overflow: ellipsis; /* does not work in Firefox */
}

.word_break {
  word-break: hyphenate; /* does not work in Firefox nor Opera */
}

W3C: CSS Text Level 3
W3Schools: CSS3 Text Effects

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.

.three_column {
  column-count: 3;
  -webkit-column-count: 3; /* Safari and Chrome */
  -moz-column-count: 3; /* Firefox */

  column-gap: 20px;
  -webkit-column-gap: 20px; /* Safari and Chrome */
  -moz-column-gap: 20px; /* Firefox */
}

W3C: CSS Multi-column Layout Module
W3Schools: CSS3 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.

.special_font {
  font-family: myEmbeddedFont;
}

@font-face {
  font-family: myEmbeddedFont;
  src: url('FontName.ttf'), /* all but IE support TTF and OTF fonts */
       url('FontName.eot') format("opentype"); /* IE only supports EOT fonts */
  /* here you would add styling for this font, not in the .special_font */
}

TTF = True Type Font, OTF = Open Type Font, EOT = Embedded OpenType

W3C: CSS Fonts Module Level 3
W3Schools: CSS3 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.

  • rotate(degrees)
  • scale(%x, %y)
  • skew(degrees x, degrees y)
  • translate(x, y)
  • matrix() - short form for all other 4 transformations combined

Here is an example of rotating an element.

.rotate { /* clockwise */
  transform: rotate(42deg);
  -webkit-transform: rotate(42deg); /* Safari and Chrome */
  -moz-transform: rotate(42deg); /* Firefox */
  -ms-transform: rotate(42deg); /* Internet Explorer 9 */
  -o-transform: rotate(42deg); /* Opera */
}

W3C: CSS 2D Transforms Module Level 3
W3Schools: CSS3 2D Transforms

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.

.animate {
  color: #ff0000;
  animation: anim 3s;
  -webkit-animation: anim 3s; /* Safari and Chrome */
  -moz-animation: anim 3s; /* Firefox */
}

@keyframes anim {
  0% {color: #ff0000;}
  50% {color: #00ff00;}
  100% {color: #0000ff;}
}

@-webkit-keyframes anim { /* Safari and Chrome */
  0% {color: #ff0000;}
  50% {color: #00ff00;}
  100% {color: #0000ff;}
}

@-moz-keyframes anim { /* Firefox */
  0% {color: #ff0000;}
  50% {color: #00ff00;}
  100% {color: #0000ff;}
}

W3C: CSS Animations
W3Schools: CSS3 Animations

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.

.box_transition {
  height: 220px;
  width: 140px;
  background: #dddddd;

  transition-property: all;
  transition-duration: 1s;

  /* Safari or Chrome */
  -webkit-transition-property: all;
  -webkit-transition-duration: 1s;

  /* Firefox 4 */
  -moz-transition-property: all;
  -moz-transition-duration: 1s;

  /* Opera */
  -o-transition-property: all;
  -o-transition-duration: 1s;
}

.box_transition:hover {
  height: 320px;
  width: 240px;
}

W3C: CSS Transitions Module Level 3
W3Schools: CSS3 Transitions

Summary of CSS3

Once again, this is more of an overview of the major changes. There are plenty of examples and information all over the internet. Here are a couple more links at which to glance.

W3C: Cascading Style Sheets (CSS) Snapshot 2010
W3Schools: CSS3 Tutorial
CSS3.info
Wikipedia: Cascading Style Sheets

Tomorrow's Web Standards

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.

document.getElementById("videoTagID").play();
document.getElementById("videoTagID").pause();
document.getElementById("videoTagID").volume = 0.75; // 0 = low   1 = high

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.

Window Form Mouse Media
onafterprint oncontextmenu ondrag oncanplay
onbeforeprint onformchange ondragend oncanplaythrough
onbeforeonload onforminput ondragenter ondurationchange
onerror oninput ondragleave onemptied
onhaschange oninvalid ondragover onended
onmessage ondragstart onerror
onoffline ondrop onloadeddata
ononline onmousewheel onloadedmetadata
onpagehide onscroll onloadstart
onpageshow onpause
onpopstate onplay
onredo onplaying
onresize onprogress
onstorage onratechange
onundo onreadystatechange
onunload onseeked
onseeking
onstalled
onsuspend
ontimeupdate
onvolumechange
onwaiting

HTMLGoodies: HTML5 Development: Form & Keyboard Events

HTMLGoodies: HTML5 Development Class: Media Events

HTMLGoodies: HTML5 Development Class: Mouse Events

W3Schools: HTML5 Event Attributes

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.

localStorage.setItem("theVariable", "theValue");
localStorage.removeItem("theVariable");

sessionStorage.setItem("theVariable", "theValue");
sessionStorage.removeItem("theVariable");

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.

// write example
var db = openDatabase("theDatabase", "1.0", "Database description", 1.0 * 1024 * 1024);
db.transaction(function(transaction) {
  transaction.executeSql('CREATE TABLE IF NOT EXISTS people (id unique, first, last)', []);
  transaction.executeSql('INSERT INTO people (id, first, last) VALUES (1, "John", "Smith")', []);
  transaction.executeSql('INSERT INTO people (id, first, last) VALUES (2, "James", "Sullivan")', []);
  transaction.executeSql('INSERT INTO people (id, first, last) VALUES (3, "Joe", "Starker")', []);
});


// read example
db.transaction(function(transaction) {
  transaction.executeSql('SELECT * FROM people', [], function (transaction2, results) {
    for (var i = 0; i < results.rows.length; i++) {
      alert(results.rows.item(i).first + " " + results.rows.item(i).last);
    }
  });
});

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.

For more information, please see the following links.

W3C: Web SQL Database/


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.

var worker = new Worker("webworker.js"); // reference the external script
worker.onmessage = function(e) { // manage information passed back
  alert(e.data);
};
worker.postMessage("Hello World"); // pass data to worker

Now, the referenced script can also handle data and pass back so long as the onmessage event is handled for the worker as in the previous example.

self.onmessage = function(e) { // self refers to the worker object
  self.postMessage(e.data);
  // do other script processing here
};

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.

if (navigator.geolocation) { // check for geolocation support
  var g = navigator.geolocation;
  g.getCurrentPosition(processPosition);
}

function processPosition(p) {
  var c = p.coords;
  // coords are returned as an object with the following information
  // latitude, longitude, altitude, accuracy, altitudeAccuracy, heading, speed
}

Tomorrow's Web Standards

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.

HTMLGoodies: HTML5 Development Center
W3C: HTML5
Dive into HTML5
HTML5 Rocks
Wikipedia: HTML5

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!



About the Author

Paul Avery

www.peejstudio.com

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Live Event Date: October 29, 2014 @ 11:00 a.m. ET / 8:00 a.m. PT Are you interested in building a cognitive application using the power of IBM Watson? Need a platform that provides speed and ease for rapidly deploying this application? Join Chris Madison, Watson Solution Architect, as he walks through the process of building a Watson powered application on IBM Bluemix. Chris will talk about the new Watson Services just released on IBM bluemix, but more importantly he will do a step by step cognitive …

  • Live Event Date: October 23, 2014 @ 12:00 p.m. ET / 9:00 a.m. PT Despite the current "virtualize everything" mentality, there are advantages to utilizing physical hardware for certain tasks. This is especially true for backups. In many cases, it is clearly in an organization's best interest to make use of physical, purpose-built backup appliances rather than relying on virtual backup software (VBA - Virtual Backup Appliances). Join us for this eSeminar to learn why physical appliances are preferable to …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds