Search code examples
cssw3cpolyfillsshim

bikeshedding CSS3 property alternative?

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

Solution

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