CSSのメディアクエリを比較演算子での指定に更新。
@media (min-width: 768px)@media (width >= 768px)@media (max-width: 767px)@media (width < 768px)@media (min-width: 768px) and (max-width: 1279px)@media (768px <= width < 1280px)書きやすいし分かりやすい。width < 768pxは768px > widthでもいい。
対応が遅れていたSafariも2023年3月に対応した。
Media Queries: Range Syntax | Can I use
今指定している仕様。
のでStylusで消す。
article[data-card-title$="(吹替版)"],
article[data-card-title$="（吹替版）"] {
display: none;
}単純にカード名を取っているので、表記無しや字幕・吹替の両対応は消さない。
Google検索結果でスーパードラッグ(リンクのドラッグ)を使おうとすると「Googleレンズで画像を検索」が出てきて妨害される対策。いつものStylus追加。
.ea0Lbe {
display: none;
}指定クラスを持つ要素のn番目、奇数・偶数個などの条件で装飾する。
SNSのTLで投稿の背景色を交互に変えたい。
兄弟要素が投稿のみの場合はdiv.xxx:nth-of-type(odd)や:nth-child(odd)で奇数の投稿を指定可能。
(odd又は2n+1で奇数、even又は2nで偶数)
投稿の間に何らかの要素が入る場合、カウントは兄弟要素全てが対象となりdiv.xxxの奇数は取れない。
(div.nth-of-typeは兄弟要素のdivがカウント対象、div:nth-childは全ての兄弟要素がカウント対象)
Calckey自鯖の全ユーザにカスタムCSSを反映させる。
コントロールパネルに機能追加されるまでの暫定対応。
自分のみ適用したいCSSはChrome拡張機能StylusやCalckeyユーザ設定のカスタムCSSを使用する
構築と基本設定 身内用Calckey鯖を無料で立てる
!importantをつけまくる2カラム・内容に応じてサイズ可変のリストを、スペース連打やテーブルを使わずに作りたい。
dl(定義リスト)のグリッド化で実装。
<dl class="grd">
<dt>肉</dt>
<dd>食べる</dd>
<dt>野菜</dt>
<dd>食べない</dd>
</dl>dl.grd
display: grid
grid-template-columns: max-content 1fr
column-gap: .5emシンプルで理想的だが、WordPressで使えるリストブロックはol、ulのみ。dlを作成出来るプラグインを探す。
olの連番のピリオドを消す為、list-styleではなくcontent: counter()での表示にした。
liにcounter-increment: カウンタ名、li::beforeにcontent: counter(カウンタ名)を指定する。