Anne van Kesteren

CSS: hacking around

Everyone knows, HTML can be used correct and incorrect. On the current web we can see more incorrect usage than correct usage of HTML. I was wondering if CSS can be used incorrect, since it is 'only' about style. I will give you an example of complete incorrect usage of CSS, but it is not the kind I'm looking for:

p#footer{
 content:"(c) Limpid 2004"; /* markup: <p id="footer"/> */
}

It's the more tricky things, like:

ul#nav li{
 margin:0;
 padding:0 0 0 1em;
 background:url(/img/circle.svg);
 /* instead of 'list-style-image:url(/img/circle.svg);' */
}

Thanks to Robbert Broersma I know there is at least one advantage for using the method that was defined for this job: you can easily select the contents of the list item. Downside of the correct usage is browser support. Every browser does this different since it was not clearly defined how a browser should behave. I think that is still open and you need be a CSS specification editor to tell someone how it should be implanted (I can't find it anywhere, you?). The method which is cross browser (using background) feels a bit incorrect to me, though I have used it when I needed to make templates for a design company, since those needed to be 'pixel-perfect' with their Photoshop design.

Besides, when you want to use this for headers (sometimes a header just looks great with a little symbol in front of it) you need to use the display property to make it a list-item in order to use list-style on it. No problem you might think, but Internet Explorer doesn't support that (they don't get much further than 'block', 'inline' and 'none' as far as I know and even then IE makes a mess of it).

Is it ok to use such hacks? Probably a stupid question, since we need to think about browser support, but can we state that this is incorrect usage of CSS (using background and padding instead of list-style-image)? Or is it completely correct usage, since you may style things how you like it.

A more tricky thing is an addition from CSS2, display:table;. You might think this is added for layout purposes (and it was probably one of the reasons), but I still have a something inside me that says using display:table; for layout is wrong. It is CSS intended to style XML tables, that are not recognized by a browser as a table. And it is a nice standard way for browsers to support tables (browser style sheet...).

Lot's of people probably disagree with me and are waiting for times, when they can create three-column layouts using CSS tables:

body::outside{ /* I don't think we can use the HTML element, can we? */
 display:table;
}
body{
 display:table-row;
}
body>div{
 display:table-cell;
}

Quite easy, straightforward and with a minimum of DIV elements, do you want more? Do you have an opinion?

Comments

  1. I and then Mark Schenk submitted examples of this to CSS-D a few months ago.

    I described this experiment here: The World According to Table. M.

    Posted by Moose at

  2. My guess is your ‘worried’ feeling about display:table stems from the (common) wrong use of the table element. I think you should not be worried.

    display:table is used when you want an element to behave like a table element. That doesn't mean that the element becomes a table element, it only behaves/displays like one. That is exactly what CSS is meant for. That's how I feel about it, a feeling that is supported by the specifications:

    In a visual medium, CSS tables can also be used to achieve specific layouts. In this case, authors should not use table-related elements in the document language, but should apply the CSS to the relevant structural elements to achieve the desired layout.

    Posted by Robert at

  3. The root elements display does not have to be changed I just read: 17.2.1 Anonymous table objects. That is a really well-thought through part of the specification IMO.

    Posted by Anne at