 landing in Google Chrome. I was using them before in some Firefox only projects and with support from Google Chrome, I'm sure I will be using them even more as there are a lot of customers who are fine with Firefox + Chrome only browser support for company internal applications.

In this post, I won't go into deep detail why custom properties are awesome and very powerful. If you never heard of custom properties or css variables before, I highly recommend reading 

Philipp Waltons post about CSS Custom Properties

. Besides the powerful feature like cascading the properties, custom properties also enables us to specify some kind of "public API" for our CSS components.

 there are easy ways to bind a component property to a element attribute or element class, but no easy way to bind to a custom CSS property. One possibility is to bind the 

 attribute, but as more properties get involved the component gets bigger and more complicated. This is where my Ember.js addon 

 comes in handy, it allows you to bind custom CSS properties just like attributes or classes.

Lets build a small progress-bar component using 

$ ember new example-app
$ ember install ember-custom-css-properties
$ ember generate component progress-bar

import Component from 'ember-component'

export default Component.extend({
  classNames: [ 'progress-bar' ],
  cssPropertyBindings: [ 'progress' ]
})

This is all we need, when we assign something to the 

 property on our component, it will be available as 

.progress-bar {
  border: 1px solid black;
  height: 24px;
}

.progress-bar::before {
  content: '';
  display: block;
  background: black;
  height: 100%;
  /* Multiply by 1% to cast to a percentage value, this way,
   * we only have to provide a numeric value for `--progress`. */
  width: calc(var(--progress, 0) * 1%);
}

And done! We now have a very simple progress-bar, which accepts a numeric 

 property and displays the current progress.

 will wrap any JavaScript number, CSS numeric value, the string 

 as they can't introduce any CSS XSS vulnerabilities.

 property to the progress-bar component, similar to how the 

I think there are many use-cases and possibilities with this addon from quite static components like my example to complex animated components. I'm really curious what you can build with this! :)

Using CSS Custom Properties With Ember.js

Sometimes in a web application, we need to mark a bit of content as loading.
Most solutions use some kind of JavaScript like 

, but what if we could only add a class to an element instead?

With IE 7 to 9 disappearing from the web, we can do this today with plain CSS using the 

 for the loading throbber.
The loading throbber will be centered using the CSS function 

/*
We set the element we are applying our loading mask to relative
*/
.loading-mask {
  position: relative;
}

/*
Because we set .loading-mask relative, we can span our ::before
element over the whole parent element
*/
.loading-mask::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.25);
}

/*
Spin animation for .loading-mask::after
*/
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

/*
The loading throbber is a single spinning element with three
visible borders and a border-radius of 50%.
Instead of a border we could also use a font-icon or any
image using the content attribute.
*/
.loading-mask::after {
  content: "";
  position: absolute;
  border-width: 3px;
  border-style: solid;
  border-color: transparent rgb(255, 255, 255) rgb(255, 255, 255);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  top: calc(50% - 12px);
  left: calc(50% - 12px);
  animation: 2s linear 0s normal none infinite running spin;
  filter: drop-shadow(0 0 2 rgba(0, 0, 0, 0.33));
}

<div class="loading-mask">
  <p>I'm waiting for something...</p>
</div>

: You cannot use this on elements which already define 

 pseudo-elements, as they might override each other.

That's it, there are certainly more possibilities than using a border or picture, try playing around a bit :)

: This work is licensed under the terms of the MIT license. For a copy, see 

CSS-Only Loading Mask

 allows you to group multiple selectors in one, reducing complexity.

Example which matches all links in any heading:

:matches(h1, h2, h3, h4, h5) > a {
  color: rgb(91, 164, 229);
}

h1 > a, h2 > a, h3 > a, h4 > a, h5 > a {
  color: rgb(91, 164, 229);
}

 is not yet officially supported in any browser, it is available as non-standard pseudo-class with 

With the new CSS Selectors Level 4 specification the 

 pseudo-class got updated and works now similar to the 

 pseudo-class, as it supports multiple selectors as arguments.

.foo:not(.bar, baz) {
  color: rebeccapurple;
}

.foo:not(.bar):not(.baz) {
  color: rebeccapurple;
}

 with multiple arguments isn't supported everywhere yet, it can be easily transpiled using something like 

The :matches CSS pseudo-class

 it is possible to use a maybe future standard feature of CSS called "

Using custom CSS selectors, repeated selectors can be aliased to a shorter pseudo-selector.

/* Define custom selector, note that they must be prefixed with :-- */
@custom-selector :--headings h1, h2, h3, h4, h5, h6;

/* Use custom selector */
:--headings {
  color: blue;
}

The custom selectors basically transform into 

 selectors, most
modern browser support some kind of 

 pseudo-selector.
But cssnext compiles them into simple selectors, supported by all browsers.

Styling checkboxes using custom CSS selectors

As a more complicated example, I'm going to show you how one might implement custom checkboxes or radios.

Implement custom checkboxes and radios for browsers which support 

 can be much more readable with custom selectors.

/*
Select radio and checkbox as :--checkbox, select both types as we will
customize both but style the radio a bit different later.
*/
@custom-selector :--checkbox input[type=checkbox], input[type=radio];

/* Only select radios which are customizable */
@custom-selector :--customizableRadio input[type=radio]:not(:checked), input[type=radio]:checked;

