Skip to content

Instantly share code, notes, and snippets.

@abernier abernier/README.md
Last active Oct 16, 2019

Embed
What would you like to do?
CSS cheat sheet

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>
// 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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.