Css

When you allow a user’s behavior to add or remove a border from an element, that can cause the page to ‘jump around’ as the border is added or removed. A common example is a border around an element that is ‘selected’. Fix this issue by adding a transparent border around the element and giving it color when it’s selected. No more jumps. .element { border: 1px solid transparent; } .selectedElement { border-color: $selected-color; }

Let’s say you have a string evaluated into a HTML template that contains newlines, like "getting\n\things\ndone" and you want those newlines to be reflected in the presentation. Like this: getting things done We can solve this with the following CSS on the string’s containing element: white-space: pre-wrap; With pre-wrap, “[s]equences of white space are preserved. Lines are broken at newline characters, at [breaks] and as necessary to fill line boxes.” white-space docs