Conditional CSS – Ahmad Shadeed

I like to consider CSS as a conditional design language. Over time, CSS was often called a technique to fashion net pages. Now, nevertheless, CSS has advanced lots to the purpose you may see conditional guidelines. The fascinating bit is that these CSS guidelines aren’t direct (i.e: there’s nonetheless no if/else in CSS), however the best way options in CSS work is conditional.

Design instruments like Figma, Sketch, and Adobe XD made an enormous enchancment for us designers, however they nonetheless lack quite a lot of the pliability that CSS has.

On this article, I’ll go over a couple of CSS options that we use on daily basis, and present you the way conditional they’re. Along with that, I’ll evaluate a couple of examples the place CSS is way more highly effective than design instruments.

What’s conditional CSS?

In easy phrases, it’s about design that has sure situations. When a number of situations are met, the design is topic to vary because of that.

For instance, including a brand new part to a design should push the opposite parts beneath it. Within the following determine, we have now a stack of things on the left. When including a brand new one, the opposite gadgets beneath it should transfer down.

Logically, that sounds anticipated and regular. In design instruments, we obtained this a couple of years in the past. In Figma, we have now “Auto Structure” options that do the above. On the net, we have now had that from day 1, even with out CSS in any respect.

Conditional CSS

You is likely to be interested by what the heck conditional CSS is. Is that even a factor? No, there hasn’t been a direct “if” assertion in CSS.

The principle factor to differentiate is that some CSS properties work in particular situations or eventualities. For instance, when utilizing the CSS :empty selector to examine if a component is empty or not, it’s a conditional pseudo selector.

.alert p:empty {
  show: none;
}

If I need to clarify the above to my 2 years previous daughter, I’ll do it like this:

If there’s nothing right here, it would disappear.

Did you discover the if assertion right here? That is conditional design not directly. Within the following part, I’m going to discover a couple of CSS options which work equally to an if/else assertion.

The purpose? To have a stronger thought and expectation concerning the CSS you wrote. I imply, it is possible for you to to identify conditional CSS by simply trying on the CSS for a part, a piece, or a web page.

CSS versus Figma

Why Figma? Properly, I think about it as the usual for UX design lately, I believed it’s a good suggestion to do my comparability primarily based on it. I need to share a easy instance. There may be checklist of tags which are displayed horizontally.

Once you suppose deeply about it, you’ll spot some main variations. For instance, the CSS model:

• Can wrap into a brand new strains if there isn’t a sufficient area.
• Works with each LTR and RTL instructions.
• The hole can be used for rows when the gadgets wrap.

Figma doesn’t have any of the above.

In CSS, there are three conditional guidelines taking place:

• If flex-wrap is ready to wrap, then the gadgets can wrap when there isn’t a accessible area.
• When the gadgets wrap into a brand new line, the hole will work for the horizontal and vertical areas.
• If the web page course is RTL (right-to-left), the gadgets will change their order (e.g: design would be the first one from the best).

This is only one instance, and I can write a guide like that. Let’s discover a couple of instances the place CSS may be conditional.

Conditional CSS examples

Media question

We are able to’t discuss conditional CSS with out mentioning CSS media queries. The CSS spec is called CSS Conditional Rules Module. To be sincere, that is the primary time that I study that title.

After I did my analysis about who asks or mentions “Conditional CSS”, I discovered a couple of time that media queries are the closest factor to an “if” assertion in CSS.

.part {
  show: flex;
  flex-direction: column;
}

@media (min-width: 700px) {
  .part {
    flex-direction: row;
  }
}

If the viewport width is 700px or bigger, change the flex-direction of .part to column. That’s specific if assertion, isn’t it?

The identical factor can apply to media queries like @media (hover: hover). Within the following CSS, the hover style can be utilized provided that the person is utilizing a mouse or a trackpad.

@media (hover: hover) {
  .card:hover {
    /* Add hover kinds.. */
  }
}

Dimension container question

With container queries, we are able to examine if the mother or father of a part has a selected dimension and magnificence the kid part accordingly.

.card-wrapper {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    show: flex;
    align-items: middle;
  }
}

I’ve written about container queries multiple times, and have a place the place I share demos about it.

Type container question

On the time of writing this text, that is behind a flag in Chrome Canary and is meant to ship in Chrome steady.

With a mode question, we are able to examine if a part is positioned inside a wrapper that has a selected CSS variable and if sure, we fashion it accordingly.

Within the following determine, we have now an article physique that’s coming from a CMS. We have now a default fashion for the determine and one other fashion that appears featured.

To implement that with fashion queries, we are able to fashion the default one, after which examine if the determine has a particular CSS variable to permit the customized styling.

determine {
  container-name: determine;
  --featured: true;
}

/* Featured determine fashion. */
@container determine fashion(--featured: true) {
  img {
    /* Customized styling */
  }

  figcaption {
    /* Customized styling */
  }
}

And if --featured: true isn’t there, we are going to default to the bottom determine design. We are able to use the not key phrase to examine when the determine doesn’t have that CSS variable.

/* Default determine fashion. */
@container determine not fashion(--featured: true) {
  figcaption {
    /* Customized styling */
  }
}

That’s an if assertion, but it surely’s implicit.

One other instance is having a part styled in a different way primarily based on its mother or father. Contemplate the next determine:

The cardboard fashion can change to darkish if it’s positioned inside a container that has the --theme: darkish CSS variable.

.special-wrapper {
  --theme: darkish;
  container-name: stats;
}

@container stats fashion(--theme: darkish) {
  .stat {
    /* Add the darkish kinds. */
  }
}

If we learn the above, it looks like:

If the container stats have the variable --theme: darkish, add the next CSS.

CSS @helps

The @helps function lets us take a look at if a sure CSS function is supported in a browser or not.

@helps (aspect-ratio: 1) {
  .card-thumb {
    aspect-ratio: 1;
  }
}

We are able to additionally take a look at for the assist of a selector, like :has.

@helps selector(:has(p)) {
  .card-thumb {
    aspect-ratio: 1;
  }
}

Flexbox wrapping

In line with MDN:

The flex-wrap CSS property units whether or not flex gadgets are pressured onto one line or can wrap onto a number of strains. If wrapping is allowed, it units the course in that strains are stacked.

The flex-wrap property permits flex gadgets to wrap into a brand new line in case there’s not sufficient area accessible.

Contemplate the next instance. We have now a card that comprises a title and a hyperlink. When the area is small, every youngster merchandise ought to wrap into a brand new line.

.card {
  show: flex;
  flex-wrap: wrap;
  align-items: middle;
}

.card__title {
  margin-right: 12px;
}

That feels like a conditional factor to me. If no accessible area, wrap into a brand new line(s).

When every flex merchandise wraps right into a line, how do I handle the spacing between the flex gadgets, you requested? At present, there’s a margin-right on the heading, and when they’re stacked, that ought to be changed by margin-bottom. The issue is we don’t know when the gadgets will wrap as a result of it depends upon the content material.

The great factor is that the spacing may be conditional with the hole property. When they’re in the identical line, the spacing is horizontal, and with a number of, the spacing is vertical.

.card {
  show: flex;
  flex-wrap: wrap;
  align-items: middle;
  hole: 1rem;
}

That is considered one of my favourite flexbox options. Here’s a visible of how hole switches the spacing.

By the best way, I think about flex-wrap as defensive CSS. I virtually add it to any flex container to keep away from any surprising points.

The flex property

Much more, the flex property can work conditionally, too. Contemplating the next instance. I added flex: 1 to the cardboard title to make it fill the accessible area.

.card__title {
  flex-grow: 1;
}

That works superb, however when the width of the cardboard is simply too small, the cardboard title will wrap into a brand new line.

Nothing too unhealthy, however can we do higher? For instance, I need to inform the title: “Hey, in case your width is lower than X, then wrap into a brand new line”. We are able to do this by setting the flex-basis property.

Within the following CSS, I set the utmost width of the title to 190px. If it’s lower than that, it would wrap into a brand new line.

.card__title {
  flex-grow: 1;
  flex-basis: 190px;
}

To be taught extra concerning the flex property in CSS, I wrote a detailed article on that.

Take issues additional, and clarify about including flex-grow, string.. and so on alongside the best way.

The :has selector

For me, that is the closest factor to an “if” assertion in CSS proper now. It really works in a approach that mimics an if/else assertion.

Altering a card fashion

On this instance, we have to have two totally different kinds, relying on if the cardboard has a picture or not.

If the cardboard has a picture:

.card:has(.card__image) {
  show: flex;
  align-items: middle;
}

And if it doesn’t have a picture:

.card:not(:has(.card__image)) {
  border-top: 3px strong #7c93e9;
}

That’s an if assertion, and I strongly suppose so. Sorry, I obtained too excited.

Hiding or exhibiting kind gadgets conditionally

In kinds, it’s frequent to have an enter subject or a bunch of inputs hidden by default, and will probably be proven as soon as the person prompts an possibility from a <choose> menu.

With CSS :has, we are able to examine if the different possibility is chosen and if sure, present the enter subject.

.other-field {
  show: none;
}

kind:has(possibility[value="other"]:checked) .other-field {
  show: block;
}

Alerts

When there’s an alert message on a web page, like for instance a significant warning of one thing unsuitable within the system, we’d have to make it much more apparent.

On this instance, we have now an alert throughout the web page, and with CSS :has, we are able to examine if the dashboard has an alert, and if sure, fashion accordingly.

.primary:has(.alert) .header {
  border-top: 2px strong pink;
  background-color: #fff4f4;
}

So helpful.

Change grid columns primarily based on the variety of gadgets

Have you ever ever wanted to show and alter the width of a column in a grid primarily based on the variety of youngster gadgets?

CSS :has can do this, conditionally.

.wrapper {
  --item-size: 200px;
  show: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(var(--item-size), 1fr)
  );
  hole: 1rem;
}

.wrapper:has(.merchandise:nth-last-child(n + 5)) {
  --item-size: 120px;
}

