10 necessary CSS tricks to make your life easier

In our daily work with stylesheets we often encounter situations that become a challenge. Depending on the extent to which we are experienced, the challenge can be called completely different things. In addition, we can not always, for various reasons, use the boon of solutions such as, for example, the Flexbox model. Therefore, I will try to introduce you to the CSS tricks, which you should know and use if you have such a need.

CSS Tricks – Variables

For many years, it was impossible to use variables in a pure CSS. Preprocessors such as LESS or SCSS were used to improve the work. Reusable colors, fonts, dimensions set from one place in the code are just some of the possible uses of variables.

If the only thing you used the preprocessor were variables, you’ll probably be glad that support for variables in CSS3 is already provided by over 85% of the browser market. It is true that the design of a variable in CSS looks quite breakneck, no less. To use variables globally, you must define them in the element: root. That’s how it looks in practice:

Root

--color-brand: #333333;

}

Element

background-color: var(--color-brand);

}

Double hyphens indicate that the value is a variable. The design looks weird, but using the variables on a pure CSS you can achieve a lot of interesting effects. Variables are sensitive to character size, so –variable, not the same as –VARIABLE.

Eliminate space between linear and block elements

It is possible that you once met with the problem of placing line and block elements next to each other. You’ve probably noticed that browsers like to place spaces between these elements. Of course, you can settle the matter float, let go, push, throw the ignited match and leave the office in slow motion. But every self-respecting coder knows that the float property is used to manipulate elements relative to text.

So how to deal with the hell of inline-block elements without using practices from over a dozen years ago? There are several solutions to dealing with this problem. From my observations, however, it seems that the most sensible is to give the elements a right margin of -4px. It looks not serious, but it works on every major browser.

Getting rid of float in this case may also cause another problem. Elements that are next to each other, begin to form “stairs”. The solution is to add them properties:

Vertical-align: top;

Advanced references to elements

Sometimes it can happen that we need to style, for example, only the first element immediately behind the specific indicated. Or the first one encountered after the indicated one. This is more often the case when we do not have much influence on HTML, and we need to choose a specific element. Today, CSS offers more complex selectors than before.

Styling the. b element directly behind. .a:

 .a + .b {}

Style the first encountered. x element. .n:

 .n ~ .x {}

Style even and odd items

 .n:nth-child(even) {}
 .n:nth-child(odd) {}

The first case can be used, for example, by giving a custom styling radio button or checbox, in combination with labels.

Nice radiobuttons and checkoboxes

Increasingly, we need to deal with the situation in which these elements need their own, adapted to the entire layout of style. Using the tricks of modern CSS, it becomes very easy! The condition is a specific HTML structure, where the label is behind the control:

Now we can start working. First, hide the input…

.checkbox { display: none; }

.checkbox + label { position: relative; padding-left: 32px; }

.checkbox + label::before, .checkbox + label::after { content: ''; position: absolute; }

Now it’s up to us how we can style the pseudo-elements: before and: after. They will be our visual checkbox (I mostly use: before as a background, and: after as a “pipe”). The structure responsible for designing when the checkbox is selected will look like this:

.checkbox:checked + label::before {}

and analogously for: after. By adding animations to this, you can get really interesting effects.

Do not let the paddings add dimensions to the elements

The standard behavior of block elements in browsers, when they are assigned to paddings, is added to the dimensions already given. Over time, this behavior can be a challenge to expand the project. There is a simple, intuitive solution that makes paddings will not make life difficult for us. It is enough to add a value to the problematic element:

.element { box-sizing: border-box; }

And a problem with the head. End With width: calc(100% – 20px) 😉

Box-shadow as border

Suppose we have several buttons in the line, one of them hovers the mouse with a two-pixel frame. The neighbors are pushed to one side, which causes an ugly “jump”. The output can be using the box-shadow property as border.

.button:hover { box-shadow: 0 0 2px 0 #444; }

The third zero makes the shadow become “hard”. If you do not want to use a shadow as a pseudo-element, the solution from the 5th point may help here.

Styling by attributes

Not only after the element name, ID, or class you can get to it. It is also possible to style by attributes. Example:

a[href*="synergylab.pl"] { color: red; }

Only the links to our site are highlighted in red.
Other operators may also appear in the place of stars. An asterisk indicates that the string in the ‘href’ attribute must contain the string we specify. Equally interesting is $ and ^, which means that the string ends with the indicated or begins. Thanks to this, we can, for example, sharpen links to files depending on their extension:

a[href$=".pdf" i] { color: red; }

The letter “i” before closing the square relation is not a typo. It indicates that the browser is supposed to ignore the size of characters.

More than one element background

Sometimes we need to put more than one background in the element. It’s very easy, just split the styles with a comma:

.a {

background-image: url('test.png'), url('test-a.png');

}

Remember that in this case we use separate styles also for other attributes relating to the background, such as its repetition, dimensions, etc ..

Lobotomised Owl

This is a very broad issue that is suitable for a separate lecture. The title of this point is not only the joyful creativity of the author. The term “Lobotomised Owl” exists and refers to the situation in which we use the syntax from point 3.1 to duplicate items. Very generally, the term refers to the construction:

* + * 

For example, with this syntax, we can assign a bottom margin to each item in a list with another neighbor. Thus, the last list item does not receive whitespace:

li + li { margin-bottom: 10px }

The same can be achieved, of course, by using the design li: last-of-type { margin-bottom: 0 } But why overwrite values

Some other centering of the element relative to the parent

Yes, we now have Flexbox, but we can not always use it (eg for supporting older browsers). One of the most interesting ways to center an element inside a parent is the following structure:

.parent { width: 100%; height: 800px; position: relative; }

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

Of course, CSS allows many tricks confronted much more. Many of the problems that have plagued CSS for many years are solved by modern solutions such as the mentioned Flexbox or CSS Grid.