Frontend Weekly 2025-02-07

1
<style>
2
  [data-color] {
3
    color: attr(data-color type(color), red);
4
  }
5
  [data-size] {
6
    font-size: attr(data-size px, 16px);
7
  }
8
</style>
9
<div data-color="coral" data-size="24">Advanced attr() example</div>

1
<input type="range" min="1" max="5" />
2
<style>
3
  input[type="range"] {
4
    --s: 40px;
5
    height: var(--s);
6
    aspect-ratio: attr(max type(<integer>));
7
    padding-inline: calc(var(--s) / 3);
8
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="white" d="M 50 15 C 20 -10, -10 40, 50 90 C 110 40, 80 -10, 50 15 Z"/></svg>');
9
    appearance: none;
10
    cursor: pointer;
11
  }
12
  input[type="range" i]::-webkit-slider-thumb {
13
    width: 1px;
14
    border-image: conic-gradient(
15
        at calc(50% + var(--s) / 2),
16
        #aaa 50%,
17
        #ff0000 0
18
      ) fill 0 //var(--s) calc(20*var(--s));;
19
    appearance: none;
20
  }
21
</style>

1
.item {
2
  view-transition-name: attr(id type(<custom-ident>), none);
3
}

1
.container {
2
  display: grid;
3
  grid-template-areas:
4
    "header header header"
5
    "nav main main"
6
    "nav footer footer";
7
}
8
.item {
9
  grid-area: attr(data-area type(<custom-ident>), auto);
10
}

1
.sticky-header {
2
  position: sticky;
3
  top: 0;
4
  z-index: 1;
5
  container-type: scroll-state;
6
  .sticky-header-inner {
7
    transition: background 0.3s ease;
8
    @container scroll-state(stuck: top) {
9
      background: lightcoral;
10
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
11
    }
12
  }
13
}

1
<style>
2
  .container {
3
    display: grid;
4
    grid-auto-flow: column;
5
    grid-auto-columns: 50%;
6
    overflow: auto hidden;
7
    scroll-snap-type: x mandatory;
8
    > .item {
9
      container-type: scroll-state;
10
      scroll-snap-align: center;
11
      > * {
12
        transition: opacity 0.5s ease;
13
        @container not scroll-state(snapped: x) {
14
          opacity: 0.25;
15
        }
16
      }
17
    }
18
  }
19
</style>

1
p {
2
  text-box: trim-both cap alphabetic;
3
}

1
button.addEventListener("click", () => {
2
  if (child.parentNode === rightParent) {
3
    leftParent.moveBefore(animateObj, null);
4
  } else {
5
    rightParent.moveBefore(animateObj, null);
6
  }
7
});