% CSS: &#s border 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:

_{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

and

anywhere, it's generally not recommended to use a

outside of a

and without any 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 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 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 and can be positive, 0px, or negative.

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:

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:

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!

% CSS: s border knockout behavior for any element !	% CSS: s border knockout behavior for any element !	DEV Blog	% CSS: s border knockout behavior for any element !	% CSS: s border knockout behavior for any element !

?@JaneOri.% CSS:

s border

knockout behavior for any element !

?@Jane0ri

The above is the detailed content of % CSS: &#s border knockout behavior for any element !. For more information, please follow other related articles on the PHP Chinese website!