100% CSS: <fieldset>'s border <legend> knockout behavior for any element !

#css #webdev #beginners #tutorial

Legend has it, there will come a day when the beautiful fieldset border knockout effect will be possible with any html element.

And I have great news: In Chrome, that day is today!

Fieldset? Legend?

If you're unfamiliar, here's the border knockout effect on a fieldset with a legend:

_{fieldset legend examples in a slightly modified screenshot from VanillaHTML}

The width of the legend (title) is clipping a hole in the border of the fieldset automatically.

While technically possible to just use <fieldset> and <legend> anywhere, it's generally not recommended to use a <fieldset> outside of a <form> and without any <input> elements inside of it, as the primary purpose of a fieldset is to semantically group related form inputs. Using it in unrelated contexts goes against its intended meaning and can negatively impact accessibility for screen readers.

Fieldset border legend knockout behavior anywhere

This is not trivial to accomplish so I hid every bit of the complexity that I could to make it as close to trivial to replicate:

@import the fieldset-legend utility in your css.
Add the fieldset-legend class to the wrapper
Set the --fl-left property to any <length-percentage> value (even negative values if you wish)

And the library will position the :first-child so it's vertically centered with the top of the element and knock out the stuff behind it!

To create a gap around the title, add padding to the :first-child however you want to.

The biggest gotcha here is you can't put plain text nodes directly in the fieldset-legend wrapper, text has to be nested inside of their own elements.

Also, technically fieldset's border knockout doesn't sink to the bottom of the legend element and clip the background too, like it does above.

If you prefer the knockout to only sink through the border, you can provide an additional <length> property, --fl-sink and set it equal to your border width:

Does it do anything else?

It does!

`--fl-left` alternatives

Instead of --fl-left, you could instead use --fl-center.
If you set --fl-center to 0px, the title will be centered horizontally along the top edge.
If you set it to -10px, it will be offset to the left of center by 10px.
Set it to 15px and it will shift right of center by 15px.

Instead of --fl-left or --fl-center, you could also use --fl-right with the expected behavior.

All 3 of these are <length-percentage> and can be positive, 0px, or negative.

`--fl-top` option

By default, the title element is vertically centered with the top edge of the outer element. Setting --fl-top to a negative <length> lifts it, and to a positive length drops it.

By default, the bottom edge of the title is how far down the knockout sinks into the element, so remember you can control that as well with --fl-sink described previously!

The fieldset-legend container also automatically applies a margin-top to cover the height of the title poking above the element. The rule setting this has 0 specificity so it can easily be overwritten if you prefer another value.

Title as `:first-child` alternatives

It may be important for you to place other elements, such as screenreader-only page jumps, prior to the title inside the fieldset-legend container.

Place a class fieldset-legend-title on any ONE of the direct descendants of your fieldset-legend element and the library will lift that element to the same desired position at the top, leaving :first-child alone.

`fieldset-legend` uses the `::before` pseudo

You can make it use the ::after pseudo instead, just change the class name from fieldset-legend to fieldset-legend-after

`fieldset-legend` no pseudo?

This is advanced usage but...

You can inset: 0px; an element inside the wrapper, customize it however you want, and use fieldset-legend-custom instead of fieldset-legend or fieldset-legend-after.

This drops all of the library's clipping and gives you a custom mask to use anywhere inside of the fieldset-legend-custom element.

For example, if you wanted to use this with your favorite sci-fi shaping library, augmented-ui:

Fallback behavior

The limiting feature support required to use this utility is timeline-scope.

Container style queries are also required.

This is what the first demo in this article looks like in non-Chrome browsers:

It applies the same mechanical styling to minimize differences, such as a non-static position and isolation: isolate; but most notably, it moves the title back inline and does two !important things:

The title color becomes currentColor - the content behind the title switches from the body to the inside of your fieldset-legend container, which may have a very different background. Using currentColor ensures the content is readable because the rest of the content in your not-a-fieldset is likely already set appropriately.
Along the same lines, I can't know if your title element already had its own background (though if it did, you don't need this utility to position it over the border) so the background is forced to transparent, ensuring currentColor on the fieldset-legend's background, which in most cases will already be readable.

To determine specific fallback behavior, you can set
--fl-fallback-title-color and --fl-fallback-title-background which will be used in place of currentColor or transparent in the event it is rendered somewhere without support.

And this is what the custom demo above looks like in browsers that don't support fieldset-legend: