CSS Tricks

I want to tell you about several CSS properties and values that are rarely mentioned in the literature, but, in my opinion, are of some interest in terms of speed and quality of web interface development.

Many of the properties that will be discussed are experimental. Most of them are supported by all modern browsers, however, if you decide to use any of these properties, do not be lazy to go to Can I use and clarify the support (for example, Safari does not support the loading=”lazy” attribute).

grid + place-items

This technique allows you to align elements horizontally and vertically with just two lines of code.

.parent {
  display: grid;
  place-items: center;
}

place-items is an abbreviation for justify-items and align-items.

This property can be used both in relation to one or several (child) cells at once.

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center
}

flex + margin

Another modern way to align elements horizontally and vertically is to combine display: flex and margin: auto.

.parent {
  display: flex;
}

.child {
  margin: auto;
}

flex + gap

Now it is possible to add indentation between flex elements using the gap property

.parent {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

@supports

The @supports rule allows you to check the browser’s support for a certain property or properties (or a combination of property/value) before using them.

@supports (display: grid) {
  section {
    display: grid;
  }
}

@supports (image-rendering) {
  img {
    image-rendering: pixelated;
  }
}

var()

The var() function allows you to use the values of user variables as property values. The second optional parameter of this function is the backup value.

:root {
  --primary-bg-color: #1266f1;
}

/* и используем ее */
button {
  background-color: var(--primary-bg-color)
}

calc()

The calc() function is used to specify the calculated value of properties that use size, angle, time, or number as values. This allows you to set values based on addition or subtraction of different units of measurement.

Usually, an absolutely positioned element is aligned horizontally and vertically as follows:

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

::selection

The pseudo-element ::selection allows you to stylize the selection of text.

p::selection {
  background-color: #262626;
  color: #fbfbfb;
}