some links on css performance:

• Performance Impact of CSS Selectors
• Stop Using Poor Performance CSS Expressions
• Reflows & Repaints: CSS Performance making your JavaScript slow?
• Notes on HTML Reflow
• Opera on Repaint and reflow
• stubbornella's links
• page speedthanks aaron

Hope they come in handy...

PS any links you want to add, please put them in a comment, I will harvest..

a nice article by Jonathan Snook on Cross browser text rotation. Please go and read it the full article with examples and stuff.

All the needed code is here:

HTML

<div class="example-date">
  <span class="day">31</span> 
  <span class="month">July</span> 
  <span class="year">2009</span>
</div>

CSS

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

As I write this, I'm on my way to @media 2009 in London. This is my 6th visit to an @media event, including the to Ajax ones. I hope to see a lot of old friends and to make new ones.

I will try to update this post as the event goes on, so if your not there and want to know what happens: follow me on twitter to get short updates, a year ago I would have been live blogging but with this twitterthingy.....

Here are some photos, I took those instead of taking notes...

Inspired by a short conversation on twitter with Jeroen.

@jvwissen nah, it's bulshit to make a site look the same in every browser. users don't even know what they are, let alone that there diffs.

@wnas let's make sites that look completely different in every browser. :D

As I typed that tweet, I decided to do the exact opposite of the thing I do in normal life. Building a nice demo page to show how you can get a page to be different in every browser.

• Firefox 3
  -moz-column-count: 2;See the two columns?
• Opera
  background-image: url('img/operabg.svg');SVG background image
• Safari 4
  -webkit-border-bottom-right-radius: 15px;Look at the other rounded corners.
• IE 7
  No columnsAlso a bit different...
• IE 6
  2 colums thanks to extra div's with conditional comments.Also a bit different...

It uses conditional comments and browser specific css 3 implementation... If you have any suggestions on how to make the page even more different, please let me know on twitter or in the comments.

And in the unlikely event that your a company that wants their site different in every browser, please contact me, I would love to help you...

ps. the content is the communist manifesto, the new lorum ipsum...

bing.com is the new search engine of microsoft. It could be great with the amount of smart people at Microsoft and the amount of money thrown at it. The search results are what you expect from any decent engine (a search for wnas puts me on top). But what got me baffled is the markup of the page, which comes in at a hefty 26,708 bytes. And that for a page which has one input field and some links... Me as a front end developer, I'm baffled by that size and kinda insulted. I have to wait longer because they used front page or what ever, no way, not in 2009 I don't.

The real fun comes when you do a certain magic trick called view source. Most of the size of the HTML is being formed by inline css and javascript. There even is a table in there, along with inline script handlers...

1999 called and it want's it's markup back, guys.

The numbers

Still I get back to the size of the page, a whopping 26,708 bytes with all the bells and whistles. If you strip the javascript alone, you're still left with just 13,462 bytes.

Thats 13,246 bytes of inline javascript for you.

So no javascript solves the size and the waiting time? Not quite, we have inline css too. So if we get rid of that, we are left with 5,524 bytes.

So the css alone is 7,722 bytes.

It seems that were getting there, no. No way, the html is very much too much and can be optimised to I think half of it's current size.

That size being 5,524 bytes for HTML alone.

If they got the correct markup and got their CSS and JavaScript from external sources, the user would only had to download that once. And would get a better experience, because faster is better.

Conclusion

I think that the front end of this page was build by a .net developer, who thinks everybody got a broad band connection. Maybe that is the case, but I know that my patience is less now than it was when I had a 14k4 modem. If I have to wait, even for a few seconds, it's not my fault and the chance that I navigate away from that page would be greater now than it was back in the 14k4 days.

So Microsoft, please clean up your act and hire a decent front end developer. Maybe you could look at this awesome presentation from Nicole Sullivan at yahoo. It shows you how much speed matters.