便利な速記の論理プロパティPlatoBlockchainデータインテリジェンス。 垂直検索。 愛。

便利な速記の論理プロパティ

ミシェル・バーカーと私のお気に入りのちょっとしたブログ投稿:短くて実用的で、あなたの時間のための貴重なナゲットをあなたに残します。 ここ、 彼女はCSSで論理プロパティの速記を取得します、特に単一の軸にのみ長さを設定するもの、たとえばブロック(垂直)軸のみ、またはインライン(水平)軸のみを言います。

「ブロック」と「インライン」と言うのは、論​​理プロパティに関する限り、現在の状況に応じて、x軸が垂直軸のように動作する可能性があるためです。 writing-mode.

だから、私たちがいつも持っていた場所 padding, margin, border 複数値の構文をサポートできる省略形。他の軸に長さを設定せずに、特定の軸に長さを宣言することはできません。

例:

/* This gives us margin on the inline axis */
margin: 0 3rem;

…しかし、そこにたどり着くには、もう一方の軸を設定する必要がありました。 ただし、論理プロパティを使用すると、軸ごとに追加の省略形があり、キューを作成できます。 margin-inline 特にインライン軸で作業するための省略形:

margin-inline: 3rem;

ミシェルは、私のお気に入りの論理プロパティの省略形について言及しています。 この種の曲に何かを配置するのは何回ですか。

.position-me {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

これらのXNUMX行を inset: 0。 または、ブロックとインライン軸を直接ターゲットにすることもできます inset-block & inset-inlineそれぞれ。

私たちが速記を話している間、私はいつも注意を払うのが好きです 「偶発的な」CSSリセット。 のXNUMXつだけ 私が犯す一般的なCSSの間違い.


ダイレクトリンク→

タイムスタンプ:

より多くの CSSトリック