Internet Explorer 8 doesn't support the HTML5 placeholder attribute that we can use to label our text fields. Fortunately, we can emulate this attribute with jQuery. Let's see how.
jQuery: emulating the placeholder attribute
0
Showing posts with label html5. Show all posts
HTML5: empty values and email validation in browsers
Browsers don't test empty values when validating an email address so that such values will validate. To avoid this, an input of type email must have a required attribute set. Validation takes place only when inputs have a value. I've summarized my tests in the following video.
HTML5: semantics of header and footer and their difference
header and footer are two HTML5 elements which too often are considered only from the presentational point of view. In this post, I'd like to emphasize their semantic role in the overall structure of an HTML5 document.
HTML5: difference between section and article
HTML5 introduces two new elements that pose some semantical problems concerning their use: article and section. Most web developers get confused by these new elements. Generally speaking, the semantics of these elements is not well-defined in the HTML5 specifications. Let's try to make things clearer.
jQuery: detecting HTML5
Sometimes your code needs that the host document uses HTML5. How can you detect if your target document is using HTML5? There are currently two ways of doing this: DTD detection and element detection. Let's see the analysis of both approaches.
jQuery: trash effect
We want to implement the effect of a trash where you can drag and drop your items and then empty the trash. Further, we also want to add two sounds, one when the item is dropped into the trash and another one when the trash is emptied. Difficult? Absolutely not! All we need is jQuery UI drag and drop features and the HTML5 audio interface. Let's see the details.
Benefits of semantic HTML
Semantic HTML is not just the latest fad on the web nor another way to show that your web site and your coding style is trendy. On the contrary, semantic HTML is the only way to get consistent results across web sites and environments. As web developers, we're all accustomed to run several projects simultaneously. The point is that without a consistent, semantic way of naming and using our HTML elements, we'll always end up with having several web sites that feature inconsistent and incompatible element nomenclatures. What does this mean? Simply put, we can't globally change our site styles across our web sites, not to say that it's hard to remember the structure of each site we're working on. Let's see some examples.
Successful form controls
HTML 4.01 introduced the concept of successful form controls. Quoting the HTML 4.01 specifications, "A successful control is "valid" for submission. Every successful control has its control name paired with its current value as part of the submitted form data set. A successful control must be defined within a
. This definition might lead to some confusion, so the specifications add the following:form element and must have a control name.
HTML5 media formats: welcome to the jungle
HTML5 media formats were primarily designed to make the media format war come to an end. But, as you know, the devil is in the details and the result of the introduction of the new HTML5 media formats has only increased the level of complexity related to the choice of media formats. More surprisingly, some old and widespread adopted media formats (such as Flash video) are no longer supported by the new HTML5 media elements.
So if you want to use these new elements (audio and video) you must use the new media formats. But what's the support in web browsers?
jQuery: HTML5 Gmail notifier
audio element to create a simple Gmail notifier than not only displays a bubble box, but also plays a sound when the bubble is displayed. It works fine in Firefox, Safari, Chrome and Opera, that is, in all the browsers that correctly support the play() method of the HTML5 audio interface. I can't test it in IE 9, so if you can do it, please let me know the results. When the document loads, the bubble takes two seconds to be displayed thanks to the setTimeout() function. Enjoy! smile
Live demo
Download
New HTML5 elements list and reference
HTML5 introduces new elements and features. In this post I'll provide the complete list of the new HTML5 elements plus a reference to an online complete reference. Most of these elements are still not supported by web browsers, so it's recommended that you check out your target browser support before using them.
IE6 and the abbr element
Internet Explorer 6 doesn't support the abbr element. Simply put, IE 6 doesn't recognize this element as a node of the DOM tree. To make IE 6 support this element or, more precisely, to mimic the support to this element, we have to manually create it within the DOM structure. This can be done at the very beginning of our page, like so:
Stop supporting IE 6 and 7
Microsoft announced the final release of Internet Explorer 9 yesterday, so I think it's time to explain why I don't support older versions of IE (mainly 7 and 6). The reason is simple: supporting older versions of IE is harmful for IE's users. Why? There are two reasons behind this. First, if you support these browsers, you're actually encouraging their users to continue with their bad habits and this is harmful for their computer security. Using an obsolete browser exposes users to malicious attacks that can compromise the integrity of their data. So if you build a web site that fully works in IE 6 and 7, you're indirectly contributing to the massive widespread of malware infections, phishing hoaxes and similar security problems. An obsolete browser is affected by several bugs that may harm a user's computer. Every site that still supports these browsers convinces IE's users that there is no need to upgrade their browsers. If you do that, be aware of the potential danger of what you're doing.
Internet Explorer 5 is not dead
A client calls you one day. He says he cannot access your web site. So you hurry up to check what's wrong. Everything seems perfectly normal. The problem is that the client is using Internet Explorer 5. Kaboom! So what's next? Internet Explorer 5 has an infamous and poor support to web standards, so even the most simple things get complicated in this browser, not to say impossible to do. The most obvious thing to do is to convince your client to upgrade his browser. Here another problem: he should upgrade his operating system as well. Is there a solution?
HTML5 and CSS image gallery
In this post I'm going to show you how to create a simple image gallery using CSS and the brand new HTML5 elements that mark up images and their related content. First of all, we have to make sure that Internet Explorer 8 and lower will recognize such HTML5 elements. For that purpose, we'll use the HTML5 enabling script by Remy Sharp and we'll insert it in our page through a conditional comment:
jQuery: Twitter with HTML5 contenteditable
contenteditable attribute, the good old days of the textarea-driven pages are over. Now by setting this attribute to true, any element of your page becomes editable, that is, its contents can be actually determined by the user's action. In this post, we're going to make a field trip by building up a content editable area for writing a Twitter tweet.
Autoplay and the object element
object element in web browsers. At that time, the only browser that supported it through the param element was Internet Explorer. Now things are radically changed: Firefox, Safari, Chrome and Opera all support this feature, so that the use of the embed element is no longer required for that purpose.
HTML5: ci siamo! by Html.it
It was quite an event yesterday in Rome. Html.it developers introduced the new features of HTML5 plus the brand new guide written by Html.it. The most interesting part was the description of the new enhancements in Internet Explorer 9. Unfortunately, I had a bus to catch to get back home in time, so I missed most of it. Anyway, I took some pictures with my cheap camera and uploaded everything this morning on Flickr. Here they are. smile.
Created with Admarket's flickrSLiDR.
HTML5 event in Rome
Today I will attend to the HTML5 event promoted by Html.it in Rome at 16:30 PM. There will be some introductory talks by Html.it developers on HTML5, plus the presentation of the HTML5 guide by HTML.it. It's an opportunity to meet all the people I know only by name and a great event for Italian HTML5 developers.
HTML5 figures and captions
The good old HTML img element has not been forgot by the HTML5 implementors who actually enhanced it with two new semantic elements, namely figure and figcaption. The former is a container for images, while the latter is the actual caption provided to the image itself. It's worth saying that the figure element accepts only inline elements as its children, so if you were accustomed to get the final result of an image with caption by using nested divs or other block-level elements, it's time to radically rethink your coding style.
wink