是的,你沒聽錯,我的 GitHub 自述文件有淺色和深色模式,甚至是響應式的。在這篇文章中,我將簡要介紹我用來實現這一目標的技巧(以及使它變得困難的事情!)
但首先,讓我們看看我的個人資料在不同的螢幕尺寸和顏色偏好下是什麼樣子(或者親自嘗試一下 GrahamTheDevRel 在 GitHub 上的個人資料!
。
這是因為所謂的內容安全策略 (CSP) 及其在 GitHub 上的實作方式。
現在我不會解釋 CSP,但本質上它們有一條規則:「嘿,除了當前上下文之外,不能從任何地方加載圖像」。
對於普通圖像來說這不是問題,但這是圖像中的圖像,並且該圖像的“上下文”就是其本身。
因此,如果我們嘗試在 SVG 中包含另一個圖像,它將來自不同的位置並破壞我們的 SVG。
幸運的是,「資料」 URI 被視為相同的上下文/來源。
這就是為什麼它們在我們的範例中使用的原因,如果您想自己實現的話,還需要考慮另一件事!
我的意思是,這甚至不是一個技巧!
我的自述文件中的最後 4 個框是響應式的(並尊重顏色偏好),但它們使用標準媒體查詢來工作。
這裡唯一的考慮是嘗試找到一個有效的斷點,恰好是 GitHub 上的 768px。
然後我建立了 4 組圖像:
深色模式和桌面
黑暗模式和移動設備
燈光模式和桌面
燈光模式和移動。
為了獲得正確的圖像,我們在每個來源上對桌面(大)圖像使用“media =”(min-width:769px)`,對於移動(小)圖像使用“media =“max-width:768px)”放入我們的“<picture>”元素。
若要取得淺色或深色模式,我們使用prefers-color-scheme
媒體查詢。
然後我們只需設定「<picture>」元素來使用「(寬度查詢)和(顏色首選項)」的組合來選擇我們想要的來源:
<picture>
<source media="(min-width: 769px) and (prefers-color-scheme: light)" srcset="readme/[email protected]">
<source media="(max-width: 768px) and (prefers-color-scheme: light)" srcset="readme/[email protected]">
<source media="(max-width: 768px) and (prefers-color-scheme: dark)" srcset="readme/[email protected]">
<img src="readme/[email protected]" alt="You will find me writing about tech, web dev, accessibility, breaking the internet and more over on DEV! Purple and neon pink design with Graham pointing at the next section" width="50%" title="My writing on DEV">
</picture>
本身並不困難,但建立 4 種圖像變體非常耗時。
我遇到了最後一個問題。
底部實際上由 4 個不同的圖像組成(是的,我必須為其建立 16 個不同的圖像...)。
這樣做的原因是每個部分都是一個可點擊的連結。
並不複雜,但有一個小問題要注意。
如果您想要讓兩個影像直接並排接觸(因此兩個影像的寬度均為 50%),則必須刪除錨點、圖片元素甚至這些圖片元素內的來源之間的所有空白。
否則 GitHub 會為你的元素加入一些邊距,並且它們將不會在同一行。
另外,儘管我刪除了所有空白,但我遇到了另一個限制,但第一行和第二行之間仍然有 8px 的間隙,您無法遺憾地刪除它(因此之間的線!)。
我可能會在未來對內容安全策略、「<picture>」元素技巧,當然還有「<foreignObject>」做一些更深入的解釋。
這更多的是對概念的介紹,以便您可以自己使用它們,而不是教程。
但現在你已經了解我使用的技巧,我希望看到你建立一個比我的更漂亮的 GitHub 自述文件了!
如果您這樣做,請在評論中分享! 💪🏼🙏🏼💗
大家編碼愉快! 💗