MelangeCSS Reference

Current Version: 1.0.0-RC5

Display ( High Contrast )†

Handles basic dispaly properties other than Flexbox. Flexbox is part of the Flexbox grouping.

Properties

Appearance

Setting appearance to 'none' is useful to create accessible but visually pleasing form elements.

appearance-none-hc
Appearance None
 
.appearance-none-hc {
  appearance: none;
}
appearance-auto-hc
Appearance Auto
 
.appearance-auto-hc {
  appearance: auto;
}
Display
db-hc
Display Block
 
.db-hc {
  display: block;
}
db-hc
db-hc
db-hc
di-hc
Display Inline
 
.di-hc {
  display: inline;
}
di-hc
di-hc
di-hc
dib-hc
Display Inline Block
 
.dib-hc {
  display: inline-block;
}
dib-hc
dib-hc
dib-hc
dn-hc
Display None
 
.dn-hc {
  display: none;
}
dn-hc
dn-hc
dn-hc
dfr-hc
Display Flow Root / Clearfix
 
.dfr-hc {
  display: flow-root;
}
With display: flow-root, the black box is safe.
 
Without display: flow-root, the black box contains only pain.
 
Screen Readers

For helping with markup needed for screen readers that you may not want shown to users using visual browsers

sr-only-hc
Screen Readers Hide in browser UI
 
.sr-only-hc {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
undo-sr-only-hc
Screen Readers Undo sr-only, e.g. at a different breakpoint
 
.undo-sr-only-hc {
  position: static;
  padding: 0;
  margin: 0;
  clip: auto;
  white-space: normal;
  width: auto;
  height: auto;
  overflow: visible;
}
Table Display
dt-hc
Table Display Table
 
.dt-hc {
  display: table;
}
dtc-hc
Table Display Cell
 
.dtc-hc {
  display: table-cell;
}
dtrow-hc
Table Display Row
 
.dtrow-hc {
  display: table-row;
}
dtrow-group-hc
Table Display Row Group
 
.dtrow-group-hc {
  display: table-row-group;
}
dtcolumn-hc
Table Display Column
 
.dtcolumn-hc {
  display: table-column;
}
dtcolumn-group-hc
Table Display Column Group
 
.dtcolumn-group-hc {
  display: table-column-group;
}
collapse-hc
Table Display Border Collapse
 
.collapse-hc {
  border-collapse: collapse;
  border-spacing: 0;
}