HTML

HT ML 5 and CSS 3: T he Techniques Youll Soon ...
http://net.tutsplus.com/tutorials/html-css-technique...
HTML5andCSS3:The TechniquesYoullSoon BeUsing

Jul 6th in HT ML & CSS by Mads Kjaer
In this tu torial, we are going to bu ild a blog page u sing next-generation techniqu es from HT ML 5 and CSS 3. T he tu torial aims to demonstrate how we will be bu ilding websites when the specifications are finalized and the browser vendors have implemented them. If you already know HT ML and CSS, it shou ld be easy to follow along.
WhatWeAreGoingtoBuild
T his is what ou r page is going to look like when finished:
1 of 16
08/04/2009 10:34 AM
2 of 16
08/04/2009 10:34 AM
Pretty mu ch you r every day blog design. Header with title, horizontal navigat ion, content area with comment s and form, sidebar and a footer. Nothing too special. Let 's get bu ilding.
HTML5
HT ML 5 is the next major version of HT ML. It introdu ces a bu nch of new elements that will make ou r pages more semantic. T his will make it a lot easier for search engines and screenreaders to navigate ou r pages, and improve the web experience for everyone. In addition, HT ML 5 will also inclu de fancy APIs for drawing graphics on screen, storing data offline, dragging and dropping, and a lot more. Let's get started marking u p the blog page.
BasicStructure
Before we begin marking u p the page we shou ld get the overall stru ctu re straight:
In HT ML 5 there are specific tags meant for marking u p the header, navigation, sidebar and footer. First, take a look at the marku p and I'll explain afterwards: view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. <!doctype html> <html> <head> <title>Page title</title> </head> <body> <header> <h1>Page title</h1> </header> <nav>  </nav> <s ection id="intro">  </s ection> <s ection>  </s ection> <as ide>  </as ide> <footer>  </footer>
3 of 16
08/04/2009 10:34 AM
26. </body> 27. </html> It still looks like HT ML marku p, bu t there are a few things to note: In HT ML 5, there is only one doctype. It is declared in the beginning of the page by <!doctype html>. It simply tells the browser that it's dealing with an HT ML-docu ment. T he new tag header is wrapped arou nd introdu ctory elements, su ch as the page title or a logo. It cou ld also contain a table of contents or a search form. Every header typically contains a heading tag from <h1> to <h6>. In this case the header is u sed to introdu ce the whole page, bu t we'll u se it to introdu ce a section of the page a little later. T he nav-tag is u sed to contain navigational elements, su ch as the main navigation on a site or more specialized navigation like next/previou s-links. T he section-tag is u sed to denote a section in the docu ment. It can contain all kinds of marku p and mu ltiple sections can be nested inside each other. aside is u sed to wrap arou nd content related to the main content of the page that cou ld still stand on it's own and make sense. In this case we're u sing it for t he sidebar. T he footer-tag shou ld contain additional information abou t the main content , su ch as info abou t who wrote it, copyright information, links to related docu ments and so on. Instead of u sing divs to contain different sections of the page we are now u sing appropriate, semantic tags. T hey will make it a lot easier for search engines and screen readers to figu re ou t what's what in a page.
MarkingUptheNavigation
T he navigation is marked u p exactly like we wou ld do it in HT ML 4 or XHT ML, u sing an u nordered list. T he key is that this list is placed inside the nav-tags. view plaincopy to clipboardprint? 1. <nav> 2. <ul> 3. <li><a href="#">Blog</a></li> 4. <li><a href="#">Abou t</a></li> 5. <li><a href="#">Archives</a></li> 6. <li><a href="#">Contact </a></li> 7. <li class="su bscribe"><a href="#">Su bscribe via. RSS</a></li> 8. </ul> 9. </nav>
MarkingUptheIntroduction
We have already defined a new section in the docu ment u sing the section tag. Now we ju st need some content. view plaincopy to clipboardprint?
4 of 16
08/04/2009 10:34 AM
1. <s ection id="intro"> 2. <header> 3. <h2>Do you love flowers as mu ch as we do? </h2> 4. </header> 5. <p>Lorem ipsu m dolor sit amet, consectetu r adipisicing elit, sed do eiu smod tempor 6. </s ection> We add an id to the section tag so we can identify it later when styling. We u se the header tag to wrap arou nd the introdu ctory h2 element. In addit ion to describing a whole docu ment, the header-tag shou ld also be u sed to describe individu al sections.
MarkingUptheMainContentArea
Ou r main content area consists of three sections: the blog post, the comments and the comment form. Using ou r knowledge abou t the new stru ctu ral tags in HT ML 5, it shou ld be easy to mark it u p.
MarkinguptheBlogPost
Go throu gh the marku p and I'll explain the new elements afterwards. view plaincopy to clipboardprint? 1. <s ection> 2. <article class="blogPost"> 3. <header> 4. <h2>T his is the title of a blog post </h2> 5. <p>Posted on <time datetime="2009-06-29T 23:31:45+01:00">Ju ne 29th 2009</t 6. </header> 7. <p>Lorem ipsu m dolor sit amet, consectetu r adipiscing elit. Proin eu ismod tellu s e 8. </article> 9. </s ection> We start a new section and wrap the whole blog post in an article-tag. T he article tag is u sed to denote an independent entry in a blog, discu ssion, encyclopedia, et c. and is ideal to u se here. Since we are viewing the details of a single post we only have one article, bu t on the front page of the blog we wou ld wrap each post in an article-tag. T he header element is u sed to present the header and metadata abou t the blog post. We tell the u ser when the post was written, who wrote it and how many comments it has. Note that the timestamp is wrapped in a -tag. T his tag is also new to HT ML 5 and is u sed to mark u p a specific place in time. T he contents of the datetime attribu te shou ld be:
1. 2. 3. 4. 5.
T he year followed by a figu re dash (a minu s sign to you non-typography nerds) T he month followed by a figu re dash T he date A capital T to denote that we are going to specify the local time T he local time in the format hh:mm:ss
5 of 16
08/04/2009 10:34 AM
6. T he time zone relative to GMT . I'm in Denmark which is 1 hou r after GMT , so I write +01. If you were in Colorado you wou ld be 7 hou rs behind GMT , and you wou ld write -07.
MarkinguptheComments
Marking u p the comments is pretty straight-forward. No new tags or attribu t es are u sed. view plaincopy to clipboardprint? 1. <s ection id="comments"> 2. <header> 3. <h3>Comments</h3> 4. </header> 5. <article> 6. <header> 7. <a href="#">George Washington</a> on <time datetime="2009-06-29T 23:35:20+ 8. </header> 9. <p>Lorem ipsu m dolor sit amet, consectetu r adipisicing elit, sed do eiu smod tempo 10. </article> 11. <article> 12. <header> 13. <a href="#">Benjamin Franklin</a> on <time datetime="2009-06-29T 23:40:09+0 14. </header> 15. <p>Lorem ipsu m dolor sit amet, consectetu r adipisicing elit, sed do eiu smod tempo 16. </article> 17. </s ection>
MarkinguptheCommentForm
Several enhancements to forms have been introdu ced in HT ML 5. You longer have to do client-side validation of requ ired fields, emails, etc. T he browser takes care of this for you . view plaincopy to clipboardprint? 1. <form action="#" method="post"> 2. <h3>Post a comment </h3> 3. <p> 4. <label for="name">Name</label> 5. <input name="name" id="name" type="text" requ ired /> 6. </p> 7. <p> 8. <label for="email">E-mail</label> 9. <input name="email" id="email" type="email" requ ired /> 10. </p> 11. <p> 12. <label for="website">Website</label> 13. <input name="website" id="website" type="u rl" />
6 of 16
08/04/2009 10:34 AM
14. </p> 15. <p> 16. <label for="comment">Comment </label> 17. <textarea name="comment" id="comment" requ ired></textarea> 18. </p> 19. <p><input type="su bmit" valu e="Post comment" /></p> 20. </form> T here are new two new types of inpu t s, email and u rl. Email specifies that the u ser shou ld enter a valid E-mail, and u rl that the u ser shou ld enter a valid website address. If you write requ ired as an attribu te, the u ser cannot su bmit an empty field. "Requ ired" is a boolean attribu te, new to HT ML 5. It ju st means that the attribu te is to be declared withou t a valu e.
MarkinguptheSidebarandFooter
T he marku p of the sidebar and footer is extremely simple. A few sections with some content inside the appropriate aside- and footer-tags. You can view the final, u nstyled marku p here. Now for the styling.
StylingwithCSS3
CSS 3 bu ilds u pon the principles abou t styles, selectors and the cascade that we know so well from earlier versions of CSS. It adds loads of new featu res, inclu ding new selectors, pseu do-classes and properties. Using t hese new featu res it becomes a lot easier to set u p you r layou t. Let 's dive in.
BasicSetup
T o start off with we are going to define some basic ru les concerning typography, backgrou nd color of the page, etc. You 'll recognize all of t his from CSS 2.1 view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. /* Makeshift CSS Reset */ { margin: 0; padding: 0; } /* T ell the browser to render HT ML 5 elements as block */ header, footer, aside, nav, article { display: block; } body { margin: 0 au to;
7 of 16
08/04/2009 10:34 AM
14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33.
width: 940px; font: 13px/22px Helvetica, Arial, sans-serif; backgrou nd: #f0f0f0; } h2 { font-size: 28px; line-height: 44px; padding: 22px 0; } h3 { font-size: 18px; line-height: 22px; padding: 11px 0; } p{ padding-bottom: 22px; }
First we reset margin- and padding-st yles with a simple ru le. In a produ ction environment I wou ld u se a more complete CSS Reset su ch as Eric Meyer's (for CSS 2.1) bu t for the scope of the tu torial this will do. We then tell the browser to render all the new HT ML 5 elements as block. T he browsers are fine with elements they don't recognize (this is why HT ML 5 is somewhat backwards compatible), bu t they don't know how those elements shou ld be rendered by defau lt. We have to tell them t his u ntil the standard is implemented across the board. Also note how I've chosen to size the fonts in pixels instead of ems or %. T his is to maintain the progressive natu re of the tu torial. When the major browsers one day are completely finished implementing HT ML 5 and CSS 3 we will all have access t o page zooming instead of ju st text resizing. T his eliminates the need to define sizes in relative u nits, as the browser will scale the page anyway. See what the page looks like with the basic styling applied. Now we can move on to styling the rest of the page. No additional styles are requ ired for the header, so we'll go straight to the navigation.
StylingtheNavigation
It is important to note that the width of the body has been defined as 940px and that it has been centered. Ou r navigation bar needs to span the whole width of the window, so we'll have to apply some additional styles: view plaincopy to clipboardprint? 1. nav { 2. position: absolu t e; 3. left: 0;
8 of 16
08/04/2009 10:34 AM
4. width: 100%; 5. backgrou nd: u rl("nav_backgrou nd"); 6. } We position the nav-element absolu tely, align it to the left of the window and make it span the whole width. We'll center the nested list to display it within the bou ndaries of the layou t: view plaincopy to clipboardprint? 1. nav u l { 2. margin: 0 au to; 3. width: 940px; 4. list-style: none; 5. } Now we'll define some additional styles to make the navigation items look prettier and align them to the grid the layou t is based on. I've also inclu ded a style for highlighting the page the u ser is on, and some cu stom styling for the su bscription-link. view plaincopy to clipboardprint? 1. nav u l li { 2. float: left; 3. } 4. 5. nav u l li a { 6. display: block; 7. margin-right: 20px; 8. width: 140px; 9. font-size: 14px; 10. line-height: 44px; 11. text-align: center; 12. text-decoration: none; color: #777; 13. 14. } 15. 16. nav u l li a:hover { color: #fff; 17. 18. } 19. 20. nav u l li.select ed a { color: #fff; 21. 22. } 23. 24. nav u l li.su bscribe a { 25. margin-left : 22px; 26. padding-left: 33px; 27. text-align: left; 28. backgrou nd: u rl("rss.png") left center no-repeat; 29. }
9 of 16
08/04/2009 10:34 AM
StylingtheIntroduction
T he marku p for the introdu ction is pretty simple: A sect ion with a heading and a paragraph of text. However, we'll u se some new CSS 3 tricks to make it look more appealing. view plaincopy to clipboardprint? 1. #intro { 2. margin-top: 66px; 3. padding: 44px; backgrou nd: #467612 u rl("intro_backgrou nd.png") repeat-x; 4. 5. backgrou nd-size: 100%; 6. border-radiu s: 22px; 7. } We are u sing two new properties. T he first one is backgrou nd-size, which allows you to scale the backgrou nd-image. In ou r case, we scale it to 100% on both axes. If the box expands as we add more content to it, the gradient backgrou nd will scale as well. T his is something that was not possible in CSS 2.1 withou t non-semantic marku p and miscellaneou s browser issu es.
T he second new property is border-radiu s, which applies rou nded corners t o the element. T he radiu s of ou r rou nded corners are 22px in every corner. You cou ld specify different valu es for each corner or choose to only rou nd individu al corners.
Unfortu nately, neit her of the properties are fu lly implemented into the major browsers. However, we can get some su pport by u sing vendor-specific attribu tes. Backgrou nd-size is su pported by newer versions of Safari, Opera and Konqu eror. Border-radiu s is su pported by newer versions of Safari and Firefox. view plaincopy to clipboardprint? 1. #intro { 2. ... 3. /* Backgrou nd-size not implemented yet */ 4. -webkit-backgrou nd-size: 100%; 5. -o-backgrou nd-size: 100%; 6. -khtml-backgrou nd-size: 100%; 7. 8. /* Border-radiu s not implemented yet */ 9. -moz-border-radiu s: 22px; 10. -webkit-border-radiu s: 22px; 11. } Since we have a backgrou nd-color defined, there will be no major problems in browsers that don't su pport backgrou nd-size, su ch as Firefox. Now we ju st need to st yle the heading and the text.
10 of 16
08/04/2009 10:34 AM
view plaincopy to clipboardprint? 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. #intro h2, #intro p{ width: 336px; } #intro h2 { padding: 0 0 22px 0; font-weight: normal color: #fff; } #intro p { padding: 0; color: #d9f499; }
T he flower image can be added easily by giving #intro a second backgrou nd image, something that CSS 3 su pports. view plaincopy to clipboardprint? 1. #intro { 2. ... backgrou nd: #467612 u rl("intro_backgrou nd.png") top left (287px 100%) repeat-x, 3. 4. u rl("intro_flower.png") top rightright (653px 100%) no-repeat; 5. ... 6. } We give the two backgrou nd images explicit dimensions t o ensu re that they don't overlap, and we're set. Note the shorthand notation of backgrou nd-size.
Unfortu nately, no browser reliably su pports this yet, so we'll have to do it t he old-fashioned way: by inclu ding an inline image and positioning it u sing CSS. See the final example to see how it was done.
StylingtheContentAreaandSidebar
T he content area and sidebar are going to be aligned beside each other. T raditionally you wou ld do this by u sing floats, bu t in CSS 3 we are going to u se tables! "What? ! T ables? " you might ask and look confu sed. You probably learned years ago that u sing tables for web layou t is a big no-no, and it still is. You shou ld never u se the tableelement to mark u p a layou t. However, in CSS 3 we can make elements behave like tables withou t it ever showing in the marku p! T o start off with, we're going to need some divs to grou p the sections in a little more logical manner. view plaincopy to clipboardprint? 1. <div id="content">
11 of 16
08/04/2009 10:34 AM
2. <div id="mainContent"> 3. <s ection> 4.  5. </s ection> 6. <s ection id="comments"> 7.  8. </s ection> 9. <form> 10.  11. </form> 12. </div> 13. <as ide> 14.  15. </as ide> 16. </div> Everything still makes sense semantically, bu t now we can style it. We want the #content div to behave like a table, with #mainContent and aside as table-cells. With CSS 3, this is very easy: view plaincopy to clipboardprint? 1. #content { 2. display: table; 3. } 4. 5. #mainContent { 6. display: table-cell; 7. width: 620px; 8. padding-right: 22px; 9. } 10. 11. aside { 12. display: table-cell; 13. width: 300px; 14. } T hat's all! No more floating, fau x colu mn backgrou nd images, clearing or collapsing margins. We've made the elements behave like a table, and this makes it mu ch easier for u s to do layou t.
StylingtheBlogPost
T he styling of the post header is rather trivial so I'll skip t o the fu n part: the mu lticolu mn layou t.
Multiplecolumns
12 of 16 08/04/2009 10:34 AM
Mu ltiple colu mns of text was previou sly impossible withou t manu ally splitting the text, bu t with CSS 3 it's a piece of cake, alt hou gh we have to add a div arou nd the mu ltiple paragraphs for this to work with cu rrent browsers. view plaincopy to clipboardprint? 1. <div> 2. <p>Lorem ipsu m dolor sit amet...</p> 3. <p>Pellentesqu e u t sapien arcu ...</p> 4. <p>Vivamu s vitae nu lla dolor...</p> 5. ... 6. </div> Now we can add two simple properties and call it a day. view plaincopy to clipboardprint? 1. .blogPost div { 2. colu mn-cou nt: 2; 3. colu mn-gap: 22px; 4. } We want 2 colu mns and a gap of 22px between the colu mns. T he additional div is needed becau se there is cu rrently no su pport ed way of making an element span more than one colu mn. In the fu tu re, however, you 'll be able to specify t he colu mn-span property, and we cou ld ju st write: view plaincopy to clipboardprint? 1. .blogPost { 2. colu mn-cou nt: 2; 3. colu mn-gap: 22px; 4. } 5. 6. .blogPost header { 7. colu mn-span: all; 8. } Of cou rse the colu mn-cou nt and colu mn-gap properties are only su pported by some browsers, Safari and Firefox. We have to u se the vendor-specific properties for now. view plaincopy to clipboardprint? 1. .blogPost div { 2. /* Colu mn-cou nt not implemented yet */ 3. -moz-colu mn-cou nt: 2; 4. -webkit-colu mn-cou nt: 2; 5. 6. /* Colu mn-gap not implemented yet */ 7. -moz-colu mn-gap: 22px; 8. -webkit-colu mn-gap: 22px; 9. }
13 of 16
08/04/2009 10:34 AM
Boxshadow
If you look closely at the image in the blog post you 'll see a drop-shadow. We are able to generate this u sing CSS 3 and the box-shadow property. view plaincopy to clipboardprint? 1. .blogPost img { 2. margin: 22px 0; box-shadow: 3px 3px 7px #777; 3. 4. }
T he first "3px" tells the browser where we want the shadow to stop horizontally. T he second "3px" tells it where we want the shadow to stop vertically. T he last "7px" is how blu rred the border shou ld be. If you set it to 0 it will be completely solid. Last bu t not least we define the base color of the shadow. T his color is of cou rse faded, depending on how mu ch you blu r the shadow. It probably comes as no su rprise that this property is not implemented in all browsers yet. In fact, it only works in Safari, and you have to u se the vendor-specific property. view plaincopy to clipboardprint? 1. .blogPost img { 2. margin: 22px 0; -webkit-box-shadow: 3px 3px 7px #777; 3. 4. }
Zebra-stripingtheComments
Zebra-striping, or highlighting every second element in a series, has traditionally involved selecting all the elements via javascript, then looping throu gh them and highlighting all the odd elements. CSS 3 introdu ces t he pseu do-class "nth-child", which makes it ridicu lou sly simple to do this withou t javascript. We'll u se it to zebra-stripe t he comments. view plaincopy to clipboardprint? 1. section#comments article:nth-child(2n+1) { 2. padding: 21px; 3. backgrou nd: #E3E3E3; border: 1px solid #d7d7d7; 4. 5. 6. /* Border-radiu s not implemented yet */ 7. -moz-border-radiu s: 11px; 8. -webkit-border-radiu s: 11px; 9. }
14 of 16
08/04/2009 10:34 AM
T he weird valu e "2n+1" is actu ally pret ty simple if you u nderstand what it stands for: 2n selects every second item. If you wrote 3n it wou ld select every third item, 4n every fou rth item, and so on. T he +1 tells the browser to start at element 1. If you are familiar with programming you probably know that all arrays start at 0, and this is also tru e here. T his means that element 1 is actu ally the second element in the series. Alternatively, you cou ld simply write: view plaincopy to clipboardprint? 1. section#comments article:nth-child(odd) { ... } Since the standard inclu des the two most u sed valu es as shorthand, odd and even. T he rest of the comment styling shou ld be simple to u nderstand with you r new knowledge.
StylingtheCommentForm,FooterandSidebar
A cou ple of CSS 3 t echniqu es are reu sed in the styling of the comment form, footer and sidebar. In the comment form and the footer I've u sed the same type of table layou t techniqu e u sed in t he main layou t. In t he sidebar border-radiu s is u sed to add rou nded corners to the different sections.
TheFinalDesign
See the final design with all styling applied.
Compatibility
T he page renders correctly in Safari 4 and newer webkit-based browsers, as it is the only rendering engine that su pports all of t he CSS 3 techniqu es we have u sed. Firefox 3 has some problems applying rou nded corners to ou r flower image and it doesn't su pport backgrou nd-size, bu t besides that the layou t works. I've chosen to ignore Internet Explorer as it requ ires a bit of hacking to get HT ML 5 to work. You cou ld also define some more ru les and get everything working across major browsers, bu t all of this is ou tside the scope of the tu torial.
Conclusion
When HT ML 5 and CSS 3 are one day implemented in all browsers it will be a lot easier to bu ild websites. We'll finally be able to stop u sing floats for layou t (which they were never meant to be u sed for), and we will spend considerably less time writing javascript to scale ou r backgrou nd images or zebra-stripe ou r tables. Hopefu lly we will u se all this extra time to stu dy some long-neglected areas of web design, like front end optimizat ion and proper information architectu re. Follow u s on T witter, or su bscribe to the NET T UT S RSS Feed for more daily web
15 of 16 08/04/2009 10:34 AM
development tu ts and articles.
86
diggs digg it
16 of 16
08/04/2009 10:34 AM

HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

HT ML 5 and CSS 3: T he Techniques Youll Soon ...

HTML5andCSS3:The TechniquesYoullSoon BeUsing

HT ML 5 and CSS 3: T he Techniques Youll Soon ...

HT ML 5 and CSS 3: T he Techniques Youll Soon ...

HT ML 5 and CSS 3: T he Techniques Youll Soon ...

HT ML 5 and CSS 3: T he Techniques Youll Soon ...

HT ML 5 and CSS 3: T he Techniques Youll Soon ...

HT ML 5 and CSS 3: T he Techniques Youll Soon ...

HT ML 5 and CSS 3: T he Techniques Youll Soon ...

HT ML 5 and CSS 3: T he Techniques Youll Soon ...

HT ML 5 and CSS 3: T he Techniques Youll Soon ...

HT ML 5 and CSS 3: T he Techniques Youll Soon ...

HT ML 5 and CSS 3: T he Techniques Youll Soon ...

HT ML 5 and CSS 3: T he Techniques Youll Soon ...

HT ML 5 and CSS 3: T he Techniques Youll Soon ...

HT ML 5 and CSS 3: T he Techniques Youll Soon ...

HT ML 5 and CSS 3: T he Techniques Youll Soon ...

development tu ts and articles.

You might also like