The blogs are buzzing with news of the @media2006 conference in London. I was one of the lucky attendants last year and I can tell you it was worth every penny. The discussions were great, the people were great, the food was… well it was England after all!
Seriously, don’t hesitate to attend this conference. Yes, I’m talking to my fellow North American programmers. Cross the pond and get on with the show.
Big thanks to the @media crew for acknowledging the attendees of last year’s event by giving us a few bucks off the reasonable ticket cost.
— This was originally published on www.tdrake.net
Microsoft has just announced IE7 will handle the select input as a modern browser should. It will now allow developers to use z-index to avoid overlapping and perhaps more artistic forms. Søren Madsen put together the utopia of form design, something every designer should look at and dream of possibilities.
SELECT element in IE7 – An Overview
In IE6, the HTML SELECT element was implemented through the Windows Shell ListBox and Combobox controls. Some key features were missing in the old version of the SELECT element, such as proper support for z-index, TITLE support, and zoom. Web developers had to write complex CSS and scripts to workaround these issues.
In IE7 however, we re-implemented the SELECT element to make IE7 more standards-compliant. This new version does not use any Shell controls any more. In fact, it is implemented totally through the MSHTML framework, including styling, UI interaction, and rendering. Thus the SELECT element in IE7 is more of an HTML element than the former legacy control.
Form design is frustrating.
I’m also intrigued by the ability to use the title attribute on the select object. Normally, I would place the title on the label. However there may be times when the visual design requires hiding the label. Placing a title on the select would be a great way of letting people know the page may refresh or whatever action the select box leads to.
With rumors floating of an IE7 Beta2 developer release within a few weeks, we should begin looking for pages to test these new attributes on.
–This was originally published on www.tdrake.net
IE7 Beta 2 is now available for developers to begin testing. I’ve been suggesting on the web standards group mailing list that people need to begin looking beyond 2005 and start coding for IE7 and 2006. That doesn’t mean you design for IE7 and hack for Firefox. No, it means you can begin using more sophisticated CSS rules. Here’s a very brief summary of what I’ve seen with IE7 Beta 2 so far.
Rolling out IE7
Microsoft has an aggressive agenda to upgrade people from IE6 to IE7. By the end of Fall, we should see a significant percentage of our web site visitors using IE7 and by the end of the year, the majority of our traffic will be IE7. Those without IE7 are machines with illegal copies of XP, people with XP Service Pack 1, and those that don’t accept Microsoft service updates.
Use real CSS
If you are working on a site now, begin using real CSS.
- Use child selectors, first-child, attribute selectors, etc.
- Hover your list items and more. IE7 supports the hover pseudoclass on more than the link.
- IE7 offers full support of alpha transparent PNG graphics, so begin using them as well.
Forget what you knew about “* HTML”, those hacks now belong in a style sheet that is introduced via a conditional comment. They are gone, kaput, zilch. Sure, they’ll still work on IE6, but you’re going to have one heck of a nightmare keeping track.
I am a big fan of All that malarkey (Andy Clarke). However, his site is full of special rules for IE6 and its a great testing ground to see what IE7 chokes on and what it does as good as Firefox, Opera, and Safari. If your site is fairly hack free, you probably won’t notice a difference going from Firefox to IE7 Beta 2. Start hunting around and finding the errors.
What is still broken on IE7
There are two major issues that I have with IE7.
- No generated content. You can’t use CSS to add checkmarks to visited links, clearing containers spans, etc.
- Double float margin still exists. This can be fixed by adding display:inline to your floated objects when this problem occurs.
- While I haven’t been able to nail down the specifics, there seems to be some bugginess with positioning absolute/relative.
— This was originally published on tdrake.net
Microsoft has fixed much of the bugs that plagued IE6 and in the process removed the filters we used to target Internet Explorer in our CSS. As Lord God Martha would say, this is a good thing.
However, there will be a time when you need to send a rule to IE7 and not to IE6. Or perhaps you need to send a rule to IE7 and to IE6. I’ve put together a test page of IE6 hacks to see what IE7 doesn’t walk right past. I’m condensing the test page into the paragraph below.
Luckily, there is a loophole for us and we can use this for “offroad use only.” Why am I using this silly description? Because you and I need to move beyond hacks. Place browser specific (IE) in conditional comments or use a serverside script to place a class on the HTML or body (HTML class=”ie6″ ) to target these browsers in your main CSS file.
However, these hacks will let you develop your CSS on the fly and fix your issues before going the proper route.
Test Paragraph (condensed version of test page)
this is the test paragraph to see how IE7 will handle hacks
- IE7 Beta2 understands #wrap>p.borderfun and applies correct color.
- IE7 Beta2 ignores * HTML p.borderfun styles.
- IE7 Beta2 recognizes the * hack.
- IE7 Beta2 ignores the underscore hack.
- In Firefox, Safari, and Opera, you should see a red border. In IE7, you should see a black border. In IE6, you should see a pink border.
How to use this
If you need to send something to IE6 and nothing else: use the underscore attribute hack (_border:1px solid pink;) If you want to send something to IE7 AND IE6, use the *attribute hack (*border:1px solid black;). If you want to send something to IE7 and NOT IE6, use a combination (*border:1px solid black; _border:1px solid pink;).
A call to arms
Get out there kids and begin removing your * HTML rules. Place those suckers in a conditional commented CSS file or at least begin replacing them with the underscore hack. When it comes time to tune for IE7, you’ll have less work to do.
— This was originally published on tdrake.net