Select Page

Category: Article

The trick to viewport units on mobile

Viewport units have always been controversial and some of that is because of how mobile browsers have made things more complicated by having their own opinions about how to implement them. Case in point: should the scrollbar be taken into account for the vw unit? What about a site’s navigation or page controls — should those count in the calculation? Then there are physical attributes of the devices themselves (hello, notch!) that can’t be overlooked. First, a little context The spec is pretty vague about how viewport units should be calculated. With mobile devices, we’re often concerned with the...

Read More

On xlink:href being deprecated in SVG

A reader wrote in to tell me we should update our articles about SVG elements. The attribute we always use for them, xlink:href, is deprecated. Indeed, MDN says: That’s pretty strong language, hence the reader’s warning. This is a bit surprising to me, as the SVG 2 thing got a little weird. It looks like it did become a Candidate Recommendation though. So… I like it. But does it actually work? Lemme fork my little old demo and change all the references. In a quick run through of what I have easy access to: Chrome 67 Firefox 61 Safari...

Read More

The peculiar magic of flexbox and auto margins

In front-end development, there are often times when I know that I don’t know something. I might know enough to know what CSS to search for, but I have absolutely no idea how to use it or what the right syntax is. Somehow, in my head, there appears to be a filing cabinet that’s entirely empty, and when I try to look something up, all I find is an almost illegible sticky note instead. One topic like this (which is an area I’ve sort of always known about but never really understood) is how auto margins and flexbox interact with one another. Take this example for instance: .parent { display: flex } .child { margin: auto; } What does this do again? I seem to recall there’s a bunch of nifty things you can do with it, and earlier this week, I half-remembered them after reading a great post by Sam Provenza from a while back that shows how auto-margins and flexbox work together. But I still didn’t quite get the concept even after reading that post, and it wasn’t until I started making demos of my own that it started to click. In that post, Sam describes how margin: auto impacts flex items like so: If you apply auto margins to a flex item, that item will automatically extend its specified margin to occupy the extra space in...

Read More

Sometimes `sizes` is quite important.

Paraphrased question from email: I just read your article Responsive Images: If you’re just changing resolutions, use srcset. In the age of “responsive websites,” srcset does not help in certain situations. For example, I have a popular products slider. On mobile, I have one image per slide where the images are 320px wide. On desktop, I have six images per slide where each is 160px wide. So the desktop images are smaller on desktop, not bigger. How do I handle this situation with srcset? I tried to be careful with that post title: “If you’re just changing resolutions, use srcset.” In this case, we’re changing the size of the images not just at certain resolutions, but at specific breakpoints as well, which means we’re also going to need to use the sizes attribute to get the most out of responsive images. The entire job of the sizes attribute is to tell the browser what size the image will be shown at, as per our CSS. A demo! Resize the width to see it alternate between the “Desktop” and “Mobile” views. See the Pen Responsive Images Slider by Chris Coyier (@chriscoyier) on CodePen. As the email mentioned, the “Desktop” version actually renders the images smaller (160px) than the “Mobile” version (320px). Let’s also account for 2x displays. To prepare ourselves, let’s have three versions of each image: 160px (for 1x...

Read More

Solved with CSS! Logical Styling Based on the Number of Given Elements

This post is the third in a series about the power of CSS. Article Series: Colorizing SVG Backgrounds Dropdown Menus Logical Styling Based On the Number of Given Elements (this post) Did you know that CSS is Turing complete? Did you know that you can use it to do some pretty serious logical styling? Well you can! You don’t have to set all of your logic-based styling rules in JavaScript, or even have to use JavaScript to set classes you are styling against. In many cases, CSS can handle that itself. I’m still discovering new CSS tricks everyday, and...

Read More
000webhost logo