CSS properties you should know right now!

While browsing the MDN docs, I found some interesting CSS properties. So, I made this article about those. Let's begin!

accent-color

Have you ever wanted to override the default color of <input type=checkbox es and the default focus ring color? I used filter 🙄 before knowing this property. This is how you use it

element {
    accent-color: (any valid color)
}

For example, if we try this

body {
    accent-color: red
}

We get this result

all

This property will reset all the property values of the given element, for example, if we want to remove all styles from the button we can do this.

button {
   all: unset
}

This will give us some plain text.

text-indent

This property is very useful for overriding the length of the indent of the text.

🤩 Our Amazing Sponsors 👇

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

<p>I have no spaces before</p>

p {
  text-indent: 42px;
  border: 1px solid gray;
}

Produces

resize

This is my favorite, you can create resizable components with 0 JavaScript!

div {
  resize: both;
  overflow: hidden;
  border: 1px solid black
}

<div>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab aspernatur deserunt minus mollitia repellendus voluptates quibusdam atque. Blanditiis reprehenderit et eligendi, deleniti tempora, ipsam ad, dolores sed rem id sit.
</div>

And we have a resizable component only with CSS!

column-count

A bit useful property to create columns. But may not be responsive.

<div class="test">
  <div class="box">
    <h1>
      :D Columns
    </h1>
  </div>

  <div class="box">
    <h1>
      without flex
    </h1>
  </div>

  <div class="box">
    <h1>
      or grid? 😲
    </h1>
  </div>
</div>

.test {
  column-count: 3;
}

.box {
  margin: 10px;
  border: 1px solid gray;
}

This is not bad but only useful when testing something.

animation-play-state

Using this property, you can pause/play animations.

.element {
   animation: bounce 10s ease infinite;
}

.element.paused {
   animation-play-state: paused;
}

The end!

Thank you for reading this article. I hope you learned something new.

Follow me on

Twitter - https://www.twitter.com/posandu GitHub - https://www.github.com/posandu