Bikeshedding CSS3 Property Alternative

bikeshedding CSS3 property alternative?

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>

Two inline-block, width 50% elements wrap to second line

It is because display:inline-block takes into account white-space in the html. If you remove the white-space between the div's it works as expected. Live Example: http://jsfiddle.net/XCDsu/4/

<div id="col1">content</div><div id="col2">content</div>

Hide elements, that overflows a fixed width element

See: http://jsfiddle.net/9Nh7t/

• Replace float: left, with display: inline-block.
• To prevent wrapping, add white-space: nowrap on the parent element.

To get rid of "the gaps" (visible here, for example), the easiest fix is to remove the whitespace from your HTML: http://jsfiddle.net/9Nh7t/2/

How to bottom justify inline elements of unequal height?

Starting from your second example..

Add vertical-align: bottom to div, see: http://jsfiddle.net/awkjj/4/

The simplest fix for the gaps is to remove the whitespace in the HTML: http://jsfiddle.net/awkjj/7/

If that's distasteful, there are other ways to remove the gaps.

HTML image bottom alignment inside DIV container

This is your code: http://jsfiddle.net/WSFnX/

Using display: table-cell is fine, provided that you're aware that it won't work in IE6/7. Other than that, it's safe: Is there a disadvantage of using `display:table-cell`on divs?

To fix the space at the bottom, add vertical-align: bottom to the actual imgs:

http://jsfiddle.net/WSFnX/1/

Removing the space between the images boils down to this: bikeshedding CSS3 property alternative?

So, here's a demo with the whitespace removed in your HTML: http://jsfiddle.net/WSFnX/4/

---

Related Topics