2

Is there any alternative for bikeshedding CSS3 property? It doesn't seem to be supported yet.

Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265
Gajus
  • 69,002
  • 70
  • 275
  • 438
  • 1
    This property indeed exists: http://www.w3.org/blog/CSS/2011/03/15/resolutions_152 O_o – Pekka Jun 14 '11 at 21:14
  • It's been renamed again, but it's not in the `css3-text` document I linked. http://www.xanthir.com/feed/public-css-commits/?t=2011-06-03T13:58:11+00:00 – rockerest Jun 14 '11 at 21:18
  • Is it a general question or are you trying to do something with this property? – melhosseiny Jun 14 '11 at 21:25
  • 1
    I am specifically interested in `bikeshedding: collapse;`. – Gajus Jun 14 '11 at 21:44
  • 3
    I would like to have some of what the CSS guys must be smoking at their meetings. – Pekka Jun 14 '11 at 21:47
  • @Guy: What specifically are you trying to do with `bikeshedding: collapse`? – thirtydot Jun 14 '11 at 21:50
  • 1
    The problem occurs when there is `\r\n`. The line-break between the two inline elements creates a white space, which I am trying to remove. `bikeshedding` supposed to do that. Strange name, `bikeshedding`, eh? – Gajus Jun 14 '11 at 21:52
  • 1
    @Guy: I'm aware of a few ways to work around that. Can you make a [jsFiddle demo](http://jsfiddle.net/) showing a specific situation? Even if it is just two `span` elements. I just want to be sure we're on the same page here, thanks. – thirtydot Jun 14 '11 at 21:56
  • See the space between two DIVs http://jsfiddle.net/F3Mdd/ – Gajus Jun 14 '11 at 22:54
  • Name related to https://en.wikipedia.org/wiki/Parkinson%27s_law_of_triviality ? – Ciro Santilli OurBigBook.com May 13 '14 at 22:03
  • possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) – Ciro Santilli OurBigBook.com May 13 '14 at 22:31

4 Answers4

11

There's always the most obvious fix, which is to simply remove the whitespace in the HTML:

http://jsfiddle.net/F3Mdd/1/ - it's really easy, and it just works. From this:

<div>a</div>
<div>a</div>

to this:

<div>a</div><div>a</div>

Here's a more detailed answer.

To be honest, I always just remove the whitespace...

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
3

The white-space property

In CSS3, The white-space property is a shorthand for the white-space-collapsing (I guess bikeshedding means they don't know what to call it yet) and text-wrap properties. The white-space property is a CSS 2.1 property supported by most browsers and there are two values for it that collapse new lines:

  1. normal (The initial value).
  2. nowrap

But what does collapsing line feed characters mean?

According to CSS 2.1:

If 'white-space' is set to 'normal' or 'nowrap', linefeed characters are transformed for rendering purpose into one of the following characters: a space character, a zero width space character (U+200B), or no character (i.e., not rendered), according to UA-specific algorithms based on the content script.

According to CSS 3:

A zero width space before or after a white space sequence containing a newline causes the entire sequence of white space to collapse into a zero width space.

Reality:

Most browsers transform line feed characters into a space. So what you really want is to set the white-space-collapsing property to discard not collapse or to collapse and then add a zero width space character before the line break.

What to do till browser support

Remove white-space from your HTML document: 

<span>A</span>
<span>B</span>

To:

<span>A</span><span>B</span>

Or: 

<span>A</span><span>
    B</span>
melhosseiny
  • 9,992
  • 6
  • 31
  • 48
  • 1
    Actually, the second option presented would still result in a space between the A and the B. Just FYI. Good info though, thanks! ;) – CptRobby Jul 25 '13 at 18:08
  • You can move the whitespace inside the tags for readability: `AB – Killroy Feb 08 '17 at 19:37
2

Another approach is simply to wait for this CSS3 feature and remove the whitespace by Javascript until then.

http://jsfiddle.net/rT4Dy/2/

$('[data-bikeshedding="discard"]').each (function () {
  var node = $(this);
  node.html (node.find ('> *').detach ());
});
nik
  • 31
  • 2
0

If I'm understanding you correctly, you mean the text-spacing property.

As far as I can tell, there isn't a lot of support.

rockerest
  • 10,412
  • 3
  • 37
  • 67
  • The second link doesn't mention text-spacing, so I'm not sure how you came to the conclusion in the link text. – ikegami Jun 14 '11 at 21:31