Facebook 開發人員實際使用的隱藏 CSS 技巧-css教學-PHP中文網

首頁

web前端

css教學

Facebook 開發人員實際使用的隱藏 CSS 技巧

Linda Hamilton

Oct 31, 2024 am 02:17 AM

The Hidden CSS Tricks That Facebook Developers Actually Use

有沒有想過 Facebook 如何設法創建如此流暢、響應靈敏的介面，並在數百萬設備上完美運行？雖然他們的技術堆疊很複雜，但他們的許多最令人印象深刻的 UI 功能都依賴巧妙的 CSS 技術，而這些技術通常在雷達下運行。讓我們來看看 Facebook 開發者用來建立平台的一些隱藏的瑰寶。

1. 內容可見性：效能遊戲規則改變者

Facebook 面臨的最大挑戰之一是在不影響瀏覽器效能的情況下呈現數千個貼文、評論和互動。他們的秘密武器？內容可見性屬性：

.feed-post {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

登入後複製

這個看似簡單的聲明告訴瀏覽器跳過渲染離螢幕內容，從而顯著縮短初始頁面載入時間。 contains-intrinsic-size 提供估計的高度，防止使用者滾動時佈局發生變化。據報導，Facebook 實施這項技術後，在大量後製動態中將渲染時間縮短了 50%。

2. 可變字體以維持品牌一致性

Facebook 的版式在不同的粗細和大小上看起來始終如一，但他們沒有加載多個字體檔案。相反，他們使用具有自訂屬性的可變字體：

:root {
  --fb-font-weight: 400;
  --fb-font-stretch: 100%;
}

.dynamic-text {
  font-variation-settings: 
    'wght' var(--fb-font-weight),
    'wdth' var(--fb-font-stretch);
  transition: font-variation-settings 0.3s ease;
}

.dynamic-text:hover {
  --fb-font-weight: 600;
}

登入後複製

這種方法允許在字體粗細和寬度之間實現平滑的動畫，同時保持套件大小較小。在他們的反應動畫和評論強調效果中尤其引人注目。

3. 容器查詢：響應式設計的秘密

Facebook 的 UI 元件需要在任何地方都能工作 - 從微小的行動螢幕到超寬顯示器。他們的解決方案？容器查詢：

.post-card {
  container-type: inline-size;
  container-name: post;
}

@container post (min-width: 700px) {
  .post-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
  }
}

@container post (max-width: 699px) {
  .post-content {
    display: flex;
    flex-direction: column;
  }
}

登入後複製

這允許元件回應其父容器的大小而不是視口，從而實現真正的模組化設計，可以在任何上下文中工作 - 無論是在主提要、模式還是側邊欄中。

4. 滾動捕捉錯覺

有沒有註意到 Facebook 的故事和輪播內容如何順利地嵌入到位？他們使用滾動捕捉對齊和一些額外的技巧：

.story-container {
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Hide scrollbar in Firefox */
  -ms-overflow-style: none; /* Hide scrollbar in IE/Edge */
}

.story-container::-webkit-scrollbar {
  display: none; /* Hide scrollbar in Chrome/Safari */
}

.story-item {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  flex: 0 0 auto;
}

登入後複製

神奇之處在於將其與觸控手勢處理結合：

.story-container {
  overscroll-behavior-x: contain;
  touch-action: pan-x pinch-zoom;
}

登入後複製

即使在瀏覽器中滾動故事時，也能創造出完美的、類似應用程式的感覺。

5. 無形的性能提升

Facebook 透過為動畫元素創建新的堆疊上下文來策略性地使用 GPU 加速：

.animated-element {
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

登入後複製

但是，他們只在需要時才套用這些屬性：

.animated-element {
  @media (prefers-reduced-motion: no-preference) {
    transform: translateZ(0);
    will-change: transform;
  }
}

登入後複製

這確保了流暢的動畫，同時尊重使用者偏好和裝置功能。

6. 主題管理的自訂屬性

Facebook 的深色模式實現特別巧妙，使用 CSS 自訂屬性和 HSL 顏色：

.feed-post {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

登入後複製

這種方法允許動態不透明度調整和主題之間的平滑過渡，同時保持對比。

7. 縱橫比技巧

對於媒體密集內容，Facebook 使用現代 CSS 保持寬高比而不改變版面：

:root {
  --fb-font-weight: 400;
  --fb-font-stretch: 100%;
}

.dynamic-text {
  font-variation-settings: 
    'wght' var(--fb-font-weight),
    'wdth' var(--fb-font-stretch);
  transition: font-variation-settings 0.3s ease;
}

.dynamic-text:hover {
  --fb-font-weight: 600;
}

登入後複製

這種漸進式增強方法可確保所有瀏覽器的版面一致，同時優雅地回退到舊瀏覽器。