One of the problems with the syntax being so basic is that it gives off the impression that it is a simple language. It's simple in how it's written, but it can be downright complex in how it actually works.
People are tricked into thinking it's simple and then, when it doesn't work they expect it to, they say it's broken.
CSS is an interesting language. It’s fun to see how different solutions arrive to deal with certain situations, and how those solutions sometimes evolve — something like grip-gap evolving into gap and making it’s way into flexbox, for example.
One interesting set of values has always been initial and the much lesser known unset. Both of these don’t exactly work how you think they would though, often giving you unexpected results. It would seem that revert is here to help with that.
In this article, we’ll be taking a look at all three, exploring their similarities and differences, and we'll wrap it up with when revert might come in handy.
5 awesome DevTool features to help you debug your CSS
When I started created websites for fun in the late 90s, we didn’t have many tools that would help us solve our CSS problems. There was probably some validator out there I didn’t know about (it was just a hobby for me at the time), but it was a lot of simply figuring out what was wrong with your file. Luckily for all of us, it’s so much easier now.
The reason Firebug was huge is it opened up a new way for us to be able to debug our CSS. Devtools have evolved a lot since then (as has CSS!), so in this post, we’ll be taking a look at 5 awesome devtool features, from ones that make your life so much better and easier to ones that are just really cool.
All CSS properties have a range of possible values, but transform is a little different than most, in that its values do completely different types of things. They are all related to transforming our selector, but it’s not really the same as color. Sure, color allows us to set pretty much any color we want, but all of them are just setting a color.
With transform we can do the following:
rotate - rotates the element
scale - scales the element, making it bigger or smaller
translate - move the element around, up, down, left and right
skew - skews it, which is like pulling or tilting the element
Custom properties are everywhere now, and for good reason as there are so many useful — and fun! — applications that you can do with them!
A couple of weeks ago, I had an article published on CSS-Tricks where I looked at the benefits of locally scoping custom properties. In that article I quickly mentioned how it could be really useful to create a button scale.
The article ended up being really long, so I cut out the part about creating a button scale with custom properties. I think it’s a really fun application though, as there are two different ways you could approach it.