Within the instance, it says that if the .wrapper has 5 gadgets, then the --item-size variable will change to 120px.

To be taught extra concerning the CSS :has selector, I wrote an article on it with loads of examples.

CSS grid minmax() perform

The best way minmax() works in CSS grid is conditional. Once we use auto-fit key phrase, we’re telling the browser: “if there’s an accessible area, make the grid gadgets fill the area”.

The adjoining sibling combinator

That combinator matches the second aspect that comes instantly after a component.

Within the following instance, if an <h3> aspect is adopted by a <p>, the <p> will get customized kinds.

See Also

LATAM Airways passenger says pilot instructed him he misplaced management of Boeing aircraft after instrument failure

h3 + p {
  margin-top: 8px;
}

The <p> prime margin has been modified conditionally.

The :focus-within pseudo-class

One other fascinating function in CSS is :focus-within. Say that you just need to examine whether or not an enter is targeted, and if sure, add a border to its mother or father.

Contemplate the next instance:

We have now a search part. When the enter is targeted, the entire wrapper ought to have an overview. With :focus-within, we are able to examine if the enter is targeted, and magnificence accordingly.

.hero-form:focus-within {
  box-shadow: 0 0 0 5px rgb(28 147 218 / 35%);
}

The :not selector

This pseudo-class excludes parts that don’t match a sure selector. For instance, it may be helpful to examine if an merchandise is the final one, and if sure, take away the border.

.merchandise:not(:last-child) {
  border-bottom: 1px strong lightgrey;
}

Conditional border-radius

Some time in the past, I wrote about how I noticed an fascinating conditional strategy so as to add border-radius for a card on the Fb web site.

The thought is that when the cardboard is the same as or bigger than the viewport, the radius ought to be 8px, if not, then it’s 0px.

.card {
  border-radius: max(
    0px,
    min(8px, calc((100vw - 4px - 100%) * 9999))
  );
}

You’ll be able to learn the article here.

Conditional line separator

One other fascinating use case the place CSS works conditionally is having a line separator that switches its course and dimension primarily based on whether or not the gadgets are wrapped or not.

Within the following determine, discover the road separator between the 2 sections.

I would like that line to change horizontally when the flex gadgets are stacked. By utilizing flex-wrap and clamp comparability, we are able to obtain that.

.part {
  --: 400px;
  show: flex;
  flex-wrap: wrap;
  hole: 1rem;
}

.part:earlier than {
  content material: "";
  border: 2px strong lightgrey;
  width: clamp(0px, (var(--breakpoint) - 100%) * 999, 100%);
}

This has been written on my blog, and the clamp() resolution is a suggestion by Temani Afif.

Intrinsic sizing: fit-content

The fit-content key phrase is a mixture of min-content and max-content. I do know, it’s not clear. Let’s check out the next flowchart.

If we have now a component with width: fit-content, it would work conditionally as per the flowchart above.

h2 {
  width: fit-content;
}

Here’s a video of what’s taking place on resize:

I wrote about intrinsic sizing on my weblog if you happen to’re .

Comparability capabilities

CSS comparability capabilities are min(), max(), and clamp(). One explicit instance that feels conditional for me is one thing that I stumbled upon in a latest article I wrote.

The thought is I’ve two totally different containers, one of many article header (title and date), and a container for the primary content material plus the apart.

I need to align the sting of the header content material with the physique content material.

On cellular, I would like the padding from the left to be 1rem, however on bigger viewports, will probably be dynamic as per the viewport width.

To try this, I can use the max() perform to decide on one of many two values (1rem or dynamic worth) conditionally.

.prose {
  padding-left: max(1rem, (100vw - var(--wrapper-width)) / 2);
}

You’ll be able to be taught extra about this system in my article Inside the mind of a frontend developer: Article layout.

Pseudo-classes

There are quite a lot of pseudo-classes in CSS, however the ones that got here to thoughts are :targeted and :checked.

enter:checked + label {
  /* Customized styling */
}

enter:focus {
  define: 2px strong #222;
}

If the enter is checked, add these kinds to the <label>. If the enter is targeted..and so forth.

However.. CSS isn’t a programming language!

I do know, thanks for letting me know. That is argument that I hear lots. I personally don’t have a robust opinion on that, however CSS is conditional in some ways.

The truth is, many of the examples above can’t be carried out in Javascript with out utilizing a conditional assertion.

Conclusion

I loved writing this text as a result of it jogged my memory of why I like utilizing CSS. To me, CSS is sort of a superpower as a result of it permits me to make so many design choices via its conditional options. Working with design instruments can typically really feel limiting as a result of I really feel like I’m constrained inside sure partitions. I feel that the flexibility to create conditional guidelines with CSS is what units it aside and makes it highly effective for net design.

That doesn’t imply that I design within the browser. I think about design instruments as an open canvas to try to experiment with design concepts, and constructing polished UI merchandise.

I like to make use of the browser to tweak designs, as an alternative of designing them fully.

And also you, what do you suppose? I might love to listen to your ideas and concepts.

Thanks for studying.