Firefox 10 Released

Mozilla released Firefox 10 this morning.

Firefox has converted over to the Google Chrome release numbering, so browser versions aren’t as “major” anymore, but the new browser still brings some nice enhancements.

The biggest addition (especially for us web developers) is the addition of extra built-in developer tools (very similar to Chrome’s):

• Inspect tool for CSS
• Page Inspector (also like chrome, although it has a nice whole page highlight / dehighlight so you can see exactly what you are inspecting

Some other additions are:

• Forward button hides until you go back
• WebGL suppors anti-aliasing
• CSS3 3D Transforms are present
• Full Screen API (should be better for running web applications / kiosks)
• General Bug Fixes

I think it’s worth checking out, as this version will also be part of the ESR program (Extended Support Release).  That means it won’t be updated for another 42 weeks, to allow businesses to use the browser long term.

Tags: Browser, CSS, css3, ESR, Firefox, Firefox 10, WebGL

iPhone 4S: How’d Apple Make that Site?

Apple has a pretty cool web page for the iPhone 4S.  It’s not something you would expect to see on a web site.

When I first saw it, I had assumed they were all separate images being animated one at a time.  I know it had to be CSS3 doing the transitions, but didn’t realize quite how elegant the solution was.

@johnbhall does a great job illustrating Apple’s approach to making the site we see on the iPhone 4S page.  His example simplifies Apple’s approach a bit (imagine his example, but with multiple sprite images, one for phones, one for copy).

UPDATE

I took the original article creator at his word, but some things didn’t add up.

@johnbhall says that his example is jsut a demo, but he has the concept behind the iPhone 4S page entirely wrong.

How do I know?  It’s pretty easy…

› Continue reading

Tags: Apple, css3, HTML5, iPhone 4S, johnbhall

Windows 8: The Death of Flash?

Apple and Microsoft both have a thing against Flash.

Most of my clients ask for jQuery or other non-Flash alternatives (and so far, I haven’t ever really missed Flash).

Now it sounds like Windows 8 will officially not support browser plugins in IE10.

A huge push for HTML5 and CSS3 by Microsoft, we may also see Silverlight disappearing alongside Flash.

The big problem seems to be concerns for mobile platforms, as battery life is cited as a major reason (along with security).

Windows 8 is shaping up to be a bold move for Microsoft.  Will it make me an Apple user on my desktop?  Will Windows 7 become the new “Windows 98″ (people still never acknowledge Windows ME ever happened)?

Tags: Apple, css3, Flash, HTML5, Microsoft, Windows 8

jQuery and CSS3: Tutorial showing some Google+ Animation Code

I’ve been checking out Google Plus information, and ran across a blog that combined jQuery, CSS3 and Google Plus all in one.  Jackpot!

Srinivas Tamada writes, at 9lessons.info, Google Plus Style Animations with Jquery and CSS3.

You’ll notice the circle rotation animations aren’t handled in jQuery like we’re used to, but use the capabilities CSS3 has to animation on it’s own (the circle rolling animation is done by just toggling a class).

Easy to follow, great examples.

Tags: 9lessons, css3, Google Plus, jQuery, Srinivas Tamada

Firefox 5 Released

I had forgotten about Firefox’s promise to release browsers more rapidly (following the Chrome rapid release model).

Firefox 5 was released today.

Some exciting improvements in Firefox 5 (mostly just the CSS3 animations):

• CSS3 Animations
• Mobile Firefox supports WOFF fonts
• Security fixes (of course)
• Enhanced Canvas tag support (accepts more, and works better)
• HTTP request performance improvements
• MathML support for embellished operators

Firefox 5 feels more of a “Firefox 4.1″ from the UI perspective, but there are a lot of changes towards a more modern browser.

› Continue reading

Tags: CSS 3, css3, Firefox, Firefox 5, mozilla

CSS3 and HTML5 For the masses: HTML5Shiv and CSS3 PIE make it possible

Everywhere I look on the web (the web developer web that is) is CSS3 this, jQuery that, shadows, HTML5.

Such a tease, what about our minimum browser requirements spec?  Damn IE6 is yet again 10% of the target demographic.

Not only is IE6 the problem, but so is the most recent IE8, as well as IE7.  They just don’t support CSS3 and HTML5.

Now we have some solutions…

› Continue reading

Tags: css3, css3 PIE, HTML5, ie6, IE7, IE8, PIE, shiv, web developer

CSS3 Layout Structure

Looking over a few articles, I ended up on CSS Advanced Layout Module, a Working Draft for CSS3 on w3.org.

We’ve covered some changes to HTML/CSS parsing in IE8 that will make some standard web layouts much simpler to represent in CSS, CSS in IE8 will support “tables”, fixes problems in CSS.

The new document addresses, in a different method, the problem of laying out tables as most websites are built.

Again, standard CSS makes it difficult to allow text to push the template in the proper directions.  Pushing itself is fine, however the way the rest of the template adjusts to the content — normally doesn’t react as a end user would expect.

The new document details a way to dictate display in a template.

The first interesting point is the document proposes a way to define the rows in a display.  The example provided defines a container, DL, which has a display of “ab” “cd” (in that order).  This means that cell A is top left, B is top right, C is bottom left, and D is bottom right.  This makes life so much easier.  To follow, the elements inside DL are defined as, for example, “#sym1 { position: a}” and “#lab1 { position: b}”.  Suddenly tables are much easier to work with.

Secondly, this opens up functionality the draft has addressed.  The ability to change the display to move the document from 3 columns, to 1 column / 3 rows.  By defining “@media all and {max-width: 500px}” the draft identifies the ability to change the “ab” “cd” to “a” “b” “c” “d”.  Adjusting for a mobile browser, or other alternative browsers (maybe iframes friendly?).

Additional concepts addressed in the draft:

1. Overlapping divs with the earlier display methodology
2. Table like declarations of width, wrapping, etc

Tags: css3, display, div, HTML, layout, overlapping, Table, w3, w3c