What I Want From CSS3 - Part 3 | January 24, 2006

As you probably all know, the box model looks like this.

CSS Box Model

You start with the content area, then you have your padding and border, followed lastly by your margin. When debugging your code you can get an idea of how elements are interacting by giving them a border or a background colour. This will tell you what is happening with the space formed by the content area, padding and border, but gives you no information about the elements margins. There is simply no way to see what an elements margins are doing.

This is a big problem as margins can collapse with other margins, causing all kinds of weird and wonderful effects.

Margin Collapsing

I think two new CSS features would be extremely useful. Firstly I’d like to be able to add a margin-outline to boxes in order to show exactly how their margins are interacting. Secondly, it would be great to have control over margin collapsing, in the same way as you can control table border collapsing. So you could turn on and off the collapsing behaviour by doing something like this:


body {margin-collapse: none;}

p {margin-collapse: collapse;}

Now that would be cool

Posted at January 24, 2006 4:03 PM

Comments

Feaverish said on January 24, 2006 4:59 PM

Xyle scope shows you the margins (and padding) for any given element when you click on that element. See this page for more details.

Silus Grok said on January 24, 2006 5:03 PM

These are both great ideas.

I’d amend the collapse argument, however, to be able to collapse different sides {margin-left: collapse}, and to (though this isn’t fully hatched) “collapse” differently: collapse-average, collapse-greater, and collapse-lesser. These would, given two margins of 20px and 40px collapse to 30px, collapse to 40px, and collapse to 20px. The last of these being the default behavior (if memory serves…).

Beyond that, I would add another suggestion: WIDTH of an ELEMENT should = only the CONTENT AREA. In otherwords, unless I’m mistaken, the IE bug should be the standard.

Robin said on January 24, 2006 5:28 PM

Silus - I believe you’ve just described the W3C standard :) IE’s box model adds padding onto the inside of the specified width.

Scott Hughes said on January 24, 2006 5:49 PM

What I’d like to see from CSS 3 is a simple language with consistent and unified syntax and property names. Many of the new properties to CSS 3 seem redundant or unnecessary, and it’s becoming so convoluted that its complexity might end up discouraging the developers of our browsers from implenting everything it has to offer, thus undermining the purpose of the standard. (Yes, I understand the division into modules is intended to alleviate this effect, but even still, as I see it, several individual modules are unnecessarily complicated.)

Scott Hughes said on January 24, 2006 6:28 PM

I’ll elaborate on my point:

Your parent selector, Andy, is simple and elegant and insanely useful, and might possibly even remove the need for some existing CSS properties. However, exploding the number of different properties makes learning the language cumbersome, saying nothing for implementing it, so I don’t feel that introducing properties such as this is ideal at this stage. My preference is clarity and consistency (especially when it comes to browser implementations!) over feature-packed-ness, because I want the standard to gain more widespread use, in both browsers and among web developers, and I see that simplicity will facilitate this.

But for its optimisation issues, the parent selector would be all I’d need from CSS 3.

Benni Graf said on January 24, 2006 8:56 PM

Does it really make sense to add a declaration like “margin-outline” just for css-debugging? I don’t think so. The margin-collapse is a nice idea, though.

Andy Budd said on January 24, 2006 9:05 PM

Scott: Your right that CSS isn’t the easiest thing to learn, although I attribute a lot of that to inconsistent browser implementation. The addition of lots of new selectors and properties doesn’t aid learning, but I think the issue probably has more to do with poor documentation. The CSS spec is really a browser spec and it would be a much easier language to learn if there was clearer documentation. I think you are absolutely right that several of the modules are bloated and useless. Luckily (or unluckily) I doubt CSS3 will ever be fully implemented which makes the chance of a CSS4 look remote.

Benni: You’re absolutely right that “margin-outline” shouldn’t be added to the spec just for debugging purposes. Still, it would be quite handy :-)

Silus Grok said on January 24, 2006 9:38 PM

Robin: I want the padding inside the box, and the margin outside… the current standard is for padding to actually enlarge the box, which makes no sense. When I say that something is 20 ex wide, it should be that wide regardless of the padding I set.

Anyway… I digress.

James AkaXakA said on January 24, 2006 9:48 PM

Isn’t there already an ‘outline:’ thingy in css3?

Andy Budd said on January 25, 2006 12:19 AM

Yes, but that only outlines the area made up of the content and border. It doesn’t tae into account the margin as well.

arb said on January 25, 2006 3:33 AM

The margin-outline thing really doesn’t belong in CSS. If browsers had an option to turn margin-outlines on though, that would be a great help when debugging.

James AkaXakA said on January 25, 2006 1:12 PM

What? They made it a border for the border? Gah! That’s close to useless…

Bruno Girin said on January 26, 2006 10:24 PM

What I’d really like to have in CCS3 is relative directions in addition to absolute. Let me explain: if I have a bilingual site English/Arabic, I need the Arabic version, in terms of presentation, to be a mirror image of the English version, to follow the fact that in the html tag, I’ll have dir=”rtl” instead of dir=”ltr”. However, with CSS today, all properties that imply a direction are absolute: ‘left’, ‘right’, ‘top’, ‘bottom’. So to do my bilingual site, I need one CSS for left-to-right languages and one for right-to-left languages where all ‘right’ become ‘left’ and all ‘left’ become ‘right’. To have only one CSS, I would need relative position properties, like what you have in XSL-FO: ‘beginning’, ‘end’, ‘beofre’, ‘after’. The only way today to have one CSS for all languages, in this case, is to use tables for layout because tables are implicitely laid out relative to the dir attribute. And obviously everybody knows using table for layout is Evil.

James AkaXakA said on February 4, 2006 10:13 PM

Bruno, that’s a very good point! CSS’s left-top bias (the implementation of it anyway) has been a thorn in my side too.