CSS tests FAQ

Here are some FAQs about my tests.

1. What are "real tests"?

   The word "real" comes from www.hixie.ch/advocacy/testing-methodology where Ian Hickson explains in great details all possible combinations of tests. My tests focus on the "real world coverage", that is, some of the possible combinations of CSS features normally used for building a layout. Real tests fall usually in the category of "advanced tests" (W3C terminology). They are not minimal test cases, but they may be used to build these ones.

2. Is the CSS code used in your tests valid?

   Yes, except the "Feel Like Lynx" demo, where I use -moz-binding in order to stop the scrolling behaviour of the marquee element in Firefox. This is a good example of user stylesheet.

3. I've seen your tests with Mac and Linux. They are pretty different. Why?

   That's probably due to the different screen resolution. Consider the fact that in some tests I use the Ahem font (www.hixie.ch/resources/fonts), so for a correct view you should install this font first.

4. Why IE is not reviewed?

   Because IE (version 7 and lower) is affected by the hasLayout property. That means that IE has two different layout engines. hasLayout affects most of the CSS properties used in these tests (float, positioning, etc.). When IE drops its support to this property, it will be inserted in the browsers list.

5. But IE is the most used browser on the Web!

   I'm not interested in the campaigns pro/anti Microsoft's IE. What's more, I'm not interested in any kind of test that shows only the bugs of one browser.

6. You should not ignore the fact that IE has so many bugs...

   That's true. But if you take a closer look at the site of Gerard Talbot (http://www.gtalbot.org/) you'll probably notice that also other browsers have al least one or more bugs. Take for example this test: http://www.css-zibaldone.com/test/css21/floats/advanced-layout-10/ If you point IE7 to that URI, you'll see an horizontal scrollbar that should not be there. The interesting point is that also Netscape 7.0 had the same problem with this kind of layout. Time passes, browser change and their CSS support improves. It's only a matter of time.

7. Are you aware that doing so your tests are not so "real"?

   Maybe they are not "useful" from the "copy-and-paste" point of view, since they are all prototypes that should be adapted to your own needs. But, as I believe, you are an intelligent and skilled person who knows how to make them work also in other scenarios, so you won't have any kind of problem with these tests. For example, the first thing you could do is to remove the XML prologue in order to prevent IE6- from switching to quirks mode. Then you might always use the conditional comments for the debugging, giving IE its own code. Remember that almost all IE6-'s rendering bugs depend on having or not having layout. See http://www.satzansatz.de/cssd/onhavinglayout.html and http://www.positioniseverything.net/ for further details.

8. Maybe neither a browser developer would find your tests useful. Are you aware of that?

   Perfectly aware. I'm not so conceited ^_^. I know also all my limits, mainly those concerning the lack of precision in using a scientific method. Anyway, I like to share my little knowledge with other people. That's all.

9. Why do you use XHTML 1.1 and serve it as text/html?

   That's because IE7 (and lower) doesn't support any kind of XML-based MIME Type. I don't want to prevent IE's users from viewing my tests. It's a matter of accessibility.

10. Coming to accessibility, your tests don't look so accessible...

    Yes, but this is not intentional. I'm really concerned about accessibility problems. In fact, on my site I use only a color contrast approved by the Colour Contrast Analyzer of the W3C. As said before, my tests are only demos, and obviously I'll have to change my approach if I want to use them for some live projects. For example, in my image map I've used an ordered list to respect a progressive enumeration of the links. That's fine for screen readers and textual browsers. But using 'display: none' inside the list items is not so fine, so this is a thing that should be changed.

11. So what a browser should do to pass these tests?

    A browser should take the provided images as a reference. Obviously there could be some differences, mainly those concerning the user interface and the environment. For example, Safari has a different rendering of some form elements. That's not important. Anyway, a browser should *not* break the layout. That's important.

12. Where does your inspiration come from?

    Mainly from real features that I've seen on the Web. For example, the "CSS Button" demo comes from an image found on the W3C site. The "Foo Fighters" demo comes instead from an LP cover of my CDs collection. Building such layouts is a challenge to me.

13. When I change the screen resolution or change the font size, your demos are sometimes destroyed. Is this normal?

    Yes. My starting screen resolution is 1024x768, so it's absolutely normal that a browser has to change its rendering when this or other factors are modified by the user. It doesn't mean that the test fails under such conditions.

14. Is the XHTML code valid?

    I use a local validator to check if my pages are valid, since my site is static and I have to upload the new pages every time. However, there could be some discrepancies, especially between the declared encoding (UTF-8) and some characters used in the code. This is a trivial thing to fix. Simply, validate every page, note the errors occurred and fix them.