/* Checkboxes and radios are only customizable if `:checked` is supported */
@custom-selector :--customizable input[type=checkbox]:not(:checked), input[type=checkbox]:checked,
                                 input[type=radio]:not(:checked),    input[type=radio]:checked;

/*
Hide the radios and checkboxes by moving them out of the viewport,
some browsers behave weird if they are set to `display: none`
*/
:--customizable {
  position: absolute;
  left: -99999px;
}

:--customizable + label {
  position: relative;
  padding-left: 1.5em;
  cursor: pointer;
}

:--customizable + label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  border: 1px solid rgb(200, 200, 200);
  background-color: rgb(255, 255, 255);
  border-radius: 4px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* Make radios round */
:--customizableRadio + label::before {
  border-radius: 50%;
  top: -2px;
  left: 6px;
}

:--customizable + label::after {
  content: '\2713';
  position: absolute;
  top: -1px;
  left: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: green;
  transition: opacity 0.2s;
}

/* Use bullets for radios instead of the check mark */
:--customizableRadio + label::after {
  content: '\2022';
}

:--checkbox:not(:checked) + label::after {
  opacity: 0;
}

:--checkbox:checked + label::after {
  opacity: 1;
}

:--customizable:disabled + label::before {
  border-color: #bbb;
  background-color: #ddd;
}

:--checkbox:disabled:checked + label::after {
  color: #999;
}

:--checkbox:disabled + label {
  color: #aaa;
}

:--customizable:focus + label::before {
  border-color: color(green tint(20%));
  outline: 0;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px color(green a(60%));
}

:--customizable + label:hover::before {
  border-color: green;
}

Which can now be used with the following HTML markup:

<div>
  <input  id="checkbox1" type="checkbox">
  <label for="checkbox1">Checkme</label>
</div>

<div>
  <input  id="radio1" type="radio" name="radio" checked>
  <label for="radio1">Checkme</label>

  <input  id="radio2" type="radio" name="radio">
  <label for="radio2">Checkme</label>
</div>

Custom CSS Selectors

 to create stylesheets. One of my favorite features is the new 

While extremely powerful when used in combination with 

 function is still very useful even without them.

 function takes a color and can apply several "color modifier" or "color adjusters" to modify the given color.

body {
  background-color: color(#ffffff blackness(+ 5%));
}

 and adds 5% "blackness", this is equivalent to:

body {
  background-color: rgb(243, 243, 243);
}

 function everywhere a CSS color value is expected, from font color to background gradients, everything is supported.

A slightly more complex example using gradients:

#color-example {
  background: linear-gradient(to right, white, color(blue blend(lime 50%)), black);
}

As you can see, with the color function you now only need to define your base colors and can derive from them by using any "color adjuster" you want.
This also leads to more comprehensible stylesheets and less "magic" colors (similar to 

With an operator, adjust the red, blue, green or alpha channels of the base color.
Without an operator, set the red, blue, green or alpha channels of the base color.

rgb( ['+' | '-']? [<number> | <percentage>]{3} )
rgb( ['+' | '-'] <hash-token> )

Adjusts the base color in the red, green, and blue channels simultaneously.

 function don't seem to be working using cssnext yet, but I might be doing something wrong.

 function sets or adjusts the hue of the base color.

[saturation( | s(] ['+' | '-' | *]? <percentage> )
[lightness( | l(] ['+' | '-' | *]? <percentage> )
[whiteness( | w(] ['+' | '-' | *]? <percentage> )
[blackness( | b(] ['+' | '-' | *]? <percentage> )

Sets or adjusts the saturation, lightness, whiteness, or blackness of the base color.

To make colors simply lighter or darker, the 

 are the easiest way to achieve this. They work the same as blending either white or black.

blend( <color> <percentage> [rgb | hsl | hwb]? )
blenda( <color> <percentage> [rgb | hsl | hwb]? )

 mix the base color with the given color.

 respects the alpha channel of both colors (while 

 only preserves the alpha channel of the base color).

Finds a color that contrasts with the base color sufficiently to satisfy accessibility guidelines, using the definition of "contrast" given by the 

While I don't know any browser which supports the 

Modifying CSS Colors with the color() function

Centering content in CSS was always quite annoying and sometimes really painful. From abusing the 

 and even using absolute positioning with negative margins, every approach had its downsides and maintainability hell. Luckily with the new 

, centering and aligning objects is easy as pie.

For all the examples showed below, I'm going to use these basic CSS definitions, everything else will be inline-styles:

  .example-container { border: 1px solid black; height: 150px }
  .example-child { background: red; width: 50px; height: 50px; margin: 5px }

With Flexbox, it is really easy to center a child element, without even touching the childs styling. By just setting the 

, which aligns the containers content vertically, and 

, which aligns the content horizontally, to 

 we easily centered the child in our container.

It is also possible to horizontally align the child itself in the container.

This of course can be mixed, assuming we center by default on the container, we are able to align other items on top or bottom. By setting the childs 

 we align them on top / bottom, the values are called start and end because the Flexible Box Layout has the ability to change the order of items in a flex container.

More in depth documentation about Flexbox can be found on the 

Mozilla Developer Network - Using CSS flexible boxes

.
If you encounter browser incompatibilities there is a nice Github repository which covers a lot of Flexbox bugs: 

Centering and aligning with Flexbox

I recently came across several CSS-Units I didn't know about. So I compiled a little list of all the currently available units.

Here a list of all size related CSS-Units for 