Tags: image

2364

sparkline

Thursday, April 18th, 2019

Inlining SVG background images in CSS with custom properties

Here’s a tiny lesson that I picked up from Trys that I’d like to share with you…

I was working on some upcoming changes to the Clearleft site recently. One particular component needed some SVG background images. I decided I’d inline the SVGs in the CSS to avoid extra network requests. It’s pretty straightforward:

.myComponent {
    background-image: url('data:image/svg+xml;utf8,<svg> ... </svg>');
}

You can basically paste your SVG in there, although you need to a little bit of URL encoding: I found that converting # to %23 to was enough for my needs.

But here’s the thing. My component had some variations. One of the variations had multiple background images. There was a second background image in addition to the first. There’s no way in CSS to add an additional background image without writing a whole background-image declaration:

.myComponent--variant {
    background-image: url('data:image/svg+xml;utf8,<svg> ... </svg>'), url('data:image/svg+xml;utf8,<svg> ... </svg>');
}

So now I’ve got the same SVG source inlined in two places. That negates any performance benefits I was getting from inlining in the first place.

That’s where Trys comes in. He shared a nifty technique he uses in this exact situation: put the SVG source into a custom property!

:root {
    --firstSVG: url('data:image/svg+xml;utf8,<svg> ... </svg>');
    --secondSVG: url('data:image/svg+xml;utf8,<svg> ... </svg>');
}

Then you can reference those in your background-image declarations:

.myComponent {
    background-image: var(--firstSVG);
}
.myComponent--variant {
    background-image: var(--firstSVG), var(--secondSVG);
}

Brilliant! Not only does this remove any duplication of the SVG source, it also makes your CSS nice and readable: no more big blobs of SVG source code in the middle of your style sheet.

You might be wondering what will happen in older browsers that don’t support CSS custom properties (that would be Internet Explorer 11). Those browsers won’t get any background image. Which is fine. It’s a background image. Therefore it’s decoration. If it were an important image, it wouldn’t be in the background.

Progressive enhancement, innit?

Hacking and writing at Homebrew Website Club Brighton.

Hacking and writing at Homebrew Website Club Brighton.

Wednesday, April 17th, 2019

Checked in at Jolly Brewer. Tunes! — with Jessica map

Checked in at Jolly Brewer. Tunes! — with Jessica

Sunday, April 14th, 2019

Pork!

Pork!

Saturday, April 13th, 2019

Checked in at The Parlour. Afternoon tea — with Jessica map

Checked in at The Parlour. Afternoon tea — with Jessica

Monday, April 8th, 2019

AddyOsmani.com - Native image lazy-loading for the web!

The loading attribute for images and iframes is coming to Chrome. The best part:

You can also use loading as a progressive enhancement. Browsers that support the attribute can get the new lazy-loading behavior with loading=lazy and those that don’t will still have images load.

Sunday, April 7th, 2019

Checked in at The Bugle Inn. Fiddles map

Checked in at The Bugle Inn. Fiddles

Saturday, April 6th, 2019

Taking the train from Brighton to London is the perfect opportunity to test the “lie-if” strategy I’ve been experimenting with on my site.

Taking the train from Brighton to London is the perfect opportunity to test the “lie-fi” strategy I’ve been experimenting with on my site.

Friday, April 5th, 2019

Welcoming @jbirdui and @trysmudford to @Clearleft.

Welcoming @jbirdui and @trysmudford to @Clearleft.

Wednesday, April 3rd, 2019

Getting ready to open the show at @FrontendNE in Newcastle.

Getting ready to open the show at @FrontendNE in Newcastle.

Monday, April 1st, 2019

This “feature”—which is enabled in the latest version of iOS by default—is a very bad idea, in my opinion.

This “feature”—which is enabled in the latest version of iOS by default—is a very bad idea, in my opinion.

Saturday, March 30th, 2019

Went for a walk in the countryside and made a friend.

Went for a walk in the countryside and made a friend.

Checked in at Lewes. Lewes picnic — with Jessica map

Checked in at Lewes. Lewes picnic — with Jessica

Saturday, March 23rd, 2019

Catching up with Tiff.

Catching up with Tiff.

Celebrating the life of @CindyLi. ♥️

Celebrating the life of @CindyLi. ♥️

Friday, March 22nd, 2019

Who has the fastest website in F1? - JakeArchibald.com

I think I physically winced on more than one occassion as I read through Jake’s report here.

He makes an interesting observation at the end:

However, none of the teams used any of the big modern frameworks. They’re mostly Wordpress & Drupal, with a lot of jQuery. It makes me feel like I’ve been in a bubble in terms of the technologies that make up the bulk of the web.

Yes! This! Contrary to what you might think reading through the latest and greatest tips and tricks from the front-end community, the vast majority of sites out there on the web are not being built with React, Vue, webpack or any other “modern” tools.

NASA’s Visual Universe

An interesting way of navigating through a massive amount of archival imagery from NASA.

Thursday, March 21st, 2019

Hacking away at Homebrew Website Club Brighton! https://indieweb.org/Homebrew_Website_Club#Brighton

Hacking away at Homebrew Website Club Brighton!

https://indieweb.org/HomebrewWebsiteClub#Brighton

Wednesday, March 20th, 2019

Checked in at Bone Daddies. 🍜 map

Checked in at Bone Daddies. 🍜

Tuesday, March 19th, 2019

Checked in at Curry Leaf Cafe map

Checked in at Curry Leaf Cafe