Contact Us
blog thumbnail

HTML5 and CSS3

Hey

Bonsai is prepping for a rebrand and part of it is going to include a new website, so we're researching the latest technology like HTML5 and CSS3. I can't even begin to describe how exciting some of the specification are. Now I know CSS3 has been out for a while but only now are we getting around to looking at, let alone implementing. Better late than never though right? Here are some notable specs from HTML5 and CSS3.

CSS3

  • :not allows you to select elements other than the selector e.g. *:not(p) will select EVERY element except for p tags. Usually something like that would be reserved for jQuery, but not anymore
  • :target works in conjuction with anchors to show what's in focus. I blogged about it before in this post. As an aside, thinking about it now, I probably should've made a smoother transition between clicking on a question and going to the answer. Plus, instead of adding a "question" and "answer" class, I could've used the CSS3 selector described next
  • :nth-child selects elements based on its position. It can accept integers to get the specified occurrence of the element, formula to get ever third or fourth element, or just "even" or "odd". So instead of added classes to every other <li>, I could have just used li:nth-child(odd) and li:nth-child(even) in the css.
  • Two other sweet specification of CSS3 is the + and ~ sibling selector. For example if on every page you have an <h2> for a title, then <h3> subtitle and you wanted to style the <h3> subtitles differently than other <h3> in the content, use h2 + h3 as your selector. This finds every h2, then if any h3 immediately follows the h2, styles the h3. The ~ is a more generic version of the + -- the sibling doesn't have to follow immediately.

HTML5

  • I'm sure we know about <audio>, <video>, and <canvas> by now. What I'm most excited about is the semantic <header>, <footer>, <nav>, etc tags. I like semantic mark-up in general.
  • Also, all the different additions to the input elements are pretty sweet. "Placeholder" attribute, so no more javascript watermarking; "required" attribute  so no more javascript validation; additional values for type attribute like "email," "url," and "tel,". All of these changes are going to make our web development easier and quicker.

Anyway, that's all I really had. Have a great weekend and enjoy the weather while you can.

Ok