BlueBeka Posts - Answer Overflow

BlueBeka

Explore posts from servers

KPCKevin Powell - Community TTCTheo's Typesafe Cult

•Created by BlueBeka on 2/10/2024 in #front-end

Is using `aria-labelledby` redundant on an `input` element if already has an associated `label`?

Is there any point of the former over the latter?

<label for="foo" id="bar">Label</label>
<input id="foo" aria-labelledby="bar" />

<label for="foo" id="bar">Label</label>
<input id="foo" aria-labelledby="bar" />

vs.

<label for="foo">Label</label>
<input id="foo" />

<label for="foo">Label</label>
<input id="foo" />

Or is that relationship automatically inferred?

3 replies

KPCKevin Powell - Community

•Created by BlueBeka on 12/10/2023 in #front-end

Can `@supports` be used to detect support for an at rule?

I want detect if the browser supports @starting-style. So i need something like:

@supports (@starting-style) {
  /* ... */
}

@supports (@starting-style) {
  /* ... */
}

What's the valid syntax for this? assuming there is one.

2 replies

KPCKevin Powell - Community

•Created by BlueBeka on 10/30/2023 in #front-end

css `color-mix` not working with paint api.

For some reason I can't seem to use color-mix to set a color for houdini's paint api. Setting a simple color or even a relative color works fine. Any Idea why color-mix isn't working for me?

/* working */
--squiggly-line-color: red;
/* working */
--squiggly-line-color: oklch(
    from red calc(l * 7 / 8) calc(c * 3 / 4) h
  );
/* not working */
--squiggly-line-color: color-mix(
    in oklab,
    white 75%,
    black
  );

background: paint(squiggly-line);

/* working */
--squiggly-line-color: red;
/* working */
--squiggly-line-color: oklch(
    from red calc(l * 7 / 8) calc(c * 3 / 4) h
  );
/* not working */
--squiggly-line-color: color-mix(
    in oklab,
    white 75%,
    black
  );

background: paint(squiggly-line);

6 replies

KPCKevin Powell - Community

•Created by BlueBeka on 10/23/2023 in #front-end

Is it possible to scale an element by a fixed about using only css

I have a style that display a scale effect when a focusable elements is focused. Here's the rough css for applied to an anchor tag:

a {
  display: inline-block;
  scale: 1;
  transition: scale 0.3s ease;
  /* other styles */
}
a:focus-visible {
  scale: 1.05; /* can I make this an absolute amount, rather than relative */
  /* other styles */
}

a {
  display: inline-block;
  scale: 1;
  transition: scale 0.3s ease;
  /* other styles */
}
a:focus-visible {
  scale: 1.05; /* can I make this an absolute amount, rather than relative */
  /* other styles */
}

I'm also applying this effect to buttons, inputs, etc. Is there anyway I can modify this code to scale the element by a set about (say 1rem) rather than a relative amount? My issue with the relative amount is that is doesn't look good with elements that have quite different sizes.

4 replies

KPCKevin Powell - Community

•Created by BlueBeka on 10/20/2023 in #front-end

Tabindex for Button inside Link

I've got this html

<a href="example.com">
  <button>Label</button>
</a>

<a href="example.com">
  <button>Label</button>
</a>

The button is styled with css while the link has no styles/all the styles have been removed. The issue I have is when tabbing through the site, focus first goes to the link, and then to the button. However, I only need one of these to be tabbed to as they are essentially a single component. What's the best way to fix this? If I add tabindex="-1" to the button, functionally everything is good, but the focus styling on the button don't display. While if I add it to the link, I'm worried this will effect accessibility. Will it? or this the proper solution?

29 replies

KPCKevin Powell - Community

•Created by BlueBeka on 6/23/2023 in #front-end

Container Query units - vertical unit all evaluate to zero

I think I've fallen into a pitfall with container query units. 100cqb and 100cqh are evaluating to zero, but 100cqi and 100cqw are working as expected. Here's a simplified version I want I believe is all my relevant css:

.parent {
  container-name: foo;
  container-type: size;
  min-height: 500px;
  display: block;
}
.child {
  height: 200px;
  min-height: 100px;
  max-height: calc(100cqh - 64px);
  resize: vertical;
}

.parent {
  container-name: foo;
  container-type: size;
  min-height: 500px;
  display: block;
}
.child {
  height: 200px;
  min-height: 100px;
  max-height: calc(100cqh - 64px);
  resize: vertical;
}

Any ideas to the cause of why my max-height is coming out as 0px instead of >= 436px?

4 replies

Gaming

Programming