CSS3 Transitions on Transforms in Firefox 4

July 29th, 2010

In one of my previous posts, I showed how to use SVG as a mask over top of video and I based it on what I saw in a demo video showing off what Firefox 4 can do. With the release of the second Firefox 4 beta, Mozilla has released a few of the demos along with the code. The demo that I think has the most potential for real world use, is the London Project. I can see sites being animated like this really taking off, for better or for worse. And the great thing is, it only takes a few lines of CSS and one line of JavaScript to do it.

Here’s my version of what Paul Rouget made without the video.

How does it work? Like most CSS3 animations, it’s easy once you’ve figured it out. First off, the HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<body class="intro">
<div id="wrapper">
<div id="intro" onclick="document.body.classList.remove('intro')">
<h1><a href="#">WELCOME</a></h1>
<p><a href="#">Click Here</a></p>
</div>
<div id="logo">
<img src="demo_logo.png" />
</div>
<div id="picture">
<img src="robot_slap.jpg" />
</div>
<div id="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique sem id tortor lacinia vel iaculis turpis tincidunt. Sed tincidunt venenatis neque, vel pretium dui suscipit id. Duis sit amet nibh quis ante pretium faucibus nec in quam. In feugiat rhoncus diam, id porta lorem blandit eget. Vivamus et velit sit amet nunc cursus pretium. Mauris in lectus nec tortor lacinia vehicula. Nam sed elit augue. Mauris id magna ipsum. Quisque sagittis aliquam elit at sagittis.</p>
</div>
</div>
</body>

The only thing here that’s important to the animation is this line: <div id=”intro” onclick=”document.body.classList.remove(‘intro’)”>. This is what triggers the animation when the right box is clicked. It does this by removing the class “intro” that’s assigned to the body tag and then the elements of the page are animated to their new position on the page. Here’s the CSS:

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

body {
margin:0; padding:0;
background:#dabe25;
font-family:Arial, sans-serif;
}
#wrapper {
width:900px;
height:500px;
border:10px solid #000;
margin:50px auto;
-moz-border-radius:80px 0 80px 0;
-webkit-border-radius:80px 0 80px 0;
background:#fff;
position:relative;
}
#intro {
width:200px;
height:100px;
border:10px solid #000;
text-align:center;
position:absolute;
left:350px;
top:-200px;
opacity:0;
}
#intro a {
text-decoration:none;
color:#000;
}
#intro h1 {
margin:10px 0 0 0;
}
#logo {
position:absolute;
left:620px;
top:15px;
-moz-transition-duration:1s;
-moz-transition-delay:1s;
}
#picture {
width:500px;
height:375px;
border:10px solid black;
position:absolute;
top:60px;
left:50px;
-moz-transition-duration:1s;
-moz-transition-delay:.5s;
}
#text {
width:250px;
padding:10px;
border:10px solid #000;
position:absolute;
left:590px;
top:130px;
background:#ccc;
-moz-transition-duration:1s;
-moz-transition-delay:2s;
}
#text p {
margin:0;
}
body.intro #intro {
-moz-transform:translate(0, 380px);
opacity:1;
}
body.intro #logo {
-moz-transform:translate(0, -200px);
}
body.intro #picture {
-moz-transform:translate(0, -800px);
}
body.intro #text {
-moz-transform:translate(0, -800px);
}

Most of this is styling, which we don’t need to worry about here. We’ll look at just the #logo div because they all behave the same. If you look at the CSS for #logo, you’ll see its final positioning on the page. But there’s also body.intro #logo. Here, we’re using the transform property to animate the positioning of the #logo div. Using translate, we set the initial position to -200px which will take it off the viewable part of the page. And when the #intro div is clicked and the “intro” class is removed from the body tag, the #logo div is animated to its permanent position using the -moz-transition-duration property. All the different elements come in in a staggered effect using the -moz-transition-delay property.

