Tag: Conditional

Dynamic, Conditional Imports

With ES Modules, you can natively import other JavaScript. Like confetti, duh:

import confetti from 'https://cdn.skypack.dev/canvas-confetti'; confetti();

That import statement is just gonna run. There is a pattern to do it conditionally though. It’s like this:

(async () => {   if (condition) {     // await import("stuff.js");      // Like confetti! Which you have to import this special way because the web     const { default: confetti } = await import(       "https://cdn.skypack.dev/canvas-confetti@latest"     );     confetti();   } })();

Why? Any sort of condition, I suppose. You could check the URL and only load certain things on certain pages. You could only be loading certain web components in certain conditions. I dunno. I’m sure you can think of a million things.

Responsible, conditional loading is another idea. Here’s only loading a module if saveData isn’t on:

The post Dynamic, Conditional Imports appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.


, ,

Responsible, Conditional Loading

Over on the Polyplane blog (there’s no byline but presumably it’s Kilian Valkhof), there is a great article, Creating websites with prefers-reduced-data, about the prefers-reduced-data media query. No browser support yet, but eventually you can use it in CSS to make choices that reduce data usage. From the article, perhaps you only load web fonts if the user hasn’t indicated a prefernce for low data usage:

@media (prefers-reduced-data: no-preference) {   @font-face {     font-family: 'Inter';     font-weight: 100 900;     font-display: swap;     font-style: normal;     font-named-instance: 'Regular';     src: url('Inter-roman.var.woff2') format('woff2');   } }  body {   font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,                Segoe UI, Ubuntu, Roboto, Cantarell, Noto Sans, sans-serif,                'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; }

That’s a nice pattern. It’s the same spirit with accessibility and the prefers-reduced-motion media query. You could use both from JavaScript as well.

Also the same energy: Umar Hansa’s recent blog post JavaScript: Conditional JavaScript, only download when it is appropriate to do so. There are lots of examples in here, but the gist is that the navigator object has information in it about the device, internet connection, and user preferences, so you can combine that with ES Modules to conditionally load resources without too much code:

if (navigator.connection.saveData === false) {     await import('./costly-module.js'); }

If you’re into the idea of all this, you might dig into Jeremy Wagner’s series starting here about Responsible JavaScript.

The post Responsible, Conditional Loading appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.


, ,

CSS Selectors are Conditional Statements

.foo {  }

Programmatically, is:

if (element has a class name of "foo") {  }

Descendent selectors are && logic and commas are ||. It just gets more complicated from there, with things like combinators and pseudo selectors. Just look at all the ways styles can cascade.

Jeremy Keith:

If you find you can’t select something in the CSS, that’s a sign that you probably need to add another class name to the HTML. The complexity is confined to the markup in order to keep the CSS more straightforward, modular, and maintainable.

Direct Link to ArticlePermalink

The post CSS Selectors are Conditional Statements appeared first on CSS-Tricks.


, ,