Select Page

Category: custom properties

Managing Multiple Backgrounds with Custom Properties

One cool thing about CSS custom properties is that they can be a part of a value. Let’s say you’re using multiple backgrounds to pull off a a design. Each background will have its own color, image, repeat, position, etc. It can be verbose! You have four images: body { background-position: top 10px left 10px, top 10px right 10px, bottom 10px right 10px, bottom 10px left 10px; background-repeat: no-repeat; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-left.svg), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-right.svg), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-right.svg), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg); } You want to add a fifth in a media query: @media (min-width: 1500px) { body { /* REPEAT all existing backgrounds, then add a fifth. */ } } That’s going to be super verbose! You’ll have to repeat each of those four images again, then add the fifth. Lots of duplication there. One possibility is to create a variable for the base set, then add the fifth much more cleanly: body { --baseBackgrounds: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-left.svg), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-right.svg), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-right.svg), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg); background-position: top 10px left 10px, top 10px right 10px, bottom 10px right 10px, bottom 10px left 10px; background-repeat: no-repeat; background-image: var(--baseBackgrounds); } @media (min-width: 1500px) { body { background-image: var(--baseBackgrounds), url(added-fifth-background.svg); } } But, it’s really up to you. It might make more sense and be easier manage if you made each background image into a variable, and then pieced them together as needed. body { --bg1: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-left.svg); --bg2: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-top-right.svg); --bg3: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-right.svg); --bg4: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg); --bg5: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/angles-bottom-left.svg); background-image:...

Read More

Weekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults Query

In this week’s look around the world of web platform news, Google Search Console makes it easier to view crawled markup, we learn that custom properties aren’t computing hogs, variables defined at the top-level in JavaScript are global to other page scripts, and Babel env now supports the defaults query — plus all of last month’s news compiled into a single package for you. Easier HTML inspection in Google Search Console The URL Inspection tool in Google Search Console now includes useful controls for searching within and copying the HTML code of the crawled page. Note: The URL Inspection...

Read More

Do CSS Custom Properties Beat Sass Loops?

I reckon that a lot of our uses of Sass maps can be replaced with CSS Custom properties – but hear me out for a sec. When designing components we often need to use the same structure of a component but change its background or text color based on a theme. For example, in an alert, we might need a warning style, an error style, and a success style – each of which might be slightly different, like this: There’s a few ways we could tackle building this with CSS, and if you were asking me a couple of years...

Read More

Slice and Dice a Disc with CSS

I recently came across an interesting sliced disc design. The disc had a diagonal gradient and was split into horizontal slices, offset a bit from left to right. Naturally, I started to think what would the most efficient way of doing it with CSS be. Sliced gradient disc. The first thought was that this should be doable with border-radius, right? Well, no! The thing with border-radius is that it creates an elliptical corner whose ends are tangent to the edges it joins. My second thought was to use a circle() clipping path. Well, turns out this solution works like...

Read More

Styling a Web Component

This confused me for a bit here so I’m writing it out while it’s fresh in mind. Just because you’re using a web component doesn’t mean the styles of it are entirely isolated. You might have content within a web component that is styled normally along with the rest of your website. Like this: See the Pen Web Component with Global Styles (because no Shadow DOM) by Chris Coyier (@chriscoyier) on CodePen. That element isolated the JavaScript-powered functionality of itself by attaching a click handler to the inside of it. But the styling of that button comes from global...

Read More

Keep Math in the CSS

There is a sentiment that leaving math calculations in your CSS is a good idea that I agree with. This is for math that you could calculate at authoring time, but specifically chose not to. For instance, if you needed a 7-column float-based grid (don’t ask), it’s cleaner and more intuitive: .col { /* groan */ width: 14.2857142857%; /* oh, I get it */ width: calc(100% / 7); } You could probably prove that the calc() takes the computer 0.0000001% longer, so explicitly defining the width is technically faster for performance reason — but that is about the equivalent...

Read More

Updating a CSS Variable with JavaScript

Here’s a CSS variable (formally called a “CSS custom property“): :root { --mouse-x: 0px; --mouse-y: 0px; } Perhaps you use them to set a position: .mover { left: var(--mouse-x); top: var(--mouse-y); } To update those values from JavaScript, you’d: let root = document.documentElement; root.addEventListener("mousemove", e => { root.style.setProperty('--mouse-x', e.clientX + "px"); root.style.setProperty('--mouse-y', e.clientY + "px"); }); That’s all. See the Pen Set CSS Variable with JavaScript by Chris Coyier (@chriscoyier) on CodePen. The post Updating a CSS Variable with JavaScript appeared first on CSS-Tricks....

Read More

Super-Powered Grid Components with CSS Custom Properties

A little while ago, I wrote a well-received article about combining CSS variables with CSS grid to help build more maintainable layouts. But CSS grid isn’t just for pages! That is a common myth. Although it is certainly very useful for page layout, I find myself just as frequently reaching for grid when it comes to components. In this article I’ll address using CSS grid at the component level. Grid is neither a substitute for flexbox nor vice versa. In fact, using a combination of the two gives us even more power when building components. Building a simple component...

Read More

Simple Interactive Pie Chart with CSS Variables and Houdini Magic

I got the idea for doing something of the kind when I stumbled across this interactive SVG pie chart. While the SVG code is as compact as it gets (a single element!), using strokes for creating pie chart slices is problematic as we run into rendering issues on Windows for Firefox and Edge. Plus, in 2018, we can accomplish a lot more with a lot less JavaScript! AI got the following result down to a single HTML element for the chart and very little JavaScript. The future should completely eliminate the need for any JavaScript, but more on that...

Read More
  • 1
  • 2
www.000webhost.com