CSS Variables

CSS variables hold references to values you reuse throughout your stylesheet

This is done without preprocessors, it is directly used in your stylesheet

Set using this format

--property-name: value;
					

Follows the cascade and need to be scoped to an element first usually :root for base settings

Example of base settings

:root {
  --color-primary: #ff0000;
  --color-secondary: #cccccc;
}
					

To use these variables you need to use var()

:root {
  --color-primary: #ff0000;
  --color-secondary: #cccccc;
}

.headline {
  color: var(--color-secondary); 
}

.btn {
  background-color: var(--color-primary);
}
					

A property can contian more than one var function

:root {
  --color-bg: #3acec2;
  --color-bg-light: #009fe1;
}

header {
  background-image: linear-gradient( var(--color-bg-light), 
                                     var(--color-bg) );
}
					

CSS variables do things preprocessor variables can’t

CSS variables can be used inside of media queries unlike SaSS. Resulting in real time updating and more flexibility

:root { 
  --gutter: 0.5em;
}

.headline {
  margin-bottom: var(--gutter);
}

.col + .col {
  margin-left: var(--gutter);
}

@media (min-width: 576px) {
  :root {
    --gutter: 2em; 
  }
}

@media (min-width: 768px) { 
  :root {
    --gutter: 3em; 
  }
}
					

CSS variables behave like normal CSS properties so they can inherit, cascade and can be scoped to selectors

.btn {
  ...
  background-color: var(--button-bg);
}

.btn.callout {
  --button-bg: #ff0000;
}

.btn.info {
  --button-bg: #ffff00;
}
					

See the Pen CSS Variables buttons by steven hoskins (@hoskinshozzy) on CodePen.

Vars can even be updated inline

See the Pen inline css variables by steven hoskins (@hoskinshozzy) on CodePen.

