Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Thursday, April 25, 2013

Introducing HTML’s new template element

Introducing HTML’s new template element
You may have heard of Web Components, a suite of emerging standards that make it possible to build secure reusable widgets using web platform technologies. One of the first specs to make its way into implementation is HTML Templates, embodied by the template element, which as I write this is implemented in Chrome Canary and Firefox Nightly.

Tuesday, February 19, 2013

Responsive Tables

Responsive Tables
A few smart folks have already put together their thoughts on responsive tables and, while I think the proposed methods are pretty good, I think there might be room for improvement. As such, I've been tinkering for a while and came up with the following strategy when it comes to tables.

Step 1: Use data-* attributes to hold information about the column header(s) associated with the markup:

Friday, January 25, 2013

HTML5 Drag and Drop Avatar Changer with Resizing and Cropping

HTML5 Drag and Drop

In any app that has user avatars, users should be able to change those avatars. Anything to make that easier is desirable. Many apps start with a user's Twitter avatar, Facebook avatar, or Gravatar. That's a smart move. Avatars give users a sense of ownership over a virtual space so any way to get them to have their desired avatar is good for engagement.

Monday, November 19, 2012

datalist Experiment

datalist Experiment

*Chrome feature

By using <datalist>, you can define a list of suggestions you want the user to select from. Users can optionally select from your suggestions as well as typing it by themselves.

Saturday, November 10, 2012

Getting HTML5 ready - ContentEditable

Getting HTML5 ready - ContentEditable
In the prior editions of this series, we took a look at HTML5 parsing and CORS. This week, we'll take a look at a feature that, by itself, doesn't do anything terribly useful but, when combined with other features, can be used to do some interesting things. That feature is ContentEditable and it can be used to allow you to make any document regions editable, allowing a user to modify the text on the page.

Saturday, November 10, 2012

HTML5 placeholder fallback using jQuery

HTML5 placeholder fallback using jQuery

If you are a bleeding edge developer chances are you are taking advantage of the new placeholder attribute that can be used with form elements. It can be used on text, textarea, search, url, tel, email and password fields. One thing to ensure is that older browsers function similarly to ensure consistency and proper user experience. The following snippet can be ran to test for placeholder support, fallback older browsers and ensure default values are not submitted in those older browsers.

Wednesday, October 31, 2012

Add telephone number links with HTML5

telephone number links with HTML5

Normally telephone numbers are adding to web pages as just static text of digits which doesn't offer any interaction to your visitors. With more and more people using the internet on their mobile it's time to change your telephone numbers to clickable areas to call the number directly from your mobile phone.

Wednesday, October 31, 2012

A simple parallax scrolling technique

A simple parallax scrolling technique

This technique revolves around controlling the speed of background image. So let's begin with the HTML markup, creating two sections along with the required attributes: data-type and data-speed. Don't worry; I'll explain these later.

Wednesday, October 10, 2012

Old school cassette player with HTML5 audio

Old school cassette player with HTML5 audio

Vintage format meets modern web tech: an HTML5 audio player with realistic controls. Today we want to share an audio player with you that looks like an old school music cassette.

Wednesday, October 03, 2012

HTML5 web storage – Cookies are so 1994!

HTML5 web storage

In this two part series, we're going to look at Web Storage, one of the best and most interesting features to come out of the HTML5 spec. We'll look at the history of both Web Storage and cookies, and consider the following points:

Tuesday, October 02, 2012

The truth about structuring an HTML5 page

HTML5 page

Part polemic, part instruction manual, "The Truth About HTML5" has ignited an interesting debate. Here we present an exclusive excerpt on the problems around structuring in HTML5.

This is an edited excerpt from Chapter 3 of The Truth About HTML5 by Luke Stevens.

Thursday, September 27, 2012

7 HTML5 features that you may not know about

7 HTML5 features that you may not know about

HTML5 has been a hot topic recently. Although its been around for a while now, I still find myself coming across features that I didn't know about. Here's a few that I thought I'd share with you.

Wednesday, September 26, 2012

Magazine-like layout for the web with CSS regions and exclusions

Magazine-like layout for the web with CSS regions and exclusions

The web is an extremely powerful platform for text, an area where Adobe has a great deal of experience and expertise. When Adobe was looking for ways to help move the web forward, therefore, advancing the web's text capabilities even further seemed like an obvious place for us to start. The web generally assumes a single column, vertical orientation for text. Although it's possible to flow text around graphics, and even to format text into multiple columns with CSS, it's still very difficult to achieve true magazine-like layout on the web. With CSS Regions and CSS Exclusions, Adobe is spearheading the effort to bring the power of desktop publishing to modern browsers. For instance, in the screenshot below, CSS Exclusions is being used to flow text along the contour of the mountain:

Tuesday, July 26, 2011

Avoiding common HTML5 mistakes

Avoiding common HTML5 mistakes

Between curating sites for the HTML5 gallery and answering readers' questions here at HTML5 Doctor, I see a host of HTML5 sites and their underlying markup. In this post, I'll show you some of the mistakes and poor markup practices I often see and explain how to avoid them.