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?
[caption id="attachment_110386" align="aligncenter" width="800"]
Artwork by SitePoint/Natalia Balska.[/caption]
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:
[code language="css"]
.box {
border-radius: 35px 25px 30px 20px / 35px 25px 15px 30px;
}
[/code]
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.”
So the use of the slash in the value allows you to create curved corners that are not symmetrical. If you want a more detailed consideration of this, check out my original article linked above, or better yet, try out this handy little interactive demo from MDN:
Most border-radius generators do not allow you to set these optional values. The MDN generator is the only one I’ve found that does this.
2. The font-weight property accepts relative keywords
Normally when you see the font-weight property defined, the value will be either normal or bold. You might also occasionally see an integer value in hundred increments: 100, 200, etc., up to 900.
The two values that are often forgotten, however, are bolder and lighter.
According to the spec, these keywords specify a bolder or lighter weight than the inherited value. This comes into play most significantly when you are dealing with a font that has multiple weights that are bolder than just plain “bold” and lighter than just normal text.
In the hundred-based values, “bold” maps to 700 and “normal” maps to 400. So if you have a font that has a 300 weight, but nothing lower, a value of “lighter” will produce 300 if the inherited value is 400. If there is no lighter weight (i.e. 400 is the lightest weight) then it will just stay at 400 and thus a value of “lighter” will have no effect.
Look at the following CodePen demo:
See the Pen Using font-weight bolder/lighter Keywords by SitePoint (@SitePoint) on CodePen.
In this example, I’m using a font called Exo 2, which has 18 different styles available. My demo embeds only the non-italic styles, which are enough for each of the hundred-based weights.
Notice that the demo includes 12 nested ‘box’ elements with different font-weight values, including “bolder” and “lighter” so you can see how these affect the weight of the text in different inheritance contexts. Below is the CSS from that example. Notice the comments in the code, and remember that each subsequent “box” is nested inside the previous:
[code language="css"]
.box {
font-weight: 100;
}
.box-2 {
font-weight: bolder; /* maps to 400 */
}
.box-3 {
font-weight: bolder; /* maps to 700 */
}
.box-4 {
font-weight: 400;
}
.box-5 {
font-weight: bolder; /* maps to 700 */
}
.box-6 {
font-weight: bolder; /* maps to 900 */
}
.box-7 {
font-weight: 700;
}
.box-8 {
font-weight: bolder; /* maps to 900 */
}
.box-9 {
font-weight: bolder; /* maps to 900 */
}
.box-10 {
font-weight: lighter; /* maps to 700 */
}
.box-11 {
font-weight: lighter; /* maps to 400 */
}
.box-12 {
font-weight: lighter; /* maps to 100 */
}
[/code]
In this case, the “bolder” and “lighter” keywords will map only to the 100, 400, 700, and 900 values. With 9 different styles, these keywords will never map to the 200, 300, 500, 600, and 800 values.
This happens because you’re telling the browser to choose the next font in the series that is considered either ‘bold’ or ‘light’. So it’s not picking the next boldest or the next lightest, but merely a bold or light font relative to what is inherited. If, however, the lightest font started at 300 (as in the case of Open Sans), and the inherited value was 400, then a value of “lighter” would map to 300.
This might all be a bit confusing at first, but you can fiddle around with the demo to see how these keywords work.
3. There is an outline-offset property
The outline property is pretty well known due to its ability to help in debugging (it doesn’t affect page flow). The spec, however, has added an outline-offset property, which does exactly what its name suggests — it lets you define how far the outline should be offset from the element.
See the Pen The outline-offset property by SitePoint (@SitePoint) on CodePen.
In the demo above, move the range slider left or right to see the outline offset change. The range in this example covers 0px to 30px, but you could go as large as you want in the CSS. Take note that although the outline property is a shorthand property, it doesn’t include outline-offset, so you always have to define outline-offset separately.
The only major drawback to the outline-offset property is the fact that it’s supported in every browser except Internet Explorer (not even IE 11).
4. There is a table-layout property
You’re probably thinking, Old news. I know all about display: table, bruh. Easiest way to vertically center! But that’s not what I’m talking about. Notice I said the table-layout property, not the display property.
The table-layout property isn’t the easiest CSS feature to explain so let’s first go to the spec, and then look at an example. The spec says:
Continue reading %12 Little-Known CSS Facts (The Sequel)%
by Louis Lazaris via SitePoint
