I can think of no better way to start off the this blog than to talk about devchatt presentations. First, if you don’t already know, DevChatt is a free developers conference in Chattanooga, TN. pre-devchatt was today and was a taste of things to come. We had Chris Mills from Opera come and talk to us about HTML5 and CSS3. His project list and titles are vast, but he is involved in web education, opera evangelism, and other stuff. Plus he plays in a metal band, has a cool English accent and the best goatie short of this guy…
To the point, his presentation was fairly basic. He touched on many of the generally supported features of the two specs. Much of it you may already know, but I’ll show you some of the cool stuff.
1. Less code and easy accessibility for common structures. Notice the lack of divs:
2. Machine readable timestamps -
<time datetime="2010-06-27"> 27 June 2010 </time> <time datetime="2010-06-27"> Chris's 32nd birthday </time> <time datetime="2010-06-27T020:00Z"> 8PM on my birthday </time> <time datetime="2010-06-27T020:00+09:00"> 8PM on my birthday—in Tokyo </time>
3. New Input Types( range, date, url, email ) plus validation
<input type=date>
<input type=email required>
4. <canvas>, <video>, and <audio>. I group these together because I suspect everybody has heard about these. Yes, they rock. I get down on my knees and thank the Lord Almighty we don’t have to use flash anymore. That is, if they can ever work out which codec to use.
The fun fighting part where people get bloody noses and then nothing happens: Basically, there are two main video codecs being argued over for video playback in HTML5. Mozilla and Opera want Ogg Theora (an open source codec), Microsoft and Apple want H.264 (patented) having both had a hand in creating it. Google has come into the ring (as they always do), with a solution proving yet again that they might take over Venus after this world. They acquired one called On2.
Now if they open it up for free use to everyone, they might just get their codec in the HTML5 spec. If not, we’ll keep fighting until Microsoft and Apple give in to open source, every company except Microsoft and Apple pays $60 million to use H.264 in their browsers, or, like I said, Google expands their enterprise to Venus, enslaves the aliens on that planet, finds a way to jump over this argument, and then provides all of us with a universal <video> element built by white apparitions from another planet who hypnotise Microsoft into dropping IE6 for good. YAYYAYAHAHAAYAY!
I got carried away….
5. Related to that last part, IE doesn’t support crap. IE9 is showing some improvement but Paul Irish ran his test on the most recent beta release and got 50% as a grade for support. That’s about 3 or 4 times better than IE8, but still….it fails by academic standards. Segway: we can use excanvas for simulating a canvas element in IE and raphael js with svg for vector graphics, but hopefully these workarounds won’t be needed much longer (at least not before Google gets back from Venus! We bitches are goin down!)
6. Let’s move on to CSS3.
a. text-shadow: #444 2px 2px 2px;
-multiple shadows assignable
b. box-shadow
c. opacity: 0-1 (use filter: alpha(opacity=1-100) in IE)
d. rgba (a for alpha (opacity)) - color: rgba(255, 255, 255, 0.5);
e. haven’t used, but i hear designers like this: hsl colors. Rather than using rgb, you can use hsl format to specify how much light you want in your color.
f. border-radius (this is the one im most excited about being in IE9, that one did make it)
g. multiple background images (yup, not just one)
7. Transitions(duration-set animation abilities) and transforms (rotating, scaling, moving things around, skewing)- there’s a lot here. We’ve got 2D animations. Webkit is experimenting with 3D. We’ve got a guy building video games on a canvas with CSS animations. super mario, super mario kart, wolfenstein.
Play super mario in 14kb javascript
8. Typography - This is very much needed in the world of web development. siFr is slow and buggy and there’s really no good way on the web to do custom web fonts, especially if they’re dynamic. This is the solution: @font-face.
Fonts usually come in ttf, otf, or eot format. This all works right now in IE. You just need the right syntax for your download declarations, then whenever you want to use a custom font in your css, it’s the same as before: font-family: ‘My Font’. Check out Paul Irish’s post on bulletproof, cross-browser syntax for @font-face.
The only disadvantage to @font-face is licensing. Some fonts are free, others require a license to use. When you use @font-face, you make your font available to the public for download from wherever you download it. That doesn’t make the font creators very happy sometimes, so just make sure you have the proper permission before using @font-face.
9. Attribute Selectors - Hey! You got a little regex in my css. yum.
a[href^="mailto:"] - select all mailto anchorsa[href$=".co.uk"] - select all anchors ending with .co.uk (british links)a[title*="chris"] - select all anchors that have chris in the titlea[title*="chris"]:before {- before and content tags. Stick some content before all the anchors that have chris in the title.
content: url('images/heart.jpg');
} tr:nth-child(even) - select all even tr’s
10. Lastly, isn’t there a way to check if a browser supports a specific HTML5 or CSS3 feature? YES! Faruk Artes and Paul Irish created Modernizr. Check it out at www.modernizr.com.
Thanks to Chris Mills, Medium, and all of the sponsors of DevChatt. Expect many posts next weekend when all the mischief and craziness happens. DevChatt is March 26-27. See devchatt.org for more info.
Chris Mills’ blog on Opera: http://my.opera.com/chrismills/blog/
His slides for his presentation can be downloaded in a pdf here: http://my.opera.com/ODIN/blog/university-talk-resources-march-2010-html5-css3-slides
All the cool stuff Opera is doing for us developers can be found at dev.opera.com.
On a side note, thank you to wyattdanger (Stephen Bush) for the first outside contribution to this blog. Check out the videos on python. Much appreciated.
