Use a fallback for Safari’s problematic mix-blend-mode implementation, in TailwindCSS

Recently I had been working on a website that uses mix-blend-mode: color. I just found out it didn’t work on Safari. Apparently color is not supported image/svg+xml . I had to find a way to maintain this mix blend mode for non-Safari browsers, in which it worked fine, but override it in Safari. Then I found this overly verbose answer image/svg+xml on Stackoverflow.

Posts

Prevent a flex button to take up full width

Regular html & css <style> .container { display: flex; flex-direction: column; } .item { display: flex; flex-direction: row; align-items: center; align-self: center; } </style> <body> <div class="container"> <button class="item"> <span>Click me!</span> <i>Icon</i> </button> </div> </body> Or with TailwindCSS <body> <div class="flex flex-col"> <button class="flex flex-row items-center self-center"> <span>Click me!</span> <i>Icon</i> </button> </div> </body> See also https://stackoverflow.com/a/67819933/4496102 image/svg+xml

Posts

Reload css stylesheet without reloading the page

Sometimes, a local development environment can be really slow at reloading pages. If you are working on styling a page or component and you want to check your changes, every page refresh generates frustration. You can then also opt for only reloading the stylesheets of a page. This will likely be significantly faster. You can do this by using the following command in the console of your browser’s development tools:

Posts

A very simple animated skeleton gist

Just for my own reference, I will publish the skeleton css gist image/svg+xml I use in many of my projects here. It is very easy to use and very easy to extend with new shapes. You can check the --card and --rounded modifiers image/svg+xml for inspiration. In Sass: .skeleton { display: inline-block; height: 1em; position: relative; overflow: hidden; background-color: #dddbdd; &::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateX(-100%); background-image: linear-gradient( 90deg, rgba(#fff, 0) 0, rgba(#fff, 0.

Posts

Angular :host in css

So I was working on creating a nice extendable skeleton image/svg+xml component when I stumbled upon a problem: I wanted to create a base skeleton style for the component that could be extended outside the component using utility classes. Something like this: // Skeleton template <div class="skeleton"></div> // Skeleton CSS .skeleton { background: lightgray; width: 100%; height: 1em; // etc. } // Implementation of skeleton component // with utility classes <app-skeleton class="rounded p-1"></app-skeleton> However, what happened during runtime was the following: