Css

Today I learned how to fill in an emoji with CSS. Here’s an example: .filledEmoji { color: transparent; text-shadow: '0 0 0 #86efac'; } ...

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

“Select isn’t broken.” If you’re working on a CSS file, and none of your changes are being applied, check for typos, crashed servers, misplaced files, etc. Once you’ve ruled out simple mistakes, you might have a syntax error like this: .klass { opacity: 0.5; }; The trailing semicolon is incorrect, and none of the CSS below it can be understood by the browser. Change this to: .klass { opacity: 0.5; } There may be some environments where a broken CSS file fails loudly; Code Sandbox or Codepens are not among them. If you’re changing CSS and nothing is happening, start looking for syntax errors. ...