Forem: Unai Mengual

Writing future-proof UnoCSS

Unai Mengual — Thu, 11 May 2023 17:07:49 +0000

I've been using UnoCSS since its early days, and I'm quite amazed by its limitless flexibility. However, flexibility comes at a price and can lead you to misuse.

Note that this post focuses on UnoCSS using the default presets: Uno, Attributify and Tagify.

Ways to use UnoCSS

Before we start, let's review the ways we can use UnoCSS with the main presets:

Classes <div class="dark:bg-gray-900">
Attributes <div dark="bg-gray-900">
Tags <dark-bg-gray-900>

Attributes

The attributify preset allows you to use HTML attributes instead of CSS classes as long as they are within the Unicode ranges supported by the specification.

However, that doesn't mean it strictly adheres to the HTML standard. For example, the following code:

<div dark="bg-gray-950">

It technically works in modern browsers, but if you run a validator you'll notice that "dark" is not a valid attribute in div tags.

Why is this the case? Custom attributes can conflict with future HTML attributes, causing unexpected behavior or rendering issues.

Using data-* attributes

So what do we do? data-* attributes allow us to extend HTML tags with any non-standard attribute we can think of. Of course, this also applies to the utilities generated by UnoCSS.

<div data-dark="bg-gray-950">

By default, the attributify preset doesn't support them, but you can enforce it by using this configuration:

presetAttributify({
  prefix: 'data-', // or 'data-un-'
  prefixedOnly: true,
})

Problem solved!

Experimenting with a CSS pure inspect element

Unai Mengual — Sun, 24 Oct 2021 18:41:02 +0000

CSS, a language that defines style and design, has many interesting functions. Some of them are the attr() and counter() functions. Today we'll use them to create very simple element inspector with pure CSS.

Note that while JS would be the sane solution here, we're experimenting with CSS and HTML.

What are these functions?

Both return values when used with the content property. attr returns the value of a given HTML attribute while counter can be used to count a number of elements (e.g you want to prepend a number before every h2).

You can read more about them at MDN.

The Idea

If attr() returns an attribute, we can use it to get the class and id from the element, which is one of the main usecases of Inspect Element.

As for counter(), we'll use it to show the number of the list item in an unordered list.

Writing the HTML

A simple HTML snippet that works to demo our idea:

<div class="css-pure-inspect">
  <div class="hello" id="devto">
    This is a test
  </div>
  <ul>
    <li>Test</li>
    <li>Foo</li>
    <li>Bar</li>
  </ul>
</div>

Note that I wrapped it in a div to avoid clashing with other elements and create a visual hell.

The CSS

First thing we are going to do is styling the box that will show on hover. For this demo, I used this styling

.css-pure-inspect *:hover::after {
  padding: 6px;
  position: absolute;
  font-family: sans-serif;
  font-size: 13px;
  background: #fff;
  border: 1px solid #ccc;
  white-space: pre;
}

For a real project, * is generally discouraged for performance reasons.
white-space: pre; is a trick to be used with the \a character escape to create line breaks in CSS content.
absolute is mandatory to prevent the box to mess with the flow of the document. Depending on the site you might need a z-index.

Now that we styled the box, we're going to show the actual content - CSS classes and IDs, but data attributes or even alt texts could work if you added them.

.css-pure-inspect *[class]:hover::after {
  content: "Classes: " attr(class);
}
.css-pure-inspect *[id]:hover::after {
  content: "ID: " attr(id);
}
.css-pure-inspect *[class][id]:hover::after {
  content: "Classes: " attr(class) "\a ID: "attr(id);
}
.css-pure-inspect *[class][id]:hover::after {
  content: "Classes: " attr(class) "\a ID: "attr(id);
}

Yes, you can concatenate plaintext and attributes in content.
\a is the line break trick explained above.
Some elements have a class, others just have a div. The attributes in the selector were added to check it. And thanks to CSS order and specifity rules, we override the previous style.

And that's it for most elements. But we haven't used the counter() function. Remember the HTML ul list we created earlier?

.css-pure-inspect ul {
  counter-reset: list-inspect;
}

.css-pure-inspect li {
  counter-increment: list-inspect;
}

.css-pure-inspect li:hover::after {
  content: "List item #"counter(list-inspect);
}

The counter resets at every ul
It increments every li and we show it in the hover box

Demo result

This could be more robust. Maybe you could manually add every tag and their attributes defined in the W3C spec, but you'd probably lose your sanity. Thanks for reading!