Chris FerdinandiLove HTML? I think you might enjoy Kelp, my new UI library powered by modern CSS and Web Components.
mathew@cferdinandi FYI, looks like there's a rendering issue with date fields in Safari.
@mathew looks like I forgot to add this fix to the demo: https://kelpui.com/docs/forms/date-time/#formatting-issues
Thanks for letting me know!
Date Picker
Expose a calendar modal for selecting dates and times. Date Pick a date. Important! Only use date pickers for dates that are in the near future or past. They create usability issues for distant dates (like birthday). When will you arrive? <label for="start">When will you arrive?</label> <div class="flex"> <input type="date" id="start" name="start"> </div> Time Pick a time. Reservation Time <label for="reservation">Reservation Time</label> <div class="flex"> <input type="time" id="reservation" name="reservation"> </div> Date/Time Pick a date and time.
@cferdinandi That doesn't seem to have fixed it. To be clear, it's the vertical size of the date input that looks wrong, rather than the horizontal. There's some gratuitous padding at the bottom, and I can't work out why.
@mathew because Safari sucks. Just to be clear, I haven’t applied that fix anywhere.
I will, but haven’t.
@mathew actually, it looks like the fix is already there and not doing anything. How odd.
@mathew Ok, this seems to be a know, documented bug. I created a ticket for it, and will work out a fix eventually: https://github.com/cferdinandi/kelp/issues/235
@mathew FIXED! Super fucking annoying bug that it looks like Bootstrap actually still suffers from.
Thanks for pointing this out! I added an automated test to prevent regressions of this bug in the future.
@cferdinandi Ah! I had a hunch it was from the padding in the shadow DOM built into Safari, but the Inspector didn't show there being any padding there.
[Insert Family Guy CSS meme]
@mathew Same! I had to go DEEEEP down the rabbit hole to learn there's a setting that's off by default in dev tools that you can enable.
This whole thing was a shit show, though!
@cferdinandi Oh, please tell me about the setting!
@mathew In Safari it was just on for me by default. In Chromium, it's under Preferences > Elements > "Show user again shadow DOM"
@cferdinandi In Safari I see the shadow DOM, but nothing indicating more than 1px of padding or margin on the elements. Oh well.
@mathew It's more of an issue on iOS, where the padding around some of the shadow elements is different
Sindarina, Edge Case Detective@cferdinandi I've been meaning to ask; do you mind if people reuse that little pride flag banner elsewhere? It's neat! 😄
@sindarina please use it!!
Showing your colors
A few months ago, I shared how to create gradient borders, and how I used that technique to add the LGTBQ+ Progress Flag colors to my site for Pride Month. Last week, I brought the Progress border back, and decided to make it permanent. The colors are fucking gorgeous! It’s BIPOC (Black, Indigenous, People of Color) inclusive. Our LGBTQ, non-male, and non-white friends are more under attack than ever. Is it performative?
@cferdinandi Awesome 😄
By the way; if you serve your RSS feed with the appropriate mimetype, such as 'application/rss+xml', it'll open directly into any registered RSS reader, instead of opening as an XML file in the browser, like it does now with the default 'application/xml' type 😎