Contextual Utility Classes for Color with Custom Properties

Celý článek

In CSS, we have the ability to access currentColor which is tremendously useful. Sadly, we do not have access to anything like currentBackgroundColor, and the color-mod() function is still a ways away.

With that said, I am sure I am not alone when I say I'd like to style some links based on the context, and invert colors when the link is hovered or in focus. With CSS custom properties and a few, simple utility classes, we can achieve a pretty powerful result, thanks to the cascading nature of our styles:

See the Pen
Contextually colouring links with utility classes and custom properties by Christopher Kirk-Nielsen (@chriskirknielsen)
on CodePen.

To achieve this, we'll need to specify our text and background colors with utility classes (containing our custom properties). We'll then use these to define the color of our underline, which will expand to become a full background when hovered.

Let's start with our markup:

<section class="u-bg--green">
  <p class="u-color--dark">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, <a href="#">sed do eiusmod tempor incididunt</a> ut labore et dolore magna aliqua. Aliquam sem fringilla ut morbi tincidunt. Maecenas accumsan lacus vel facilisis. Posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper.
  </p>
</section>

This gives us a block containing a paragraph, which has a link. Let's set up our utility classes. I'll be defining four colors that I found on Color Hunt. We’ll create a class for the color property, and a class for the background-color property, which will each have a variable to assign the color value (--c and --bg, respectively). So, if we were to define our green color, we’d have the following:

.u-color--green {
  --c: #08ffc8;
  color: #08ffc8;
}

.u-bg--green {
  --bg: #08ffc8;
  background-color: #08ffc8;
}

If you are a Sass user, you can automate this process with a map and loop over the values to create the color and background classes automatically. Note that this is not required, it’s merely a way to create many color-related utility classes automatically. This can be very useful, but keep track of your usage so that you don’t, for example, create seven background classes that are never used on your site. With that said, here is the Sass code to generate our classes:

$colors: ( // Define a named list of our colors
  'green': #08ffc8,
  'light': #fff7f7,
  'grey': #dadada,
  'dark': #204969
);

@each $n, $c in $colors { // $n is the key, $c is the value
  .u-color--#{$n} {
    --c: #{$c};
    color: #{$c};
  }

  .u-bg--#{$n} {
    --bg: #{$c};
    background-color: #{$c};
  }
}

What happens if we forget to apply a utility class in your markup, though? The --c variable would naturally use currentColor… and so would --bg! Let’s define a top-level default to avoid this:

html {
  --c: #000000;
  --bg: #ffffff;
}

Cool! Now all we need is to style our link. We will be styling all links with our trusty <a> element in this article, but you could just as easily add a class like .fancy-link.

Additionally, as you may know, links should be styled in the "LoVe-HAte" order: :link, :visited, :hover (and :focus!), and :active. We could use :any-link, but browser support isn't as great as CSS custom properties. (Had it been the other way around, it wouldn't have been much of an issue.)

We can start declaring the styles for our links by providing an acceptable experience for older browsers, then checking for custom property support:

/* Styles for older browsers */
a {
  color: inherit;
  text-decoration: underline;
}

a:hover,
a:focus,
a:active {
  text-decoration: none;
  outline: .0625em solid currentColor;
  outline-offset: .0625em;
}

a:active {
  outline-width: .125em;
}

@supports (--a: b) { /* Check for CSS variable support */
  /* Default variable values */
  html {
    --c: #000000;
    --bg: #ffffff;
  }
  
  a {
    /*
      * Basic link styles go here...
      */
  }
}

Let's then create the basic link styles. We'll be making use of custom properties to make our styles as DRY as possible.

First, we need to set up our variables. We want to define a --space variable that will be used on various properties to add a bit of room around the text. The link's color will also be defined in a variable with --link-color, with a default of currentColor. The fake underline will be generated using a background image, whose size will be adjusted depending on the state with --bg-size, set to use the --space value by default. Finally, to add a bit of fun to this, we'll also fake a border around the link when it's :active using box-shadow, so we'll define its size in --shadow-size, set to 0 in it's inactive state. This gives us:

--space: .125em;
--link-color: currentColor;
--bg-size: var(--space);
--shadow-size: 0;

We’ll first need to adjust for the fallback styles. We'll set our color to make use of our custom property, and remove the default underline:

color: var(--link-color);
text-decoration: none;

Let's next create our fake underline. The image will be a linear-gradient with two identical start and end points: the text's color --c. We make sure it only repeats horizontally with background-repeat: repeat-x;, and place it at the bottom of our element with background-position: 0 100%;. Finally, we give it its size, which is 100% horizontally, and the value of --bg-size vertically. We end up with this:

background-image: linear-gradient(var(--c, currentColor), var(--c, currentColor));
background-repeat: repeat-x;
background-position: 0 100%;
background-size: 100% var(--bg-size);

