background preloader


Facebook Twitter

Quick Tip: The Awesome Details Element. One of my favorite new HTML5 tags, which has only recently been integrated into Chrome (as of version 12), is the details element.

Quick Tip: The Awesome Details Element

I'll show you to use it in today's quick tip. What Does the details Tag Do? It essentially allows us to show and hide content with the click of a button. You're surely familiar with this type of effect, but, up until now, it had always been achieved with JavaScript. Imagine a heading with an arrow next to it, and when you click on it, additional information below becomes visible. Here's a two minute example of this sort of effect. The details element allows us to omit the JavaScript entirely. An Example So let's dive in and learn how to use this new tag. Next, we need to give it a title, or summary of the content within. By default, in browsers that understand the details element, everything within it -- other than the summary tag -- will be hidden. Go ahead and try the demo out in Chrome 12 or higher (as of November 17th, 2011). Styling the Arrow Conclusion. Liste des balises HTML5 - Aide mémoire et liens vers le W3C.

HTML5's placeholder Attribute. HTML5 has introduced many features to the browser; some HTML-based, some in the form of JavaScript APIs, but all of them useful.

HTML5's placeholder Attribute

One of my favorites if the introduction of the placeholder attribute to INPUT elements. The placeholder attribute shows text in a field until the field is focused upon, then hides the text. You've seen this technique a billion times with JavaScript, but native HTML5 support is even better! The HTML You'll notice that all you need to do is add a placeholder attribute with the generic text of your choice.

Checking for Placeholder Support Since placeholder is a new capability, it's important to check for support in the user's browser: function hasPlaceholderSupport() { var input = document.createElement('input'); return ('placeholder' in input);} If the user's browser doesn't support the placeholder feature, you will need to employ a fallback with MooTools, Dojo, or the JavaScript toolkit of your choice: Be Heard Older The Beauty of dojo.require() Newer. HTML5 Semantics - Smashing Coding.

Advertisement Much of the excitement we’ve seen so far about HTML5 has been for the new APIs: local storage, application cache, Web workers, 2-D drawing and the like.

HTML5 Semantics - Smashing Coding

But let’s not overlook that HTML5 brings us 30 new elements to mark up documents and applications, boosting the total number of elements available to us to over 100. Sexy yet hollow demos aside, even the most JavaScript-astic Web 2.0-alicious application will likely have textual content that needs to be marked up sensibly, so let’s look at some of the new elements to make sure that your next project is as semantic as it is interactive.

To keep this article from turning into a book, we won’t look at each in depth. Instead, this is a taster menu: you can see what’s available, and there are links that I’ve vetted for when you want to learn more. Along the way, we’ll see that HTML5 semantics are carefully designed to extend the current capabilities of HTML, while always enabling users of older browsers to access the content. HTML5 : Local Storage » Samarium Blog. LocalStorage : Page de démonstration et tutoriel - <html5> par l'exemple - Le site de démo des balises HTML5 et de test du support des navigateurs. <p>JavaScript doit être activé !

localStorage : Page de démonstration et tutoriel - <html5> par l'exemple - Le site de démo des balises HTML5 et de test du support des navigateurs.

<br />Il semblerait que JavaScript soit désactivé ou non supporté par votre navigateur. <br />Pour visualiser correctement ce site, veuillez activer JavaScript dans les options de votre navigateur et réessayez. </p> Mise à jour : 2013-01-18 Cette fonctionnalité vient en renfort du mécanisme des cookies en étendant leur fonctionnement. Les méthodes setItem(fichier, données) : sauvegarde les données dans un fichier getItem(fichier) : récupère les données dans un fichier ... : cf. sessionStorage Notes sur le tuto Contrairement à sessionStorage, il y a persistante des données : Ouvrez cette page plusieurs fois, et vous constaterez que vous pouvez échanger des données en utilisant le même nom de fichier.