Using Educational Content for Viral Marketing The dominance of search

Why 2010 is Going to be a Great Year for HTML/CSS Developers

With 2010 just getting started we’ve already seen many impressive developments in the world of HTML/CSS that have paved the way for a promising year for us HTML/CSS developers.

1. Google will stop supporting IE6 on March 1, 2010.

While Facebook, Youtube, Mobile Me, 37signals, and many other web application developers have already stopped supporting IE6 or at least strongly encouraged upgrades from IE6, there hasn’t been that final crushing blow to finally squash it out. With Google dropping support for IE6 in their Google apps we might finally see it. Only time will tell.

Not only does this decrease the cross browser testing headaches that we’ve all come to know, but it enables us to use some new css features that IE6 has been holding back.

  • Attribute Selectors
    • input[type=text]
  • Multiple Classes
    • one.two (ie6 would only read .two)
  • Sibling Selectors
    • li + li
  • Child Selectors
    • ul>li
  • :hover on any element
    • li:hover
  • :first-child psuedo selector
    • ul:first-child
  • background-attachment: fixed
  • min and max dimensions
1
2
3
4
5
6
#container{
min-width:400px;
max-width: 1500px;
min-height: 500px;
max-height: 2000px;
}

2. Firefox 3.6 was released on January 21, 2010.

While the world has had some really cool CSS3 support out of Safari 4 since February of 2009, and certainly there’s been some good things coming out of Firefox in 3.5 last year, Firefox 3.6 is bringing the Gecko browser engine up in line with Safari 4. We can now start using CSS gradients, multiple background images, and dare I say it, finally a good solution for real typography on the web through the WOFF open standard?

I personally am the most excited for CSS gradients to take off now that there are at least 2 major browsers supporting them. Here’s my technique for getting good looking results across all browsers.

1. Grab Modernizr and install it on your site.
2. Generate your css gradients and use the inplace of the css background-image attribute.

1
2
3
4
5
6
.myElement{
/*webkit*/
background-image:-webkit-gradient(linear,left bottom,left top,color-stop(1, rgb(118,118,118)),color-stop(0, rgb(77,77,78)));
/*Mozilla*/
background-image:-moz-linear-gradient(center bottom,rgb(118,118,118) 100%,rgb(77,77,78) 0%);
}

3. Make a background image like you normally would and apply it as descendent selector of .no-cssgradients, which Modernizr applies to the HTML element of any browser that doesn’t support them.

1
2
3
.no-cssgradients .myElement{
background-image:url(myimage.png);
}

VOILA! you’ve just reduced http requests in Firefox 3.6 and Safari 4 browsers, allowed some cool gradient scaling effects that can’t be achieved with just an image, yet you’ve still got a slick looking background gradient via an image in older browsers and IE.

3. HTML5 Video

Sure we’ve had the capabilities for this for a little while now, but in 2010 we’re starting to see it really come alive. Youtube and Vimeo are now allowing users to watch their video content, player and all without any browser plugins. Its far from perfect (link to why), but its getting close and I think by the time the year is out we’ll see HTML5 video become a commonplace rather than an experiment.

If you want to try it out yourself now its easy.
The following will give you html5 video in firefox, safari, and webkit.

1
2
<!-- Firefox 3.5 native OGG video -->
<!-- Safari / iPhone video -->

For a more detailed way of using html5 video that has fallbacks to quicktime try out the “Video for Everyone” Method.
Alternatively there’s the Sublime Video Player that adds a custom skin to the player controls.

4. Google Chrome

I think most everyone can agree that Google Chrome is a great browser, especially if it can tear away some of that IE6 and IE7 marketshare. At the end of 2009 we saw the official release of the Mac and Linux Chrome versions and on January 25 this year we saw Chrome 4.0 released for windows that brought suppoort for extensions, 100% padding of ACID 3, local storage, and speed improvements. There’s no doubt the browser is moving fast and its recent launches of Chrome for Mac/Linux and Chrome 4 will no doubt continue its growth in 2010.

Last 5 posts by steve

This entry was posted on Friday, February 5th, 2010 at 9:55 am and is filed under Code, browsers.. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

Leave a Reply