A few unobvious frontend tricks

Under the cat, you will learn how to quickly and easily arrange interaction with SVG icons, add a smooth scroll using one CSS rule, animate the appearance of new elements on a page, transfer text to a new line using CSS, and about new ways to create a decorative line text.

Making a decorative line of text ( text-decoration-style , text-decoration-color )

In Firefox and Safari, quite a long time ago there were additional opportunities for decorating a decorative line, which is added to the text using the text-decoration property .

For example, you can set the text-decoration property to several values ​​at once (and this has been working for a very long time):

.multiple {
  text-decoration: underline overline;
}

You can set the color for the text:

.color {
  text-decoration-color: blue;
}

And also line style:

.dashed {
  text-decoration-style: dashed;
}
.dotted {
  text-decoration-style: dotted;
}
.wavy {
  text-decoration-style: wavy;
}

Please note that at the moment , new properties only work in Firefox and, in part, in Safari . See a working example here.

Smooth CSS page scrolling ( scroll-behavior )

The unsupported but very useful scroll-behavior property will allow us to make the scroll on the page smooth in a single line. It works both when scrolling to the right place when navigating through anchors, and when scrolling through a page by JS.

body {
  scroll-behavior: smooth;
}

The property can take 3 basic values:

• smooth - smooth scrolling;
• instant - instant scrolling;
• auto - at the discretion of the browser.

Someday (I hope very soon) we will no longer have to write functions for smooth scrolling on JS or connect third-party libraries.

If smooth scrolling of a page on your site is not something critical, feel free to use this property. You will get a smooth scroll when navigating through anchors with just one CSS rule, at least in Firefox .
Example

Animation of element appearance (quick and easy)

Imagine you need to create a page with dynamically loaded content. For example, a news feed in which, when scrolling, more and more new elements appear. So that the elements do not flicker before your eyes, it would be nice to animate their appearance.


As was often done before:
1) a request is sent to the server;
2) after loading the response, the data is added to the block hidden on the page;
3) the class is assigned to the block in which the animation of its appearance is registered (or (oh, horror!) The block is animated by JS).

So, the last point can be considered redundant, because we have the good old CSS animation property. By default, animation is triggered when the page loads or when the DOM tree changes (namely, when a class with animation is added to an element or the element itself). Therefore, it is important not to store unfilled blocks in the DOM, but to add them dynamically to containers as they load.

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.content {
  animation: fade-in .4s ease;
}

That's all it takes to create a simple animation of the appearance. The advantages of this approach are obvious:

• Having written @keyframes once, you can use them anywhere in CSS to add typical animation to all the necessary elements;
• Calls to the DOM in JS will be minimized, which with a large number of elements or iterations will help reduce the load on the page.

This approach has only one drawback: new elements cannot be stored in the DOM and wait until we fill them with content. Their markup will have to be stored on the JS side ... You can

study a working example here .

CSS line break

If in a certain place on the page you need to add line breaks, but you don’t want to climb into HTML (or impossible), CSS will come to the rescue. The first thing that comes to mind is to add a pseudo-element with a tag
inside:

.break:after {
    content: '
';
}

Unfortunately (and maybe fortunately), you cannot add tags to pseudo-elements. But there is a way!

.break:after {
    content: '\A'; //код переноса строки
    white-space: pre; //заставляет браузер отображать текст с учётом всех пробелов и переносов, добавленных в код
}

A small example .

SVG with interactive elements

If you ever had to arrange interaction with SVG elements, you know that this is not so simple. To access individual SVG elements in CSS, you have to add not the tag to the page , but the code of the entire SVG image. This makes HTML code terribly cumbersome. As a result, we have to sacrifice page size and code brevity for visual effects.

But! We have a good alternative - to prescribe all interaction styles directly in SVG:

It would seem that if we prescribed styles in the image itself, then they should work out when adding SVG as usual ! However, not all so simple. Styles added this way will not work anyway. But we can make a knight move and add SVG to the page using or

This may not be the most beautiful solution, but it is clearly better than a page cluttered with SVG code. If you know a more beautiful way, please share it in the comments!

UPD Large user shared a cool solution, which is described in detail here .
Another interesting solution from exeto user .

By the way, if you wish, you can add CSS animation to the SVG file:

I hope the things described here have seemed interesting to you, but they will even come in handy for someone in practice. See you soon!