input type='color'
Easily add a color picker to your page using an input with a type of color.
HTML & CSS Tip of the Week
-
-
:only-child
Learn how to use the :only-child selector to style elements differently when they have no siblings. Perfect for adaptive designs with optional elements like figure captions. Plus, see how combining it with :has() creates powerful parent styling possibilities.
-
The min() and max() functions
The CSS min() and max() functions can be powerful alternatives to clamp() for responsive layouts.
-
The <q> element
When creating quotes in HTML, most people are aware of the <blockquote> element, but for shorter quotes you might want an inline element, and that is where the <q> element comes in
-
input type="number"
Number inputs can be useful, but they aren't as straight forward as they might seem at first.
-
The fieldset and legend elements
-
:in-range pseudo-class
Style inputs based on if the value is within specific range limits
-
The search element
A quick look at the search element, a semantic element for search and filtering
-
The :has() pseudo-selector
The :has() relational selector allows you to select parents of elements, but also preceding elements, siblings, and much more!
-
Transitioning to and from display: none
Two new CSS features, @starting-style and allow-discrete, making it quite easy to transition to and from display: none!
-
The :focus-visible pseudo-class
:focus-visible is an improved version of :focus, meaning we don't have to fight those focus rings
-
Container query units: cqi and cqb
Responsive units that respond to local sizes, rather than the entire viewport
-
min-width: fit-content
Text wraps, but only as a last resort!
-
The :user-valid pseudo-class
A new and improved version of :valid that only kicks in once the user has interacted with the field
-
The <kbd> element
An underused HTML element for when we want to show keyboard commands and user inputs.
-
The :empty pseudo-class
We can use CSS to find elements that don't have any content in them.
Every week, I post a very quick introduction to an underused HTML feature or a new-ish-but-well-supported CSS feature (or something that can be considered a progressive enhancement).
If you want to make sure you never miss an update, you can sign up below to get them delivered straight to your inbox, or you can subscribe to the RSS feed.