CSS3 Fun

Today I learned about two new CSS3 rules that both work in newish webkit (Chrome/Safari) browsers.  We can FINALLY vertically align elements in a div, without resorting to use/simulating of tables, by using box-sizing.  About freaking time.  And you can now also resize elements in the client.  I clearly need to read up more on what’s coming in CSS3…

Example (you'll need a newish webkit (Chrome/Safari) browser):
You can resize the div below – see how the image always stays centered?

Source:

<div style="display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: center; resize: both; overflow: hidden; width: 200px; height: 200px; background-color: black;">
<img src="http://www.appliedis.com/images/tagline_01.gif" style="max-width:100%; max-height: 100%">

IE9 Beta test scores against Underscore.js

Another new browser launch, and another obligatory proves-absolutely-nothing-definite/just-a-single-use-case performance test against the Underscore.js utility framework.

Previous tests showed that IE was gaining on the lead (Chrome), and that is still the case: As seen in the charts below, IE is sometimes faster, but still generally slower than Chrome (longer bars are better):

Again, this test proves very little, other than that IE9’s new Chakra JS engine is still slower than V8 for doing array iterations, and faster for mapping, getting property values, and creating list ranges.  IE9 has a number of features Chrome doesn’t have (yet) such as hardware acceleration (the IE Speed reader demo runs 790% faster in IE than in Chrome!) and ES property getter/setter standard compliance, just to mention two random ones…

IE9 beta is a HUGE step forward for IE.  Not sure if it will become my default browser, but this is at great day for the web.  Now if the EU and other governing bodies can just look the other way while MS quietly replaces all prior IE instances with IE9… ;-)