Your posts match “ CSS-3 ” tag:

CSS 3 的 not Selector 運用實例

我遇到有一個 case 是這樣的:有兩個 QR Code 的顯示區塊分別是 for iOS & for Android 。今天可能客戶會只顯示 iOS 的 QR Code ,這時要讓 iOS 的 QR Code 可以正常顯示在正中央。如果 iOS & Android 同時都出現則各佔一半。

這個東西剛看到的時候還愣了一下,原本想說讓獨自出現的那個圖片加上 only-me 這個 class 然後設定置中 (後面講解法),但是後來想說可以用 not 實作看看,所以就有了以下的解法 (當然用 only-me 這種解法會比較漂亮)

步驟一:打上 hide-me class

def render_qrcode_block
  ...
  
  classes = ["qrcode"]
  classes << "hide-me" unless url.blank?
  
  ...
end

步驟二:CSS 中加上 .hide-me

.qrcode {
  &.hide-me {
    display: none;
  }
  
  &:not(.hide-me) {
    float: center;
    text-align: center;
  }
}

步驟三:沒有步驟三了

如此一來,實際的呈現效果就會正常。

但是,不夠好啊 ...

  • 改法一:因為這樣變成我要多寫一個 .hide-me 的 Class 設定,所以可以改寫 Helper ,當沒有 URL 的時候就不要輸出該區塊,然後拿掉 .hide-me 的 CSS 設定。
  • 改法二:用 only-me 搭配改法一的方式,然後只設定 only-me 的 CSS 就好

我會比較推薦改法二,乾淨很多 ... 不過 CSS 3 的 not 的確很好用。