Archive for March, 2008

Over the past couple of days, the IE Blog has become a hot bed of activity, with some readers complaining about recent “article floods”- at least it’s better than the drought we’ve had up until recently!

First off I have to congratulate IE – my personal opinion is that IE6 was pretty terrible and IE7 was a bit of a let down, but this time round they seem to have been keeping their ear to the ground in the web community and have now gone on to build a standards compliant (actually I’m not so sure about the ’standards-compliant’ part yet, as it’s only a Beta 1 and is currently pretty lacking) browser. There’s a history of many developers slating MS about not taking a proactive approach with regards to web standards; in fact, they’ve been taking an active role within many of the W3C WG’s (including chairing the HTML WG), and been working with WaSP along the way so kudos to them. As Dean Hachamovitch has commented in response to several posts, the IE team have submitted over 700 tests under a BSD license to the W3C “for possible inclusion in the official W3C test suite”.

Granted, they should have done all this with previous versions of IE but that’s another topic entirely…

First off before I inform you of some additional info IE have released; something that I came across when I was taking IE8 for an initial test ride which I found quite humorous, was that the Windows Marketplace site looks pretty badly broken in IE8 (notice the pic); either there are still major layout bugs in IE8, or that site was coded based on quirks in previous versions of IE – funny nevertheless.

Anyway, on to the new stuff – let me warn you first off, there is virtually nothing new that isn’t already in the CSS 2.1 Compliance whitepaper that I mentioned in another . However, details of pseudo-class support was something that the whitepaper left out, but they’ve now released some more information about those additions amongst other things:-

• Data URI
• Floats- it was always a given that what with all this standards compliancy talk, that the proprietary concept of Layout was going to be removed.
• Margin collapsing -previous of versions of IE had a fair few issues, but is now in line with the CSS 2.1 spec.
• :focus dynamic pseudo-class – in addition to the :before and :after pseudo elements (the page incorrectly describes these as pseudo-classes), :focus is now supported. It’s nice that this class has finally been given support, however I’d to see support for additional for more typographical pseudo-elements such as first-child, first-line and first-letter by the time IE8 becomes a public release candidate. EDIT: I’ve been doing some testing over at IE’s new test suite and found that it does support :first-child and :lang() – weird that IE haven’t mentioned this in their whitepaper?
• ‘overline’ text-decoration value - behaviour now conforms to CSS 2.1 spec.
• border-spacing
• z-index – IE8 now doesn’t treat the value auto as if it were 0 (zero); this was a bug in IE7.
• white-space – ‘pre-wrap’ and ‘pre-line’ values now supported.

Text Resizing

Currently (as of Beta 1) IE8 still doesn’t resize text that is sized using a pixel value, which is very frustrating – text resizing of fixed size values should certainly be implemented within the next couple of betas.

Up until now I’ve been impressed by Firefox for several reasons; what with it’s once pioneering level of standards compliancy I’ve found it a great platform to preview my sites on, going with the principle ‘code for FF, hack (workaround) for IE’. A biproduct of FF’s success has resulted with the guys at IE pulling their finger out and .

But recently however, I’ve become a bit discontent with it; as far as I’m concerned it’s lagging behind the competition somewhat.

In a , I investigated its latest nightly build and compared it to the competition- I found the results to be surprising. Using CSS.Info’s Selector Test, the latest nightly at that time only passed 36 out of the 43 tests, compared to Opera 9.5 Beta and the latest Webkit nightly with both of them passing all 43 tests. Being an advocate of progressive enhancement, I try and use these cutting-edge selectors wherever possible in my projects (nth-child rocks!). But with FF now having inferior CSS support, I need to move on to using another browser.

Really the only thing that was stopping me using another browser was FF’s superb Firebug. Opera’s David Storey has been recently mentioning on his blog about a current Opera project codenamed Dragonfly. Both Opera and David are being very secretive about what it actually is and the secrecy surrounding it has sparked much discussion in the web community as to what it could be- kudos to David and the Opera guys for building this hype; as far as I’m concerned it’s a breath of fresh air for vendors to be generating this kind of hype surrounding a product release.

