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?

12 Little-known CSS Facts: The Sequel

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:

Multiple Radii on each corner with border-radius

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:

.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 */
}

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 IE11).

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:

With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table’s width, the width of the columns, and borders or cell spacing.

That might be the first time in W3C specification history that something is hard to understand. LOL JK.

But seriously, as always, a live example will help. In the following demo, the table has table-layout: fixed added in the CSS. Click the toggle button to toggle it off, then on, etc.

See the Pen Using the table-layout property by SitePoint (@SitePoint) on CodePen.

You can see in this example the advantage of using table-layout: fixed, as opposed to the default of auto. This won’t always be the best choice and it won’t always be necessary, but it’s a nice one to keep in mind when dealing with tables that have cells with variable-width data.

Chris Coyier did a great write-up on this property last year, so if you want a much more comprehensive discussion, that’s your best bet.

5. The vertical-align property works differently on table cells vs. other elements

If you’ve been coding websites since the mid-2000s or earlier, or if you’ve done a lot of HTML emails, then you’ve probably at some point assumed the vertical-align property was the standard upgrade to the old HTML4 valign attribute, which is now listed as an obsolete, non-conforming feature in HTML5.

But vertical-align in CSS doesn’t really work that way. Except on tables. Which, I think is kind of weird, but I suppose it makes more sense than the property not working at all on tables.

So what’s the difference when this property is applied to regular elements compared to table cells?

When not applied to table cells, the vertical-align property follows these basic rules:

  • It works only on inline or inline-block elements.
  • It has no effect on the contents of an element but instead it changes the alignment of the element itself in relation to other inline or inline-block elements.
  • It can be affected by text/font settings like line-height and by the size of adjacent inline or inline-block elements.

Here’s a demo:

See the Pen Using the vertical-align property on inline elements by SitePoint (@SitePoint) on CodePen.

The vertical-align property is defined on the input element. By pressing one of the buttons, you’ll change the value to what’s written on the button. You’ll notice that each of the values changes the position of the input.

Overall, that demo is a really rudimentary look at this property and its values. For a much deeper look, check out Christopher Aue’s 2014 post.

When it comes to tables, however, vertical-align works very differently. In such a case, you apply the property/value to one or more table cells, and the content of the table cells is affected by the chosen alignment.

See the Pen Using vertical-align on table cells by SitePoint (@SitePoint) on CodePen.

As shown in the above demo, only four of the values work on table cells, and although there is an effect on the sibling cells with a value of baseline, the main effect is on the alignment of content inside the cell on which you’ve applied vertical-align.

6. The ::first-letter pseudo-element is smarter than you think

The ::first-letter pseudo-element allows you to style the first letter of an element, letting you do a drop-cap effect which has been common in print for many years.

The good thing about this one is that browsers seem to have a decent standard for what constitutes the “first letter” of an element. I first saw this when Matt Andrews tweeted about it, although he seemed to imply that it was a bad thing. You can see his examples in the CodePen below.

See the Pen Testing ::first-letter by SitePoint (@SitePoint) on CodePen.

Looks to me like the four big browsers all handle these the same way, so that’s great because I think this is the correct behavior. It would be a little weird if something like an open parenthesis was treated as a “first letter”. That would be more like “first character”, which I suppose could be a whole new pseudo-class in itself.

7. You can use invalid characters as delimiters in your HTML class lists

This concept was discussed in 2013 by Ben Everard, and I think it’s worth expanding on.

Ben’s post was about using the slash (“/”) character to separate his HTML classes into groups, to make his code easier to read or scan. As he points out, although the unescaped slash is an invalid character, browsers don’t choke on it, they simply ignore it.

So you might have an HTML example like this one:

<div class="col col-4 col-8 c-list bx bx--rounded bx--transparent">

With the slashes, it would become:

<div class="col col-4 col-8 / c-list / bx bx--rounded bx--transparent">

You can use any characters (invalid or not) to produce the same effect:

<div class="col col-4 col-8 ** c-list ** bx bx--rounded bx--transparent">

