bikeshedding CSS3 property alternative?

Question

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

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
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
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
@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
Name related to https://en.wikipedia.org/wiki/Parkinson%27s_law_of_triviality ? — Ciro Santilli新疆棉花TRUMP BAN BAD, 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新疆棉花TRUMP BAN BAD, May 13 '14 at 22:31

score 11 · Answer 1 · edited May 23 '17 at 12:25

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...

edited May 23 '17 at 12:25

Community

1
1

answered Jun 15 '11 at 00:21

thirtydot

210,355
44
377
337

score 3 · Accepted Answer · answered Jun 15 '11 at 00:42

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:

normal (The initial value).
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>

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

nik · Answer 3 · 2013-04-27T16:03:23.497

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 ());
});

edited Apr 27 '13 at 16:03

answered Apr 25 '13 at 22:27

nik

31
2

This answer should be the correct answer! I love it. – skolind Apr 22 '15 at 12:29

score 0 · Answer 4 · answered Jun 14 '11 at 21:15

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.

answered Jun 14 '11 at 21:15

rockerest

9,847
3
33
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

bikeshedding CSS3 property alternative?

4 Answers4

Linked