Photo by Kon Karampelas on Unsplash
Source: https://ishadeed.com/article/new-facebook-css/
Author: Ahmad Shadeed
Translation: Front-end foreign language selection
Recently, the new Facebook design started to be launched for users. I received it about two weeks ago. Initially, each UI element was a bit big for me. I spent several days to get used to it. In this article, I will discuss all the interesting things I have seen.
Let's see how Facebook uses CSS!
Avatars use SVG
SVG is used for avatar pictures, such as profile photos, your page or your group.
<svg role="none" style="height: 36px; width: 36px;"> <mask id="avatar"> <circle cx="18" cy="18" fill="white" r="18"></circle> </mask> <g mask="url(#avatar)"> <image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image> <circle cx="18" cy="18" r="18"></circle> </g></svg>
I asked myself, why would they use it? This is my idea:
- The avatar needs to have an internal border and transparent black (10%), so that the bright avatar appears as a circle, even if it is completely white.
- You can not embed
box-shadowadded to HTML<img>. Therefore, they used SVG to solve it. - To make the image round, they used SVG
<mask>and SVG<image>elements.
As I mentioned, the border inside the avatar is useful for bright images. This is a model showing the prototype in detail.
The inner border is added as follows:
circle,rect { stroke-width: 2; stroke: rgba(0, 0, 0, 0.1); fill: none;}
If the image is rectangular, the shape used is rectangular:
<svg role="none" style="height: 36px; width: 36px;"> <mask id="avatar"> <rect cy="18" fill="white" height="36" rx="8" ry="8" width="36" x="0" y="0"></rect> </mask> <g mask="url(#avatar)"> <image x="0" y="0" height="100%" preserveAspectRatio="xMidYMid slice" width="100%" xlink:href="avatar.jpg" style="height: 36px; width: 36px;"></image> <rect cy="18" fill="white" height="36" rx="8" ry="8" width="36" x="0" y="0"></rect> </g></svg>
Interestingly, Home Feed the head is to use <img>and transparent internal border <div>elements constructed. as follows:
<div class="avatar-wrapper> <img class="avatar" width="40" height="40" src="avatar.jpg" width="40" alt=""> <div class="avatar-outline"></div></div>
CSS is as follows
.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 0001pxrgba(0, 0, 0, 0.1); border-radius: 50%;}
Because SVG technology is used only in a few places, I want to use <img>and <div>causes the page size. If SVG is used for the feed avatar, it will cause the KBs to be downloaded as the user scrolls down.
Use div intervals instead of blanks
I wasn't big enough to live in the interval of GIFS, but I saw something related to them. If I can, I call it a spacer div?
I add some background here, the above is the friend request part that appears randomly in the homepage feed. There is a person's grid, and this grid has a left margin. Usually, I will go through margin-left:16pxto perform this operation. However, Facebook added <div>as a space between the edge of the container and the grid.
I want to know what is the reason?
- Maybe in the design system they built, the container element does not allow adding margins?
- Perhaps this is a
reactcomponent that can be used anywhere by specifying the width?
Why is there no margin? As far as I can see, CSS (about 100K lines) is full of utility classes, and it is easy to add a class to the wrapper to leave blank.
Use CSS filters
Do you see the four icons there? Plus signs and arrows are images, while Messenger and notifications are SVG elements. I don't know what is the reason behind this mixing.
When you click the last one, the icon color changes to blue. I asked myself, how does the color change when this is a picture? Is the image likely to change when hovering? No! I noticed that there is a CSS filter that can be used to change the image color.
.icon { filter: invert(39%) sepia(57%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(200%) saturate(147.75%) hue-rotate(202deg) brightness(97%) contrast(96%)}
Yes, this is the production code of Facebook.com, which is very strange to me. It simply changes with SVG icons instead of fillcolor difficult?
This is also used for verified account icons.
And also used for user profile link.
.icon { filter: invert(59%) sepia(11%) saturate(200%) saturate(135%) hue-rotate(176deg) brightness(96%) contrast(94%);}
If you want to learn more about how to use a CSS filter to convert a black image to any color, then this answer [1] is for you.
Use images for shadows
This is an 2px * 14pximage being repeated. Not only that, there is a special <div>for the shadow. What is the purpose of using it?
Royi Hagigi from Facebook confirmed that the reason for using pictures is for performance. In browsers, frame shadows on floating Headers like this will kill scrolling performance.
When Royi Hagigi was asked how to test, he replied: "Scrolling a page full of videos, random parts of the page will disappear and reappear. This is bad."
I totally agree.
Extensive use of CSS variables
I like that they use CSS variables. From what I can see, :rootmore than 320 variables have been added to the element. These values are also used in dark mode.
When switching the dark mode, a __fb-dark-modeclass to HTML elements. After the addition, it overrides :rootall variables are defined as follows:
:root { /* Light模式变量 */ -fds-active-icon: #3578E5; --fds-attachment-footer-background: #F2F3F5; --fds-blue-05: #ECF3FF; --fds-blue-30: #AAC9FF; --fds-blue-40: #77A7FF;}.__fb-dark-mode:root, .__fb-dark-mode { /* 覆盖light变量 */ --fds-active-icon: black; --fds-attachment-footer-background: black; --fds-blue-05: black; --fds-blue-30: black; --fds-blue-40: black;}
This is a video of class switching. I suggest viewing it in full screen!
Line truncation (truncate multiple lines of text)
In the sidebar, there is a list of links, such as user profile, recent, memory ... etc. I noticed that multi-line text truncation is used here.
.element { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
The above styles are added as inline styles, and they will also change according to the browser. See the model below:
The browser supports this CSS feature very well. According to CanIUse, all major browsers support this feature, but it needs to be prefixed.
Use Divs' hover effect
Usually, we do hover effect in CSS. For example, when hovering buttons that require different shades of gray, we simply use the following command:
.element:hover { background: #ccc;}
However, for large sites like Facebook, this seems impractical. When testing and checking things, I noticed an element, which was only displayed on the hover, and its main job was to execute a hover element.
.hover-div { position: absolute; right: 0; left: 0; top: 0; bottom: 0; pointer-events: none; border-radius: 6px; inset: 4px0px; background-color: var(--hover-overlay); transition-property: opacity; transition-timing-function: var(--fds-animation-fade-out); cursor: pointer;}
This element is switched in JavaScript, not opacityfrom the 0change 1, so I made some of its operations and found that it was used extensively for many components.
See the screenshot collection below for where to use this element:
I like the consistency and simplicity of using the same hover effect on many elements. If this means anything, it is that the design language is consistent and the system is carefully designed. Well done, Facebook!
Use the inset attribute
This is shorthand for top, right, bottom and left attributes. Can be used like this:
.element { inset: 4px0; /* 这相当于: top: 4px, bottom: 4px, left: 0, right: 0 */}
insetAttributes are used for hovering divs of certain elements and are added in HTML inline. I noticed it on the following components:
At the time of writing, according to CanIUse, only Firefox 66+ is supported inset.
dir = auto and CSS logical attributes
For multilingual websites like Facebook, it is sometimes difficult to predict what the content will look like. For example, the user name has a post assembly dir=" auto"property. This means that the direction of the text will be based on language. For example, for English, it will be left to right, for Arabic, it will be right to left.
In addition, there is an inline CSS you can change the text direction (looks dir=autoare not enough).
<div dir="auto" style="text-align: start;">محتوى بالعربية</div>
Note that it was added on the element text-align:start. This is a logical CSS property equivalent to text-align:LTRClaim layout.
Dynamic cover photo background
Did you notice a gradient with a color similar to the main color in the cover photo? This is dynamically added based on the cover photo. How does it work?
1. Get the main color
First, we need to get the dominant (most commonly used) color in the cover photo. The team created a small cover photo in this color only.
2. Add a background using the main color
The background added to the element comes from the main color, and for clarity, I highlight the original photo of the cover with a white border.
3. Add a gradient above the background
.element { background-image: linear-gradient(to top, #FFFFFF, rgb(255, 255, 255), rgba(255,255,255,0.7), rgba(255,255,255,0.4), rgba(255,255,255,0));}
When the design is dark, the gradient changes from white to black:
.element { background-image: linear-gradient(to top, #000, rgb(0, 0, 0), rgba(0,0,0,0.7), rgba(0,0,0,0.4), rgba(0,0,0,0));}
Tip: You can use this tool [2] to get the main color from the image.
Multiple box shadow
I like the way this team creates shadows for elements like drop-down menus. Shadows will make you think it has depth and is more realistic than ordinary shadows.
.element { box-shadow: 012px28px0rgba(0, 0, 0, 0.2), 02px4px0rgba(0, 0, 0, 0.1), inset 0001pxrgba(255, 255, 255, 0.5);}
You may be wondering why there is an embedded shadow with 50% transparent white? Ok, this is in dark mode. See the zoomed image below regarding the inserted shadow:
Smart, I like it!
Empty elements of Flexbox grid
I noticed that all grids on the site are using flexbox. One thing that caught my attention is the "Your Photos" section.
.wrapper { display: flex; flex-wrap: wrap; justify-items: space-between;}.item { width: 205px;}
Sounds good, right? Use space-betweenas spacing is risky, because it may fail in the case of only three photos. See how the following prototype fails:
How do they solve this problem? Well, there are four empty <div>element, which is equal to the width of each photo. The HTML looks like this:
<div class="wrapper"> <div class="item"><a href="#"><img src="photo.jpg"></a></div> <div class="item"><a href="#"><img src="photo.jpg"></a></div> <div class="item"><a href="#"><img src="photo.jpg"></a></div> <div class="item"><a href="#"><img src="photo.jpg"></a></div> <div class="empty"></div> <div class="empty"></div> <div class="empty"></div> <div class="empty"></div></div>
This way, those empty divs will act as fake items, and the spacing between them will remain equal.
Use vertical media queries
For me, I rarely see the use of vertical media queries. I like that they use it to shorten the width of the news feed on the homepage. This is the CSS used:
@media (min-height:700px) { .element { width: 584px; }}
That's it, guys. I like to write this article and learned a lot. Hope you find it useful, please spread it.
Service recommendation