<div class="col col-4 col-8 || c-list || bx bx--rounded bx--transparent">

<div class="col col-4 col-8 && c-list && bx bx--rounded bx--transparent">

All these variations seem to work fine, which you can test in the demo below.

See the Pen Illegal Characters as HTML Class Delimiters by SitePoint (@SitePoint) on CodePen.

Of course, those delimiters cannot be used in your stylesheet as classes, which is what I mean by “invalid”. So the following would be illegal and wouldn’t apply the specified style:

./ {
  color: blue;
}

If you must use these kinds of characters in your HTML classes for the purpose of targeting them in your CSS, you can insert them escaped using this tool. So the above example would work only if your CSS looked like this:

.\/ {
  color: blue;
}

And taking it even further, Unicode characters don’t have to be escaped at all, so you can do this kind of crazy stuff:

<div class="♥ ★"></div>

And then have the following in your CSS:

.♥ {
  color: hotpink;
}

.★ {
  color: yellow;
}

Alternatively, you can escape these types of characters too, instead of inserting them directly. The following would be equivalent to the previous code block:

.\2665 {
  color: hotpink;
}

.\2605 {
  color: yellow;
}

8. Animation iterations can be fractional values

When writing CSS keyframe animations, you probably know that you can use the animation-iteration-count property to define the number of times to play the animation:

.example {
  animation-iteration-count: 3;
}

The integer value in that example will tell the animation to run 3 full times. But maybe you didn’t know that you can use fractional values:

.example {
  animation-iteration-count: .5;
}

In this case, the animation will run a half time (that is, it will stop halfway through its first iteration). Let’s look at an example demo that animates two balls on the page. The top ball has an iteration count of “1” while the bottom ball has an iteration count of “.5”.

Update: As pointed out in the comments, these demos don’t work correctly in Safari on desktop or mobile. This is because of a bug in relation to the fill mode, which I’ve filed here, and which has since been fixed. It will be corrected in future stable updates.

See the Pen Using a Fractional Iteration Count by SitePoint (@SitePoint) on CodePen.

What’s interesting about this is that the iteration duration is not based on the property/value that’s animating. In other words, if you animate something 100px, the halfway point is not necessarily at 50px. For example, the previous animation uses a timing function of linear, so this ensures the second ball stops visually at the halfway point.

Here are the same two animations, this time using a timing function of ease:

See the Pen PqRxov by SitePoint (@SitePoint) on CodePen.

Notice now the second ball passes the halfway point before it stops. Again, this is because of the different timing function.

If you understand timing functions, then you’ll also realize that a value of ease-in-out will position the ball in the same place as linear. Fiddle around with fractional values and the timing functions to see the different results.

9. Animation shorthand can break because of the animation’s name

Some developers have discovered this one by accident and there is a warning about it in the spec. Let’s say you have the following animation code:

@keyframes reverse {
  from {
    left: 0;
  }

  to {
    left: 300px;
  }
}

.example {
  animation: reverse 2s 1s;
}

Notice I’m using a name of reverse for the animation. This seems fine at first glance, but notice what happens when we use the above code in a live example:

See the Pen An animation called “reverse” won’t work in shorthand by SitePoint (@SitePoint) on CodePen.

The animation doesn’t work because “reverse” is a valid keyword value for the animation-direction property. This will happen for any animation name that matches a valid keyword value that’s used in the shorthand syntax. This will not happen when using longhand.

Animation names that will break the shorthand syntax include any of the timing function keywords, as well as infinite, alternate, running, paused, and so forth.

10. You can select ranges of elements

I don’t know who first used this but I first saw it in this demo by Gunnar Bittersmann. Let’s say you have an ordered list of 20 elements and you want to select elements 7 through 14, inclusive. Here’s how you can do it with a single selector:

ol li:nth-child(n+7):nth-child(-n+14) {
  background: lightpink;
}

See the Pen Selecting Ranges of Elements with CSS by SitePoint (@SitePoint) on CodePen.

Update: As pointed out in the comments, Safari has a bug that prevents this technique from working. Fortunately, a solution proposed by Matt Pomaski seems to fix it: Simply reverse the chain so it looks like ol li:nth-child(-n+14):nth-child(n+7). WebKit nightly doesn’t have this bug, so eventually you’ll be able to get this working normally in Safari.

This code uses chained structural pseudo-class expressions. Although the expression itself might be a bit confusing, you can see the range you’re targeting by the numbers used in the expression.

To explain exactly what this is doing: In the first part of the chain, the expression says “select the 7th element, then every element after that”. The second part says “select the 14th element, and every element before that.” But since the selectors are chained, each limits the previous one’s scope. So the second part of the chain doesn’t allow the first part to go past 14 and the first part of the chain doesn’t allow the second part to go back past 7.

For a more detailed discussion of these types of selectors and expressions, you can read my old post on the subject.

11. Pseudo-elements can be applied to some void elements

If you’re like me, at some point you’ve probably tried to apply a pseudo-element to an image or a form input. This won’t work because pseudo-elements don’t work on replaced elements. I think many developers have the assumption that void elements (that is, elements that don’t have closing tags) all fall under that category. But that’s not true.

You can apply a pseudo-element to some void elements that aren’t replaced elements. This includes hr elements, as in this demo:

See the Pen Pseudo-elements on a Horizontal Rule (hr element) by SitePoint (@SitePoint) on CodePen.

The colored area in that example is a horizontal rule (hr element) and it has both ::before and ::after pseudo-elements applied to it. Interestingly, I couldn’t get the same result using a br element, which is also a non-replaced void element.

You can also add pseudo-elements to meta tags and link elements, if you are crazy enough to convert those to display: block, as shown in the demo below.

See the Pen Adding pseudo-elements to meta tags and link (stylesheet) elements by SitePoint (@SitePoint) on CodePen.

12. Some attribute values are case insensitive in selectors

Finally, here is a bit of an obscure one. Let’s say you have the following HTML:

<div class="box"></div>
<input type="email">

You could style both of those elements using the attribute selector, like this:

div[class="box"] {
  color: blue;
}

input[type="email"] {
  border: solid 1px red;
}

That would work fine. But what about this?

div[class="BOX"] {
  color: blue;
}

input[type="EMAIL"] {
  border: solid 1px red;
}

Notice both attribute values are now in uppercase. In this case, the .box element will not receive the styles, because the class attribute is case sensitive. The email field, on the other hand, will apply the styles because the value of the type attribute is not case sensitive. Nothing necessarily groundbreaking here, but maybe it’s something you hadn’t realized before.

That’s a Wrap, People

Well, the curtain has officially dropped on this hopefully-not-so-cheesy sequel.

It feels like I’m learning unique little CSS tidbits every week and I hope some of this information was new to most of you. What’s your favorite, obscure CSS trick or technique? Is there a property or other feature that you think isn’t very well known, but has good browser support? Let us know in the comments.

Tags: css facts, css tricks
Louis is a dev blogger at Impressive Webs, author, and is currently SitePoint's HTML and CSS editor. He loves all things front-end, and curates Web Tools Weekly, a newsletter for front-end developers primarily focused on tools.
  • Petit Paul

    About item 5 and vertical-align: I noted that it also works with block elements (like a ) that has been set as display:cell (if the parent is display:row or display:table). It does not have to be a in an actual element as in the example. I suppose this may be obvious…
    I also noted that if one applies tex-align bottom on an element that has display:table-row or display:table, the cell will not inherit the vertical alignment set at parent level. At least not in Safari…

    • LouisLazaris

      @petitpaul:disqus

      Yes, thanks for pointing those out. I definitely could have mentioned the display:table stuff in relation to that point, but I just didn’t think of it. Also, the post was getting really long, so I think it’s ok. :)

      I’ll have to look into your latter point though, that’s interesting. Thank you.

  • Matt Smith

    Bookmarked!

    This is great stuff, Louis. Thanks for putting it together.

  • PVgr

    Bookmarked!

    I knew most of these but the selection of ranges (10) never occurred to me and it might come handy at some situations!

    table-layout:fixed is quite useful, and can also be used on display:table elements.

  • rbtstudio

    This article and its prequel are fantastically informative. Instantly bookmarked. For me, and this I’m sure is probably old news to many, my discovery of viewport units (vw, vh, vmin & vmax) rocked my development socks! I’ve seen articles dating back to 2011 and I can’t believe this was a thing in as many years.

    • http://petercast.net Peterson Silva

      I hate this vw, vh thing because I tried to make it work several times and it has never worked for me (latest Chromes and FIrefoxes). So I got angry and never tried again, doing what it was meant to do in other ways >=(

      • Cayoub88

        Does this seriously not work in your latest chrome? Can’t be!

        http://codepen.io/anon/pen/oXMzJr

        Let me know :)

        • http://petercast.net Peterson Silva

          Well, I tried to use it in my websites without success, so I was probably doing something wrong – but syntax-wise I knew it was right, I triple-checked it.

          For instance (one case I remember off the top of my head): if I have a div with, say, 50px width. Then I create another div inside the first one, and give it a 100vw width. Wouldn’t that mean the inside div’s width had to be 100vw, not being restricted by the outer div? I think it was a problem like that. And in another case, I just wanted it to be like a percentage of the screen’s width but could not make it, so instead I just made the margins percentages as to keep the div with the desired width in any given screen…

          I might test it again someday and see if I can get it to work ^^

          • Alex

            Why would you put a full width div inside a div limited to 50px? If you limit a div to 50px, the expected behaviour should surely be that it is limited to 50px?

          • http://petercast.net Peterson Silva

            Well, I don’t know… Maybe a layout where the main div “pops out” of the container?

            I’m thinking Google’s Inbox (click an email and see its width surpass its container).

      • rbtstudio

        There is of course flexbox. :)

  • Krish

    border-radius amazed!!!!

    • Bevels

      Yup yup.. me too. Amazing!

  • http://nyasro.com/ Nyasro

    Liked the range of elements selector.
    Thanks!

  • http://r.je Tom Butler

    Great post! I’d never even considered some of these were possible. Very helpful!

  • Ralph Mason

    Great info, Louis. I wasn’t aware of outline-offset, but that’s a really handy one. The range selection one is very cool, too. I’m still getting my head around it, though. :D

  • http://www.scottstubblefield.com/ Scott Stubblefield

    This is awesome. I knew of a good chunk of them, like table-layout and a couple others, but this is an awesome amount of useful stuff. Saving to Pocket!

  • http://unakravets.com Una Kravets

    Great article! :)

  • Instantlancer

    Great article. I didn’t know about half of these!

  • alexeiramone

    whatever {font:300 18pt ‘Roboto Slab’} also works

  • http://doginthehat.com.au Ben

    Thanks Louis, some really good gems here.

    Something maybe worth mentioning on outline-offset is that it can also be negative and the outline will show over the element’s bounding box.

    I use outline mainly for debugging layouts (set outline do all divs, with different nested colours ) – outline doesn’t affect the dimensions of the object (as opposed to borders for instance).

    • LouisLazaris

      @ben_da_dog:disqus

      That’s pretty cool that you can do negative values for that. I didn’t know that. That’s what I love about writing these articles, I usually learn just as much from the comments. Thank you!

  • Pauline

    Great article! I’m bookmarking! Thanks!

  • eantz

    wow..nice stuff..
    the border-radius is very useful..
    thanks..

  • Govind Yaswanth

    Informative for beginners

    • Bronze V for life

      noob

      • Govind Yaswanth

        Thank You @bronzevforlife:disqus

  • http://benedictforrest.com.au Benedict Forrest

    Great tips. That table-layout: fixed; might just save my entire life!

    I just wanted to comment saying that I’m on Safari 8 on Mac and in your two CSS animation examples with the .5 iteration count, the elements animated to their halfway points but then jumped to their end points. I got the feeling from the way you were describing it that they should have just stayed at rest at their halfway points.

    And also your example of using two pseudo selectors to select a range does not appear to work for Safari either as I am seeing 7 – 20 highlighted. Not that you made any claims that it works in all browsers, but I just though I should mention to you and to anybody else who is reading, in the interest of spreading knowledge.

    • LouisLazaris

      @benedictforrest:disqus

      Hmm, that’s interesting. Yeah, I kind of took for granted cross-browser support here, so I didn’t do any extensive testing. I thought most of the stuff I’m using was well supported in all browsers. Anyhow, I’m going to do some testing on Safari and see what the problem is. Thanks for the heads up!

    • LouisLazaris

      Benedict Forrest,

      Thanks again for pointing these out. Two updates on this:

      1. I’ve tested in the latest WebKit nightly, and the animation bug is still there. I submitted a bug report, which you can see here.

      2. The chained range selector doesn’t work on Safari 7.x on my Mac (I don’t have Yosemite, so I can’t upgrade to Safari 8, apparently), but I tested on WebKit nightly, and the bug is fixed in there. So it looks like that’s a bug in the stable version of Safari, but it should be fine in the next Safari update. Too bad about that one, because that’s a neat little selectors trick.

      • matt pomaski

        Works when you reverse the selector sequence, .ol li:nth-child(-n+14):nth-child(n+7), in Safari 8.0.7, OS X 10.10.4. Weird.

    • my eyes are hungry

      some browsers also require, width: 100% on it too

  • Kelle Connolly

    This is a great article! I didn’t know about outline-offset, that’s really nice :)

  • Krishnarjuna Rao

    This is awesome !!!

  • Christian Z.

    I put together an in-depth font-weight test a while back. Actually found a font that has all nine weights to use in the demo:

    http://codepen.io/WebDevCA/details/iGCxu/

  • WooDzu

    Gimme more ;)

  • http://codepen.io/MrBambule/ Karsten Buckstegge

    I think items 7, 11 and 12 display some bad practice. On 7 your example shows && and || as separators and this would create great confusion with everyone who ever used javascript.

    On 11 you said it yourself and on 12 is a thing people shouldn’t use because there is no benefit in it and poses the possibility to break your code if you try to use it in the wrong place.
    I know those are just examples but if you show it, people will adopt it.

    Besides that I liked the article it gives some great examples and alternative solutions for common problems.
    Especially number 10 I use regularly. There’s also a great article about that which takes a more in depth look at it: http://alistapart.com/article/quantity-queries-for-css

    • LouisLazaris

      Yes, thanks. I had forgotten about Heydon’s great article. I just scanned that again, but I don’t see him discussing specifically the topic of “ranges”, but the concepts he discusses are very similar. I’ll have to read that again, it’s a really good piece.

      And naturally, there will always be stuff in articles that are not always “best practice”. I don’t think any of these examples give the impression that anyone should just use these blindly. The article is framed as a set of “facts”, rather than “tips”, because while they certainly are true, they aren’t necessarily supposed to ever be used.

  • http://batman-news.com papaPoop

    Awesome article. Thanks.

  • SocialChooozy

    Wow! That were really little-known facts!
    Thank you!

  • bmlsayshi

    I can see what you’re trying to do, but I would recommend a different header image for the article. It looks like something you probably don’t want it to look like.

    Otherwise this is a great article :)

  • Attila Arany-Tóth

    Awesome.

  • Vitor Canova

    Wow, really nice.

  • http://hinok.net/ Dawid Karabin

    +1 for trick with nth-child ;)

  • Gumnos

    Re. #6 (:first-letter) it considers all characters of a ligature (e.g. “ffi” or “œ”) as one.

    Re. #7 (Unicode in class-names): This can produce peculiar effects as well, as the browser doesn’t normalize to a particular form, so “e {combining acute}” differs from “{e acute}” as demonstrated here. Likewise

    http://codepen.io/gumnos/pen/zxvPMg?editors=110

    A great opportunity for CSS obfuscation.

  • http://www.luissantanderart.com Luis Santander

    You never stop learning, thanks!

  • http://www.dvorapa.cz/ Pavel Dvořák

    6 known, 6 absolutely amazing!

  • Mike Petrovich

    Great tips, never heard of outline-offset before!

    Re: slashes in CSS class names, slashes are actually completely valid CSS class names in HTML. While they do need to be escaped in CSS stylesheets, they are not in fact ignored by the browser in the HTML. See: http://stackoverflow.com/questions/18485059/forward-slash-in-class-name

  • Lee

    Anyone care to tell why a two dimensional image at the top of this great article isn’t svg?

    • LouisLazaris

      Old habits die hard. :) But we should probably do that kind of stuff in SVG for sure. Thanks for the reminder.

  • http://jordanforeman.com/ Jordan Foreman

    Amazing article! I was shocked at how many of these CSS particulars I wasn’t aware of! Thanks Louis!

    http://i.imgur.com/3JZNuad.jpg

  • my eyes are hungry

    In addition to border-outline, you can also use outline widths, thus treating it very much like border, but not affecting screen space it takes up.

  • http://jamesfinn.me/ James Joseph Finn

    Hi @LouisLazaris:disqus. #10, “selecting a range using :nth-child” doesn’t work in Safari (it selects 7 through last), but does work in Chrome, Firefox, and Opera. It looks like the “New IE” has struck again?

    • LouisLazaris

      @jamesjosephfinn:disqus Yep, we discussed it in another comment. It’s fixed in WebKit nightly, so it will be fine at some point but for now Safari seems to choke on it to some degree.

    • LouisLazaris

      @jamesjosephfinn:disqus See the update to the post. Someone came up with a simple solution: reverse the chain and it works.

      • http://jamesfinn.me/ James Joseph Finn

        Ah! Interesting bug. Thank you!

  • Christian Z.

    outline-offset can also take a negative value, as used in the “Dick Naugle Says” box here: http://nauglestacos.com/

    • Phil Tune

      Now that’s awesome. I’m sure there are some awesome ways to use that, a la single div shapes.

  • Kyrodes

    > taking it even further, Unicode characters don’t have to be escaped at all

    And taking it even further, you can use emoji as CSS classes.

    .☕️ {
    color: black;
    }

  • Valerio Radice

    very cool!

  • Danilo

    Is there anyother way to define weights for font-families that comes with a lot of styles? It seems very limiting to be nesting divs to reach certain weights.

    • LouisLazaris

      Yes, just use the numbers: 100, 200, 300, etc. The relative keywords aren’t going to be used all that often, but they might come in handy in some instances.

  • Natalie Davis

    Great article!

  • http://www.siliconian.com Yvonne Tang

    These are really quite interesting. Thanks for sharing!

  • https://twitter.com/WPezDeveloper WPezDeveloper

    Impressive. Thanks!

  • Sahariar Kabir

    Learn New things for your post. Thanks for Such Great Info about css.

  • http://www.intertel.co.za/ Brett Powell

    Yet another fantastic job Louis, thanks for sharing.

  • Thomas King

    The use of invalid characters as delimiters was fantastic…I’m going to start a couple site builds using that technique. If you use SMACSS, however, use of delimiters may or may not be excessive.

    Still, this article was a blast to read!

  • Kavin B

    Nice article :)

  • leasecarsnow

    Thanks for this! Great article

  • Tuan Jinn Nguyen

    Great post!!! Well explained :) thanks

  • miqureshi

    “I still think many beginners and even some experienced developers don’t know this feature exists” #1 is true (y)
    Great article…

  • Joey Ng’ethe

    Really good insights mate! Thanks.

  • simon codrington

    Great stuff Louis, I haven’t heard about a few of those properties / values. I find the idea of using Unicode symbols for styling really weird but also pretty funny, I’ll have to sneak one in on my next project :)

    Thanks again for the great read

  • http://adonisk.com Adonis K.

    #2 and #10 were mind blowing, thank you!

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!