And that’s it. Something that people will use Flash to get the same effect can now be done using just HTML, CSS and the tiniest amount of JavaScript. Right now this only works in Firefox 4, but it’s designed to display properly in all other browsers, just without the animation or, in some cases, the rounded corners.

Poke around in the demo and look at the Mozilla one, which adds SVG masks to the mix. Getting on board with techniques like this as early as possible is going to be the right move, especially since HTML5 is the latest buzzword clients are bringing up when talking about websites. And I’m a fan of adding in extra things like this for people that use newer browsers, as long as it still displays properly in older ones.

Tags: CSS3, Firefox, html, javascript
Posted in HTML/CSS | No Comments »

In some browsers <textarea> is resizable

July 25th, 2010

I was building a contact form a few weeks ago and since I use Firefox 3.6 to do my testing while I build a site, I didn’t noticed until I checked the site in Chrome that you can now resize text areas. If there’s a couple of diagonal lines in the bottom right corner of the text area, you can click and drag to resize it. Checking around, I’ve found this is only available in Chrome, Safari and Firefox 4 right now, but I’m sure that when Internet Explorer 9 comes out, it will be there too. Is this a big deal? Maybe not, but when you resize the text area if can affect the design around it, moving text and pictures around. And I know from experience, that’s the kind of thing that can become a major issue for some of the clients I’ve worked it, if they happened to discover you can do that.

But this is an easy problem to solve. I usually set the height and width of form elements in my CSS. But there’s a couple of tricky things you should know. If you just set this:

1
2
3
4

textarea {
width:400px;
height:300px;
}

It will set the height and width of the text area but it will let the visitor make it bigger although not smaller. You have to set the max-height and max-width as well. If you just set the max-height or max-width, the visitor can resize the text area from the default width to the max-width you’ve set and the same with height. So both need to be set in order to prevent any resizing:

1
2
3
4
5
6

textarea {
width:400px;
height:300px;
max-width:400px;
max-height:300px;
}

So far, I haven’t been able to find any info on preventing resizing with a setting inside the actual HTML tag, but since CSS is used nearly 100% time, it’s not a big deal to do it this way.

Tags: css, html
Posted in HTML/CSS | 1 Comment »

jQuery style animated drop down navigation using only CSS3

July 20th, 2010

I’ve been building website navigations that are enhanced with jQuery for a while now and so far I haven’t had many problems with them. But I’m always a little apprehensive about relying on JavaScript for basic functions, like animating drop down menus. It’s not really a big deal, because if you do it right, then it will still display decently if JS is turned off. A great example of how to build a drop down menu and enhance it using jQuery is Jeffery Way’s How to Build and Enhance a 3-Level Navigation Menu.

But we aren’t going to need jQuery for that type of effect much longer, now that Firefox 4 supports CSS3 transitions and, I think, Internet Explorer 9 will too. To get the same kind of effect with CSS3 takes an id or two and a few lines of CSS for each drop down you have. It’s actually a lot simpler with CSS than it is with jQuery!

Here’s a demo of what we’ll be building.

The HTML is pretty much the same as it would be with the usual navigations people have been building:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<nav>
<ul>
<a href="#"><li>HOME</li></a>
<li>
<ul id="about">
<a href="#"><li>ABOUT</li></a>
<a href="#"><li>Me</li></a>
<a href="#"><li>Education</li></a>
</ul>
</li>
<li>
<ul id="portfolio">
<a href="#"><li>PORTFOLIO</li></a>
<a href="#"><li>Websites</li></a>
<a href="#"><li>Animation</li></a>
<a href="#"><li>3D Graphics</li></a>
</ul>
</li>
<a href="#"><li>CONTACT</li></a>
</ul>
</nav>

The only difference is, for this to work, in the <li>s with a drop down, the top level link is in the child <ul>. It’s nothing major, it’s just something that needs to be done or else the drop downs won’t work.

