http://stilbuero.de Klaus Hartl – Stilbüro - Klaus Hartl


Jump to: Search, Additional Information.


Archive for the 'CSS' Category

A quote from Dave Hyatt

“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…)

Tabs Plugin: More flexibility

Just a short note, I’ve updated the CSS for the Tabs plugin – because people did not stop asking – and tabs have a flexible width and height again. They still maintain a minimal width as well, so that tabs with short titles, as in the demo, will have the same width. Otherwise it would look a little cluttered (well, at least to me). I’m using a sprite technique for the different parts of the tab of course, thus only one image needs to be downloaded.

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

Dev.Opera

Via miscoded: Dev.Opera, a community resource site for developers is online. As one could expect from Opera there are already valuable articles online – for instance a very interesting one about Efficient JavaScript.

A smoother Thickbox (with less code)

Here’s an instruction on how to make the beautiful Thickbox even better. These things came to my mind while I was implementing Thickbox for Plazes. The result is a much smoother Thickbox with much less JavaScript code.

As time goes by

Wow, Shaun Inman comes up with a truly innovative idea for his blog: Things are “aging” over the time and this is communicated visually. 33306 single style sheets were required, one for each day of the year.

I’m impressed!

Flicker Fixed

Dan Popa found an interesting fix for the ever annoying flickering CSS background images in IE.

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.

IE’s universal selector is really universal

As it turned out, the universal selector is a little too universal in IE 7 (RC 1).

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.

Dude, where’s my WordPress theme?

Here it is. Finally I found the time to build my own WordPress theme. The theme sports clean, accessible XHTML delivered as XHTML 1.1 and application/xhtml+xml (as recommended by the W3C) to capaple browsers (EOMB) – because I can do it – and degrades to XHTML 1.0 compliant to the HTML Compatibility Guidelines in other ones. The layout is fluid-elastic, with min- and max-width (even in IE).

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!

Update: Added my hCard to the contact page.

PNG alpha transparency, fast and easy

Here’s another “fast and easy” installment: I wondered today, how to add PNG alpha transparency support to Internet Explorer the easiest way possible, without longish scripts and instead easily maintainable in a style sheet . This is not meant to spoil anyone’s good work and as you can see, the basic technique wasn’t discovered by me. It’s just an alternate and hopefully easier way to do it.

Acid2 test

Acid2 test
Acid2 test, originally uploaded by carhartl.

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

Navigate through posts



Klaus Hartl – Stilbüro is powered by WordPress, jQuery, XHTML, CSS and me.