ホームページ > 記事 > ウェブフロントエンド > あまり知られていないが便利な CSS の機能

あまり知られていないが便利な CSS の機能

Susan Sarandonオリジナル: 2024-10-04 06:17:29358ブラウズ

CSS には、あまり知られていないが便利な機能がいくつかあります。そのうちのいくつかを検討します。

1. CSSのscroll-snap-typeプロパティとscroll-snap-stopプロパティ

スクロール-スナップ-ストップ

このプロパティが親要素の下の子要素ごとに設定されている場合、画面を高速スクロールするときに、トラックパッドまたはタッチスクリーンで高速スクロール中に次の要素が通過するのを防ぎます。

GIF :

Less known but useful features of CSS

例:


<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 80%;
  aspect-ratio: 2/1;
  margin: auto;
  border: solid black 2px;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.blue {
  background-color: lightblue;
  width: 90%;
}

.green {
  background-color: lightgreen;
  width: 80%;
}

.pink {
  background-color: lightpink;
  width: 70%;
}

#container > div{
  margin: 5px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  aspect-ratio: 4/1;
}
</style>
</head>
<body>


  <div class="container">
    <div class="blue"></div>
    <div class="green"></div>
    <div class="pink"></div>
    <div class="green"></div>
    <div class="blue"></div>
    <div class="green"></div>
    <div class="blue"></div>
    <div class="pink"></div>
    <div class="blue"></div>
    <div class="green"></div>
    <div class="pink"></div>

</div>

</body>
</html>

値:

通常 : デフォルト値です。スクロールはデフォルトの動作
常に: タッチパッドまたはタッチスクリーンで高速スワイプ後、スクロールが停止し、次の要素がフォーカスされます。

スクロールスナップタイププロパティ

スライダーを水平にドラッグして放すと、効果が表示されます。
この効果は、ボックスをクリックし、左右の矢印キーを使用して移動すると発生します

GIF :

Less known but useful features of CSS

例:


<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 80%;
  aspect-ratio: 2/1;
  overflow-x: scroll;
  overflow-y: hidden;
  margin: auto;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
    border: solid black 2px;
}

.blue {
  background-color: lightblue;
  aspect-ratio: 1/2;
  height: 95%;

}

.green {
  background-color: lightgreen;
  height: 50%;
  aspect-ratio: 2/1;
}

.blue, .green {
  display: inline-block;
  scroll-snap-align: center;
   margin: 5px;
}
</style>
</head>
<body>


<div class="container">
  <div class="blue"></div>
  <div class="green"></div>
  <div class="blue"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

</body>
</html>

値:

なし : これはデフォルト値です
X : 効果は X 軸に設定されます
Y : 効果は Y 軸に設定されます
両方 : 効果は x 軸と y 軸に設定されます
必須 : スクロール終了後、スクロールは自動的にキャプチャポイントに移動します

2. CSS の place-items プロパティ

place-items プロパティに設定された値は、align-items プロパティと justify-items プロパティの両方に適用されます。

例:

Less known but useful features of CSS


<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 60%;
  aspect-ratio: 3/2;
  border: solid black 1px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  place-items: center;
}

.container > div {
  width: 50%;
  aspect-ratio: 2;
  background-color: red;
}
</style>
</head>
<body>
<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

</body>
</html>

値:

開始 : グリッドセルの先頭に項目を配置します
End : 項目をグリッドセルの末尾に配置します
中央: 項目をグリッドセルの中央に配置します

3. Css all プロパティ

要素またはその親に適用されるすべてのプロパティを初期値に変更します

例 :

Less known but useful features of CSS


<!DOCTYPE html>
<html>
<head>
<style> 
html {
  font-size: small;
  color : red
}
}

.a{
  background-color: yellow;
  color: red;
  all: unset;
}
</style>
</head>
<body>


<div class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

</body>
</html>

値 :

設定解除: 要素または要素の親に適用されるすべてのプロパティを、継承可能な場合はその親の値に、そうでない場合は初期値に変更します

4. CSS ユーザー選択プロパティ

ユーザーがテキストを選択できないようにします

例:


<!DOCTYPE html>
<html>
<head>
<style> 
div {
  -webkit-user-select: none;
  -ms-user-select: none; 
  user-select: none;
}
</style>
</head>
<body>

<div>The text of this div element cannot be selected.</div>

</body>
</html>

5. CSSのキャレットカラープロパティ

テキスト入力フィールドのカーソル (キャレット) の色を変更します。


<!DOCTYPE html>
<html>
<head>
<style>
.a {
  caret-color: blue;
}

</style>
</head>
<body>

<input class="a" value="bulue">

</body>
</html>

6. CSSのtext-decoration-skip-inkプロパティ

text-decoration-skip-ink CSS プロパティは、線や下線の上にグリフを渡すときに上線と下線をどのように描画するかを指定します。

値 :

なし:

例:

Less known but useful features of CSS


text-decoration-skip-ink: none;

自動:

例 :

Less known but useful features of CSS


text-decoration-skip-ink: auto;

7. CSS pointer-events プロパティ

pointer-events プロパティは、要素が ポインターイベント に反応するかどうかを定義します。

例 :


<!DOCTYPE html>
<html>
<head>
<style> 
.a {
  pointer-events: none;
}

.b {
  pointer-events: auto;
}
</style>
</head>
<body>


<div class="a"><a href="https://www.gogle.com">Google</a></div>


<div class="b"> <a href="https://www.google.com">Google</a></div>

</body>
</html>

値:

なし : デフォルト
自動: 要素はポインターイベントに反応しません

結論

CSS のあまり知られていない機能を調べました。あなたのアプリケーションに役立つ機能を学びました。

以上があまり知られていないが便利な CSS の機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css less if for while select auto using Property pointer default this

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript 制御構造次の記事：JavaScript 制御構造

続きを見る