CSS 从 Photoshop 网页版中的发现

Design and Development tips in your inbox. Every weekday. ads via Carbon

A few weeks ago, Adobe released a web version of Photoshop that is built with the web technologies like WebAssembly, web components, P3 colors, and a lot more.

几周前，Adobe发布了一个基于Web技术构建的Photoshop Web版本，包括WebAssembly、Web组件、P3颜色等等。

Photoshop was the first professional design app that I learned when I was 14 years old. It was one of the reasons that I became a designer, and eventually a front-end developer. Because of that, I thought it would be interesting to see how the CSS was written for such a massive app like Photoshop.

Photoshop是我14岁时学习的第一个专业设计应用程序。这是我成为设计师，最终成为前端开发人员的原因之一。因此，我认为了解像Photoshop这样的大型应用程序的CSS是很有趣的。

In this article, I will share the CSS findings that I find interesting. Let’s do it!

在本文中，我将分享我发现有趣的CSS结果。让我们开始吧！

Photoshop old logo

Photoshop旧标志

The first thing that I noticed is using an old logo of Photoshop (1990-1991) in the browser console.

我注意到的第一件事是在浏览器控制台中使用了Photoshop的旧标志（1990-1991）。

Such a nice little detail. If you’re curious about how such a thing is made, here is the code:

如此精致的细节。如果你想知道如何制作这样的东西，这里是代码：

console.info( "%c %cAdobe %cPhotoshop Web%c %c2023.20.0.0%c %c1bba617e276", "padding-left: 36px; line-height: 36px; background-image: url('data:image/gif;base64,R0lGODlhIAAgAPEBAAAAAPw==');"
)

The body element

body元素

To make an app like Photoshop feel like a real app on the web, the first thing is to prevent scrolling. To achieve that, the <body> element has position: fixed along with overflow: hidden.

为了使像Photoshop这样的应用在Web上感觉像一个真正的应用程序，首先要防止滚动。为了实现这一点，<body>元素具有position: fixed和overflow: hidden。

body,
html { height: 100%;
} body { font-family: adobe-clean, sans-serif; margin: 0; overflow: hidden; position: fixed; width: 100%;
}

This is the basic step. Inside the <body> element, there are multiple root elements, too.

这是基本步骤。在<body>元素内，也有多个根元素。

<psw-app> <psw-app-context> <ue-video-surface> <ue-drawer> <div id="appView"> <psw-app-navbar></psw-app-navbar> <psw-document-page></psw-document-...