I use CSS daily and believe I’m pretty good with it. Still, its power surprises me occasionally. Here’s the list of 5 CSS properties I discovered lately that changed how I write CSS. I hope they may be helpful for you too!

1. Accent color

Working with forms is a massive part of front-end work. The problem is forms are complex. Have you ever tried styling the checkbox or radio button by yourself? It quickly becomes a mess cause you have to apply different styles for different browsers and states. So you usually end up using custom components made by someone else, often at the cost of accessibility. 

What if you could use the native HTML inputs but change their color to make it more lively and consistent across the browsers? Well, you can!

To do it, use the accent-color property — it allows you to change the color of radio buttons, checkboxes, progress bars, and range inputs. 

Now you can make pretty inputs with just one line of CSS, isn’t that neat?

Browser support

Right now accent-color is supported by Firefox, Chrome, Edge, and Opera. Safari supports it only in the Technology Preview version.

2. Block size and inline size

Setting the width and height of elements is usually straightforward. But did you notice what happens if you need to have some text go vertically instead of horizontally? You can set this easily using writing-mode but the width and height suddenly stop matching the flow of text.

Fortunately, you can fix it using block-size and inline-size instead of the height and width of the element.

For standard, horizontally oriented elements block-size relates to the height of the element and inline-size relates to the width of the element.

For vertically oriented elements block-size relates to the width of the element and inline-size relates to the height of the element.

I know it may be pretty confusing, so look at a Pen below to see them both in action.

Browser support

Right now block-size and inline-size are supported by all modern browsers. They’re not supported by IE11.

3. Inset

Shorthand properties are great. It’s much more straightforward and cleaner to write:

.box {
  padding: 10px;
}

than:

.box {
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

But did you know there is also a shorthand property for positioning elements? The property is called inset and it allows you to set top, right, bottom, and left in a declaration, like this:

.box {
  inset: 10px;
}

Quite useful, isn’t it?

Browser support

Right now block-size and inline-size are supported by all modern browsers. They’re not supported by IE11.

4. List style 

You may not know it, but styling lists is relatively easy using list-style. It’s a shorthand that allows you to set three different properties: list-style-type, list-style-image and list-style-position. 

The most powerful of the properties is list-style-type. It sets the list element marker type. It may not sound so impressive, but CSS comes in with dozens of predefined markers ranging from squares through roman letters to the most exotic languages. You can even define your custom markers using @counter-style CSS at-rule!

The list-style-image property allows you to use your images as a marker and list-style-position sets the position of the marker relative to a list item.

To see some great things you can do with list style, check out this Pen.

Browser support

All of the browsers support list style properties, but there are some limitations with some of the values of list-style-type. Check the MDN page for the details.

5. Object fit

The great thing about using images as backgrounds to elements is that you can use background-size property to set the size of an image in the container. But did you know you can use CSS to set how the <img> or <video> elements should be resized to fit their containers?

The object-fit property works similarly to background-size. You can set it to five values: contain, cover, fill, none, scale-down.

Check out this Pen to see object-fit in action.

Browser support

Right now block-size and inline-size are supported by all modern browsers. They’re not supported by IE11.

That’s all for today! What are your favorite, less-known CSS properties?

Liked the article? Share it!