🤘 S. Benali

CSS doesn’t get much love these days. Hating CSS has become so popular, that every couple of weeks one of my developer buddies posts the same meme on Twitter. As someone who enjoys CSS, and almost exclusively writes plain ol’ CSS, I’ll give my hot take on that topic in a future post. For now, I'll share a few underutilized CSS features that can make your dev experience more pleasant and hopefully help you enjoy the misunderstood language. To make this more fun, I’m going to use all 4 in the same example.

:not()

A pseudo-class that allows you to exclude a specific element or elements from being selected. This is an interesting one because you can do some complex stuff. Hilariously, with a little bit of imagination, you can turn this thing into a visual linting tool.

Take this list for example;

<ul class="list">
  <li class="listItem">List item</li>
  <li class="listItem">List item</li>
  <li class="listItem">List item</li>
  <li class="listItem">List item</li>
</ul>

.list{
    list-style-type:none;
    padding: 32px;
    border:solid 2px;
    border-radius:5px;
  }
  .listItem{
    padding:8px 0;
    margin: 4px 0;
  }

A simple list containing four elements. We want to be able to add bottom borders to all the items except the last one. We can do this by using :not() with :last-child.

.listItem:not(:last-child) {
    border-bottom: solid 1px;
    font-size:1.3rem;
    font-style: italic;
  }

You can also negate multiple elements at the same time; :not(.first, div) or :not(.first):not(div)

Let’s also exclude the Subscribe call to action

<li class="listItem">Subscribe</li> copy

.listItem:not(:last-child, #sub) copy

This thing lints!

You can use :not() to check for missing attributes in your HTML by pairing it with an attribute selector. For example, in my menu component, I added <a> tags inside my list items and I wanted to make sure that they all had title attributes. Well, I could simply add properties to every <a> tag that doesn’t have the attribute! I even threw in a little text with the pseudo-element ::after.

  a:not([title]) {
    outline: dotted 2px red;
  }
  a:not([title]):after {
    content: "add title!";
   }

Use this on your outbound links to spot .outbound:not([rel=”noopener”]) or missing alts in your images img:not([alt]). Good stuff!

::first-letter

This is an intuitive pseudo-element that simply allows you to select the first letter of an element. Use this to style your text without making a mess of your HTML. e.g make your WordPress blog entries look like a page from the Gutenberg bible.

Let’s use this to pimp out our menu. Let’s also pair it with :not() to exclude the first letters of the items we don’t want to style.

.listItem:not(:last-child, #sub)::first-letter {
  color: red;
  font-size: 1.6rem;
  font-weight: 600;
}

clip-path

This property lets you clip an element to either a basic shape clip-path: circle(50%); or something more complex.

I added an avatar image element above:

<li class="listItem frame" id="avatar">
    <div class="avatarInner frame"></div>
</li>

#avatar {
  height: 80px;
  width: 80px;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(to bottom left, #ff0000, #000);
  margin-bottom: 12px;
}
.avatarInner {
  height: calc(100% - 8px);
  width: calc(100% - 8px);
  background: url(https://url.url);
  background-size: cover;
  background-repeat: no-repeat;
}
.frame {
  clip-path: polygon(
    13% 0,
    100% 0,
    100% 30%,
    100% 70%,
    100% 100%,
    0 100%,
    0% 70%,
    0 13%
  );
}

Now, don’t worry, you don’t have to come up with a shape using percentages. I use this generator to create the values. There are also other more advanced tools out there that pretty much let you draw with clip-path.

This property is very useful in making @keyframes animations. In fact, the image component animation on my blog feed and pages uses it to create the glitch effect.

backdrop-filter

This CSS property allows you to add graphical effects behind an element. It takes in the same functions as the filter property and you can apply multiple effects to one element.

backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%); copy

For this example, I created a hover event to display a call to action over my avatar image. I used blur() on a transparent red background.

.hover {
  backdrop-filter: blur(3px);
  background: rgb(255, 30, 0, 0.5);
  box-sizing: border-box;
  width: 65px;
  height: 65px;
  margin: auto;
  color: #fff;
  display: none;
  align-items: center;
  position: absolute;
  z-index: 4;
  text-align: center;
  padding: 4px;
  justify-content: center;
}
#avatar:hover > .hover {
  display: flex;
}

In addition to producing stunning frosted glass effects, the main benefit of this design technique is being able to have background images or complex background elements while keeping your text readable.

Let’s turn our little list into a proper menu sidebar to demonstrate this;

.menu {
  list-style-type: none;
  padding: 32px;
  border: solid 1px gray;
  display: flex;
  flex-direction: column;
  backdrop-filter: grayscale(50%) blur(6px);
  height: 100vh;
  width: 120px;
}

I added a vivid background image then used backdrop-filter: with grayscale() and blur() to create the frosted glass look on my .menu bar.

Check it out on Codepen

:not() read more

:first-letter read more

clip-path read more

Backdrop-filter read more

4 Underutilized CSS Features

:not()

This thing lints!

::first-letter

clip-path

backdrop-filter

Browse Categories