DEV Community: avcat

Which casing do you prefer?

avcat — Fri, 26 Dec 2025 13:41:19 +0000

loading - best practices

avcat — Sat, 22 Nov 2025 02:04:43 +0000

HTML elements

HTML attributes

All together

<picture>
  <source 
    type="image/avif"
    srcset="/image.avif?width=100 100w, /image.avif?width=200 200w, /image.avif?width=400 400w, /image.avif?width=800 800w" />
  <source 
    type="image/webp"
    srcset="/image.webp?width=100 100w, /image.webp?width=200 200w, /image.webp?width=400 400w, /image.webp?width=800 800w" />
  <img 
    src="/image.png"
    srcset="/image.png?width=100 100w, /image.png?width=200 200w, /image.png?width=400 400w, /image.png?width=800 800w"
    sizes="(max-width: 800px) 100vw, 50vw"
    style="width: 100%; aspect-ratio: 16/9"
    loading="lazy"
    decoding="async"
    alt="Builder.io drag and drop interface"
  />
</picture>

Source: builder.io.

Modern CSS reset?

avcat — Mon, 15 Sep 2025 16:44:06 +0000

Previously I have been using sanitize CSS reset. In practice it turned out to be quite extra and still needed tweaking.

For now my approach is: the simpler = the better. The CSS reset from Josh Comeau is quite simple and modern: as you may see, it uses newer properties for text-wrap and interpolate-size. In the linked article you will find explanations for all the properties used.

/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

#root, #__next {
  isolation: isolate;
}

@media (768px < width <= 1024px) - 92% support (Media Queries Range Syntax)

avcat — Tue, 02 Sep 2025 09:40:04 +0000

That's it! I think we can finally start using more convenient syntax for media queries.

/* Newer syntax */
@media (768px < width <= 1024px) {
  body {
    background-color: lightblue;
  }
}

/* Older syntax */
@media (min-width: 769px) and (max-width: 1024px) {
  body {
    background-color: lightblue;
  }
}

Source: caniuse.

aspect-ratio sets "preferable" sizes, but does not force the size

avcat — Mon, 01 Sep 2025 10:45:10 +0000

CSS Box Sizing Module Level 4:

This property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.

Aspect ratio will be ignored in cases of content overflow (when overflow is not hidden or auto) or in flex elements.

.awesome-box {
  width: 150px;
  aspect-ratio: 1;
}

But aspect-ratio can be forced by setting:

min-height to 0
or, as it was written above, by setting overflow explicitly

.awesome-box {
  width: 150px;
  aspect-ratio: 1;
  min-height: 0;
}

Source: habr.

overflow-x: clip > overflow-x: hidden

avcat — Fri, 29 Aug 2025 21:05:06 +0000

Due to the known bug, you cannot have overflow-x: hidden and overflow-y: visible at the same time.

But you can with overflow-x: clip — this is basically the fixed version, plus you don’t need to explicitly specify the overflow for another axis.

Support: 92%.

Source: Kevin Powell.

font-variant-numeric - better font display for specific cases

avcat — Mon, 25 Aug 2025 16:09:39 +0000

Align numbers width

Something similar to making numbers monospaced, but on a browser level and without the need to change the font.

table, time {
  font-variant-numeric: tabular-nums;
}

Align numbers height

Is good in prose - numbers become like 'lowercase'.

p {
  font-variant-numeric: oldstyle-nums;
}

Align letters height

Good for abbreviations - capital letters become the size of lowercase letters.

abbr {
  font-variant-numeric: all-small-caps;
}

Better fractions

Makes fractions 1/3 look better. Can be useful in technical texts.

.fraction {
  font-variant-numeric: diagonal-fractions;
}

Source: Kevin Powell.

hsl() - native CSS lighten/darken/rgba

avcat — Sun, 24 Aug 2025 11:12:41 +0000

Browser support is 95%+.

hsl syntax

:root {
  --accent-primary: hsl(0 80% 50% / 25%);
}

Change color

.darkened {
  color: hsl(from var(--accent-primary) h s calc(l - 15));
}

Change color and opacity

.lightened {
  color: hsl(from var(--accent-primary) h s calc(l + 15) / 0.1);
}

⚠️ Attention: s and l are percents in hsl syntax, but in the hsl() function with calc() they are used as absolute values - without % sign.

Source: MDN.

interpolate-size: allow-keywords - transition for non-numeric values

avcat — Sat, 23 Aug 2025 15:59:27 +0000

Browser support: currently 67%.

@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
    }

    details {
        transition: height 0.5s ease;
        height: 2.5rem;

        &[open] {
            height: auto;
            overflow: clip; /* Clip off contents while animating */
        }
    }
}

Sources: Chrome Developer, Kevin Powell.

border-radius + linear-gradient

avcat — Fri, 22 Aug 2025 11:19:23 +0000

Squared gradient border can be achieved with border-image.

To make it rounded we have to use several tricks with CSS masks:

.card {
    border-radius: var(--br);
    position: relative;
    background: hsl(from var(--bg-dark) h s l / 0.1);
    backdrop-filter: blur(10px);

    &::before {
      content: '';
      position: absolute;
      z-index: -1;
      inset: 0;
      border-radius: inherit;
      border: 1px solid transparent;
      background: linear-gradient(
        var(--bg-light), 
        hsl(from var(--bg-dark) h s l / 0.1)
      ) border-box;
      mask: linear-gradient(black, black) border-box, linear-gradient(black, black) padding-box;
      mask-composite: subtract;
    }
  }

Source.

:has()

avcat — Wed, 20 Aug 2025 21:44:40 +0000

Style the element, after which there is an element, that contains an element with class pink

:has(+ * .pink) {}

Source.

:has()

avcat — Wed, 20 Aug 2025 11:40:58 +0000

Examples

An element contains at least 4 child elements

:has(:nth-child(4)) {...}

An element contains exactly 5 child elements

:has(:nth-child(5):last-child) {...}

Source.