Few obscure frontend tricks

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

Decorating a decorative text line ( text-decoration-style , text-decoration-color )

In Firefox and Safari, quite a while ago, there were additional possibilities 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 the line style:

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

Consider that at the moment new properties are working only in Firefox and, in part, in Safari . View a working example here.
')

Smooth scrolling of a page on CSS ( scroll-behavior )

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

 body { scroll-behavior: smooth; } 

The property can have 3 main values:

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

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

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

An animation of the appearance of the element (quickly and easily)

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


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

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

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

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

• By writing @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.

There is only one downside to this approach: 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 the working example here .

CSS line break

If in a certain place on the page you need to add a line break, and you don’t feel like (or impossible) to climb, CSS will come to the rescue. The first thing that comes to mind is to add a pseudo-element with the <br> tag inside:

 .break:after { content: '<br />'; } 

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

 .break:after { content: '\A'; //   white-space: pre; //         ,    } 

A little example .

SVG with interactive elements

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

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

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <defs> <style type="text/css"> rect { fill: blue; } rect:hover { fill: orange; } </style> </defs> <rect /> <rect /> <rect /> <rect /> </svg> 

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

 <iframe src="icon.svg"></iframe> 

or

 <object type="image/svg+xml" data="icon.svg"></object> 

Perhaps this is not the most beautiful solution, but it is clearly better than the page littered 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:

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <defs> <style type="text/css"> @keyframes fill-change { 0% { fill: blue; } 50% { fill: orange; } 100% { fill: blue; } } rect { animation: 2s ease fill-change infinite; fill: blue; } </style> </defs> <rect /> <rect /> <rect /> <rect /> <path /> </svg> 

I hope, the things described here seemed interesting to you, and some even will come in handy in practice. See you again!