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) );
}
PREPROCESSOR VARIABLES
CSS VARIABLES
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.
/* 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
Compositing
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
See the Pen GxlBm by Chris Coyier (@chriscoyier) on CodePen.
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.
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.
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.
This is a really cool tool that let's you live edit the polygon shape on an image to achieve anything you want
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.
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.
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%));
}
There are some cool new selectors that may end up being more widely used
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 {...}
*/
:required | :optional
Can target form fields based on whether they are required or optional
: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
@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;
}
}
Well apart from some browser support links if you want them