A quick tip showcasing why you should use :invalid and :valid CSS pseudo-classes on your input fields.

CSSWE focuses on web accessibility, inclusive design, and CSS best practices, offering a resource for developers committed to creating accessible and inclusive web experiences. Through tutorials, case studies, and tool recommendations, CSSWE helps developers understand the importance of web accessibility and provides practical strategies for implementing accessibility standards in their projects. By mastering CSS techniques for optimizing performance, enhancing usability, and ensuring inclusivity, developers can create websites that are accessible to all users, regardless of their abilities or disabilities.

CSS Weekly

Instead of using the :invalid and :valid CSS pseudo-classes on form inputs — which trigger immediately on page load before user interaction — you should use :user-invalid and :user-valid. These newer pseudo-classes only activate after the user has actually interacted with the input field, providing a better inline validation experience without needing JavaScript or workarounds like input:not(:placeholder-shown):invalid.

Stop Using :invalid and :valid Pseudo-Classes. Use THIS Instead!

<p>I didn’t know about those pseud-classes though it is already well supported by browsers apparently. A good way to keep the code dry and still readable</p>
