CSS Findings from the New Facebook Design

CSS Findings from the New Facebook Design

ishadeed.com ishadeed.com2 months ago in #Funny Love22

I am a curious person who is always interested in opening up the browser DevTools to see how things were made on a website. This is the first time that I blog about something like this. I found some interesting uses of different CSS features (at least for me), and I wanted to share them with you. The new Facebook design started rolling out for users lately, and I got it almost two weeks ago. At first, every UI element was a bit bigger for me but it was a matter of days until I got used to it. In this article, I will talk about all the interesting things I saw. Let’s dive in! Using SVG For The Avatars SVG is being used for the avatar images like the profile photo, your pages or the groups you’re in. I asked myself, why did they use it? Here are my thoughts: The avatar needs to have an inner border with a transparent black color (10%) to make bright avatars appear as a circle, even if the avatar was full white. It’s not possible to add an inset box-shadow to an HTML . For that reason, they used an SVG to solve it. To make the image as a circle, they used SVG and the SVG element. As I mentioned, the border inside the avatar is useful for bright images. Here is a mockup that shows that in detail. The inner border has been added as below: circle, rect { stroke-width: 2; stroke: rgba(0, 0, 0, 0.1); fill: none; } And if the image is rectangular, the shape to be used is a rect: Interestingly, the avatars in the home page feed are built using an with a element for the inner transparent border. See below: .avatar-wrapper { position: relative; } .avatar { display: block; border-radius: 50%; } .avatar-outline { position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); border-radius: 50%; } Since the SVG technique is being used only for a few places, I guess that the reason of using and is related to page size. If SVG were used for the feed avatars, this will result in increasing the KBs downloaded as the user scroll down. The use of spacer Divs instead of margin I wasn’t old enough to live in the days of spacer GIFS, but I saw something that I think is related to them. I will call it a spacer div, if that’s ok? Let me add some context there. The above is a section for friends requests that appears randomly in the home page feed. There is a grid of persons, and this grid needs a margin from the left. Usually, I will do this by margin-left: 16px. However, Facebook added a to act as a space between the edge of the container and the grid. I wondered about the reason of that? Maybe in the design system they built, adding a margin is not allowed for a container element? Maybe this is a react component that could be used anywhere by specifying a width for it? Why there is no margin there? As far from what I saw, the CSS (~100K lines) is full of utility classes, and a class can be easily added to the wrapper to give it a margin.  » Read More

Like to keep reading?

This article first appeared on ishadeed.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply