Today I Learned - Rocky Kev

TIL CSS variable tricks

POSTED ON:

TAGS: css javascript variables

This is a neat trick.

If you want to change the background with Javascript, you can use a CSS variable.

<!-- BEFORE  -->
<section
    class="newsletter"
    style="background-image: url('/assets/ui/decorative/newsletter-lg-aj1891101.svg')">
</section>

Notice that you're using a 'hardcoded' style tag and URL.

IF you were controlling the backgound with JS, you can target the --thumb variable directly.
Like this:

<!-- AFTER -->
<section
    class="newsletter"
    style="--thumb:url('/assets/ui/decorative/newsletter-lg-aj1891101.svg')">
</section>

<style>
.newsletter {
    background-image: var(--thumb);
    background-size: cover;
    background-position: 100% 50%;
}
</style>

VIA:
Practical Use Cases For CSS Variables

Related TILs

Tagged: css

TIL the alternate keyword

If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

TIL Logical Properties

For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

TIL Using pseudo-classes in your querySelector!

let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')