Html

What my site currently supports: Note ...

I recently discovered the datetime-local input type doesn’t actually have full browser support. If you have a form value that needs both a date and time component, then you might be tempted to rely on the platform to simplify your implementation and use datetime-local to avoid needing two separate inputs, the values of which you’ll need to combine at some point. Unfortunately I don’t think it’s supported enough to be usable in most applications. ...

How to Optimize Viewport for Mobile for Faster Interactions | DebugBear If the viewport isn’t configured properly (e.g., the meta tag has a fixed value), mobile browsers delay all responses by up to 300 milliseconds. As a result, users will have to wait after each tap, the UI will feel sluggish, and Interaction to Next Paint (INP) scores will increase dramatically.

Do not download the app, use the website

A Friendly Introduction to SVG • Josh W. Comeau This is another great tutorial from Josh on the basics of SVG markup! If you want to go further, this is an awesome interactive site for understanding SVG paths: Understanding SVG paths

Building Websites With LLMS I’ve mentioned the new view transitions API before, Jim Nielsen has a great post (with a fun bait-and-switch title) where he takes it to the next level and shows how you can use cross-document transitions to take a site with regular ole html pages and make it feel like a SPA or native app.

Today I learned that you can now create an “exclusive accordion”, meaning only one section of the accordion is open at a time, using just html with the details element. All you need to do is add a matching name attribute to each <details> element you want to be considered part of the same “group”: <details name="faq"> <summary>Section 1</summary> <p> Section 1 details </p> </details> <details name="faq"> <summary>Section 2</summary> <p> Section 2 details </p> </details> Note, the <details> element has been widely supported since 2020 but support for the name attribute was only added last year. ...

Thanks to James’ post, today I learned that you can use the <picture> to display different images based on whether or not the set a preference for light or dark mode. The key is using the prefers-color-scheme CSS media query <picture> <source media="(prefers-color-scheme: dark)" srcset=" https://user-images.githubusercontent.com/25423296/163456776-7f95b81a-f1ed-45f7-b7ab-8fa810d529fa.png " /> <img alt="Shows an illustrated sun in light color mode and a moon with stars in dark color mode." src="https://user-images.githubusercontent.com/25423296/163456779-a8556205-d0a5-45e2-ac17-42d089e3c3f8.png" /> </picture> Since HTML is valid in markdown, you can easily use this technique in a number of places including Github—which apparently has allowed the use of the picture element since 2022. This is much better than the custom syntax they had before. ...

Today I learned that if you have a single text field in a form then browsers will automatically submit it when you press enter. <form> <label> Search <input type="text"> </label> </form> This is kinda handy since normally you need to add a submit button to be able to submit a form — but, you should be aware that if you add another field then you do need to add a submit button for the form to work. ...

Apparently in Safari, setSelectionRange() will focus the element even when not focused despite MDN stating that “The element must be focused for the call to have any effect”. According to this bug, this is considered intended behavior even though it’s inconsistent with MDN and the other browsers. It’s worth noting though, during my testing, I noticed that Chrome/Firefox will update the selection and cursor position you just won’t see it unless you programmatically call .focus() on the element.