CSS Tutorials
CSS :out-of-range
One aspect of web development I've always loathed was working with forms. Form elements have been traditionally difficult to style due to OS and browser differences, and validation can be a nightmare. Luckily the native HTML APIs added methods for improving the form validation situation.With...
CSS :optional
A decade ago HTML and CSS added the ability to, at least signal, validation of form fields. The
required
attribute helped inform users which fields were required, whilepattern
allowed developers to provide a regular expression to match against an<input>
's value. Targeting required fields...CSS :has
For as long as developers have written CSS code, we've been desperate to have a method to allow styling a parent element based child characteristics. That's not been possible until now. CSS has introduced the
:has
pseudo-class which allows styling a parent based on...Detect Dark Mode Preference with JavaScript
Seemingly every website, dapp, and app offers a dark mode preference, and thank goodness. Dark mode is especially useful when I'm doing late night coding, or even worse, trading into altcoins. I'm presently working on implementing a dark theme on MetaMask and it got...
CSS accent-color
For better or worse, form fields have been somewhat difficult to style with CSS. Form control display is dependent upon device, operating system, and browser, so you can imagine the difficulty in making styling easy. We have slowly been given some controls over form control...
Dark Mode in One Line of Code!
Dark mode has seemingly become the desired visual mode for websites and mobile apps alike. Dark mode is easier on the eyes, especially for those like me who like to burn the midnight oil by coding and reading tutorials. Unfortunately not all websites offer...
Always Show Arrows for Number Input
While I enjoy small details that make user interfaces more elegant, I also believe that less is more, especially when it comes to native behavior. One native behavior I dislike is that
<input type="number" />
elements only show the increment and decrement arrows when theinput
...CSS :is
There are scores of developers who hate CSS; don't get it, don't want to get it, etc. Most of that is either down to inefficiencies within the language or misunderstanding of how to properly construct a website structure. I mostly love CSS but there...
CSS Smooth Scroll
Improving the user experience of web applications has always been a priority of mine. I always come back to the same though I've had for 20 years: "users expect a web app to work -- let's make the app a joy to use."...
Detect CSS Overflow Elements
Every once in a while you encounter a CSS annoyance that takes some cleverness to discover. One such case rears its ugly head in unwanted and unexpected scrollbars. When I see unwanted scrollbars, I usually open developer tools, click the element inspector, and hover...