I’m not going to go through all the styling just the CSS that makes the drop down work.

1
2
3
4
5
6
7
8
9
10

nav li ul {
position:absolute;
top:0;
left:0;
overflow:hidden;
height:40px;
width:120px;
-webkit-transition:height .2s ease;
-moz-transition:height .2s ease;
}

The first 3 lines position just make sure that the child <ul> is positioned properly in the parent <li>. The overflow is set to hidden so we can’t see the drop down menu and the height is set to the height of the nav. The transition is set here for when the visitor mouses off of the navigation element.

In my example, I have two drop downs, each with their own height and because of this, they both need their own id. One is “about” and the other “portfolio”, which let’s us set this:

1
2
3
4
5
6
7
8
9
10

#about:hover {
-webkit-transition:height .4s ease;
-moz-transition:height .4s ease;
height:120px;
}
#portfolio:hover {
-webkit-transition:height .4s ease;
-moz-transition:height .4s ease;
height:160px;
}

And here’s what we get.

The transition property is set similar to the one in nav li ul but it’s set to be a little slower because this is where the drop down is actually animated to show itself. And the individual heights for each are set, portfolio has one more item, so it’s 40 pixels bigger than about.

So what are we doing with the transition settings? Like most CSS, this is the short hand for CSS transitions. The first element is the property we are affecting, the second is the transition delay and the third is the timing function which I’ve set to ease to just make the animation a bit smoother. You can find about more here.

And that’s it, that’s all you need to add animation to your drop downs using CSS. It’s a lot less code than the jQuery way and it’s a lot simpler. Plus, I’ve been messing with it all day and it’s impossible to break like it is with jQuery if you don’t have everything set properly. Can you start using this right now? Sure, if you don’t need to have the animation show up in IE or Firefox 3.6 or older. The drop down will still work in IE and older versions of Firefox but there just won’t be any animation, so if you’re just adding it as an extra for Webkit and Firefox 4 users than there shouldn’t be a problem.

This is one of the CSS3 features that web designers should be excited about because it’s going to make it so much easier to add the little things like this that add a lot to a website’s design.

Tags: css, CSS3, jQuery
Posted in HTML/CSS | No Comments »

SVG Masks, HTML5 video and Firefox 4

July 17th, 2010

Earlier this month, Paul Rouget, who’s a evangelist for Mozilla posted a video where he demonstrated some of the new features that are coming with Firefox 4. And I have to say, the stuff he shows off is for the first time, a real example of how HTML5 and CSS3 can replace things like basic Flash animation. A lot of the stuff he shows off is really amazing and one that stuck out at me was around the 4 minute mark, where the text Firefox acts as a mask for a video. Now, this was definitely something that could only be accomplished in Flash, so I really wanted to know how to do it and unfortunately there was nothing out there to tell me how. After some trial and error though, I managed to figured it out, mainly because, thanks to Firefox 4, it’s not at all that hard.

Here’s what what I made. It only works in Firefox 4, so it’s not something that you can throw up on a site right now, but it is a great example of what we are going to be able to do in the next few years.

Check out the demo here. (This only works in Firefox 4)

How is it done? Using Firefox 4’s inline SVG, HTML5, some CSS and not a lot of any of it. Here’s all the HTML I used:

1
2
3
4
5
6

<video id="video_target" src="oceans-clip.ogg" type="video/ogg" autoplay></video>
<svg>
<mask id="video_mask" maskUnits="userSpaceOnUse">
<text x="300" y="190">VIDEO</text>
</mask>
</svg>

