“The sad truth about CSS3 selectors is that they really shouldn’t be used at all if you care about page performance. Decorating your markup with classes and ids and matching purely on those while avoiding all uses of sibling, descendant and child selectors will actually make a page perform significantly better in all browsers.”

(http://www.shauninman.com/archive/2008/05…)

Important to know is that this required an additional span element nested in the anchor element of a tab.

What bothered me was that when scrolling or resizing the browser window the Thickbox modal window gets moved to stay in the center, but that happens not smooth at all and with a little delay (after the resize/scroll events get fired that is).

So I changed the Thickbox CSS to use fixed positioning, starting with the modal window:

1. Change CSS to this:

   html, body {
       height: 100%;
   }
   
   #TB_window {
       position: fixed;
       top: 50%;
       left: 50%;
       ...
   }

2. Remove the scroll and resize event handler:

   $(window).scroll(TB_position);
   $(window).resize(TB_position);

3. Change the function TB_position to this:

   function TB_position() {
        $("#TB_window").css({marginLeft: '-' + parseInt(TB_WIDTH / 2) + 'px', width: TB_WIDTH + 'px'});
        if ( !(jQuery.browser.msie && typeof XMLHttpRequest == 'function') ) { // take away IE6
            $("#TB_window").css({marginTop: '-' + parseInt(TB_HEIGHT / 2) + 'px'});
        }
        TB_overlaySize();
   }

   It now pushes the modal window half of its width/height to the left/top from the middle so that it is exactly centered.

4. Fix our special friend IE 6 to emulate a fixed positioning:

   * html #TB_window {
        position: absolute;
        margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
   }

   (Based on http://www.howtocreate.co.uk/fixedPosition.html)

   I use the Star Selector hack to hide these styles from IE 7, which supports fixed
   positioning. Because this being invalid CSS, I recommend inclusion in an extra style sheet via Conditional Comments.

5. Smoooooth.

6. The same consideration applies to the overlay and the spinner. There is still some overhead to compute their dimensions and position depending on the state of the viewport.

   Use fixed positioning here as well and make the overlay 100% wide and high:

   #TB_overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        ...
   }
   
   #TB_load {
       position: fixed;
       top: 50%;
       left: 50%;
       margin: -50px 0 0 -50px; /* -height/2 0 0 -width/2 */
       ...
   }

7. Change TB_load_position(); to $('#TB_load').show(); and throw away

   function TB_overlaySize(){
       ...
   }

   and all references to it. Also remove

   function TB_load_position() {
       ...
   }
   
   function TB_getPageScrollTop(){
       ...
   }

   Nearly done!

8. The only thing we still need to do is to accommodate IE 6 with a Dynamic Property again:

   * html #TB_overlay {
        position: absolute;
        height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
   }

   And don’t forget to add * html #TB_load:

   * html #TB_window, * html #TB_load {
       ...
   }

Here’s a demo with all these modifications to the original. Try scrolling and resizing the window and you will see the difference. I’d really like to see that in a future version of Thickbox. Have fun!

I’m impressed!

There is also a fix that involves configuring your server, which I prefer, because the new solution relies on JavaScript.

Still it’s an amazing discovery and it’s very useful in cases you don’t have access to the server configuration. I really wonder why Microsoft kept that a secret for such a long time. Maybe there are some yet unknown side effects.

Via Ajaxian.

Some simple CSS like

body * {
    display: block;
    border: 1px solid;
    padding: .25em .5em;
    background: #808080;
}

with such HTML

<body>
    <p>
        ...
    </p>
    <!-- An HTML coment -->
    <p>
        ...
    </p>
</body>

results in 3 Boxes in IE 7.

Here’s my own test.

This opens the door for some new hacks and even an amazing technique to make the :before and :after pseudo-elements possible to some extend.

This technique would also make for a good clearing floats without presentational markup, as long as the clear property is applied (not tested).

Apart from that, this is not a minor issue. With such a parser bug the universal selector becomes useless or we the web developers are doomed to never use HTML comments again to be able to rely on this selector. I cannot believe that this “feature” will make it into the final release.

What’s next:

• I need to put in some Icons here and there. Maybe these? Done. Apparently.
• I will add style sheets for print and handheld.Done. Also available as alternate style sheets.
• I want to ajaxify the comments. I believe there are some plugins already, but I want to build my own of course (with jQuery).

Have fun!

An accordingly transparent PNG image, a transparent GIF image (Ugh, I thought I’d never had to use these again…) and the following snippet is all you need.

EOMB will render your beautiful PNG with the following, very simple HTML:

<img class="png" src="/path/to/your.png" alt="different story" />

IE needs to get some special treatment:

img.png {
    background-image: expression(
        this.runtimeStyle.backgroundImage = "none",
        this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
        this.src = "/path/to/transparent.gif"
    );
}

Though I said I wanted to avoid longish scripts, JavaScript (in disguise of Dynamic Properties) is still necessary.

this.runtimeStyle.filter = ... is to apply the appropriate filter for loading and rendering your PNG correctly. Note that the path to the PNG is read from the img element’s src attribute via this.src, so that when you have to change the path you do it once and only once in your HTML source and can leave the rest as supplied before. That’s why I used an expression for this at all and not simply the filter property.

The next expression replaces the PNG with the transparent GIF image so that the same PNG displayed by the AlphaImageLoader filter one level below shows up. This has to be done after we have passed the value of the src attribute to the filter.

Do not omit the first expression, although it seems useless! You would throw IE into an infinite loop loading the GIF over and over again. Don’t ask why, please… Even though I don’t like IE I don’t want to make it hang.

Important: IE 7 has native PNG alpha transparency support. You should use Conditional Comments to include the above style sheet in one or the other way (besides that your style sheet wouldn’t validate):

<!--[if lte IE 6]>
...
<![endif]-->

Some final notes:

• Of course you don’t have to rely on the class name "png". It’s just an example. You can use whatever selector you wantIE lets you use.
• If there is no JavaScript, IE simply renders your PNG image without alpha transparency.
• If JavaScript is turned on, but ActiveX not, you’ll get nothing.
• The AlphaImageLoader filter is supported in IE 5.5+/Win.
• A little demo is here.

One good browser (for web standardistas at least). Test yours.