Tags: im

3141

sparkline

Saturday, April 20th, 2019

Checked in at Jugendbildungsstätte Bahnhof Göhrde. with Jessica map

Checked in at Jugendbildungsstätte Bahnhof Göhrde. with Jessica

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

Limitation Breeds Creativity - Cassie Evans [Bytes Conf 2019] - YouTube

Cassie’s terrific talk from Bytes Conf, featuring some wild CSS experiments.

(Conference organisers—you want Cassie on your stage!)

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

Friday, April 12th, 2019

Disenchantment - Tim Novis

I would urge front-end developers to take a step back, breathe, and reassess. Let’s stop over engineering for the sake of it. Let’s think what we can do with the basic tools, progressive enhancement and a simpler approach to building websites. There are absolutely valid usecases for SPAs, React, et al. and I’ll continue to use these tools reguarly and when it’s necessary, I’m just not sure that’s 100% of the time.

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

Accessibility for Vestibular Disorders: How My Temporary Disability Changed My Perspective · An A List Apart Article

This is a fascinating insight into what it’s like to use the web if you’ve got vertigo (which is way more common than you might think):

Really, there are no words to describe just how bad a simple parallax effect, scrolljacking, or even background-attachment: fixed would make me feel. I would rather jump on one of those 20-G centrifuges astronauts use than look at a website with parallax scrolling.

Every time I encountered it, I would put the bucket beside me to good use and be forced to lie in bed for hours as I felt the room spinning around me, and no meds could get me out of it. It was THAT bad.

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.

You probably don’t need that hip web framework - Charged

This is a bit ranty but it resonates with what I’ve been noticing lately:

I’ve discovered how many others have felt similarly, overwhelmed by the choices we have as modern developers, always feeling like there’s something we should be doing better.

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

Friday, March 29th, 2019

CSS { In Real Life } | Building a dependency-free site in 2019

I think we’re often guilty of assuming that because our tools are great solutions for some things, they’re automatically the solution for everything.

Monday, March 25th, 2019

WWW:BTB — History (Overview)

This history of the World Wide Web from 1996 is interesting for the way it culminates with …Java. At that time, the language seemed like it would become the programmatic lingua franca for the web. Brendan Eich sure upset that apple cart.