HTML & CSS Tip of the Week

A few fun nesting tips & tricks

There are some handy things that you can do with nesting, espcially when you start moving the & placeholder around!

One corner, two border radii

Did you know you can control the border radius of both sides of a corner indepenently of one another? It might seem a little strange to do, but you can do some intersting things with it!

The picture element

Sometimes, designs have different images for large and small screen layouts. In those situations, it can be tempting to simply bring in multiple images and use a media query in your CSS to control when we see each one, but the element is purpose-built for these situations.

Single-colour gradients

It might seem strange, but single-colour gradients can come in handy in a few different ways!

@property

Register custom CSS properties with specific syntax to enable smooth animations and transitions.

:nth-last-child

Select elements by counting backwards from the end using the :nth-last-child pseudo-class selector.

object-fit and object-position

Crop images in a similar to way background images by using object-fit and object-position

calc-size()

We can now do calculations based on the intrinsic size of an element

The ::selection-pseudo-element

Add a little personality to your site by changing the selection styles

The <output> element

Display calculation results and user interaction outcomes with semantic HTML using the output element.

:first-child and :last-child

Style the first and last elements in a group without needing extra classes or JavaScript.

The datalist element

Create autocomplete dropdowns with suggestions using the datalist element without JavaScript.

:out-of-range

A quick look at the :not-in-range psuedo-class.

:placeholder-shown

A quick look at the :placeholder-shown pseudo-class for styling form elements that are displaying placeholder text.

interpolate-size: allow-keywords

Animate and transition to auto, and other intrinsic keyword values.

input type='color'

Easily add a color picker to your page using an input with a type of color.

: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 element, but for shorter quotes you might want an inline element, and that is where the 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.