Nathan Shepherd

Author & maintainer of { Browser Default Styles } | lover of dark themes

[Nathan Shepherd @Nathan0Shepherd]

🆕Query results on { Browser Default Styles } have become easier to share! 🔗

Whatever you search will be appended to the URL as a #⃣fragment that will return the same results when shared.

Pretty neat eh?😌

[Nathan Shepherd @Nathan0Shepherd]

@dan_abramov Your crypto recovery phrases. Don't ask me how they got there.

[Nathan Shepherd @Nathan0Shepherd]

IE desktop application support will be dropped June 15, 2022.

Until then, there's this handy ECMAScript copat table for quick lookups during those pesky troubleshooting moments.

https://t.co/BRwu3iy3lO 👀

[Nathan Shepherd @Nathan0Shepherd]

You know what would be awesome?

A monthly 1-hour @syntaxfm live stream on youtube.

Listeners/viewers can support the show with superchats.

Perfect format for guest shows too!

[Nathan Shepherd @Nathan0Shepherd]

@jimbo2150 This is great, had no idea!

Thanks for sharing.

It does look like webkit browsers don't support the MIME type function param (based on my own quick-and-dirty hands-on testing).

Although caniuse doesn't seem to indicate this:
https://t.co/ivjw6SR9nU

[Nathan Shepherd @Nathan0Shepherd]

We need an official and graceful way to handle fallback background images.

Implementation example:
🎯 objective: want to load avif bg image
🧩 challenge: browser support
🎉 solution: fallback image

#CSS

[Nathan Shepherd @Nathan0Shepherd]

Better to separate those concerns and be explicit with defined defaults.

Something like the below would make sense, i.e. specify defaults in order of preference that function as fallbacks:

[Nathan Shepherd @Nathan0Shepherd]

Browsers will load all backgrounds if multiple sources are specified.

Which is intentional but not ideal for a situation that only requires a fallback if the preferred option has failed.

Another disadvantage is the perf hit you'll take for loading multiple unneeded images.

[Nathan Shepherd @Nathan0Shepherd]

@schalkventerdev @TerribleMia Awesome time! Learnt so much, especially what's on the CSS roadmap:

🧅 layers
🖼️ scopes
🗜️ container queries

Only wish it was longer!

You guys have been killing it lately. Keep it up! Looking forward to what's next.

[Nathan Shepherd @Nathan0Shepherd]

@robhope @drewwilson Nah, it's good to have our shark-bois back, Rob.

Now if you were a seal. . .

[Nathan Shepherd @Nathan0Shepherd]

@michaelpumo @wesbos @syntaxfm You could possibly take this further and even detect the browser, OS and hardware types.

Great questions by the way. Really got me thinking.

[Nathan Shepherd @Nathan0Shepherd]

@michaelpumo @wesbos @syntaxfm E.g:
network="slow/fast" (these are always going to vary so let the browser determine what is "slow" & what is "fast")

This will address connectivity concerns.

[Nathan Shepherd @Nathan0Shepherd]

@michaelpumo @wesbos @syntaxfm input="pointer/touch" (this will indicate the *primary* input, so as to differentiate between devices with both, like a touchscreen laptop)

This will address screen size targets.

[Nathan Shepherd @Nathan0Shepherd]

@michaelpumo @wesbos @syntaxfm Let the developer decide and instruct the browser.

So maybe something like <agent> or <user> would be better.

Then define the parameters necessary to indicate intended behaviour.

[Nathan Shepherd @Nathan0Shepherd]

@wesbos @syntaxfm Something like <defer/lazy> could attempt to achieve something similar to code splitting (again not just specifically for static resources).

[Nathan Shepherd @Nathan0Shepherd]

@wesbos @syntaxfm That being said, always room for improvement and growth.

Something like <mobile> could be used to indicate mobile-only content.

Something like <preload> could indicate content to preload/prefetch (not just static resources).

[Nathan Shepherd @Nathan0Shepherd]

@enlightenedpie @wesbos @syntaxfm And "it knows" whether you mean vertically or horizontally.

[Nathan Shepherd @Nathan0Shepherd]

@ctjlewis @coolaj86 Is there any of that research you could link to? Interested in checking it out.

Reads like you're referring to some OOCSS and SMACCS methodologies, i.e. more of a semantic, than a utility, approach. Is that right?

[Nathan Shepherd @Nathan0Shepherd]

@schalkneethling @JamesClear Oh man, got to ask myself this daily.

[Nathan Shepherd @Nathan0Shepherd]

@mikegeyser Thanks for the awesome presentation yesterday evening on Web Vitals with @FedsaCommunity.

Picked up more than a few handy things and came away with greater clarity.

If you have any further articles you've authored on the subject I'd be happy to check them out!