Feedlyのカード・レイアウトで、画像のあるなしにより違う高さで敷き詰められるように戻した状態。

Feedlyのカード・レイアウトは流し読みが出来て好きだったのだけど、結構前に画像がある場合もない場合も同じ高さで敷き詰められるように変更された。PinterestMasonryのように違う高さでびっちりと敷き詰められていた方が、流し読みには向いていると思うので、ユーザーCSSで戻した。

敷き詰めるためのJavaScriptコード自体は存在していたので、画像がない時は畳まれるようにCSSを書くだけで良かった。

#feedlyCenter .visual[style*="visibility"] {
  height: 0 !important;
}

記事の画像はstyle属性経由で背景画像により仕込まれるので、属性セレクタでstyle属性の値にbackground-imageという文字列があるかどうかをチェックするのが良さそう。……だったけど、ない時にはvisibility: hiddenされているようなので、そっちをチェックすることにしてユーザーCSSを簡単にした。属性セレクターのひとつである[attribute*="string"]はattributeの値をstringで検索するもの。


自動ページめくりと外部画像の読み込みタイミングの関係で、ちょくちょく畳まれずグレーで確保されたままになる。そのため稀にすごく遅れて畳まれ、読んでいる位置がずれちゃうけど、概ね期待通り。