I’m with the majority here, by thinking it’s probably some neat web developer tool – if this is the case, I’d switch to using Opera as my main browser immediately, saying goodbye to Firefox for good.

After browsing Eric’s site the other day, I came across a thread notifying readers that he had put together an amended reset stylesheet to help in the battle for cross browser compliancy. A List Apart also describes the same solution in more detail.

One thing that caught my eye was a declaration that Eric had input on from Paul Chaplin. The purpose of this particular declaration was to remove the quote marks that standards compliant user agents automatically generate around a Q tag using the :before and :after pseudo elements; the author then has a ‘blank canvas’ to work with where he/she can manually input the relevant ampersands into the markup.

Although this method does mean that cross-browser compatibility is achieved, it is by no means an elegant solution. Yes, there is simply no other way to achieve this in IE6/7 but think about this; after reading the W3C guidelines concerning the Q tag, you’ll see it mentions that it is the user-agent’s responsibility “… that the content of the Q tag is rendered with delimiting quotation marks”. The fundamental problem I have with Eric’s method is that you are having to use a fairly advanced pseudo element and property(that only user agents that abide by the Q element spec support) to go and remove their correct default behaviour- in a nut shell, bringing standards compliant browsers inline with IE6/7 when it should be the other way round.

I’d personally not use such a style reset, but be more in favour for ignoring IE6/7’s needs for authors to include additional markup in the form of ampersands, and rather include a conditional IE style declaration that indicates to those IE6/7 users that it is indeed a short quote – perhaps italic font style? Think of it as an element of progressive enhancement if you will.

A few hours ago, the guys at IE released the first beta of IE8. First off, it was a surprise to me that they decided to release it before SxSW; also because only a couple of days ago they released details on how they reversed their initial decision regarding the proposed opt-in standards compliancy mode.

After frantically copying over a Parallels base image to create a test bed soley for IE8, I installed it – the UI looks virtually exactly the same as IE7, with the notable addition of an ‘Emulate IE7′ button (more on IE7 emulation in IE8) and the address bar highlighting the domain name (I’m guessing to try and combat phishing attacks).

While I think it’s great that MS has bitten the bullet and , I wonder how much this new IE7 emulator feature will actually be used. Take this example for instance- the average joe uses IE8 to visit a site and notices that the site’s layout is broken, since it relies on IE7 quirks. Is the user really going to think, “Oh yeah, the site looks broken as the developer who built it has coded it with only IE7 in mind, so I’ll use the IE7 emulator – that’ll work.” Of course they won’t; they’ll simple get discontent and leave the site. My personal opinion is that this new emulator function is a half-hearted attempt by MS for them to be seen to be proactive about backwards compatibility, what with all those millions of sites that rely on IE7’s buggy CSS implementation (not to mention IE6). Similarly, developers who have coded a site with only IE7 in mind will probably not be ’savvy’ enough to even be aware of the new proprietary meta tag that switches IE8’s rendering to ‘IE7 mode’.

In terms of CSS, their really isn’t too much additional support which is disappointing to see, after all the buzz the IE guys created about passing Acid2; yes, it does for me (although a lot of people are noticing it doesn’t for them), however after carrying out some provisional tests using CSS3.Info’s Selector Test it’s frustrating to see that only 14 out of the 43 selectors passed (yes, you read that number correctly!). The press release on IE’s blog which accompanies the news does however mention quite clearly to expect “full CSS 2.1 support in the final IE8 product“. After all, considering that this version is indeed a public beta, I would have liked to have seen more CSS support out of the box.

