scripting
media query looks like a powerful addition to the progressive enhancement toolbox.]]>Not to pick on anyone in particular, but consider this example from a recent talk I gave:
When CSS fails to load, however, check out what happens:
Yeah, that’s an inline SVG. You see, without any explicit dimensions set, the SVG will naturally grow to become as large as possible. Chances are you’re constraining that growth in CSS somewhere, but when your CSS fails to apply for any reason, every inline SVG on your site will swell like Violet Beauregarde after eating Willy Wonka’s “three-course dinner” chewing gum.
Thankfully, this is a pretty easy situation to avoid: just set an explicit width
and height
. To use an example from this site, instead of saying
<svgviewBox=“0 0 38 48”
version=“1.1”
xmlns=“http://www.w3.org/2000/svg”>
You can explicitly set the width
and height
in the svg
element like this:
<svgwidth=“38”height=“48”
viewBox=“0 0 38 48”
version=“1.1”
xmlns=“http://www.w3.org/2000/svg”>
What you set these values to will likely vary depending on how the icon is being used. In a pinch, you could also pull the values directly from the viewbox
value. And using that value, you could even make the inline values dynamic within your template, reading in the viewbox
values and tweaking them to a ratio specific to the context.
Setting the SVG’s dimensions inline like this doesn’t restrict their flexibility either. You can still use CSS to override these inline values and set the SVG to whatever size you wish:
svg{
inline-size: 200px;
block-size: 200px;
}
I’ve thrown together a quick comparison over on CodePen so you can see the three different states:
And now that you know, please, please, please take a few minutes to make this small, simple change to your websites. While not a catastrophic issue, taking care to control how your sites render in the worst of circumstances goes a long way to demonstrating thoughtful consideration of your users.
Update: For more in-depth info on this topic (and scenarios where CSS isn’t applied to your SVGs), be sure to check out this piece from Sara Soueidan.
]]>]]>I’ve worked on the web for a long time. When I say a long time, I mean a long time. As in my first browser was on the command line old. As in my first back-end development was a CGI script old. With my nearly three decades of building dozens upon dozens of projects for the web, the one skill I’ve found most valuable is the ability to bridge the gaps between the worlds of design, user experience, and development.
Each of these fields attract practitioners from different education and/or hobbyist backgrounds. This can be a point of tension, as folks in each camp tend to see their own field as having the greatest influence on a web project’s success. The reality is that web exists in the nexus of these fields, relying equally on what each of these practices bring to the table. I have found that the most valuable people in any web project are those that understand enough of each field to be able to operate in that nexus, ensuring each team is communicating effectively with the other teams and that everyone is working together toward a shared goal.
Which brings me to Stephanie Stimac’s Design for Developers. This book is an invaluable resource for developers looking to level up in their understanding of what it takes to build for the web today. It provides a crash course in design and user experience in a way that will both improve your fluency with these topics and give you the necessary skills to become productive in these spaces as well. Beyond that superficial perspective, however, this book provides the foundation for leveling up your career and becoming the person who thrives in the space between design, user experience, and development.
Stephanie is the perfect person to provide you with these insights as well. Not only is she an excellent communicator, she also has years of working experience as a designer, developer, user experience practitioner, and an educator. She’s even worked behind the scenes on web browsers and the web standards they implement, giving her an incredible depth of understanding when it comes to the web and the tools we rely on to build it.
Whether you’re a longtime developer looking to grow a new branch on your skill tree or you’re starting out and looking to get a solid foundation in what it takes to build for the web, Design for Developers is sure to provide you with a wealth of knowledge to help you on your way.
Ben explores multiple potential paths in this piece.
]]>image()
function is really cool! It enables us to inject portions (fragments) of images, change image direction (flip), provide solid color fallbacks & more.This is a great writeup from Kevin Powell.
]]>🤯
]]>:has()
in this one::not()
li
when hovering/focusing inside:has()
in this one.]]>The big change in the Media Queries Level 4 specification is that we have new operators that compare values rather than combining them:
- < evaluates if a value is less than another value
- > evaluates if a value is greater than another value
- = evaluates if a value is equal to another value
- <= evaluates if a value is less than or equal to another value
- >= evaluates if a value is greater than or equal to another value
🤞🏻 we get them in Safari soon!
]]>I even tinkered a bit with the Speech Synthesis API to achieve something akin to a functional listening experience for this blog. Would love to go back to doing it in CSS though. I hope this happens!
]]>This is an approach I’ve used often with complex interfaces like tabs and it works a treat.
]]>details
and summary
, courtesy of Scott. He’s tested so many permutations and edge cases that this is really required reading if you’re considering using this element pairing for progressive disclosure.]]>
<details>
and<summary>
elements are complicated. Saying don’t use them isn’t really practical and there’s a lot of good things about them. But they do have bugs. … It really just all comes down to what sort of experience you want to provide to people, and how OK you might be knowing that the native elements are going to be exposed differently, have different gaps but also different features to them.
summary
, courtesy of Scott. He’s tested so many permutations and edge cases that this is really required reading if you’re considering using this element pairing for progressive disclosure.]]>details
and summary
, courtesy of Scott. He’s tested so many permutations and edge cases that this is really required reading if you’re considering using this element pairing for progressive disclosure.]]>