For the sake of our :active state, let's also define the box shadow, which will be non-existent, but with our variable, it'll be able to come to life: box-shadow: 0 0 0 var(--shadow-size, 0) var(--c);

That's the bulk of the basic styles. Now, what we need to do is assign new values to our variables depending on the link state.

The :link and :visited are what our users will see when the link is "idle." Since we already set up everything, this is a short ruleset. While we technically could skip this step and declare the --c variable in the initial assignment of --link-color, I'm assigning this here to make every step of our styles crystal clear:

a:link,
a:visited {
  --link-color: var(--c);
}

The link now looks pretty cool, but if we interact with it, nothing happens… Let's create those styles next. Two things need to happen: the background must take up all available height (aka100%), and the text color must change to be that of the background, since the background is the text color (confusing, right?). The first one is simple enough: --bg-size: 100%;. For the text color, we assign the --bg variable, like so: --link-color: var(--bg);. Along with our pseudo-class selectors, we end up with:

a:hover,
a:focus,
a:active {
    --bg-size: 100%;
    --link-color: var(--bg);
}

Look at that underline become a full-on background when hovered or focused! As a bonus, we can add a faked border when the link is clicked by increasing the --shadow-size, for which our --space variable will come in handy once more:

a:active {
  --shadow-size: var(--space);
}

We're now pretty much done! However, it looks a bit too generic, so let's add a transition, some padding and rounded corners, and let's also make sure it looks nice if the link spans multiple lines!

For the transitions, we only need to animate color, background-size and box-shadow. The duration is up to you, but given links are generally around 20 pixels in height, we can put a small duration. Finally, to make this look smoother, let's use ease-in-out easing. This sums up to:

transition-property: color, background-size, box-shadow;
transition-duration: 150ms;
transition-timing-function: ease-in-out;
will-change: color, background-size, box-shadow; /* lets the browser know which properties are about to be manipulated. */

We'll next assign our --space variable to padding and border-radius, but don't worry about the former — since we haven't defined it as an inline-block, the padding won't mess up the vertical rhythm of our block of text. This means you can adjust the height of your background without worrying about line-spacing! (just make sure to test your values)

padding: var(--space);
border-radius: var(--space);

Finally, to ensure the styles applies properly on multiple lines, we just need to add box-decoration-break: clone; (and prefixes, if you so desire), and that's it.

When you're done, we should have these styles:

/* Styles for older browsers */
a {
  color: inherit;
  text-decoration: underline;
}

a:hover,
a:focus,
a:active {
  text-decoration: none;
  outline: .0625em solid currentColor;
  outline-offset: .0625em;
}

a:active {
  outline-width: .125em;
}

/* Basic link styles for modern browsers */
@supports (--a: b) {
  /* Default variable values */
  html {
    --c: #000000;
    --bg: #ffffff;
  }
  
  a {
    /* Variables */
    --space: .125em;
    --link-color: currentColor;
    --bg-size: var(--space);
    --shadow-size: 0;

    /* Layout */
    padding: var(--space); /* Inline elements won't affect vertical rhythm, so we don't need to specify each direction */

    /* Text styles */
    color: var(--link-color);/* Use the variable for our color */
    text-decoration: none; /* Remove the default underline */

    /* Box styles */
    border-radius: var(--space); /* Make it a tiny bit fancier ✨ */
    background-image: linear-gradient(var(--c, currentColor), var(--c, currentColor));
    background-repeat: repeat-x;
    background-position: 0 100%;
    background-size: 100% var(--bg-size);
    box-shadow: 0 0 0 var(--shadow-size, 0) var(--c, currentColor); /* Used in the :active state */
    box-decoration-break: clone; /* Ensure the styles repeat on links spanning multiple lines */

    /* Transition declarations */
    transition-property: color, background-size, box-shadow;
    transition-duration: 150ms;
    transition-timing-function: ease-in-out;
    will-change: color, background-size, box-shadow;
  }

  /* Idle states */
  a:link,
  a:visited {
    --link-color: var(--c, currentColor); /* Use --c, or fallback to currentColor */
  }

  /* Interacted-with states */
  a:hover,
  a:focus,
  a:active {
    --bg-size: 100%;
    --link-color: var(--bg);
  }

  /* Active state */
  a:active {
    --shadow-size: var(--space); /* Define the box-shadow size */
  }
}

Sure, it's a bit more convoluted that just having an underline, but used hand-in-hand with utility classes that allow you to always access the text and background colors, it's a quite nice progressive enhancement.

It’s up to you to enhance this using three variables for each color, either rgb or hsl format to adjust opacity and such. You can also add a text-shadow to simulate text-decoration-skip-ink!

The post Contextual Utility Classes for Color with Custom Properties appeared first on CSS-Tricks.