Something that has been bugging the web community up until now is that MS hadn’t released any details to date as to what support IE8 will include for CSS3. However, after trawling through MSDN I came across a whitepaper detailing CSS 2.1 Compliance. In this paper, it mentions that while one of IE8’s main goals is CSS 2.1 compliance, it is also forward looking to CSS3. It goes on to mention, that IE8 “hopes to implement some of the most requested CSS3 features by web developers and designers”.

Peter G beat me to it, by posting on the CSS3.Info site regarding CSS improvements in IE8. He did however, miss out some notable new properties- they include:-

• Generated content (including ‘counters’)
• Outline
• New ‘display’ values (supports all ‘display’ values as per the CSS 2.1 spec)
• Box-sizing (utilises new IE-specific ‘-ms-box-sizing’ until spec has been further clarified)
• Writing-mode

One nice little feature they’ve added with developers in mind is the first installment of “… great, built-in developer tools” – again, they promise more is on the way.

Webslices are another new feature debuting in IE8; they’re basically portions of arbitrary websites to which a user can subscribe to. The HTML annotations for which Webslices relies on, are derived from the hAtom microformat.

Update: Since publishing this article, MS have released a new document outlining planned CSS3 support in the public release candidate of IE8; I also discuss this document in .

Yesterday, Dean Hachamovitch announced that IE8 will, by default, interpret web content in the most standards compliant way it can. This decision is a change from what they announced initially which prompted a huge amount of feeback (good and bad) within the web community.

Dean goes on to mention that the change of heart was due to MS recently publishing a set of and suggesting that “…IE8’s default is a demonstration of the interoperability principles in action”.

Full blog post

With the closing date for developers able to feed back to the CSSWG regarding it’s revised charter being only a week away, a few of us at CSS3.Info are discussing among ourselves about what we would like to see in CSS3.

Whilst I have no real hands-on experience of developing on mobile platforms, I’ve been doing quite a bit of research on the subject recently, particularly with regards to proposed CSS3 support. With regards to Media Queries, I think we can take it as a given that FF Mobile (proposed release to follow general release of FF3) will support at least the relevant part (in relation to mobile environments) of the module. It would be a fairly regressive step for FF Mobile to rely on conventional methods of stylesheet designation. However, I’ve tested some simple, relevant Media Queries in the latest nightly FF 3b Pre4, and as of yet there’s no support for them, which is slightly worrying if they are to stay in line with what their other vendors are using (supported by Opera & Safari) – FF needs to get a move on! With the recent surge of the iPhone etc, I deem this module to be of the upmost importance.

My personal opinion is that the W3C were right in leaving out Text Level 3 out of their Snapshot; I think a lot of these properties (text-shadow, word-wrap) should have a pretty low priority – I feel there’s far more pressing modules (Advanced Layout etc) to get out the door first. It seems that developers at Firefox are taking a similar stance to mine – View the bug status.

I’d like to see the Backgrounds & Borders module to be formalized, prioritising the ‘background-size’ property at least. I can see the obvious benefits to using this property in combination with SVG’s, to create a more flexible alternative to using the ‘box-shadow’ property – multiple backgrounds would be cool too.

The Basic UI module includes some innovative yet practical properties that should be implemented – the one I deem most important is ‘box-sizing’, for obvious reasons of using borders in conjunction with fluid width elements.

I’ve finally succumbed to the wonders of CMS’s for blogging, and now I have made the switch, I don’t know why I didn’t sooner! Wordpress is a breeze to mod on a theming level – all in all, it took me around 10 hours to theme it into what it looks like now from it’s standard off-the-shelf theme.

In terms of CMSs I’ve a good deal of experience dealing with Drupal theming; granted, Drupal is a far more complex CMS distribution and leaves Wordpress (more of a blog anyway) in the dark when it comes to expansion capabilities. But seriously, Wordpress is sooo easy to theme.

Read the rest of this entry »

I recently published an article on CSS3.Info about a new technique I devised for creating tooltips using CSS3. The method uses the :before (or :after) pseudo element combined with the :hover pseudo class.