posix
KPCKevin Powell - Community
•Created by posix on 9/19/2024 in #front-end
Styling datalist
In response to Kevin's https://youtu.be/rw30Dw4zcxo
^ I presume it's still not possible to style all the menus for different data pickers, right?
So if I want a consistent cross browser UI that follows my style guidelines, I have to recreate these picker menus manually, with HTML semi-hacks and a lot of JavaScript).
Correct?
3 replies
KPCKevin Powell - Community
•Created by posix on 8/27/2024 in #front-end
text-decoration and pointer-events of anchor pseudo-elements
45 replies
KPCKevin Powell - Community
•Created by posix on 3/8/2024 in #front-end
CSS Columns layout with dynamic overflow-x
Please see the included code.
- Why is my
<main>container overflowing vertically instead of horizontally?
- Why does it work when I set a fixed height on it? It should simply fill the available height it can have, and overflow on x dynamically.
Many thanks for any assistance. I had expected this to be very easy, but instead it's made me hate CSS again.10 replies
KPCKevin Powell - Community
•Created by posix on 2/12/2024 in #front-end
On Kevin's recent FlexBox deep-dive
https://youtu.be/FD3aC_Ke8uk?si=wDDdxspRXQ2kqyTE
Should you read this, thank you Kevin for this video. I feel a bit shocked by it. Not only because I've worked with German text often and have suffered the long word overflow thing, but just generally at how CSS keeps these fundamentally important things perfectly hidden from someone aspiring to learn. It takes a real CSS expert like yourself, who also is a dev tool expert across different browsers, to explain why this happens. I find that somewhat disencouraging. There are way too many hidden defaults and truths in CSS to make learning it fun.
But more on topic: the key moment for me was the "Name:" vs "Your Name:" behaviour, and how the intrinsic width triggered a different outcome. That's honestly shocking..... I'm so glad to have understood why this is, as it's been a problem for me hundreds of times. I'm sure there is verbose and long CSS documentation on these things, somewhere, but they are very inaccessible typically, especially for less experienced developers.
ANYWAY, if I can ask one question, because this is something I still can't get my head around: I used to think for the longest time that intrinsic widths is concerned only with text characters, ie much like the ch unit. But seeing you do the input example, I suppose that's wrong.
Can Flexbox "detect" an intrinsic width of images, too? And then most importantly for me: what about SVGs? I can never seem to size these inside flexboxes, let alone outside flexboxes, to respond dynamically to their containers. They always overflow, especially in height. What is their intrinsic width? The one set in the viewbox property? Or is it 0 because it's a vector?
Sorry for the long message, and thanks if anyone reads this.
1 replies
KPCKevin Powell - Community
•Created by posix on 1/23/2024 in #front-end
How to see LCH colour previews in VSC?
26 replies
KPCKevin Powell - Community
•Created by posix on 10/29/2023 in #front-end
How to know the origin of greyed out CSS properties?
3 replies
KPCKevin Powell - Community
•Created by posix on 9/3/2023 in #front-end
Vertically align ::before/::after elements to parent, where parent needs to follow inline baseline
10 replies
KPCKevin Powell - Community
•Created by posix on 10/2/2022 in #front-end
CSS Grid column bg colour (when using gap)
I want to produce a table using CSS grid as that is much easier to make responsive.
If I use
gap as I want to avoid item padding/margin, can I still colour the background of an entire column or row? Or do something like lines separating every row?
The gap property, no matter how useful, seems to break this.
I'd not like to resort to an actual html table if possible.
Thanks for any thoughts.2 replies