The video is a clip from Disney’s Oceans that I got from Video JS. Since this only works in Firefox 4, I went with the ogg video. In HTML5 the video tag is just like any other tag so you can control it like you would an image tag. What Firefox 4 allows us to do is create some SVG text and then use it as a mask without the need to use an xml doctype like SVG needed before. Another plus is that the actual <svg> tag can be placed anywhere in the HTML and will be assigned to the targeted tag, in our case here the <video> tag. To make this work, we wrap the SVG <text> inside a <mask> tag, giving <mask> the id of video_mask, which we need to assign the mask in the CSS and we need to set the maskUnits to “userSpaceOnUse”. I’ll be honest with you, I don’t really understand this part, but in everything I found this was the setting for text and maskUnits=”objectBoundingBox” maskContentUnits=”objectBoundingBox” is used for shape masks. The video tag has the x and y positions set to center the text.

For the CSS:

1
2
3
4
5
6
7
8
9
10

text {
font-family:Arial Black, sans-serif;
font-size:167px;
text-anchor: middle;
letter-spacing:1px;
fill:#fff;
}
#video_target {
mask: url(#video_mask);
}

First off, we’re styling the text, nothing different here except we need to set the fill to white. If the fill is set to black, nothing shows through the mask and the closer the fill color gets to white, the more that shows through. Next, we set video_target’s mask to url(#video_mask). And that’s it.

And, this is what we get. (Remember, it only works in Firefox 4)

Something that for years you could only do in Flash you can now do with 6 lines of HTML and about 10 lines of CSS. No JavaScript or anything like that to rely on. This is something that should be exciting the web design community, especially if the other major browsers implement this.

Tags: css, HTML5, SVG, video
Posted in HTML/CSS | 2 Comments »

Create the ThinkGeek background effect using CSS3

July 14th, 2010

When ThinkGeek launched their new site design last year, one of the hilights was the background image that switches from robots to zombies when you scroll down to the bottom of the page. It was one of those things that made me, as a web designer, need to know how they did it. How they did it was using a few images and some wrapper divs. It’s not complicated once you figure it out and I think the few extra divs is worth it for the effect. If you want to see how ThinkGeek does it, check out this screencast by Chris Coyier over at CSS-Tricks.

I knew it could be done with CSS3 but was it worth it? The other day I began wondering if you could do it with less HTML and CSS, if you used things like CSS gradients and multiple backgrounds. After some trial and error, I figured out you could do it with a couple of lines of CSS and no extra HTML. Of course, the problem is, it won’t work in any version of IE.

For the CSS, we just need to apply multiple background images to the body tag and this works because CSS3 gradients are technically a background image.

1
2
3
4
5
6
7
8
9
10
11
12

body {
padding:0;
margin:0;
background:url(images/robots2.png) fixed repeat-x -275px bottom, -moz-linear-gradient(#000, #404143 180px, #404143 70%, #000 80%) no-repeat #404143;
background:url(images/robots2.png) fixed repeat-x -275px bottom, -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(0.1, #404143), color-stop(0.7, #404143), color-stop(0.8, #000)) no-repeat #404143;
}
#content {
width:800px;
min-height:2000px;
margin:0 auto;
background:#fff;
}

Check out the demo here.

That’s all the CSS I used to get the same effect. there’s two background properties because there has to be one for Firefox and one for the Webkit browsers, Safari and Chrome. Robots2 is just a image I made that’s the same colors as the ThinkGeek image. Putting it first sets it on top of the gradient background, For the gradients, of course Firefox and Webkit have different syntax but the set up for this is pretty much the same. Black for 180 pixels in Firefox or 10% in Webkit. Then it changes to the gray and stays gray until 70% of the page height and it turns black again at the 80% mark. #content is just a div I put in there because for the effect to work right the page needs to be around 2000 pixels in height, which isn’t that big of a deal.

I think this is great example of what CSS3 is going to let people do. It wasn’t a ton of CSS and HTML to do it with images, but this will load faster because it’s only one image and less code. One thing I noticed while doing this is Chrome doesn’t seem to create gradients as nicely as Safari or Firefox, hopefully Google is working on this because as CSS3 becomes more wide spread, it might make some designs look pretty bad. Another I’ve noticed, if you put a gradient first then multiple backgrounds won’t work. I was fooling around trying to have two gradients and nothing would display at all.

Tags: css, CSS3, html
Posted in HTML/CSS | 1 Comment »

Don’t build a site that relies on JavaScript

July 12th, 2010

I’ve been spending a lot of my time learning jQuery, mainly because the direction the web is going, web designers and front-end developers are going to need to know it to fulfill their clients needs. jQuery is great and can add a lot to a website, including increasing the functionality of a site. But I’m not a big fan of things not working if the visitor has turned JavaScript off. I’ve said here and other places that I feel if they user turns off JavaScript or Flash or Java then they know that they are going to be missing certain elements of a site and I feel, since they’ve made their decision, they should be prepared to live with the consequences. At the same time, I don’t think that a site’s main functionality should rely on something like JavaScript in order to work. A site that needs JavaScript to provide it’s main function, such as e-commerce, is built wrong.

99% of people have JS turned on, so what’s the big deal? I was taught and I still follow it to this day, your site should work if the CSS is turned off. A visitor might come to your site and the CSS file doesn’t load, so instead of refreshing, they assume the site looks this way. You want them to be able to still get around and be able to do what they wanted to do on your site. And I believe this has to apply to JavaScript as well. Some browsers suck at running JavaScript and we’ve been on sites where it takes a few minutes to load because it’s hanging up on the JS. How many times has a site half loaded on you because it was waiting for the JS, so you just clicked the back button?

So what do you do? Build your main functionality with HTML and a language like PHP. Just like CSS is for styling and positioning, JavaScipt and libraries like jQuery should be used to enhance a web site. One thing I’ve learned over the years is that a lot of these decisions come down to who is the sites audience. Your audience will almost always determine the technology you use and if you think you can get away with using JS to provide an import functionality, then do it. But always be aware that there might be someone out there that can’t use the site the way you intended.

Tags: css, html, javascript, php
Posted in HTML/CSS | No Comments »

If you’re going with HTML5, go all out

July 7th, 2010

If you’ve built a site using HTML5 or even have just looked into it, you’ll know that HTML5’s new tags are there to reduce the amount of mark-up that web designers need to build a web page. Things like <header> and <nav> are there to replace the <div> tags that are on almost every web page made ever. But I’ve noticed a trend that I think defeats the whole reason these tags are there.

Here’s a header the way it’s supposed to be done in HTML5:

1
2
3
4
5
6
7
8

<header>
<nav>
<li><a href=”index.html”>Home<//a></li>
<li><a href=”about.html”>About<//a></li>
<li><a href=”portfolio.html”>Portfolio<//a></li>
<li><a href=”contact.html>Contact<//a></li>
</nav>
</header>

Pretty simple stuff. It’s there to replace this:

1
2
3
4
5
6
7
8

<div id=”header”>
<div id=”nav”>
<li><a href=”index.html”>Home<//a></li>
<li><a href=”about.html”>About<//a></li>
<li><a href=”portfolio.html”>Portfolio<//a></li>
<li><a href=”contact.html>Contact<//a></li>
</div>
</div>

But here’s the problem. Internet Explorer doesn’t recognize any of the HTML5 tags, so your options are to give the new tags ids, don’t use HTML5 or use something like HTML5 Shiv, which forces IE to recognize the tags using JavaScript. I say use option two or option 3. But I’ve been seeing something around the web that’s making me concerned. There are some people out there that use IE and have JavaScript turned off, so if they visit your site, it’s not going to display right. Now I don’t have the figures for how many people out there surf the web with that setup but I have to think it’s pretty low. But some people think you should be prepared for people like this and do this:

1
2
3
4
5
6
7
8
9
10
11
12

<header>
<div id=”header”>
<nav>
<div id=”nav”>
<li><a href=”index.html”>Home<//a></li>
<li><a href=”about.html”>About<//a></li>
<li><a href=”portfolio.html”>Portfolio<//a></li>
<li><a href=”contact.html>Contact<//a></li>
</div>
</nav>
</div>
</header>

The HTML5 is for the browsers that support it and the divs are for IE. But this completely defeats the purpose of the new HTML5 tags and is extra code that you don’t need.

My opinion is this: If you’re going to start building sites using HTML5, then go 100% HTML5. If the small amount of people out there that use IE with JS disabled can’t see the site, that’s their problem. Don’t use anymore mark-up than you need to, if you’re concerned that the site won’t display right for a large amount of your site’s target audience, then stick with HTML 4.1 or XHTML.

Tags: HTML5, javascript
Posted in HTML/CSS | No Comments »

Video: To autoplay or not to autoplay

July 4th, 2010

I’m a huge sports fan and I spend a lot of time online visiting sports news sites like si.com and espn.com and over the last couple of years they, and other major sports sites, have had some big redesigns. ESPN added tons of video to their site and now Sports Illustrated has started featuring short clips on their site. It’s great to be able to watch hi-lights whenever you want or to listen to some analysis but they both do something that drives me crazy, the videos play automatically.

This is a question that I’ve had to deal with a few times when dealing with clients, do we want a video on their site to play automatically or do we want it so the user has to start the video? Usually the circumstances will dictate how we’ll set it up. A link that sends a visitor straight to a video page will play automatically but I’m a big believer that a video that is not the main focus of the page, ie. a video off to the right in a sidebar, shouldn’t play unless the user wants it to play.

ESPN has an option to turn autoplay off, which is great but SI doesn’t seem to get it. On the main page, all the video has to be started by the visitor but on pages like Truth & Rumors, the video appears in the top right, isn’t usually related at all the the featured content and is always set to autoplay. This is probably the complete opposite of how video should be set up. Especially on a site like SI’s where people could be visiting during work hours when they aren’t supposed to and then bang, 10 seconds after the page loaded, a video starts, alerting everyone that the visitor is on a sports site. It might not be that big of a deal, but it could get some people in trouble.

So should video’s autoplay or not? As I said earlier, it should be determined by the situation. YouTube has it set up right, when you click on a YouTube link, you know and want the video to play automatically beause the main point of visiting that page is to see the video. If a video is not the main focus of the page or if there are multiple videos, then I think the visitor should have to start the video. The reason I think this should be the set up with multiple videos as well is because, while it might seem like a good idea to set the top video to autoplay, the visitor might not want to watch that video, instead preferring another one on the page.

Everyone knows video has become a huge part of the web and now more and more smaller clients want it on their site. It’s our job as web designers to make sure it’s set up right.

Tags: video
Posted in HTML/CSS | No Comments »

2 CSS Positioning Tips Every Web Designer Needs to Know

July 1st, 2010

In my fight to stop people from using tables for layout in web design, there’s a couple of arguments I come across a fair amount. One is about pinning a div, like a footer div, to the bottom of another div and it stays there regardless of the parent div’s height. And the other one is positioning a div inside a parent div that’s been center on the page. Both of these things are easy to do when you know how to do them and for some reason the solution isn’t as wide spread as you would think it is. In fact, the way you position div inside another div is something that I only found out about a couple months ago. In fact I had a work around that worked pretty good, but used margins, which isn’t always the best way to go.

Let’s say you have this HTML:

1
2
3

And you wanted to position “right_block” over to the right side of the “wrapper” div. Here’s how I used to do it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#wrapper {
width:800px;
height:500px;
background:#ccc;
margin:auto;
}
#right_block {
width:100px;
height:200px;
background:#222;
position:absolute;
margin-left:600px;
top:50px;
}

