CSS Tutorials
How to Control CSS Animations with JavaScript
When it comes to animations on the web, developers need to measure the animation's requirements with the right technology -- CSS or JavaScript. Many animations are manageable with CSS but JavaScript will always provide more control. With
document.getAnimations
, however, you can use JavaScript to manage...Detecting Fonts Ready
Knowing when resources are loaded is a key part of building functional, elegant websites. We're used to using the
DOMContentLoaded
event (commonly referred to as "domready") but did you know there's an event that tells you when all fonts have loaded? Let's learn how...Detect System Theme Preference Change Using JavaScript
JavaScript and CSS allow users to detect the user theme preference with CSS'
prefers-color-scheme
media query. It's standard these days to use that preference to show the dark or light theme on a given website. But what if the user changes their preference...CSS :autofill
Autofilling HTML
input
elements is a frequent user action that can drastically improve user experience. Hell, we all autofill for our passwords and address information. But what control do we have wheninput
elements have been autofilled?To add custom CSS styles to inputs whose...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...