small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

<a href="http://ift.tt/2qSVtEX">CSS-Tricks</a> | Dan Wilson 
CSS Custom Properties (perhaps more easily understood as CSS variables) provide us ways to make code more concise, as well as introduce new ways to work with CSS that were not possible before. They can do what preprocessor variables can… but also a lot more. Whether you have been a fan of the declarative nature of CSS or prefer to handle most of your style logic in JavaScript, Custom Properties bring something to the table for everyone.
Most of the power comes from two unique abilities of Custom Properties:
<ul>
<li>The cascade</li>
<li>The ability to modify values with JavaScript</li>
</ul>
Even more power is exposed as you combine Custom Properties with other preexisting CSS concepts, like <code>calc()</code> .

<h3>The Basics</h3>
You can use Custom Properties to do effectively what variables in preprocessors like Sass provide &#8211; set a global or scoped variable value, and then use it later in your code. But thanks to the cascade, you can give new property values inside a more specific rule. 
This cascading can lead to several interesting approaches, as shown by Violet Peña with an <a href="http://ift.tt/2oQ8mj9">overview of the key benefits of variables</a> and Chris with <a href="http://ift.tt/2pOEAex">a roundup of site theming options</a>.
People have been discussing these benefits from the cascade for a few years now, but it often gets lost in the conversation despite being a key functionality that differentiates it from preprocessors. Amelia Bellamy-Royds discussed it in <a href="http://ift.tt/2qSxi9D">the context of SVG and <code>use</code></a> in 2014, and Philip Walton noted a lot of <a href="http://ift.tt/2meubCZ">these general cascading benefits</a> in 2015, and last year Gregor Adams showed how they can be used in <a href="http://ift.tt/2pwgHUG">a minimal grid framework</a>. Taking advantage of the cascade is likely the easiest way to start working with Custom Properties with progressive enhancement in mind.
Okay. Now that we know Custom Properties can natively give us some functionality preprocessors have and some new uses thanks to the cascade &#8211; do they give us anything we simply never could do before?
You bet!
<h3>Individualizing Properties</h3>
All of the properties that have multiple parts are able to be used differently now. Multiple <code>background</code>s can be separated, and multiple <code>transition-duration</code>s can be broken out individually. Instead of taking a rule like <code>transform: translateX(10vmin) rotate(90deg) scale(.8) translateY(5vmin)</code> you can set one rule with several custom properties and change the values independently thereafter.
<pre><code>.view { 
 transform: 
 translateX(var(--tx, 0)) 
 rotate(var(--deg, 0)) 
 scale(var(--scale, 1)) 
 translateY(var(--ty, 0)); 
} 
.view.activated { 
 --tx: 10vmin; 
 --deg: 90deg; 
} 
.view.minimize { 
 --scale: .8; 
} 
.view.priority { 
 --ty: 10vmin; 
}</code></pre>
It takes a bit to initialize, but then that little bit of extra effort up front sets you up to modify each transform function independently based on the needs of the class/selector rule. Your markup can then include any or all of the classes defined on each <code>.view</code> element and the <code>transform</code> will update appropriately, as <a href="http://ift.tt/2qSQKmU">the demo based on this code sample</a> shows.
While independent transform properties are coming (and at that time <code>translate</code>, <code>scale</code>, and <code>rotate</code> will be first level citizens), they are currently only in Chrome behind a flag. With Custom Properties you can get this functionality today with more support (and the additional ability to define your own order of functions, since <code>rotate(90deg) translateX(10vmin)</code> is different than <code>translateX(10vmin) rotate(90deg)</code>, for example).
If you are okay with them sharing the same timing options, they can even animate smoothly when using <code>transition</code> when changing any of the variables. It&#8217;s kind of magical.
See the Pen <a href="http://ift.tt/2pwEtj4">CSS Variables + Transform = Individual Properties (with Inputs)</a> by Dan Wilson (<a href="http://ift.tt/2emvATF">@danwilson</a>) on <a href="http://codepen.io">CodePen</a>.
<h3>Going from No Units to All the Units</h3>
You can build on these concepts when combining with <code>calc()</code>. Instead of always setting variables as above with units (<code>--card-width: 10vmin</code> or <code>--rotation-amount: 1turn</code>) you can drop the units and use them in more places with a relation to one another. Now the values in our Custom Properties can be more dynamic than they already have been.
While <code>calc()</code> has been around for a few years now, it has arguably been most useful when trying to get a result from adding values with different units. For example, you have a fluid <code>width</code> in percentage units that needs to be shortened by 50px (<code>width: calc(100% - 50px)</code> ). However, <code>calc()</code> is capable of more.
Other operations like multiplication are allowed inside <code>calc</code> to adjust a value. The following is valid and gives us a sense that the transforms and filters are related to one another since they all use the number 10.
<pre><code>.colorful { 
 transform: 
 translateX(calc(10 * 1vw)) 
 translateY(calc(10 * 1vh)); 
 filter: hue-rotate(calc(10 * 4.5deg)); 
}</code></pre>
This likely isn&#8217;t as common a use case because it is a calculation you don&#8217;t need the browser to compute. <code>10 * 1vw</code> will always be <code>10vw</code> so the calc gives us nothing. It can be useful when using a preprocessor with loops, but that is a smaller use case and can typically be done without needing CSS <code>calc</code><code>()</code> . 
But what if we replace that repeated <code>10</code> with a variable? You can base values from a single value in multiple places, even with different units as well as open it up to change values in the future. The following is valid thanks to unitless variables and <code>calc</code>:
<pre><code>.colorful { 
 --translation: 10; 
 transform: 
 translateX(calc(var(--translation) * 1vw)) 
 translateY(calc(var(--translation) * 1vh)); 
 filter: hue-rotate(calc(var(--translation) * 4.5deg)); 
 
 will-change: transform, filter; 
 transition: transform 5000ms ease-in-out, filter 5000ms linear; 
} 
 
.colorful.go { 
 --translation: 80; 
}</code></pre>
See the Pen <a href="http://ift.tt/2pwbsnK">Single Custom Property, Multiple Calcs</a> by Dan Wilson (<a href="http://ift.tt/2emvATF">@danwilson</a>) on <a href="http://codepen.io">CodePen</a>.
The single value can be taken (initially 10, or later changed to 80&#8230; or any other number) and applied separately to <code>vw</code> units or <code>vh</code> units for a translation. You can convert it to <code>deg</code> for a rotation or a <code>filter: hue-rotate()</code>. 
You don&#8217;t have to drop the units on the variable, but as long as you have them in your <code>calc</code> you can, and it opens up the option to use it in more ways elsewhere. Animation choreography to offset durations and delays can be accomplished by modifying the base value in different rules. In this example we always want <code>ms</code> as our end unit, but the key result we want is for our <code>delay</code> to always be half the animation&#8217;s <code>duration</code> . We then can do this by modifying only our <code>--duration-base</code>.
See the Pen <a href="http://ift.tt/2qSoLUs">Delay based on Duration</a> by Dan Wilson (<a href="http://ift.tt/2emvATF">@danwilson</a>) on <a href="http://codepen.io">CodePen</a>.
Even cubic beziers are up for Custom Properties modification. In the following example, there are several stacked boxes. Each one has a slightly smaller scale, and each is given a cubic bezier multiplier. This multiplier will be applied individually to the four parts of a baseline cubic-bezier. This allows each box to have a cubic bezier that is different but in relation to one another. Try removing or adding boxes to see how they play with one another. Press anywhere to translate the boxes to that point.
See the Pen <a href="http://ift.tt/2pwyT0b">Spiral Trail&#8230; Kinda</a> by Dan Wilson (<a href="http://ift.tt/2emvATF">@danwilson</a>) on <a href="http://codepen.io">CodePen</a>.
JavaScript is used to randomize the baseline on each press, as well as setting up each box&#8217;s multiplier. The key part of the CSS, however, is:
<pre><code>.x { 
 transform: translateX(calc(var(--x) * 1px)); 
 /* baseline value, updated via JS on press */ 
 transition-timing-function: 
 cubic-bezier( 
 var(--cubic1-1), 
 var(--cubic1-2), 
 var(--cubic1-3), 
 var(--cubic1-4)); 
} 
.advanced-calc .x { 
 transition-timing-function: 
 cubic-bezier( 
 calc(var(--cubic1-1) * var(--cubic1-change)), 
 calc(var(--cubic1-2) * var(--cubic1-change)), 
 calc(var(--cubic1-3) * var(--cubic1-change)), 
 calc(var(--cubic1-4) * var(--cubic1-change))); 
}</code></pre>
If you are viewing this in certain browsers (or are wondering why this example has an <code>.advanced-calc</code> class) you might already suspect there is an issue with this approach. There is indeed an important caveat&#8230; <code>calc</code> magic does not always work as expected across the browsers. Ana Tudor has long discussed the <a href="http://ift.tt/2qSNaJD">differences in browser support for</a> <code>calc</code> , and I have an additional test for some other <a href="http://ift.tt/2pwhrJj">simplified <code>calc</code> use cases</a>.
The good news: All the browsers that support Custom Properties also largely work with <code>calc</code> when converting to units like <code>px</code>, <code>vmin</code>, <code>rem</code>, and other linear distance units inside properties such as <code>width</code> and <code>transform: translate()</code>.
The not-so-good news: Firefox and Edge often have problems with other unit types, such as <code>deg</code>, <code>ms</code> , and even <code>%</code> in some contexts. So the previous <code>filter: hue-rotate()</code> and <code>--rotation</code> properties would be ignored. They even have problems understanding <code>calc(1 * 1)</code> in certain cases so even remaining unitless (such as inside <code>rgb()</code>) can be a problem. 
While all the browsers that support Custom Properties will allow variables inside our <code>cubic-bezier</code> , not all of them allow <code>calc</code> at any level. I feel these <code>calc</code> issues are the main limiting factors with Custom Properties today… and they&#8217;re not even a part of Custom Properties. 
There are bugs tracked in the browsers for these issues, and you can work around them with progressive enhancement. The earlier demos only do the <code>cubic-bezier</code> modifications if it knows it can handle them, otherwise you get the baseline values. They will erroneously pass a CSS <code>@supports</code> check, so a JS Modernizr-style check is needed:
<pre><code>function isAdvancedCalcSupported() { 
 document.body.style.transitionTimingFunction = 'cubic-bezier(calc(1 * 1),1,1,1)'; 
 return getComputedStyle(document.body).transitionTimingFunction != 'ease'; 
 //if the browser does not understand it, the computed value will be the default value (in this case "ease") 
}</code></pre>
<h3>Interacting via JavaScript</h3>
Custom Properties are great for what they provide in CSS, but more power is unlocked when you communicate via JavaScript. As shown in the <code>cubic-bezier</code> demo, we can write a new property value in JavaScript:
<pre><code>var element = document.documentElement; 
element.style.setProperty('--name', value);</code></pre>
This will set a new value for a globally defined property (in CSS defined in the <code>:root</code> rule). Or you can go more direct and set a new value for a specific element (and thus give it the highest specificity for that element, and leave the variable unchanged for other elements that use it). This is useful when you are managing state and need to modify a style based on given values.
David Khourshid has discussed powerful ways to interact with Custom Properties via JS in <a href="http://ift.tt/2eeik7G">the context of Observables</a> and they really fit together nicely. Whether you want to use Observables, React state changes, tried-and-true event listeners, or some other way to derive value changes, a wide door is now open to communicate between the two.
This communication is especially important for the CSS properties that take multiple values. We&#8217;ve long had the <code>style</code> object to modify styles from JavaScript, but that can get complicated as soon as we need to modify only one part of a long value. If we need to change one background out of ten that are defined in a <code>background</code> rule, we have to know which one we are modifying and then make sure we leave the other nine alone. This gets even more complicated for <code>transform</code> rules when you are trying to only modify a <code>rotate()</code> and keep the current <code>scale()</code> unchanged. With Custom Properties you can use JavaScript to modify each individually, simplifying the state management of the full <code>transform</code> property.
See the Pen <a href="http://ift.tt/2pwmb1y">Dance of the Hexagons and Variables</a> by Dan Wilson (<a href="http://ift.tt/2emvATF">@danwilson</a>) on <a href="http://codepen.io">CodePen</a>.
The unitless approach works well here, too. Your <code>setProperty()</code> calls can pass raw numbers to CSS instead of having to append units, which can simplify your JavaScript in some cases.
<h3>Is it Time to Use This?</h3>
As Custom Properties are now in the latest browsers from Mozilla, Google, Opera, Apple, and Microsoft &#8211; it&#8217;s definitely a good time to explore and experiment. A lot of what is discussed here can be used now with sensible fallbacks in place. The <code>calc</code> updates needed in some of the browsers are further out, but there are still times when you can reasonably use them. For example, if you work on hybrid mobile apps that are limited to more recent iOS, Android, or Windows versions you will have more room to play.
Custom Properties present a big addition to CSS, and it can take some time to wrap your head around how it all works. Dip your toes in, and then dive in if it suits you.
<hr>
<a href="http://ift.tt/2qSVtEX">Making Custom Properties (CSS Variables) More Dynamic</a> is a post from <a href="https://css-tricks.com">CSS-Tricks</a>

Making Custom Properties (CSS Variables) More Dynamic

Making Custom Properties (CSS Variables) More Dynamic

Top Stories