If you set left to 600px then “right_block” will stay 600px from the left edge of the browser and 50px from the top no matter the width and height of the browser window. If you change left to margin-left, then “right_block” will be 600px from the left edge of the “wrapper” div and 50px from the top of it. If this works, then why not do it this way? Well, sometimes the margin can interfere with elements above it and this really isn’t the proper way to do it. But the solution is really simple. Just add position:relative; to “wrapper” in the CSS and then you can just position “right_block” the usual way.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#wrapper {
width:800px;
height:500px;
background:#ccc;
margin:auto;
position:relative;
}
#right_block {
width:100px;
height:200px;
background:#222;
position:absolute;
left:600px;
top:50px;
}

That’s all there is to it. This is one of those things that really needs to be taught to web designers just starting out. And setting the wrapper div’s position to relative is also part of the solution to pinning the footer div to the bottom. Here’s our HTML:

1
2
3

Now we want to pin “footer” to the bottom of “wrapper” and maybe the page height varies from page to page on our site and we don’t want to have to set it’s position on every page. It’s really easy to do:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#wrapper {
width:800px;
height:500px;
background:#ccc;
margin:auto;
position:relative;
}
#footer {
width:800px;
height:60px;
background:#555;
position:absolute;
bottom:0;
}

“Footer” will be pinned to the bottom because we’ve set the “wrapper” div’s position to relative and “footer” to absolute. But what positions it at the bottom is bottom:0; That’s all it takes. Now the “footer” div will be at the bottom no matter what the parent div’s height is.

