CSS cheat sheet

README.md

prefers-color-scheme

body {background:white;}
@media (prefers-color-scheme: dark) {
  body {background:black; color:white;}
}

see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

@font-face

@font-face {
    font-family: 'agenda';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/67030/Agenda-Light.woff2') format('woff2'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/67030/Agenda-Light.woff') format('woff');
    font-weight:300;     /* normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900 */
    font-style:normal;   /* normal|italic|oblique */
    font-stretch:normal; /* ultra-condensed|extra-condensed|condensed|semi-condensed|normal|semi-expanded|expanded|extra-expanded|ultra-expanded */
}

responsive images

div {
  background-image:url("thekase-community-monkey-bg_320x.png");
  @media (min--moz-device-pixel-ratio:2), (-o-min-device-pixel-ratio:2), (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio:2)
    background-image:url("thekase-community-monkey-bg_640x.png");
    
  @media (min-width:480px)
    background-image:url("thekase-community-monkey-bg_480x.png");
    @media (min--moz-device-pixel-ratio:2), (-o-min-device-pixel-ratio:2), (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio:2)
      background-image:url("thekase-community-monkey-bg_960x.png");
      
  @media (min-width:768px)
    background-image:url("thekase-community-monkey-bg_768x.png");
    @media (min--moz-device-pixel-ratio:2), (-o-min-device-pixel-ratio:2), (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio:2)
      background-image:url("thekase-community-monkey-bg_1536x.png");
      
  @media (min-width:1024px)
    background-image:url("thekase-community-monkey-bg_1024x.png");
    @media (min--moz-device-pixel-ratio:2), (-o-min-device-pixel-ratio:2), (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio:2)
      background-image:url("thekase-community-monkey-bg_2048x.png");
      
  @media (min-width:1400px)
    background-image:url("thekase-community-monkey-bg_1400x.png");
    @media (min--moz-device-pixel-ratio:2), (-o-min-device-pixel-ratio:2), (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio:2)
      background-image:url("thekase-community-monkey-bg_2800x.png");
}

wide technique

<div style="padding:10px;">
  <div class="wide">cancel parent padding</div>
</div>

<style>
.wide {margin-left:-10px;margin-right:-10px; width:calc(100%+20px);}
</style>

index.styl

// see: http://codepen.io/bradfrost/full/HvBLc
sourceorder()
  display:table;width:100%; caption-side:top;
  .sourceorder-switch
    display:table-caption;
    float:none; //float is not allowed

// see: http://www.w3.org/TR/CSS2/sample.html
br-after()
  &:after
    content:"\A"; white-space:pre-line;

vcenter()
  height:100%; white-space:nowrap;word-spacing:-.25em;
  &:before
    content:"";display:inline-block;vertical-align:middle; width:0;height:100%;
  >*
    display:inline-block;vertical-align:middle; white-space:normal;word-spacing:normal;