CSS

Learn CSS for styling and frameworks like Tailwind CSS.

LinkIconNews

LinkIconMay 13, 2025: The if() function in CSS

The if() function came to CSS!!

Previously, we had the @container that works as an if()

LinkIconUse Case: delete unnecessary boilerplate

<div class="box"></div>

Before:

.box {
  width: 300px;
  height: 300px;
  background-color: red;
}
 
@media (width <= 1000px) {
  .box {
    background-color: blue;
  }
}
 
@media (width <= 600px) {
  .box {
    background-color: green;
  }
}

After:

.box {
  width: 300px;
  height: 300px; 
  background-color: if(
    /* note the order, 600 first, 1000 second */
    media(width <= 600px): green;
    media(width <= 1000px): blue;
    else: red
  );
}

LinkIconUse Case: set variables and attr()

:root {
  --bp: if(
    media(width <= 600px): "sm";
    media(width <= 100px): "md";
    else: "lg";
  );
  
  --status: attr(data-status);
  background-color: if(
    style(--status: "loading"): green;
    style(--status: "loaded"): green;
    style(--status: "error"): red;
    else: black;
  )
}

Notice that you can only set one property per condition at a time. If you are setting more than 1 properties per condition, it's better to use the Before way.

LinkIconFeb 4, 2025: The powerful attr() function

The attr() function allows to get value of an attribute such as class, style, or even custom ones.

It now works in any element. Previously, it only work on pseudoelements ::before and ::after.

attr(property-1 property-2, property-3)
 
property-1: property name to get the value from
property-2: type to cast. since property-1 is in raw string, css cannot understand, then we need to cast it. Tip, to get what type we need, hover the css property name
property-3: fallback

LinkIconExample

<div class="box" data-color="green" data-width="20" data-animation="pulse">Box</div>
<style>
  .box {
    background-color: attr(data-color type(<color>), red)
    width: attr(data-width px, 10);
    height: 300px; 
    animation: attr(data-animation type(<custom-ident>)) 1s infinite
  }
 
  @keyframes pulse {
    from {
      opacity: .5;
    }
    to {
      opacity: 1;
    }
  }
</styl>

LinkIconMar 19, 2024 Field Sizing

Field sizing fixes the Textarea resizing problem. Previosuly, it was fixed using javascript but now with CSS.

By default

/* by default */
field-sizing: fixed;

To autosize use

field-sizing: content;

Tip: use max-width: 60px, min-width: 200px, resize: vertical to set limits.

LinkIconExample


LinkIconCompatibility

@supports (field-sizing: content) {
  input,
  textarea {
    field-sizing: content;
  }
}
 
@supports not (field-sizing: content) {
  input,
  textarea {
    width: 200px; /* fallback */
  }
}

LinkIconDec 10, 2024: Display Property Accepts Two Arguments

Now display property accepts two arguments. Previosly, it had properties like display: inline-flex, display: inline-block, display: inline-grid to style the current element and its children.

display: property-1 property-2
 
property-1: the style for the current element
property-2: the style for its children

This solves scability issues within css API.

LinkIconExample

div {
  display: inline flex
}