深入研究了Web版Photoshop，發現了這些有趣又有用的CSS知識！
兩周前，Adobe 發布了Web版 Photoshop??，它是使用 WebAssembly、web components、P3 顏色等 Web 技術構建的。本文就來研究一下網頁版 Photoshop 上有趣又有用的 CSS 知識！
Photoshop 舊 Logo
首先，在瀏覽器控制臺中使用了 Photoshop 的 Logo（1990-1991）。
這是如何實現的呢？這里是代碼：
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==');"
)Body 元素
要讓像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%;
}在<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-page>
</div>
</ue-drawer>
</ue-video-surface>
</psw-app-context>
</psw-app>最內部有一個包含導航和文檔頁面的元素。
#appView {
background-color: var(--editor-background-color);
color: var(--spectrum-global-color-gray-800);
display: flex;
flex-direction: column;
}
* {
touch-action: manipulation;
}
:host {
position: relative;
}Flexbox 布局
在構建現代的 Web 應用時，使用 Flex 布局具有很多好處。網頁版 Photoshop 就用到了很多 Flex 布局。
使用 Flexbox 使構建組件變得更容易。下面來看幾個使用 Flexbox 的例子。
導航欄
我很喜歡這部分的元素類命名，它沒有使用 left、center、right，而是使用了start、center、end。
在應用可以從左到右（LTR）或從右到左（RTL）工作時，這種邏輯命名是正確的做法。
操作
在構建像 Photoshop 這樣的復雜應用時，嵌套的 Flexbox 容器是很常見的。下圖顯示了操作欄中的兩個容器。
第一個容器用于縮放。第二個容器包含所有的操作和按鈕。
.container {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: var(--spectrum-global-dimension-size-50);
}- 使用gap屬性非常有助于定義間距，使用margin或padding來實現這個效果可能會變得混亂。
- .container這個類名太過通用了，但在這里非常適用，因為這是一個Web組件，所以所有的樣式都被封裝起來了。
圖層
圖層功能是Photoshop的重要組成部分，仔細觀察CSS，發現它們全部都是 Flexbox 布局。
下面是圖層組件的 HTML 結構：
<psw-tree-view-item indent="0" layer-visible can-open dir="ltr" open>
<div id="link">
<span id="first-column"></span>
<span id="second-column"></span>
<span id="label"></span>
</div>
</psw-tree-view-item>這里使用 ID 是完全沒問題的，因為這是一個 Web 組件，因此 #first-column ID 在頁面上出現多少次并不重要。
#link元素是一個 Flexbox 容器，#label元素也是一個 Flexbox 容器。
<div class="layer-content layer-wrapper selected">
<psw-layer-thumbnail></psw-layer-thumbnail>
<div class="name" title="Layer name">Layer name</div>
<div class="actions"></div>
<overlay-trigger></overlay-trigger>
</div>下面來舉一個例子說明如何完成子層的縮進。
- :host()表示圖層組件。
- 這感覺像是條件式 CSS。如果HTML屬性indent=1存在，那么就更改第一列的padding-right。
:host([dir="ltr"][indent="1"]) #first-column {
padding-right: var(--spectrum-global-dimension-size-200);
}如果縮進是兩個級別，那么可以通過CSS的calc()函數，將padding-right的值乘以 2。
:host([dir="ltr"][indent="2"]) #first-column {
padding-right: calc(2 * var(--spectrum-global-dimension-size-200));
}在瀏覽器中，嘗試嵌套到第 6 層：
而知名的設計軟件 Figma 是使用間隔組件來增加嵌套層的間距的。
Grid 布局
新文件模式
在創建新的 Photoshop 文件時，可以選擇預定義的尺寸列表。為了實現這一點，有一個包含多個選項卡和一個活動面板的布局。
HTML 如下所示：
<sp-tabs
id="tabs"
quiet=""
selected="2"
size="m"
direction="horizontal"
dir="ltr"
focusable=""
>
<div id="list"></div>
<slot name="tab-panel"></slot>
</sp-tabs>在 CSS 中，有一個 1 列 2 行的主網格。其中，第一行的高度根據內容自適應調整行高，而第二行則占據了所有剩余可用空間。
:host {
display: grid;
grid-template-columns: 100%;
}
:host(:not([direction^="vertical"])) {
grid-template-rows: auto 1fr;
}這里有幾個要點：
- 使用CSS的:not()選擇器。
- 使用[attr^=value]選擇器來排除具有以vertical開頭的值的direction屬性的HTML元素。
這些都是條件式 CSS 技術。
嘗試將direction屬性更改為vertical，結果符合預期。
下面是基于屬性變化的CSS：
:host([direction^="vertical"]) {
grid-template-columns: auto 1fr;
}
:host([direction^="vertical-right"]) #list #selection-indicator,
:host([direction^="vertical"]) #list #selection-indicator {
inline-size: var(
--mod-tabs-divider-size,
var(--spectrum-tabs-divider-size)
);
inset-block-start: 0px;
inset-inline-start: 0px;
position: absolute;
}為了突出顯示哪個選項卡是活動狀態，有一個相對于選項卡列表定位的#selection-indicator元素。
圖層屬性
這部分的 CSS 網格用法很有趣，它適合解決對齊網格中許多元素的問題。
深入研究 CSS：
.content {
position: relative;
display: grid;
grid-template-rows: [horizontal] min-content [vertical] min-content [transforms] min-content [end];
grid-template-columns: [size-labels] min-content [size-inputs] auto [size-locks] min-content [space] min-content [position-labels] min-content [position-inputs] auto [end];
row-gap: var(--spectrum-global-dimension-size-150);
}使用 Firfox 開發者工具來調試這個網格，它會生成模擬的網格布局。當突出顯示矩形時，它將顯示放置在實際的網格中。
這里使用的技術就是命名網格線，其思想是給每個列或行指定一個名稱，然后定義其寬度。列和行的寬度可以是auto或min-content，這是創建動態網格的一種很好的方法。
這樣，每個網格項都可以在網格內部進行定位：
.horizontal-size-label {
grid-area: horizontal / size-labels / horizontal / size-labels;
}
.vertical-position-input {
grid-area: vertical / position-inputs / vertical / position-inputs;
}
.horizontal-position-input {
grid-area: horizontal / position-inputs / horizontal /
position-inputs;
}還有一個細節是對網格項使用了position: absolute。鎖定按鈕位于網格的中心，但它需要略微從左邊和頂部位置進行插入。
.lock-button {
grid-area: horizontal / size-locks / horizontal / size-locks;
position: absolute;
left: 8px;
top: 22px;
}輸入
下面來看看使用 CSS 網格來布局輸入字段的用例。
:host([editable]) {
display: grid;
grid-template-areas:
"label ."
"slider number";
grid-template-columns: 1fr auto;
}
:host([editable]) #label-container {
grid-area: label / label / label / label;
}
:host([editable]) #label-container + div {
grid-area: slider / slider / slider / slider;
}
:host([editable]) sp-number-field {
grid-area: number / number / number / number;
}在瀏覽器中檢查時，可以看到網格線名稱或網格區域名稱。
- 網格區域名稱
- 網格線名稱
菜單項
在我看來，在這里使用 CSS 網格有點大材小用了。
sp-menu-item {
display: grid;
grid-template-areas:
". chevronAreaCollapsible . iconArea sectionHeadingArea . . ."
"selectedArea chevronAreaCollapsible checkmarkArea iconArea labelArea valueArea actionsArea chevronAreaDrillIn"
". . . . descriptionArea . . ."
". . . . submenuArea . . .";
grid-template-columns: auto auto auto auto 1fr auto auto auto;
grid-template-rows: 1fr auto auto auto;
}這是一個包含 8列 4行的網格。這里似乎一次只能激活一個網格行，其他行將由于內容為空或HTML元素的缺失而折疊。
有趣的是，上面的 CSS 是簡化過的版本。原始版本看起來像這樣，使用了grid-template縮寫。
下面是在應用中找到的一些菜單項：
CSS 網格是針對這個小組件的，感覺是有點多此一舉了。
.checkmark {
align-self: start;
grid-area: checkmarkArea / checkmarkArea / checkmarkArea /
checkmarkArea;
}
#label {
grid-area: labelArea / labelArea / labelArea / labelArea;
}
::slotted([slot="value"]) {
grid-area: valueArea / valueArea / valueArea / valueArea;
}
注意，CSS 網格的暗部分處于非活動狀態。它們折疊了，因為沒有內容。對于這個例子，也可以這樣來實現：
.checkmark {
align-self: start;
grid-area: checkmarkArea;
}
#label {
grid-area: labelArea;
}
::slotted([slot="value"]) {
grid-area: valueArea;
}當每列和行的值相同時，無需定義它們的開始和結束位置。
CSS變量的廣泛使用
更改圖層縮略圖的大小
Photoshop 可以控制縮略圖大小。當有很多圖層并且想要在更小的空間中查看更多圖層時，這非常有用。
Adobe 團隊的構建方式很有趣。首先，圖層面板的主容器上有一個 HTML 屬性large-thumbs。
<psw-layers-panel large-thumbs></psw-layers-panel>在CSS中，有一個:host([large-thumbs])選擇器，它分配了特定的CSS變量。
:host([large-thumbs]) {
--psw-custom-layer-thumbnail-size: var(
--spectrum-global-dimension-size-800
);
--psw-custom-layer-thumbnail-border-size: var(
--spectrum-global-dimension-size-50
);
}對于每個圖層，都有一個名為 psw-layer-thumbnail 的元素，這是將應用CSS變量的地方。
<psw-layers-panel-item>
<psw-tree-view-item>
<psw-layer-thumbnail class="thumb"></psw-layer-thumbnail>
</psw-tree-view-item>
</psw-layers-panel-item>這里，CSS 變量被分配給縮略圖。
:host {
--layer-thumbnail-size: var(
--psw-custom-layer-thumbnail-size,
var(--spectrum-global-dimension-size-400)
);
--layer-badge-size: var(--spectrum-global-dimension-size-200);
position: relative;
width: var(--layer-thumbnail-size);
min-width: var(--layer-thumbnail-size);
height: var(--layer-thumbnail-size);
}加載進度
通過使用size屬性來管理組件的大小。CSS 變量會根據不同的 size 而變化。
:host([size="m"]) {
--spectrum-progressbar-size-default: var(
--spectrum-progressbar-size-2400
);
--spectrum-progressbar-font-size: var(--spectrum-font-size-75);
--spectrum-progressbar-thickness: var(
--spectrum-progress-bar-thickness-large
);
--spectrum-progressbar-spacing-top-to-text: var(
--spectrum-component-top-to-text-75
);
}圖像控制
如果 HTML 存在屬性quiet，則 UI 會更簡單（沒有邊框）。
這也是通過 CSS 變量完成的。
:host([quiet]) {
--spectrum-actionbutton-background-color-default: var(
--system-spectrum-actionbutton-quiet-background-color-default
);
--spectrum-actionbutton-background-color-hover: var(
--system-spectrum-actionbutton-quiet-background-color-hover
);
}單選按鈕
在這個例子中，使用 CSS 變量來根據 HTML 的 size 屬性值來改變單選按鈕的大小。
<sp-radio size="m" checked="" role="radio"></sp-radio>:host([size="m"]) {
--spectrum-radio-height: var(--spectrum-component-height-100);
--spectrum-radio-button-control-size: var(
--spectrum-radio-button-control-size-medium
);
}菜單處于活動狀態時鎖定頁面
當主菜單處于活動狀態時，會有一個名為 holder 的元素填充整個屏幕（遮罩層），并位于菜單下方。
#actual[aria-hidden] + #holder {
display: flex;
}
#holder {
display: none;
align-items: center;
justify-content: center;
flex-flow: column;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}此元素是為了防止用戶單擊或將鼠標懸停在頁面的其他部分，以確保用戶只能對菜單進行操作，這可能是為了模仿桌面應用而設置的。
混合模式菜單
這里使用了 CSS 視口單位。混合模式菜單的最大高度為 55vh（視口高度的55%）。
sp-menu {
max-height: 55vh;
--mod-menu-item-min-height: auto;
}
::slotted(*) {
overscroll-behavior: contain;
}這里還使用了 overscroll-behavior: contains，這是避免滾動正文內容的一個很棒的功能。
圖層縮略圖
在圖層面板中，縮略圖使用了object-fit: contain來避免變形。
