My Docs
BlogGithubLinkedin
Cheat Sheets
Cheat Sheets
  • ๐Ÿ“‹Cheat Sheets
    • Files
    • Terminal Cheat Sheet
    • Flexbox Cheat Sheet
    • Common HTTP status codes Cheat Sheet
    • networking_cheatsheet
    • Regular Expressions Cheat Sheet
    • REGEX units Cheat Sheet
  • bash_cheatsheet
  • Google dork cheatsheet
  • Cheatsheet-v2
  • ๐Ÿ•ธ๏ธ๐Ÿ’ป ๐Ÿ’ป Javascript
    • JavaScript
      • Javascript Python cheatsheet
      • General
        • JavaScript Promise API Cheat Sheet
        • Chai.js
        • Canvas
        • ES6 EXPORTS
        • Asynchronous JavaScript Cheat Sheet
      • React
        • React Cheat Sheet
          • React Component Guide
        • React Patterns:
        • react-examples
        • React.js
          • Bootstrap
        • React.js cheatsheet 2
        • React-router
        • React.js (v0.14)
        • React.js
        • React Patterns:
      • โš–๏ธLibraries & Frameworks
        • LOADASH Cheat Sheet
        • sequelize_cheatsheet
        • Sequelize Cheatsheet
      • Node & Express
        • ExpressJS Cheat Sheet
      • CHEATSHEET
      • NPM Cheat Sheet
        • NPM Command Line Cheat Sheet
      • Function Context Cheatsheet
      • js-model
  • ๐Ÿ’ปCS-Concepts
    • Computer Science Concepts
      • Data Structures
        • The Queue data structure
        • Cheat Sheet for Beginners: JavaScript Data Structures Methods
        • MDN Web Docs Glossary: Definitions of Web-related terms \| MDN
        • Data Structures Cheat Sheet
        • The Tree data structure
        • An Executable Data Structures Cheat Sheet for Interviews
      • networking_cheatsheet
  • Tools
    • ๐Ÿ› ๏ธTools
      • VSCODE Cheat Sheet
      • Emmet
  • ๐Ÿ“ผGuides-Tutorials
    • Tutorials
      • React.js
  • JavaScript Arrays
  • editorconfig
  • AWS CLI
  • ES6 EXPORTS
  • Flynn
  • Github
    • Github
      • Github Cheat Sheet
    • git log
    • GITHUB Cheat Sheet
      • An Executable Data Structures Cheat Sheet for Interviews
      • graphs_cheatsheet
  • General
    • General
  • ๐Ÿ‘จโ€๐Ÿ’ป๐Ÿ‘จ๐Ÿ’ป ๐Ÿ‘จ๐Ÿ’ป ๐Ÿ’ป Programming Languages
    • ๐ŸPython:
      • Python
        • What is Python
      • Regex In Python
    • HTML
  • EC2 API tools
    • MARKDOWN
    • ๐Ÿง˜โ™‚ PSQL
      • POSTGRES
      • postgreSQL_cheatsheet
  • ES6 IMPORTS
    • bash_cheatsheet
    • cleancode
    • ๐Ÿ”จBash
      • Bash Cheat Sheet
      • Learn Bash Scripting: Bash Scripting Cheatsheet
      • Curl
      • Bash Shortcuts Cheat Sheet
      • SSH Cheatsheet
      • Linux
    • CSS
      • CSS
        • CSS Grid
        • cssnext
        • CSS Cheat Sheet
        • CSS Flex Box
        • CSS tricks
        • CSS selectors
        • cssnext
        • CSS background
        • CSS animations
    • Typescript
  • Computer Science Concepts
    • An Executable Data Structures Cheat Sheet for Interviews
    • graphs_cheatsheet
    • networking_cheatsheet
    • Firebase
    • networking_cheatsheet
    • ๐Ÿ›Heroku Cheat Sheet
    • Binary Tree
  • ๐Ÿ“šDocs
    • Docs
      • editorconfig
      • EC2 API tools
      • Asynchronous JavaScript Cheat Sheet
      • CHEATSHEET (3)
      • js-model
      • Emmet
      • Binary Tree
      • Python
      • Contributor Covenant Code of Conduct
      • networking_cheatsheet
      • Common HTTP status codes Cheat Sheet
      • AWS CLI
      • Linux
      • networking_cheatsheet
      • React Patterns:
      • MDN Web Docs Glossary: Definitions of Web-related terms \| MDN
      • JavaScript Arrays
      • Linux
      • Javascript Python cheatsheet
      • Cheatsheet-v2
      • Binary Tree
      • Heroku Cheat Sheet
      • Asynchronous JavaScript Cheat Sheet
      • Cheatsheet Compilation
      • AWS CLI
      • EC2 API tools
      • Common HTTP status codes Cheat Sheet
      • Firebase
      • The Queue data structure
      • Cheat Sheet for Beginners: JavaScript Data Structures Methods
