Article: 12 Little-Known CSS Facts (The Sequel)

Extract from SitePoint article “12 Little-Known CSS Facts (The Sequel)” by Louis Lazaris

Published July 14, 2015

Over a year ago I published the original 12 Little-known CSS Facts and, to this day, it has been one of SitePoint’s most popular articles ever. Since that post was published, I’ve been collecting more little CSS tips and tidbits for a new post. Because we all know that every successful movie should spawn a cheesy sequel, right?

Artwork by SitePoint/Natalia Balska.

So let’s get right into this year’s developer’s dozen. I’m sure many of us will know at least some of these, but you can let me know in the comments how many of these were new to you.

1. The border-radius property can use “slash” syntax

This is something I’ve written about before more than four years ago on SitePoint, but I still think many beginners and even some experienced developers don’t know this feature exists.

Believe it or not, the following is valid border-radius code:

.box {
  border-radius: 35px 25px 30px 20px / 35px 25px 15px 30px;

If you’ve never seen that, it might seem a little confusing, so here’s the explanation from the spec:

If values are given before and after the slash, then the values before the slash set the horizontal radius and the values after the slash set the vertical radius. If there is no slash, then the values set both radii equally.

The spec also provides the following diagram:

The caption for that image explains: “The two values of border-top-left-radius: 55pt 25pt define the curvature of the corner.”

Continue reading article on SitePoint …

There was some interesting stuff in there, I can’t imagine I’d use many of them, but it’s nice to know they are available.

I really like the outline-offset. I can imagine using that a lot, so I’m surprised I haven’t noticed it before.

Agreed!!! And most helpfully, it will accept negative values!

Really like table-layout! The number of times I’ve done this by adding a style table td {width: 33%} the downside is obviously that it has to be tweaked to the number of columns.

Unlike most movies, this Sequel is better than the original.

I like the animation-iteration-count code.It’s very interesting stuff.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.