CSS mix-blend-mode not working? Set a background-color!

💡 If you find your CSS mix-blend-mode not working as expected (on a white background), you need to explicitly set a background-color on the underlying element. The easiest way to do so is to apply background-color: white; on the html and body elements.

html, body {
    background-color: #fff;
}

~

Demos + Explanation

Without a background-color set

You’ll notice here that for the “white” sections, the set mix-blend-mode: difference does not seem to work. The navigation will stay white and visually blend into the white background. Note that the navigation is not actually gone, as you can still see it shine through whenever a number of any of the sections crosses it.

See the Pen CSS mix-blend-mode not working? (1/2) by Bramus (@bramus) on CodePen.

The reason why it doesn’t work is that the white sections don’t really have a white background. They have no background-color set, so they fall back to the default value of transparent. Visually this is manifested as a white color, but to the compositor it will still be transparent. As the compositor can’t calculate the difference of the white text against the transparent background, the text will remain white.

~

With a background-color set

With background-color: #fff; set on the body/html the compositor does know how to calc the difference, and the demo will behave correctly.


See the Pen CSS mix-blend-mode not working? (2/2) by Bramus (@bramus) on CodePen.

Alternatively we could set this declaration on the sections themselves:

section {
    background-color: #fff;
}

~

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would surely put a smile on my face. Thanks!

☕️ Buy me a Coffee (€3)

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.

SqUID Warehouse Robot

SqUID consists of a synchronized autonomous robotic fleet that has 3-dimensional movement capabilities, allowing a fully flexible operation. A high-end embedded control system and smart real-time data analysis allow BionicHIVE’s algorithmic engine to dynamically learn problems created in one warehouse and apply resolutions to all warehouses in the network.

Cool.

BionicHIVE →

Ray – Dump Debugging Evolved

The folks over at Spatie have released a new tool called Ray that helps you with debugging.

Ray is a beautiful, lightweight desktop app that helps you debug your app. After installing one of the libraries to send information to Ray, you can use the ray() function to quickly dump stuff. Any variable(s) that you pass to Ray will be displayed.

Since Spatie mainly develops with Laravel it plays very nice with it. It supports logging all performed queries or properly displaying the contents of any Eloquent Model / Mailable for example.

ray('Hello world');

ray(['a' => 1, 'b' => 2])->color('red');

ray('multiple', 'arguments', 'are', 'welcome');

ray()->showQueries();

User::firstWhere('email', '[email protected]');

At its core Ray is “simply” an app that listens for incoming messages on a specific port (e.g. 23517). That means you can use it with any other programming language, as long as you send it the proper (JSON) payload. Libraries to use Ray with WordPress or JavaScript are already available too.

Ray →
Ray Docs →
Ray Introductory Blogpost →

💁‍♂️ Sidenote: To debug JavaScript I’d recommend the DevTools you already have though, as they’re already built for it. To debug from a remote source you could use something like JSConsole or get knee-deep in ADB and remote debugging protocols. But from a technological point of view it’s pretty cool that you can use Ray for it if you wanted to.

Accept several email addresses in a form with the multiple attribute

A popular tweet of mine that’s been doing rounds again (thanks to an RT by Stefan, whom you should definitely follow) is this little tip:

By setting the multiple attribute on an input[type="email"] you can have it accept multiple entries. Each entry is separated by a comma and is validated individually.

Here’s a little demo video of how that works:

💁‍♂️ For a slight moment there you can see that [email protected] is considered valid. As per RFC 822 the [email protected] format — used mainly in local networks — indeed is allowed.

~

However, it was pointed out to me that on iOS this isn’t usable by default:

On iOS, the “email keyboard” looks like this, with no comma to be found (not even when switching to numbers/symbols):

To work around this limitation you can manually override the input to use the regular keyboard by setting the inputmode attribute to text.

That way we still have the built-in browser validation rules (triggered by [type="email"]) and a means to type in a comma (triggered by [inputmode="text"]). Double win!

💁‍♂️ Sidenote: With this inputmode attribute you can create better number inputs.

~

Combining what we know, here’s a full demo for you to play with:

See the Pen
Accepting multiple e-mail addresses in one input by Bramus (@bramus)
on CodePen.

~

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would surely put a smile on my face. Thanks!

☕️ Buy me a Coffee (€3)

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.

State of JS 2020

Following up on last year’s 2019 edition the results for the State of JS are in. 23,765 people answered the survey resulting in an overview of what’s hot and not for JavaScript and its ecosystem.

It’s great to see that language features like Destructuring, Nullish Coalescing and Optional Chaining seem to be common nowadays. However, just like last year, do take this all with a grain of salt though as 43% of the participants consider them to be experts in … CSS 🤨

State of JS 2020 →

☝️ For CSS a likewise survey was done: the State of CSS 2020

Update 2020-01-14: If you’re thinking the survey is too biased towards white male Americans, be sure to read State of JS 2020: Common Criticisms by author Sacha Greif.

Nested Media Queries

I can’t seem to find any mention of this in the Media Queries Module specification, but apparently it’s allowed to nest media queries, as shared by Šime Vidas:

That’s … awesome! 🤯

💁‍♂️ Don’t confuse this with CSS Nesting, an upcoming feature of CSS, which allows you to nest selectors.

Fiddling with it a bit more, turns out this snippet also works as expected:

@media not print {
  @media (min-width: 0) {
    p {
      font-weight: bold;
    }
    @media (max-width: 750px) {
      p {
        background: yellow;
      }
    }
  }
}

You can play with this CodePen demo to try it yourself.

UPDATE: Thanks to reader Vadim Makeev for pointing out that support for nested @media blocks was added to Opera 12.50 back in 2012! Its syntax is defined in the CSS Conditional Rules Module specification.

Optimal Overlay Finder For Readable Text on a Background Image

A trick you can use to make text better stand out against a background image, is to use a color overlay with a certain opacity on top of the image. This tool by Yaphi calculates the ideal opacity to use, so that the contrast meets the WCAG standards.

`dive` – A tool for exploring a Docker Image, Layer Contents, and discovering ways to shrink the size of your Docker/OCI Image

You can use dive to help you optimize your Docker image layers.

Say you have these two layers in your Dockerfile:

RUN wget http://xcal1.vodafone.co.uk/10MB.zip -P /tmp
RUN rm /tmp/10MB.zip

Then you’ll end up with 10MB of wasted space. dive will tell you, so that you can combine these into one optimized layer:

RUN wget http://xcal1.vodafone.co.uk/10MB.zip -P /tmp && rm /tmp/10MB.zip

You can also integrate it as a build step in your CI/CD pipeline, and make it break the build in case you don’t meet a certain quotum.

Installation per Homebrew:

brew install dive

dive →

🔗 Related: In How to build smaller Docker images you can find some practical tips to keep your docker image size under control.