Now that CSS Custom Properties are a Thing, All Value Parts Can Be Changed Individually

Now that CSS Custom Properties are a Thing, All Value Parts Can Be Changed Individually

Go to Source

In CSS, some properties have shorthand. One property that takes separated values. Syntactic sugar, as they say, to make authoring easier. Take transition, which might look something like:

.element {
  transition: border 0.2s ease-in-out;
}

We could have written it like this:

.element {
  transition-property: border;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

Every “part” of the shorthand value has its own property it maps to. But that’s not true for everything. Take box-shadow:

.element {
  box-shadow: 0 0 10px #333;
}

That’s not shorthand for other properties. There is no box-shadow-color or box-shadow-offset.

That’s where Custom Properties come to save us!

We could set it up like this:

:root {
  --box-shadow-offset-x: 10px;
  --box-shadow-offset-y: 2px;
  --box-shadow-blur: 5px;
  --box-shadow-spread: 0;
  --box-shadow-color: #333;
}

.element {
  box-shadow:
    var(--box-shadow-offset-x)
    var(--box-shadow-offset-y)
    var(--box-shadow-blur)
    var(--box-shadow-spread)
    var(--box-shadow-color);
}

A bit verbose, perhaps, but gets the job done.

Now that we’ve done that, remember we get some uniquely cool things:

  1. We can change individual values with JavaScript. Like:

    document.documentElement.style.setProperty("--box-shadow-color", "green");
  2. Use the cascade, if we need to. If we set --box-shadow-color: blue on any selector more specific than the :root, we’ll override that color.

Fallbacks are possible too, in case the variable isn’t set at all:

.element {
  box-shadow:
    var(--box-shadow-offset-x, 0)
    var(--box-shadow-offset-y, 0)
    var(--box-shadow-blur, 5px)
    var(--box-shadow-spread, 0)
    var(--box-shadow-color, black);
}

How about transforms? They are fun because they take a space-separated list of values, so each of them could be a custom property:

:root {
  --transform_1: scale(2);
  --transform_2: rotate(10deg);
}

.element{
  transform: var(--transform_1) var(--transform_2);
}

What about elements that do have individual properties for their shorthand, but also offer comma-separated multiple values? Another great use-case:

:root {
  --bgImage: url(basic_map.svg);
  --image_1_position: 50px 20px;
  --image_2_position: bottom right;
}

.element {
  background: 
    var(--bgImage) no-repeat var(--image_1_position),
    var(--bgImage) no-repeat var(--image_2_position);
}

Or transitions?

:root {
  --transition_1_property: border;
  --transition_1_duration: 0.2s;
  --transition_1_timing_function: ease;
  
  --transition_1_property: background;
  --transition_1_duration: 1s;
  --transition_1_timing_function: ease-in-out;
}

.element {
  transition: 
    var(--transition_1_property) 
    var(--transition_1_duration) 
    var(--transition_1_timing_function),
    var(--transition_2_property) 
    var(--transition_2_duration) 
    var(--transition_2_timing_function),
}

Dan Wilson recently used this kind of thing with animations to show how it’s possible to pause individual animations!


Here’s browser support:

Green indicates full support at the version listed (and above). Yellow indicates partial support. Red indicates no support. See Caniuse for full browser support details.

Desktop

Chrome Opera Firefox IE Edge Safari
49 36 31 No 15 9.1

Mobile / Tablet

iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
9.3 37 No 56 57 52

Now that CSS Custom Properties are a Thing, All Value Parts Can Be Changed Individually is a post from CSS-Tricks

Go to Source

Google PageSpeed Insights Now Recommending Lossy Image Compression

Google PageSpeed Insights Now Recommending Lossy Image Compression

Go to sourceIt’s time to start optimizing your images for lossy compression if you haven’t already because Google PageSpeed Insights has quietly started recommending this form of image optimization. Google has updated the documentation for its popular pagespeed insights tool to include lossy image compression. Fortunately, you can compress the images on your WordPress website and go lossy in just […]

PWA Directory

Go to Source

The other day I was watching an interview with Ade Oshineye where he discussed his work on the PWA Directory at Google, a showcase of progressive web apps. And it’s pretty neat!

It lists a whole bunch of PWAs out there and you can filter them by Lighthouse metrics – that’s the auditing tool from Google that scores a web app and gives us developers the ability to improve them.

Direct Link to ArticlePermalink


PWA Directory is a post from CSS-Tricks

Go to Source

The Many Tools for Shape Morphing

The Many Tools for Shape Morphing

Go to Source

To no one’s surprise, I’m sure, there are lots of different ways to do the same thing on the web. Shape morphing, being a thing on the web, is no different. There are some native technologies, some libraries that leverage those, and some libraries that do things all on their own. Let’s look at some of the options (with demos) and weigh the advantages and disadvantages.

SMIL

The original, native technology for shape morphing is SMIL. We have both a guide to SMIL on CSS-Tricks, and an article talking about replacements for it, since it doesn’t work in Microsoft browsers and Blink threatened to yank it at one point.

I wouldn’t suggest doing important work in SMIL but it is OG shape morphing.

See the Pen Sitepoint Challenge #1 in SVG and SMIL by Noah Blon (@noahblon) on CodePen.

Our article How SVG Shape Morphing Works covers SMIL shape morphing in detail, and the demo above is from Noah Blon’s An Intro to SVG Animation with SMIL.

To get a feel for the must have same # of points thing, you might enjoy playing with Shape Shifter:

MorphSVG (Greensock GSAP Plugin)

Moving right along to probably the most robust possible option, Greensock’s MorphSVG is a powerhouse. Bear in mind:

MorphSVGPlugin is a bonus plugin for Club GreenSock members (“Shockingly Green” and “Business Green” levels). It’s our way of showing our gratitude to those who are fueling innovation at GreenSock.

Worth it. Just MorphSVG alone is amazing. Unlike almost any other shape morphing method, it can tween between shapes of any number of points. It does so performantly, in a safe cross-browser fashion, and gives you more fine grain control over how the animation goes down.

See the complex morphing happening here:

See the Pen Morphing SVG Slider – 20th Century Women by Sullivan Nolan (@nolakat) on CodePen.

If you’d like to play with MorphSVG, I created a drag-and-drop Pen to morphing between any two shapes (best results with SVG’s with viewBox="0 0 100 100" SVGs with just one <path>):

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

If you’re a user of Adobe Muse, you might be interested in the Muse Morph widget which combines Illustrator, Muse, and Greensock MorphSVG.

SnapSVG

SnapSVG’s animate() function will animate an SVG element’s properties, including path data. Codrops has excellent examples of this in action. Here’s a little movie showing some of them off:

SnapSVG is, in a sense, Raphaël’s older brother, which could do things like this:

anime.js

The newer anime.js library has shape morphing built in.

CSS

It’s a little hard to believe, but CSS is getting in on the shape morphing action! Eric Willigers, a Chrome developer, emailed me last year:

‘d’ has become a presentation attribute. This allows SVG path elements to be animated using CSS animations and Web Animations, with path(‘…’) keyframes.

I assume this is a spec change, so browsers other than Chrome will, presumably, start allowing this. For now, this works great in Chrome:

See the Pen Simple Path Examples by Chris Coyier (@chriscoyier) on CodePen.

SVG Morpheus

SVG Morpheus is a JavaScript lib entirely devoted to shape morphing. Here’s a great demo of it in action:

See the Pen Mobiltelefonens Evolution (SVG Shape Morphing) by Noel Delgado (@noeldelgado) on CodePen.

KUTE.js

There is an SVG plugin for Kute.js that allows for the animation of SVG properties, including shape morphing.

See the Pen Morph SVG with KUTE.js by thednp (@thednp) on CodePen.

The API gives you some control over the morphing, like how precise you want it to be and the ability to reverse the draw direction so different points match up to tween.

d3

d3, probably the biggest library out there for data viz folks, can also do shape morphing. Here’s a GIF recording of a demo by Mike Bostock:

There is also a d3 plugin called d3-interpolate-path that helps make it better:

Interpolates path `d` attribute smoothly when A and B have different number of points.

mo.js

“Motion graphics for the web” is the mo.js tagline, another newer library. Oleg Solomka (@LegoMushroom) has some incredible demos of what is is capable of:

See the Pen Mole :: property curves example by LegoMushroom (@sol0mka) on CodePen.

bodymovin

If you happen to be a video person before you became a web person (or you’re still both) perhaps you have experience working in Adobe After Effects, which is all about creating “incredible motion graphics and visual effects”. The bodymovin library exports After Effects into SVG, including plenty of hot morphing action. Here’s a great demo:

See the Pen svg jou jou monster by kittons (@airnan) on CodePen.


The Many Tools for Shape Morphing is a post from CSS-Tricks

Go to Source