PostCSS and CSSNext

Custom selectors and properties

by Jeremy Armstrong

HTML

<div id="outer">
  <div id="inner">
    <div id="sibling"></div>
    <h1 id="header">
      Some Text
    </h1>
  </div>
</div>

PostCSS (Stage 0+)

#outer {
  box-sizing: border-box;
  border: red 1px solid;
  height: 200px;
  width: 400px;
  text-align: center;
}

#inner {
  border: blue 1px solid;
  display: inline-table;
  height: 196px;
}
    
#header {
  display: table-cell;
  border: green 1px solid;
  line-height: 1em;
  margin: 0;
  vertical-align: middle;
}