• 200701 Mar

    My client wanted a page showing photographs of all their staff, and the design called for them to be semi-opaque against the page background, going fully opaque on mouseover, like so:

    opacity.png

    What would be the best way to do this?

    One would be to make an image sprite of the images two states:

    opacity_sprite.png

    And use it as background-image on the element, swapping to the other state on :hover. One small problem with this is that IE6 only supports :hover on the a tag; another is that because the results are being pulled from a database, you’d have to write a dynamic stylesheet as well, to call the swap on all staff photos.

    Another option would be to create two separate images of the original, one for each state, and write a Javascript function to swap them over on mouseover.

    There are other solutions as well, but none of them are the best way; the best way is to place them in the page with img, then use the CSS3 opacity declaration for the switch, as so:

    img { opacity: 0.6; }
    img:hover { opacity: 1; }

    Two short lines of code, much quicker, the same effect without any of the hassle.

    As with the rest of CSS3, however, one big drawback: no native support in the IE family. It works on just about every other major browser, however.

  • 200616 Oct

    Last week we unveiled the CSS selector test over at css3.info. The test consists of over several hundred separate test cases, each designed to test a certain aspect of the compatibility of your browser with the CSS selector standards. Today we are going to expand the number of test cases to 578.

    The new tests have a large impact of the results. There are quite a few browsers that used to pass with the old test cases, but fail with the new test cases. Generally we added test cases for the following situations:

    • Dynamic updates: If you update the DOM using Javascript this should also affect the CSS selectors. Take for example the :empty selector. It only matches elements without any children. If you dynamically add a new child it should not longer match that particular element.
    • White space in attribute selectors: There are four different ways an attribute selector could be written: [attribute=value], [attribute =value], [attribute= value] and [attribute = value]. We now test if your browser supports all of these variants.
    • Case sensitivity of the value in attribute selectors: The previous version of the test contained a test case for determining if the value of an attribute selector was compared in a case-insensitive way. However this was not complete. We only tested the align attribute – which should be treated in a case-insensitive way. Only Konqueror failed this test. But there are also a lot of other attributes which should be tested in a case-sensitive way. Now almost every browser fails this test. More information about this case-sensitivity can be found on rakaz.nl: CSS selector bugs: Case sensitivity

    We also changed the way results are reported. Instead of just showing whether a selector failed or passed, we now detect if the selector is fully supported, buggy, or not supported at all. This should give all of us a better idea about the state of the compatibility of each browser.

    Browser Version Supported Buggy Unsupported No. tests passed
    Internet Explorer 6 10 1 32 276
    Internet Explorer 7 RC 1 13 4 26 330
    Opera 8.5.4 18 3 22 317
    Safari 2.0.4 21 7 15 336
    Firefox 1.0.8 24 9 10 352
    Opera 9.0.2 25 3 15 346
    Safari r16925 25 9 9 355
    Firefox 1.5.0.7 26 10 7 357
    Konqueror 3.5.4 37 6 0 570

Page 5 of 6:

Hosting by: