Utilizing the `define` Property as a Collapsable Border

The define property in CSS attracts a line across the outdoors of a component. That is fairly much like the border property, the primary exception being that define isn’t part of the field mannequin. It’s typically used for highlighting components, for instance, the :focus type.

On this article, let’s put some extent on it, leaning into what define is sweet at:

They are often collapsed with one another (trickery!) as a result of they technically “take up no house.”Exhibiting and hiding outlines, or altering outline-width, doesn’t set off layouts (which is sweet for performant animations and transitions).

Simpler faux-table cell borders

Beneath is an instance of an inventory that’s laid out as a grid, making it look a bit like a desk format. Each cell has a minimal width, and can develop/shrink because the container turns into wider/narrower.

We might use border to drag this off, like this:

However to be able to make a fair border round every cell — by no means doubling up or lacking — it’s a cumbersome course of. Above, I used a border on all sides of every “cell” then detrimental margins to overlap them and forestall doubling. That meant clipping off the border on two sides, so the borders needed to be re-applied there on the mother or father. An excessive amount of fiddly work, should you ask me.

Even having to cover the overflow is an enormous ask, which it’s important to do as a result of, in any other case, you’ll set off scrollbars except you resort to even thicker trickery, like utilizing absolutely-positioned pseudo components.

Try the identical outcome, visually, solely utilizing define as a substitute:

The code right here is far cleaner. There is no such thing as a actual trickery at play. Every “cell” simply has a top level view round it, and that’s it.

Border in animation

Altering border-width will all the time set off format, regardless of whether it is truly wanted.

As well as, resulting from Chrome’s particular dealing with of sub-pixels for border widths, animating the border-width property makes your complete border shake (which I believe is unusual). Firefox doesn’t have this concern.

There are execs and cons on the subject of animating borders. Try Stephen Shaw’s submit from some time again for an instance of the efficiency implications.

There are some gotchas

After all there are. Like most different CSS properties, there are a couple of “gotchas” or issues to know when working with the define property:

Rounded outlines are solely supported in Firefox on the time of writing. I think about different browsers will ultimately assist them as nicely.An overview all the time goes round all the perimeters. That’s to say it’s not a shorthand property like, say, border; so no outline-bottom, and so forth.

However we are able to work round these limitations! For instance, we are able to use add a box-shadow with no blur radius as a substitute. However bear in mind: box-shadow has a better efficiency value than utilizing both define and border.

That’s it!

Will you all the time be engaged on one thing that requires faking a desk with an unordered record? Unlikely. However the truth that we are able to use define and its lack of participation within the field mannequin makes it attention-grabbing, notably as a border different in some instances.

Perhaps one thing like this tic-tac-toe board Chris put collectively a number of years in the past may gain advantage from define, as a substitute of resorting to individually-crafted cell borders. Problem accepted, Mr. Coyier? 😉

The submit Utilizing the `define` Property as a Collapsable Border appeared first on CSS-Tips.

You’ll be able to assist CSS-Tips by being an MVP Supporter.