Powered by GitBook
On this page
  • Selectors
  • Media queries
  • Properties
  • References

Was this helpful?

Edit on GitHub
  1. ES6 IMPORTS
  2. CSS
  3. CSS

cssnext

Variables

:root {
  --text-color: #30333a;
}
body {
  background: var(--text-color);
  background: color(var(--text-color) shade(30%));
}

Colors

a {
  /* Adjustments */
  color: color(red alpha(-10%));
  color: color(red tint(-10%));    /* lighten */
  color: color(red shade(-10%));   /* darken */

  /* Absolute */
  color: color(red alpha(50%));
  color: color(red hue(225));
  color: color(red saturation(100%));
  color: color(red lightness(50%));

  color: gray(33);       /* rgb(33, 33, 33) */
  color: gray(33%);      /* rgb(84, 84, 84) */
  color: gray(33%, 50%); /* rgba(84, 84, 84, 0.5) */
  color: #0000ff80;      /* rgba(0, 0, 255, 0.5) */

  color: hwb(90, 0%, 0%, 0.5);     /* like hsl() but easier for humans */
  color: hsl(90deg 90% 70%);       /* hsl(180, 90%, 70%) -- supports deg */
  color: hsl(90deg 90% 70% / 30%); /* hsla(180, 90%, 70%, 0.3) */
  color: rgb(30 60 90 / 30%);      /* rgba(30, 60, 90, 0.3) */
}

Mixins

:root {
  --centered: {
    display: flex;
    align-items: center;
    justify-content: center;
  };
}

.centered {
  @apply --centered;
}

Selectors

Nesting

.class-name {
  & .nesting { ยทยทยท }      /* direct nesting starts with & */
  @nest span & { ยทยทยท }    /* complex nesting */
  @media (min-width: 30em) { ยทยทยท }
}

Custom selectors

@custom-selector :--button input[type='submit'], input[type='button'];
@custom-selector :--enter :hover, :focus;
:--button { ยทยทยท }
:--button:--enter { ยทยทยท }

{: .-setup}

Future selectors

:any-link { ยทยทยท }         /* :link, :visited */
p:matches(.a, .b) { ยทยทยท } /* p.a, p.b */
p:not(.a, .b) { ยทยทยท }     /* p:not(.a), p:not(.b) */
a::before { ยทยทยท }         /* a:before -- for IE compatibility */
[frame=hsides i] { ยทยทยท }  /* [frame=hsides] -- but case insensitive */

Media queries

Custom media queries

@custom-media --viewport-medium (width <= 50rem);
@media (--viewport-medium) { ยทยทยท }

Media query ranges

@media (width >= 500px) { ยทยทยท }    /* (min-width: 500px) */

Properties

Property fallbacks

/* font-feature-settings fallback */
h2 { font-variant-caps: small-caps; }
table { font-variant-numeric: lining-nums; }
div { filter: blur(4px); }          /* svg filter fallback */
div { overflow-wrap: break-word; }  /* word-wrap fallback */

Autoprefixing

div {
  display: flex;
}
/*
 * display: -webkit-box;
 * display: -ms-flexbox;
 * display: flex;
 */

Reset

div {
  all: initial;
}

Sets animation, background, margin, padding, and so on.

References

{: .-one-column}

  • Based on cssnext 2.9.0.

PreviousCSS selectorsNextCSS background

Last updated 3 years ago

Was this helpful?

Also see .

colorme.io
http://cssnext.io/features/