prophile Posts - Answer Overflow

prophile

•Created by prophile on 8/18/2024 in #front-end

Highest contrast colour in pure CSS

I’m setting up a button component with a few different variants (.btn-primary, .btn-success, .btn-danger, that sort of thing)—these switch the background colour. Is there a way to set this up so the foreground colour is automatically selected between a dark and light option for whichever gives the most contrast? In pure CSS that is, rather than using some JavaScript. Being able to do an if-then-else for whether the L component of var(—btn-bg) is <50 would do the trick to select between the two as an approximation, but I’m not sure how to go from there. Is this possible?

9 replies

KPCKevin Powell - Community

•Created by prophile on 7/31/2024 in #front-end

Confused why certain elements aren't full-width in display: block

In this example:

<div class="foo">
    Bar <button>Bazz</button>
</div>

<div class="foo">
    Bar <button>Bazz</button>
</div>

with

.foo {
    background: lightgreen;
}

button {
    display: block;
}

.foo {
    background: lightgreen;
}

button {
    display: block;
}

I would have expected the change of button from display: inline to display: block to have made it full-width, because my understanding is that block elements are always full-width (or rather full inline size) unless styled otherwise. But the button does not change width, it's still shrink-wrapped around its contents. It does move onto a separate line and inspecting it shows it does have display: block though. What am I missing? Why is it not full-width? (I realise I could add an inline-size to change it, but I'm looking to plug the gap in my knowledge rather than fix a specific problem!)

9 replies

Gaming

Programming