Inspect Element » jQuery

Focus

Tom Kenny — Tue, 28 Sep 2010 11:19:58 +0000

Smart advice for accessibility.

Textarea Auto-Resize Plugin for jQuery

Tom Kenny — Mon, 19 Jul 2010 13:20:58 +0000

I’ve been looking for something like this for a while. Avoids the annoying problem of typing too much text and not being able to see all you’ve typed without having to scroll in a small box. It’s also smart enough to resize down when you delete text that has caused it to grow. I may even install it as a local browser script and apply it too ALL textarea fields I come across if only for my own sanity.

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

Tom Kenny — Mon, 25 Jan 2010 21:12:14 +0000

HTML5 is the future of web development but believe it or not you can start using it today. HTML5 is much more considerate to semantics and accessibility as we don’t have to throw meaningless div’s everywhere. It introduces meaningful tags for common elements such as navigations and footers which makes much more sense and are more natural.

This is a run through of the basics of HTML5 and CSS3 while still paying attention to older browsers. Before we start, make note of the answer to this question. Do websites need to look exactly the same in every browser?

View Demo | Download Files (.zip)

The HTML







    One Page Portfolio
    

    

    

    

    
    
    





     

    	

    		Web Design Portfolio

    		 
    			
    				Intro
    				Portfolio
    				About
    				Contact
    			
    		

    	

    

     

    	

    		Hand-coded HTML and CSS is what I do. It's what I'm good at so why not?

    		http://inspectelement.com">

    		Featured Project: Inspect Element

    	

    	 

    		My Portfolio

    		
    			
    				http://inspectelement.com">
    			
    			
    				http://inspectelement.com">
    			
    			
    				http://inspectelement.com">
    			
    			
    				http://inspectelement.com">
    			
    			
    				http://inspectelement.com">
    			
    			
    				http://inspectelement.com">
    			
    			
    				http://inspectelement.com">
    			
    			
    				http://inspectelement.com">
    			
    			
    				http://inspectelement.com">
    			
    		

    	

    	 

    		About Me

    		Now this is a story all about how my life got twisted upside down and I'd like to take a minute just sit right there I'll tell you how I became the prince of a town called Bel-Air. In West Philadelphia born and raised on the playground my momma said most of my days chilling out, maxing and relaxing all cool and all shooting some b-ball outside of school when a couple of guys they were up to no good started making trouble in our neighbourhood I got in one little fight and my mom got scared, she said your moving in with your auntie and uncle in Bel-Air

    	

    	 

    		Contact Me

    		I whistled for a cab and when it came near the license plate said fresh and had dice in the mirror, if anything I could say that this cab was rare but I thought nah, forget it, yo home to Bel-Air! I pulled up to the house about seven or eight I yelled to the cabbie yo home, smell you later, looked at my kingdom I was finally there to sit on my throne as the prince of Bel-Air

    		 

    			Name
    			 

    			Email
    			example@domain.com" required tabindex="2" /> 

    			Your Message
    			 

    			 

    		 

    	

    	 

    		
    			http://twitter.com/tkenny">Follow me on Twitter
    			http://inspectelement.com/articles/code-a-backwards-compatible-one-page-portfolio-with-html5-and-css3">Back to the Tutorial on Inspect Element

Download the HTML here (Right-click and save as).

First thing first, let’s make sure the code validates with W3C’s experimental HTML5 validator.

Good news, it does! This is a simple example but good to know we’re on the right lines.

The HTML5 Goodness

As you can see from the code above there are new tags that you may not be familiar with. To make it even simpler here is the code stripped down to only the HTML5 tags.

Header

The first one you’ll notice is

and it does exactly what it implies. You can use this for the header of your page, typically containing the logo and the navigation.

The header element represents a group of introductory or navigational aids.

A header element is intended to usually contain the section’s heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.

The header element as described in the HTML5 specs.

Nav

The

tag now gives us the ability to highlight the navigation of a site through the HTML. Usually contained within the header of a page but can also be applied to left or right sided navigation in sidebars.

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

Not all groups of links on a page need to be in a nav element — only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases, without a nav element.

User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip and/or provide on request.

The nav element as described in the HTML5 specs

Section

In this example the

tag is being used to separate the different parts of the page. The introduction, my portfolio, about me and contact me areas are all sections that make up the page, all contained within a section tag.

The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading.

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, contact information.

The section element as described in the HTML5 specs.

Footer

You’ll find the

tag at the end of the contact section of the portfolio example. It’s included there and not at the end of the document in this case because it contains content relevant to the contact section in the form of the Twitter link (ignoring the back to tutorial link). For more information read the following included in the HTML 5 spec overview:

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

Contact information for the author or editor of a section belongs in an address element, possibly itself inside a footer.

Footers don’t necessarily have to appear at the end of a section, though they usually do.

When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.

The footer element is not sectioning content; it doesn’t introduce a new section.

When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page.

The footer element as described in the HTML5 specs.

The Form

While the form itself doesn’t seem to be radically different to previous methods, HTML5 does introduce a nice addition in the placeholder attribute. Basically this fills in a text field with sample text much like we’re used to doing with Javascript now.

example@domain.com" />

For more on HTML5 in forms make sure you check out Have a Field Day with HTML5 Forms on last year’s 24 ways.

Backwards Compatibility

All of this is great. We’re using the latest and greatest technology in web development but currently only a few browsers support HTML5 in any capacity. We now need to think about all versions of Internet Explorer which don’t include any support for HTML5 whatsoever. Fortunately for us, Remy Sharp has created a Javascript file that reverses IE’s inability to style elements it doesn’t recognise.

Just included the following code:

Now that all major browsers will recognise the styling let’s move onto the CSS.

The CSS3 Goodness

Most of the CSS won’t be new to you but there are a few CSS3 properties that we’ll have a look at including gradients, embeddable fonts and text shadow.

View the CSS here

Let’s begin by looking at how this page behaves visually in a browser that supports CSS3. View the demo in the latest versions of Safari, Chrome or Firefox to see the full effect. Or see the screenshots below:

@font-face

While this example uses @font-face on every instance of text, I wouldn’t recommend doing so on large websites. Also, using some fonts as body text may case text to become hard to read. Don’t get carried away. This theme uses Yanone Kaffeesatz at a large enough size to make it very readable and differ enough from the regular web-safe fonts.

@font-face { font-family: Keffeesatz; src: url(YanoneKaffeesatz-Light.otf) format("opentype") }
@font-face { font-family: KeffeesatzBold; src: url(YanoneKaffeesatz-Bold.otf) format("opentype") }

RGBa

With RGBa you can declare a colour and an opacity as a single property. Not only that but it can be applied to anything that uses colour. To demonstrate this, the image link and input borders have RGBa applied. You can see the subtle background texture show through, especially noticeable on the input elements in the form.

input[type="text"] { border: 5px solid rgba(122, 192, 0, 0.15); }

The first three values (122, 192, 0) are the red, green and blue values of the colour with the fourth (0.15) being the alpha value, or opacity.