Style elements based on where they are in the DOM. No need for descendant selectors (.banner > .btn {...}_

See the Pen variables on DOM poisition by steven hoskins (@hoskinshozzy) on CodePen.

Communicate between JavaScript and CSS, using CSS variables

See the Pen Example of Using JavaScript to Set CSS Variables by steven hoskins (@hoskinshozzy) on CodePen.

Where CSS variables don't work :(

/* selectors */
var(--button-info) {
  color: white;
  background-color: red;
}

/* property names */
.card {
  var(--color-primary): #ff0000;
}
/* media query expressions THIS SUCKS!!! */
@media (min-width: var(--break-med)) {
  ...
}

/* creating length values */
.box {
  margin: var(--gutter)em;
} 

/* but you can use this to set length values */
.box {
  margin: calc(var(--gutter) * 1em);
}
					

Blending and Compositing

Background-blend-mode

background: linear-gradient(#009fe1, #3acec2),
              url('bg.jpg') no-repeat;

  background-blend-mode: multiply;
					

See the Pen css blending by steven hoskins (@hoskinshozzy) on CodePen.

Blend mode values (same as photoshop)

Nice usage of screen for a typical desired header

mix-blend-mode

Blends the content of an element with any content beneath it

Example, combine 2 images

See the Pen mix blend mode two images by steven hoskins (@hoskinshozzy) on CodePen.

Example, give greyscale images colour with multiply

See the Pen css blend give greyscale colour by steven hoskins (@hoskinshozzy) on CodePen.

Knockout text effect (common request)

See the Pen knockout text css blend modes by steven hoskins (@hoskinshozzy) on CodePen.

Backdrop-filter

Not very well supoprted yet but can be played with in chrome if experimental platform features is switched on

example using backdrop-filter: invert(100%) blur(2px);

See the Pen css backdrop filtering by steven hoskins (@hoskinshozzy) on CodePen.

A good use case would be on modal views. Here the header blurs and has a hue change to give more emphasis to the modal.

See the Pen backdrop filter overlay by steven hoskins (@hoskinshozzy) on CodePen.

Could be used for activation or hover effects. Works with animation so could work well to get focus.

See the Pen animate filters css by steven hoskins (@hoskinshozzy) on CodePen.

CSS Shapes

Content no longer has to be rigid blocks!

You can use geometric shapes as CSS values and flow text around those shapes. (ah hem but has to be floated boo!)

Flow text around a circlular image using circle(). Also works with box-model (shape-outside: border-box;) which is much easier.

See the Pen css shapes text flow around circular image by steven hoskins (@hoskinshozzy) on CodePen.

More flexibility and power in using polygon(). With this you define polygon points and the text will flow around them points. For example the edge of a triangle:

See the Pen css polygon shape by steven hoskins (@hoskinshozzy) on CodePen.

Let's take it up a notch

See the Pen css polygon shape bramch by steven hoskins (@hoskinshozzy) on CodePen.

Great tool for editing CSS polygon shapes

CSS shapes editor for chrome.

This is a really cool tool that let's you live edit the polygon shape on an image to achieve anything you want

CSS Clip Paths

These are used to hide portions of an image, works in a similar way to CSS shapes

Using both clip-path and shape-outside you can get some cool layouts

See the Pen clip path and shape outside by steven hoskins (@hoskinshozzy) on CodePen.

Useful tool for creating clipping paths

https://bennettfeely.com/clippy/

Using clipping paths with percentage based co-ordintates are more flexible and responsive than other ways to create things such as slanted clipped hero images.

Colour Values

8 digit hex values

Allows you to now set RGBA values as hex values. So you can set alpha channels at the end

#RRGGBBAA

/* Transparent */
#2D5A7400

/* Opaque */
#2D5A74FF

/* example of 50% alpha */
color: #278DA480;

/* 80% alpha */
color: #278DA4CC;

/* 20% alpha */
color: #278DA433;

					

8 digit hex code values table

See the Pen XjbzAW by Chris Coyier (@chriscoyier) on CodePen.

Color-mod()

A new function that can take your colour and apply colour adjustments to it.

This is still only a working draft it can be used with Postcss, so can play in codepen for example

A good feature is that you can add multipe adjustments in one rule, and can even use your variables

.box {
  background-color: color-mod(
                      #278da4 /* modified color */
                      hue(+ 5deg) 
                      lightness(+ 15%) 
                      alpha(75%) 
                    );  
}

					

Using color mod with your base variables can create colour pallettes with ease and from a single colour! Then changing this base colour for something like themes you instantly get a whole new colour pallette

A useful tool for playing with this to create pallettes colorme.io

:root {
  --base: crimson;
  --base-dark: color-mod(var(--base) lightness(- 30%));
  --base-light: color-mod(var(--base) lightness(+ 25%));

  --complement: color-mod(var(--base) hue(+ 180deg));
  --complement-light: color-mod(var(--complement) lightness(+ 10%));
}

					

Selectors

There are some cool new selectors that may end up being more widely used

:matches AKA :any

Helps you write complex or descendent selectors a lot faster

:matches(.boxed, .modal, form) .btn {
  font-size: 1.25em;
}

/* normally written like so 
.boxes .btn,
.modal .btn,
form .btn { ... }

/* can use pseudo classes (making things like links quicker to style) */
a:matches(:hover, :focus, :active, :visited) {
  color: red;
}

/*
a:hover,
a:focus,
a:active
a:visited {...}
*/

					

Cannot pass pseudo elements (+, >, ~) inside the argument, but you can outside like so:

/* matches and adjacent paragraph */
:matches(img, p, form) + p {
  margin-top: 0;
}

/*
img + p,
p + p,
form + p {...}
*/

					

Optionality Pseudo-classes

:required | :optional

Can target form fields based on whether they are required or optional

Validity Pseudo-classes

:valid | :invalid

Can style live without JS on email field for example

See the Pen css validity pseudo classes by steven hoskins (@hoskinshozzy) on CodePen.

Check browser support for these new selectors without individually having to use can I use

https://css4-selectors.com/browser-selector-test/

Feature Queries

@supports = Native Feature Detection

Analyses whether the browser supports the feature and is written much like media queries. Then if it does the browser applies it if not the browser ignores this and applies your normal styles

This checks if the browser supports grid layout, if it does not then it will use flex as declared above

.main-content {
  display: flex;
  flex-wrap: wrap;
}
.box {
  flex: 1 280px;
  margin: 10px;
}

@supports (display: grid) { /* Grid Layout available */
  .main-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-gap: 20px;
  }
  .box {
    margin: 0;
  }
}

					

You can use multiple queries for features

This has good browser support and could be widely used now and in the future

@supports (writing-mode: vertical-rl) and (display:grid) {

  main {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-column-gap: 15px; 
  }

  h1 {
    justify-self: start;
    writing-mode: vertical-rl;
  }
}