Archive for the Category 'css'

Compatibility mode and Targeting IE with valid CSS selectors

I caught a link to Microsoft breaks IE8 interoperability promise an article written by Opera’s CTO, Hakon Lie.

Daniel Klima’s comment caught my eye, so I thought I might respond here in addition to writing a comment over here. At the time of this post, my comment hasn’t yet been approved by moderators of theregister.co.uk

And it is needed as hell,since soem [sic] servers will send IE7 CSS to IE8,which causes IE8 to render page incorrectly.Daniel Klima

9 times out of 10 i have no need in my projects for IE conditional comments. Outside of the additional HTTP request loading an additional file brings, why add ANY browser specific code to a document? If you’re using IE CSS filters, then sure, use conditional comments and don’t break your validation, but unless you’re forced in some way to use some old proprietary-to-IE scripting or styles, there’s no point.

A star shines less brightly

That star (*) that we’ve relied to heavily upon to override ones own css with additional rules aimed at forcing weak and non-standards-compliant browsers to render content in a way that satisfies the ego’s of creative directors everywhere isn’t totally burnt out, but it’s on it’s way to becoming history.

I put together a little test to see what rules IE8b2 renders and ignores using selectors that won’t invalidate you CSS. You can view the remarkably simple test here: ie8csstest

What this means

  • If you are currently targeting IE6 with the * html hack, it won’t break your site if you run it in IE8.
  • If you are currently targeting IE7 with the *:first-child+html hack, it won’t break a site in IE8 either.

Neither rule break css validation, IE8b2 in standards mode ignores both rules (but renders IE7′s rule in compatibility mode), everyone is happy, and “servers don’t send the wrong CSS to the browser”.

So what’s up with this broken looking button/icon?

Compatibility and Standards modes can be toggled with a small button that appears to the right of the location bar. If you are viewing a file locally using file:// the button is missing, so I have no idea what mode local files are rendered with. For local testing, a locally running server is required such as xampp or something similar.

Standards mode is default

Compatibility Mode Button - Off

Off

This is the compatibility modes button. Though it’s not remarkably clear as to what it is, or what state it represents, when it is in it’s “not selected” state, it means the browser rendering pages in Standards mode.

Compatibility mode

Compatibility Mode Button - Off

On

When the button appears to be depressed, the browser is rendering pages in Compatibility mode. Which due to my test’s results, is the equivalent of IE7 mode.

A wee bit o’ standards added to IE8b2

IE8 beta 2 was made available yesterday. Many folks have already grabbed a copy and started playing and testing, some even read the release notes. PPK has even already updated his CSS compatibility table, that man is on the ball.

The additional standards and CSS support are of course noteworthy

CSS Expressions is no longer supported in Internet Explorer 8 Standards mode

CSS Expressions is a proprietary extension to CSS that has a high performance cost. (CSS Expressions is also known as “Dynamic Properties.”) Starting with Internet Explorer 8 Beta 2, CSS Expressions is no longer supported in Internet Explorer 8 Standards mode. CSS Expressions is still supported in Internet Explorer 7 Strict mode and Quirks mode for backward compatibility.

Alternative style sheets

Internet Explorer 8 Beta 2 now supports alternative style sheets as specified by HTML4 and by CSS2.1. You can access the alternative styles that are defined by the Web page author by using the Style menu under the Page menu or under the View menu. You can use the No Style option on either menu to disable all author styling.
Windows Internet Explorer 8 Beta 2 Release Notes

That’s the end of the good news, here’s (some of) the rest…

That’s all well and good, but it turns out, that there are a ton of other issues, that despite this release being a beta, I still feel are a bit rediculous…

JScript errors may occur when you upgrade from Internet Explorer 6 on Windows XP or on Windows Server 2003

Do not upgrade from Microsoft Internet Explorer 6 to Internet Explorer 8 Beta 2 on a system that is running Windows XP or Windows Server 2003. A rare installation issue may occur in which Internet Explorer may exhibit false JScript errors and an inability to add Favorites or Web Slices.

To work around this issue, uninstall Window Internet Explorer 8 Beta 2, install Internet Explorer 7, and then upgrade to Window Internet Explorer 8 Beta 2.

Windows Internet Explorer 8 Beta 2 Release Notes