CSS positioning can be frustrating when you’re just starting out. But once you know tricks like this, it makes the temptation to use tables for positioning a lot less. With CSS3 looking like it’s going to be supported in Internet Explorer 9, tables for layout is going to limit the features you can use in your design. And when it’s this easy to solve some of the problems people seem to have with CSS positioning, there’s really no reason to ever use tables to layout your website.

Tags: css, html, positioning
Posted in HTML/CSS | No Comments »

HTML5 is becoming the ultimate PR war

June 28th, 2010

I actually saw a tweet the other day that said “IE9 is going to be awesome”. Really? I think IE9 is going to be leaps and bounds above IE7 and IE8 but I wouldn’t describe it as awesome. Yes, some of the demos Microsoft as on their IE9 demos are pretty interesting but in a case of some good PR, they’re only showing the stuff that they know their browser will perform as good or better than the others guys with. I will give them credit though, unlike others, they are letting you compare IE9 to the other browsers.

But the problem with these showcases isn’t, in Microsoft’s case they’re just showing things they do well or with Apple’s, forcing you to use Safari. It’s the fact that they’re really just showing what you can do with JavaScript and with CSS3. Sure, the HTML5 canvas tag is what removes the need for something like Flash Player to create most of these things, but is it really an HTML5 demo if you just add a canvas tag and then have hundreds of lines of JS? Isn’t it more of a JavaScript demo?

What’s really going on here is all the different browser makers are saying, “Hey, look what you can do with our browser! Aren’t we awesome? Tell all your clients to use our browser because of the cool stuff you can build in it.” But that’s not going to matter, because when Microsoft shows off IE9 doing something that Chrome and Firefox can’t, then for us in the web community, we just say, well, I can’t build something like that because only IE9 users can see it. Web developers are only going to build what can been seen or used in every browser.

Google is taking the right approach with the HTML5Rocks website, it’s not really a showcase site, it features tutorials and a code playground. One feature I really like is the site shows what browsers the tutorials will work in and I was surprised to see some that worked in all five major browsers.

Simply put, Microsoft’s IE9 Test Drive site is telling the web community that IE isn’t going to suck as bad anymore. And they’re wrapping the message in HTML5. Internet Explorer has been so far behind the other browsers for so long, that I think Microsoft realized their browser was really close to becoming irrelevant and they needed to do something. So they took a page out of Apple’s book and ran with the HTML5 is going to change everything idea. But you have to give Microsoft some props, at least they let you compare their demos in every browser, especially considering they do come up behind some of the others in some tests.

Tags: CSS3, HTML5, javascript
Posted in HTML/CSS | No Comments »