一行 CSS 程式碼的魅力

ChokCoco發表於2021-01-06
CSS

之前在知乎看到一個很有意思的討論 一行程式碼可以做什麼？

那麼，一行 CSS 程式碼又能不能搞點事情呢？

 

CSS Battle

首先，這讓我想到了，年初的時候沉迷的一個網站 CSS Battle 。這個網站是核心玩法就是：

官方給出一張圖形，在給定的 400 x 300 的畫布上，能夠用越短的程式碼實現它，分數就越高。

注意是，完全一模一樣還原。

其中，第一題就非常有趣，看看題目：

嗯，想一想，如果給定這樣一張圖形，告訴你 HTML 的大小是 400px x 300px，圖片中使用到的顏色是 #5D3A3A, #B5E0BA，你會怎麼用 CSS 去實現它呢？

因為要求，字元數越少，分數越高，當然是選字元少的標籤，是不是這樣：

<p>
<style>
body{background:#5D3A3A;}
p {width: 200px;height:200px;background:#B5E0BA;}
</style>

這個網站的設定，HTML 和 CSS 可以按照上述格式寫在一起，<style> 標籤內的即為 CSS，之外的是 HTML ，標籤 <p></p> 可以簡寫為 <p>

額，這樣當然可以，但是看看文章的標題，一行 CSS ？這明顯不是啊，並且這裡有 100+ 個字元。我們得把字元數壓一壓。

嗯嗯嗯，想到了陰影，嘗試下使用 box-shadow：

<a>
<style>
a {
    box-shadow:0 0 0 200px #b5e0ba,0 0 0 400px #5d3a3a;
}
</style>

利用兩層陰影，完美實現圖例圖形，並且，字元數壓縮到了 82 個。當然，這還不是極致，我們完全可以內聯 CSS，再減少字元數：

<a style="box-shadow:0 0 0 200px #b5e0ba,0 0 0 400px #5d3a3a">

只有 62 個字元。當然，從一行程式碼的角度，這個問題完美的解決了，如果追求極致的字元數，上述的程式碼還可以再簡化一下：

<a style=box-shadow:0+0+0+200px#b5e0ba,0+0+0+5in#5d3a3a>

這裡有一些小知識點，HTML5 支援屬性後面不用引號包住，又譬如 box-shadow: 0 0 0 400px #5d3a3a 是可以壓縮到 box-shadow:0+0+0+5in#5d3a3a，CSS 中 1in=96px，但是畫布只有 400px，5in 大於 400px，也沒有問題，能夠充滿畫布，但是 400px 相對 5in 字元多了 2 個。

瀏覽器裡面看一下，這個是完全正確的寫法：

OK，最終只有 56 個字元，完美。當然，CSS Battle 裡面還有更多更復雜的挑戰，也有很多能夠通過一行程式碼實現的，感興趣的嘗試下。

 

一行背景程式碼

要說到 CSS 最有意思的屬性，我覺得背景（background）肯定能夠獲得很多選票。背景分為：

  • 純色
  • 線性漸變(linear-gradient)
  • 徑向漸變(radial-gradient)
  • 角向漸變(conic-gradient)
  • 多重線性漸變(repeating-linear-gradient)
  • 多重徑向漸變(repeating-radial-gradient)
  • 多重角向漸變(repeating-conic-gradient)

突出一個字，離譜。並且它們還可以互相混合、疊加新增濾鏡、配合各種背景相關屬性等等等。

不過今天，來看看一行 CSS Background 程式碼能玩出什麼花來。嗯？這裡的主角是多重角向漸變(repeating-conic-gradient)，只用一行 CSS 程式碼：

{
    background: repeating-conic-gradient(#fff, #000, #fff 0.1deg);
}

這什麼玩意？腦補一下，這行程式碼繪製出來的圖形會是什麼樣子？看看：

Wow，不可思議。這裡 0.1deg 非常關鍵，這裡的角度越小（小於 1deg 為佳），圖形越酷炫。

我們把 0.1deg 替換成 30deg 看看：

當然也非常好看，只不過沒有上面那個那麼驚豔。

CodePen -- One Line CSS Pattern

我們可以再利用 CSS - Doodle，隨機產生這份美：

CSS - Doodle 它是一個基於 Web-Component 的庫。允許我們快速的建立基於 CSS Grid 佈局的頁面，並且提供各種便捷的指令及函式（隨機、迴圈等等），讓我們能通過一套規則，得到不同 CSS 效果。

沒錯，它的本質其實就是上述的那一行核心 CSS 程式碼。

CSS Doodle - CSS Magic Conic-gradient

 

margin: auto 與 place-items: center

這個也非常有意思，當然，它不算嚴格意義上的一行 CSS，因為需要搭配其他屬性一起使用。

最快水平垂直居中一個元素的方法是什麼？

水平垂直居中也算是 CSS 領域最為常見的一個問題了，不同場景下的方法也各不相同，各有優劣。嗯，下面這兩種方法應該算是最便捷的了：

方法一：flex 佈局下的 margin: auto

<div class="g-container">
    <div class="g-box"></div>
</div>
.g-container {
    display: flex;
}

.g-box {
    margin: auto;
}　　

上面的 display: flex 替換成 display: inline-flex | grid | inline-grid 也是可以的。

在 display: flex 佈局下， margin auto 的生效不僅是水平方向，垂直方向也會自動去分配這個剩餘空間。

CodePen Demo -- 使用 margin auto 水平垂直居中元素

如果你對非常有用的 margin: auto 還不是很瞭解，可以看看：探祕 flex 上下文中神奇的自動 margin

方法二：grid 佈局下的 place-items: center

直接上程式碼：

.g-container {
    display: grid;
    place-items: center
}

上述兩個份程式碼效果都是一樣的：

CodePen Demo -- 水平垂直居中元素 grid+ place-items: center

 

最後

一行 CSS 能幹什麼？肯定不止這些，當然，這不就是 CSS 的樂趣麼。

好了，本文到此結束，希望對你有幫助 :)

更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。

相關文章