August Reading: CSS Secrets

I recently stumbled across CSS Secrets: Better Solutions to Everyday Web Design Problems by Lea Verou. I sure find it to be a good find.

This book has 47 undocumented techniques and tips for intermediate to advanced CSS developers, addressing a wide range of everyday web design problems and then discussing ways to get to the solution.

All of these techniques definitely triggered some braincells to rethink how I solve CSS design ‘problems’. Using CSS features I knew about and some new ones I’ve learned, in order to come up with DRY (Don’t Repeat Yourself), maintainable, flexible and lightweight solutions, whilst still keeping within web standards as much as possible.

Besides having the index in order of the book, there is also a list categorising the secrets according to CSS specification, which I thought is a nice touch for a different type of quick reference. From the main index, all the secrets are categorised under the following topics:

• Backgrounds and Borders
• Shapes
• Visual Effects
• Typography
• User Experience
• Structure and Layout
• Transitions and Animations

One of the most notorious things that can drive any front end developer nuts, is vertically aligning elements within a container. I have been using a few different techniques to achieve this. Most of the time this one by Chris Coyer. From experience I do find it require extra elements that are not always readily available. Especially working with a CMS eg. a custom WordPress theme. There is also this article: Centering in the Unknown, worth reading.

I would however like to make a note below, of the clever techniques, discussed in the book, achieving just that.

Eg. if this is the HTML markup:

<main>
  <h1>Am I centered yet?</h1>
  <p>Center me, please!</p>
</main>

CSS for the absolute positioning solution

main {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -3em; /* 6/2 = 3 */
  margin-left: -9em; /* 18/2 = 9 */
  width: 18em;
  height: 6em;
}

I like the method below where the CSS are simplified using the calc() method:

main {
  position: absolute;
  top: calc(50% - 3em);
  left: calc(50% - 9em);
  width: 18em;
  height: 6em;
}

The above mentioned methods require to have a set height and width for the container to be centered. For me doing front end development using WordPress for themes most of the time, this could be tricky or even impossible. Even though absolute positioned elements are also not always possible, I was ‘wowed’ by the technique below:

main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

When using percentages in translate() transforms, the element move relative to its own width and height. That makes is possible to get rid of the hardcoded dimensions.

CSS for the viewport unit solution

For the occasions where absolute positioning is not possible, whilst the translate() transforms can still help, the new units, viewport-relative lengths are necessary to work out the space around the element. vw is relative to viewport width and 1vw represents 1% of the viewport width. The same goes for vh, relative to viewport height and 1vh represents 1% of the viewport height. Knowing this, the following technique can be used:

main {
  margin: 50vh auto 0;
  transform: translateY(-50%);
  width: 18em;
}

After all of this, it also mention in the book, (for obvious reasons, if already using Flexbox) just using Flexbox would be the best, most flexible solution.

The above mentioned is just scratching the surface of all the ‘wow’ and ‘aha’ moments coming out of this book. And that is not all… everything in the book, from the layout, the figures to the colours are styled using HTML with CSS. A lot of the figures are also generated with SVG or it use SVG data URIs, generated via SCSS functions. Highly recommended.