ogiori.com

特定のブラウザのみ適応させる。

👍

■ Chrome
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .クラス名 {
    /* ここに書く */
  }
}

■ Safari
::-webkit-full-page-media, :future, :root .クラス名 {
  /* ここに書く */
}

■ Firefox
_:lang(x)::-moz-placeholder, .クラス名 {
  /* ここに書く */
}

⚠️ ブラウザのアップデートで動作しなくなる可能性があります

ホバー操作が使えるデバイス（マウス等）のみホバースタイルを適用する。

👍

@media (hover: hover) {
  el:hover {
ここにhover時のスタイル
  }
}

ホバー操作が使えるデバイス（マウス等）のみホバースタイルを適用する。

backgroundを左右2色にする。

👍

  background: linear-gradient(90deg, red 0%, red 50%, blue 50%, blue 100%);

【90deg】を【180deg】にすると、上下2色になる。

2行でテキストを切り、末尾を…で省略する。

👍

odisplay: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;

【-webkit-line-clamp: 2;】の数字を変更すると、テキストを切り取る行を変更できる。

1文字分下げ。

👍

padding-left: 1em;
text-indent: -1em;

1文字分、字下げすることができます。

英単語を折り返すようにする。

👍

overflow-wrap: anywhere;
word-break: normal;
line-break: strict;

長いURLや連続した英数字は、通常スペースがないと折り返されず、要素をはみ出すことがあります。これを折り返すように設定できます

CSSで変数を使用する。

👍

/* 変数の設定 */
:root {
  --black: black;
  --white: white;
  --jp: 'Zen Maru Gothic', serif;
}

/* 使用時 */
.title {
  color: var(--black;
  font-family: var(--jp);
}

:root内で宣言することによって、どこからでも変数を使用することができます。