DEV Community

Jane Ori
Jane Ori

Posted on

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

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:

a picture of two simple fieldset elements with their legend (titles) leaving a gap the width of their text in the fieldset's borderfieldset 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:

  1. @import the fieldset-legend utility in your css.
  2. Add the fieldset-legend class to the wrapper
  3. 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:

picture of the fallback behavior as described below

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:

  1. 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.
  2. 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:

picture of the fallback behaviors as described above

Further fallback support

If you know how to use my old Space Toggle technique, the library also provides:

--fl-supported, which will be a space when supported and initial when not supported

and

--fl-not-supported, which is the opposite.


Open Contact 👽

Please do reach out if you need help with any of this, have feature requests, or want to share what you've created!

PropJockey.io CodePen DEV Blog GitHub Mastodon
PropJockey.io CodePen DEV Blog GitHub Mastodon

🦋@JaneOri.PropJockey.io

𝕏@Jane0ri

Top comments (2)

Collapse
 
eioluseyi profile image
EIO • Emmanuel Imolorhe

Like a course, I need to study your work.
You have a lot of hidden gems even in your simplest explanations.

Thanks again for sharing!

Collapse
 
janeori profile image
Jane Ori

I truly appreciate your kind words! Thank you!
Hope it's of benefit! 👽