Articles by
Katy DeCorah

::selection

Using your cursor select this sentence. Notice how as you select the text a background color fills the space? You can change the background color and color of selected text by styling ::selection. Styling this pseudo element is great for matching user-selected text to your sites color scheme.

p::-moz-selection { color: red}
p::selection { color: red; }

Take note that the double colon is necessary in the syntax for this pseudo element, despite that other pseudo elements accept a single colon.

As seen above, you can style ::selection on individual elements. You can also style the entire page by dropping the bare pseudo element in your stylesheet.

::-moz-selection { background: yellow; }
::selection { background: yellow; }

There are only three properties that ::selection will work with:

  • color
  • background (background-color, background-image)
  • text-shadow

See the Pen ::selection tests by Chris Coyier (@chriscoyier) on CodePen.

If you try to style ::selection with a property that’s not on the list, then that property will be ignored. It may be tricky seeing background in that list because the property will only render a color when used on ::selection and it won't render a background image or gradient.

Also don't try this:

p::-moz-selection,
p::selection { color: red; }

When browsers find a part of a select they don't understand, they drop the entire thing, so this will fail all the time.

One of the most helpful uses for ::selection is turning off a text-shadow during selection. A text-shadow can clash with the selection's background color and make the text difficult to read. Set text-shadow: none; to make text clear and easy to read during selection.

See the Pen ::selection text-shadow by Chris Coyier (@chriscoyier) on CodePen.

At your own risk

Be advised that ::selection has been removed from the spec. It may not work reliably for all users.

Fancy ::selection

Paired with Sass, or any other preprocessor, you can make really cool effects with ::selection. Select the text in the demo below:

You might notice the effect is not so smooth in some browsers. Let's file that demo under: things that are possible, but probably just for fun.

Another dumb-but-fun little trick is revealing an image through selected text.

Additional Resources

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeOperaFirefoxIEEdgeSafari
49.5-9.62*9123.1

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
No11.5No4.46962

break-inside

Columns do a great job of flowing and balancing content. Unfortunately, not all elements flow gracefully. Sometimes elements get stuck between columns.

Fortunately, you can tell the browser to keep specific elements together with break-inside.

li {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

At the moment, the property universally accepts the values auto and avoid.

Use avoid on an element within a multi-column layout to keep the property from breaking apart.

Take one extra look at the syntax for this property as there’s some variation among the browsers.

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
          page-break-inside: avoid; /* Firefox */
               break-inside: avoid; /* IE 10+ */

The property takes after the page break properties and shares the same values. For now, Firefox uses page-break-inside.

See the Pen column break-inside example [CSS-Tricks] by Katy DeCorah (@katydecorah) on CodePen.

Related Properties

Additional Resources

Browser Support

Multi-column layout support:

Chrome Safari Firefox Opera IE Android iOS
Any 3+ 1.5+ 11.1+ 10+ 2.3+ 6.1+

column-rule

To make columns distinct, you can add a vertical line between each column. The line sits in the center of the column gap. If you’ve ever styled border, then you are ready to style column-rule.

.container {
  -webkit-columns: 2 400px;
     -moz-columns: 2 400px;
          columns: 2 400px;
  -webkit-column-rule: 1px solid black;
     -moz-column-rule: 1px solid black;
          column-rule: 1px solid black;
}

The property is shorthand for column-rule-width, column-rule-style, and column-rule-color, which is the same pattern as border and accepts the same values.

-webkit-column-rule-width: 1px;
   -moz-column-rule-width: 1px;
        column-rule-width: 1px;
-webkit-column-rule-style: solid;
   -moz-column-rule-style: solid;
        column-rule-style: solid;
-webkit-column-rule-color: black;
   -moz-column-rule-color: black;
        column-rule-color: black;

column-rule-width can be a length like 3px or a keyword value like thin.

column-rule-style can be any of the border-style values like solid, dotted, and dashed.

column-rule-color can be any color value.

Unlike column-gap, column-rule doesn’t take up space. If the column-rule-width is thicker than the column-gap then the rule will expand underneath the columns.


The vertical rule will only exist between columns that have content.

Related Properties

Additional Resources

Browser Support

Multi-column layout support:

Chrome Safari Firefox Opera IE Android iOS
Any 3+ 1.5+ 11.1+ 10+ 2.3+ 6.1+

Don't forget your prefixes!

column-width

When you want to keep your columns at a specific width, use column-width.

section {
-webkit-column-width: 200px;
   -moz-column-width: 200px;
        column-width: 200px;
}

The browser will calculate how many columns of at least that width can fit in the space. Think of column-width as a minimum width suggestion for the browser.

column-width is a flexible property. Once the browser cannot fit at least 2 columns at your specified width then the columns will stop and drop into a single column.

This property is also used in the shorthand for columns and can be used in tandem with column-count. When both properties are declared column-count is the maximum number of columns.

Values

You can set column-width to auto or a length.

Use auto if you are also using column-count or if you need to turn off the property. Think of it as a way of telling the browser to let column-count take the lead.

To specify the width of the columns, use a length greater than (or equal to) 0. You can use any CSS unit except for percentage.

Related Properties

Additional Resources

Browser Support

Multi-column layout support:

Chrome Safari Firefox Opera IE Android iOS
Any 3+ 1.5+ 11.1+ 10+ 2.3+ 6.1+

Don't forget your prefixes!

column-span

In a multi-column layout, you can make elements expand across the columns with column-span.

h2 {
 -webkit-column-span: all;
         column-span: all;
}

Assign column-span to an element inside of the multi-column layout to make it a spanning element. The multi-column layout will resume with the next non-spanning element.

The value of column-span can either be all or none.

Set an element with column-span: all to make it span the columns.

The value none for the property is the kill switch for a spanning element. You might use this when working with media queries to tell the spanning element to stop spanning.

See the Pen column-span example by CSS-Tricks (@css-tricks) on CodePen.

Related Properties

Additional Resources

Browser Support

Firefox does not support this column-span, but there are interesting workarounds.

Here's the support for Multi-column layout in general though:

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeOperaFirefoxIEEdgeSafari
5011.165101210

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
10.0-10.211.1all676962

Don't forget your prefixes!

column-gap

When working with columns, you might notice that between each column is a space, or gap. The browser sets the gap to 1em. Generally, 1em is a comfortable space between columns. If you find that the gap is too wide, or too narrow, you can adjust it with column-gap.

article {
  -webkit-columns: 2;
     -moz-columns: 2;
          columns: 2;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
}

The value of column-gap can be normal or a length.

The value of normal is 1em. As mentioned, 1em is approximately the default gap length. If you find that 1em, or normal, is the right gap length for you, then you can save yourself a rule by not setting column-gap.

The length value must be greater than or equal to 0. The length can be any CSS unit except percent.

Keep in mind that column-gap takes up space and will push the column content to fit the gap.

Related Properties

Additional Resources

Browser Support

Multi-column layout support:

Chrome Safari Firefox Opera IE Android iOS
Any 3+ 1.5+ 11.1+ 10+ 2.3+ 6.1+

Don't forget your prefixes!

column-fill

When you add height to a multi-column element, you can control how the content fills the columns. The content can be balanced or filled sequentially.

ul {
  height: 300px;
  -webkit-columns: 3;
     -moz-columns: 3;
          columns: 3;
  -moz-column-fill: balance;
       column-fill: balance;
}

This property is only available in Firefox. Firefox will automatically balance content in a height-constrained multi-column layout. The other browsers will always fill columns sequentially when given a height constraint.

To make Firefox behave like the other browsers, that is to fill columns sequentially, you can set column-fill: auto.

Values

column-fill accepts the keyword values balance and auto.

balance will fill each column with about the same amount of content, but will not allow the columns to grow taller than the height. You might find that the columns will come up shorter than the height as the browser distributes the content evenly horizontally.

auto will fill each column until it reaches the height and do this until it runs out of content. Given the content, this value will not necessarily fill all the columns nor fill them evenly.

It’s kind of like pouring juice into glasses. You can pour an equal amount of juice into each glass and find that you don't fill each glass to the top (balance). Alternatively, you can fill a glass to the top until it's full and repeat this until no juice is left. As a result, the remaining glasses may have less or no juice (auto).

See the Pen column-fill example [CSS-Tricks] by CSS-Tricks (@css-tricks) on CodePen.

Related Properties

Additional Resources

Browser Support

The column-fill keyword values specifically work in Firefox. They didn't work in August 2014 when this Almanac entry was originally written, but does when tested again in August 2015 (Chrome 44). During that testing, it seems that changing the value dynamically wouldn't take, you had to force a relayout.

Browser support for multi-column layout in general:

Chrome Safari Firefox Opera IE Android iOS
Any 3+ 1.5+ 11.1+ 10+ 2.3+ 6.1+

Don't forget your prefixes!

column-count

If you need an exact numbers of columns when designing a multi-column layout, use column-count.

.lead {
 -webkit-column-count: 3;
    -moz-column-count: 3;
         column-count: 3;
 }

Given the number of columns, the browser will evenly distribute the content in exactly that number of columns.

This property can also be used in the shorthand for columns and can be used in tandem with column-width. When both properties are declared column-count is the maximum number of columns.

Values

column-count can be auto or an integer.

Use auto if you are also using column-width. Think of it as a way of telling the browser, to let column-width take the lead.

The integer, also known as the number of columns, must be greater than or equal to 0.

Unlike column-width this property will hold the number of columns regardless of the browser width. This means that if you pulled up a 5-columned layout on your mobile phone, you will have a very squished 5-columned layout to navigate. column-count works best alongside column-width.

Related Properties

Additional Resources

Browser Support

Multi-column layout support:

Chrome Safari Firefox Work IE Android iOS
Any 3+ 1.5+ 11.1+ 10+ 2.3+ 6.1+

Don't forget your prefixes!

columns

With just a few CSS rules, you can create a print-inspired layout that has the flexibility of the web. It’s like taking a newspaper, but as the paper gets smaller, the columns will adjust and balance automatically allowing the content to flow naturally.

.intro {
-webkit-columns: 300px 2;
   -moz-columns: 300px 2;
        columns: 300px 2;
}

The columns property will accept column-count, column-width, or both properties.

columns: <column-width> || <column-count>;

Using both column-count and column-width is recommended to create a flexible multi-column layout. The column-count will act as the maximum number of columns, while the column-width will dictate the minimum width for each column. By pulling these properties together, the multi-column layout will automatically break down into a single column at narrow browser widths without the need of media queries or other rules.

A multi-column layout works great on block elements including lists to make a flexible navigation.

To further fine tune your multi-column layout, use break-inside on specific elements to keep them from getting stuck between columns.

Related Properties

Additional Resources

Browser Support

Multi-column layout support:

Chrome Safari Firefox Opera IE Android iOS
Any 3+ 1.5+ 11.1+ 10+ 2.3+ 6.1+

Don't forget your prefixes!

Guide to Responsive-Friendly CSS Columns

With CSS columns you can create a print-inspired layout with little added markup that can adapt beyond a fixed canvas. A supported browser will make calculations to wrap and balance content into tidy columns. If you're already working with a fluid layout, the columns will reflow automatically. With the right combination of properties, CSS columns can be an interesting layout option that is responsive-friendly while degrading gracefully.

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag