10 CSS Tricks You Need to Know About

I started to share 25 Javascript tricks and solutions you need to know about which were well received so I decided to share some CSS tricks as well. I really believe that a lot of people adopt a library or framework because they want a solution but are not aware of how simple these solutions can be. I am constantly sharing tricks so follow my YouTube channel for video tutorials.

1 — Truncate with Ellipsis (single line)

If you want to maintain a single line of text but want to show 3 dots(ellipsis) at the end in case the text ends up being too big, you need this trick. This is one of the examples which illustrate a bad CSS API design due to the fact you need all these combinations of properties for this to work.

The element must be a block or inline-block, the text-overflow does not work without the overflow being hidden and the element must have a defined width or a max-width set. The white-space value of nowrap (reads No Wrap not Now Rap) simply forces the text not to break into a new line

p {
  /*  use max-width so the ellipsis
  only shows when reached that size     */
  
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}

2 — Truncate with an ellipsis (multiple lines)

If you want ellipsis on multiple lines there is an entire, weird CSS solution to this. You can check this article on CSS-Tricks for more alternative options and details.

p {
  /* old display option */
  display: -webkit-box;
  -webkit-box-orient: vertical;   /* max number of lines to show */
  -webkit-line-clamp: 3;  /* needed for it to work */
  overflow: hidden;
}

3 — Center vertically

The options to center vertically are vast depending on your situation really. Let’s look at a few of my favorites which do not include some other weird or, in my opinion, unmaintainable hacks.

Vertically center anything inside a display flex container:

.flex-vertically-center {
  display: flex;
  align-items: center;
}

Vertical alignment an inline, inline-block, or table-cell box:

img {
  /* only for block tags */
  display: inline-block;
  vertical-align: middle;
}

Vertically center absolute element inside a relative container:

.container {
  position: relative;
}.element {
  /* change to fixed to center relative to the view */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

4 — Center horizontally

Similar to vertically align you will need to align things horizontally as well. These are my favorite minus the weird stuff.

Center block items:

.block-element {
  margin: 0 auto;
  /* use display only if 
  element is not block already */
  display: block;
}

Center text and inline or inline-block elements:

.container {
  text-align: center;
}

Horizontally center absolute element inside a relative container:

.container {
  position: relative;
}.element {
  /* change to fixed to center relative to the view */
  position: absolute;
  top: 50%;
  transform: translateX(-50%);
}

Horizontally center anything inside a display flex container:

.flex-vertically-center {
  display: flex;
  justify-content: center;
}

5 — Style next or previous siblings

I don't know about you. but I came across many situations in which I needed to style the elements after and before a certain element. The after is pretty simple and the before will blow your mind.

Let pretend you have a container with 10 buttons and the 5th has a class of “current”. To style all the buttons after “current” you do:

.current ~ button {
  /* the style you want  */
}

To style just the item after (the 6th button):

.current + button {
  /* the style you want */
}

CSS does not have a “previous” selector but we can take advantage of its cascading nature to use the order to do this. Since we already know how to target all the elements after, we can style all the buttons we want the buttons before “current” to have then we overwrite this style to look normal. The below code will make only the buttons before “current” have a red background.

button {
  background: red;
}.current,
.current ~ button {
  background: initial;
}

6 — Style elements in a specific range

You can target a certain range of elements to style as well. For example, you have 10 boxes and want the second to the fifth box to have a red background and all the others to have a green background, then you do:

.box:nth-of-type(n+2):nth-of-type(-n+5) {
  background: red;
}

The above works with nth-of-type and nth-child pseudo-class.

7 — box-sizing

One thing that used to drive me crazy was that I set an element to be for example 200px and then in the browser, it would be something else because of padding or border, then I found out about box-sizing.

The following will create a box that is 240 by 240 (adds padding to width and height):

.box {
  width: 200px;
  height: 200px;
  background: #eee;
  padding: 20px;
}

The following will create a box that is 200 by 200 (includes padding and border into the size I set):

.box {
  width: 200px;
  height: 200px;
  background: #eee;
  padding: 20px;
  box-sizing: border-box;
}

This is why on all my CSS tutorial videos You hear me mention setting the following:

Targets all elements and pseudo-elements*, *::after, *::before {
  box-sizing: border-box;
}

8 — aspect ratio

If you want for a box to have a certain width to height ratio you can go about it several ways and only one of them is obvious. If you want to make a box a certain ratio you can set the top padding using a (height * width) / 100% formula using the calc function. To set a limit on the width you put inside a container where you set the width.

Create a 16 by 9 rectangle of 200px wide:

.container {
  width: 200px;
}.box {
  padding-top: calc((9/16) * 100%);
  background: #eee;
}

You can also use the after pseudo-element to create the ratio size

.container {
  width: 200px;
}.box::after {
  content: "";
  display: block;
  padding-top: calc((9/16) * 100%);
  background: #eee;
}

The issue with that is that everything inside must be shifted up or absolutely positioned to the box. Fortunately, CSS gave us the aspect-ratio property we can use, and unfortunately, it has very poor support as of 2020.

.box {
  aspect-ratio: 16 / 9;
}

9 — text around an image

Text wrapping around the image is super cool and probably one of the most underrated CSS features ever and it is super easy to do. We use the float property to float the image inside a text then we use the powerful shape-outside property with the image URL. The float property already does a lot but the shape-outside will escape pixels in your image.

img {
  float: right;
  shape-outside: url(some-url-to-your-image);
}

10 — is, matches, any and :where

CSS has the :matches pseudo-class function which was recently renamed to :is and in some old browsers it is named :any (with prefix) but they all work exactly the same. What this allows you to do is simplify your CSS selectors, for example, you can change this:

section h1, 
article h1, 
aside h1, 
nav h1 {
  font-size: 25px;
}

into this:

:is(section, article, aside, nav) h1 {
  font-size: 25px;
}

The :where works similarly but the specificity is always zero where the :is specificity is of the overall selector. You can read more on the MDN page.

Conclusion

CSS is fun and powerful and it is constantly growing and improving. I have collected a lot of tricks over the years and by doing things yourself you are constantly learning and enjoying the experience of discovery.

I will continue to share more tricks in the article and video format so let's stay in touch so I can continue to share my experience with you.