Being required to install an interim version (IE7) to upgrade from IE6 (which so many folks are of course still unfortunately running) to avoid erroneous reports of JScript errors (which will of course halt the execution of pretty much any JavaScript/JScript app from running is absurd.

And this one is just downright unacceptable.

You are prompted to continue installing Internet Explorer 8 Beta 2 if you previously installed Internet Explorer 8 Beta 1

On a computer that is running Windows XP, you install Internet Explorer 8 Beta 1 and then install Windows XP Server Pack 3. Then, you try to install Internet Explorer 8 Beta 2. When you do this, you receive the following message:

Install Internet Explorer 8

Are you sure you want to continue installing Internet Explorer 8?

Setup has detected that you’ve installed a new service pack for your operating system since installing a previous version of Internet Explorer 8. After completing this installation, you will not be able to uninstall Internet Explorer 8.

You can click the ‘OK’ button to continue installing Internet Explorer 8 Beta 2, but you will not be able to uninstall it later.

To work around this issue, and to be able to uninstall Internet Explorer 8 Beta 2 later, click the ‘Cancel’ button and do the following before installing Internet Explorer 8 Beta 2:
• Uninstall Windows XP Service Pack 3
• Uninstall Internet Explorer 8 Beta 1
• Install Windows XP Service Pack 3
• Install Internet Explorer 8 Beta 2

Windows Internet Explorer 8 Beta 2 Release Notes

I was never able to actually install SP3 on my last XP laptop. My first attempt threw an error at the very end of the installation process, after over one hour, and then it took another 45 minutes to “undo” the installation attempt. Being optimistic, I tried it twice, totally over 3 hours of time wasted. So theoretically, if someone had installed SP3 after installing IE8b1, it could be a multi hour process just to make sure that a web browser could at some point be uninstalled in the future. It takes less time to install the full Adobe Creative Suite than a service pack. C’mon now, this is just dumb people.

How is it possible to measure a few positivities for developers when the new issues regarding security, usability, and system stability for a general user are so great? I can’t. Though some folks are jumping up and down, the low adoption rate of IE7 has shown us that the additional support for standards in this new version is theoretically exciting, but the fantasy of being free of IE6 and onto a standards based world in the next few short years is exactly that, a fantasy.

Read the full release notes here: http://support.microsoft.com/kb/949787

I tend to run beta’s of everything… but for this one, I’m not going to let it run anywhere other than in it’s own instance of XP in VMWare.

Still hiring developers at Ultra16

originally posted here http://www.krop.com/jobs/48c5y/

Client-side developer (mid-level or wizard)

Lemme break it down for you

  • Love what you do, we do and that’s why we’re here.
  • Be great at what you do, we try our best to be great, so it’s fair to ask it of those we work with.
  • Never claim you know it all, unless I’ve bought a book with your name on it.

We’re not just looking for a specific skill-set, it’s all about your smarts, personality, and what you can bring to the table.

So let us know if you can answer a few of the following, or have any other interesting stuff notched on your belt:

  • Do you know all the basic standards compliant, unobtrusive, semantic and accessible stuff?
  • Can you tell us what browser likes *:first-child+html ?
  • Know $()? can you .bind()?
  • Are you friends with designers? Did you used to be one?
  • Have you worked on the agency side before? If not, tell us why.
  • Solid knowledge of AS 2.0+ a plus
  • LAMP, .NET, or Rails. a plus

We are Ultra16, we have a big green wall, an office in NoHO, AirTunes, andoften hang out at the office just because we want to. We also have beenaround since the 90’s and work with clients who you’ve probably heardof.

To apply just hit us up at humanresources@ultra16.com with your resume, some links to your work, a code sample if you feellike it, and a paragraph or two about yourself (don’t be afraid to showyour personality)

IE7 Quirks

Max over at OpenLaszlo was writing about some browser/quirk detection that he put together for v4.0. He listed in his post a number of quirks for IE7, some of which I was aware of, and some I wasn’t.

  • Can’t set opacity on any div that contains <input type="text"/> or <textarea/> without getting nasty visual artifacts in the text field.
  • Must use the AlphaImageLoader if we want opacity to apply to a div and all its children.
  • AlphaimageLoader must have its src property set to the URL of an image to prevent a red x/missing image icon from appearing
  • AlphaimageLoader does not send onload/error events – instead we have to use the img tag mentioned above
  • IE 7 still has memory leaks for apps loaded in iframes
  • Empty divs with style.backgroundColor set appear ~10px tall unless they contain an img (for less than 2px tall) or have style.fontSize = '0px' applied.
  • IE does not support ' when setting a div’s innerHTML property
  • IE does not send onclick/onmouse* events for divs without a blank image attached

One of my favorite IE7 quirks has to do with z-index being overrided by the order in which the element appears in the DOM. If a div has a z-index of any positive number and it’s followed by a div with a z-index of anything less, and they are positioned in an overlapping manor, the div that comes second in the DOM appears in front of the div with the higher z-index value.

What are some of your "favorite" IE7 bugs / quirks? I’d like to put together a comprehensive list.

Progressive Enhancement, Accessibility, Semantics and Flash

This next monday On Monday October 2 I will be giving a presentation to the lovely folks at ULTRA16 on Progressive Enhancement, Accessibility, Semantics and also how to make it happen with Flash. After monday, the presentation will be available here for anyone who may have interest.

Similar Posts

Categories

Archives

About

Nater Kane is freelance developer and user experience & technology consultant based in Brooklyn, NY.

Nater's focus is to make the web a better place, one decision at a time.

He likes to spend time playing with his cats, riding bicycles around the city, working on his diesel vw rabbit or motorcycle, and enjoying a decent espresso.

RSS

Twitter » What I'm Up To

How I'm Social

Basecamp

Meta


Nater Kane naterkane personal http://www.naterkane.com LinkedIn Profile Web Technologist personal nater@naterkane.com 1978-09-12 voice 845.234.6698 | fax 707.922.0593
964 Flushing Ave. Brooklyn, NY 11206