知っておくべきCSSのヒント!

オリジナル：Knaagar

原文へのリンク：https//dev.to/devsyedmohsin/css-tips-and-tricks-you-will-add-to-cart-163p

翻訳：砂漠の果ての狼

既然我们已经完成了 HTML 和 JavaScript 技巧，现在是时候介绍 CSS 技巧和技巧了 💖✨

1. 印刷媒体クエリー

印刷メディアクエリを使用して、Webサイトの印刷可能バージョンのスタイルを設定できます。

@media print {
  * {
    background-color: transparent;
    color: #000;
    box-shadow: none;
    text-shadow: none;
  }
}

2. グラデーション文字[ぐらでーしょんてきすと]

h1 {
  background-image: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

3. メディア定義の変更

CSSリセットを記述するときに、メディアのデフォルト値を改善するためにこれらのプロパティを追加します。

img,
picture,
video,
svg {
  max-width: 100%;
  object-fit: contain; /* preserve a nice aspect-ratio */
}

4. column count

列プロパティを使用して、テキスト要素の美しい列レイアウトを作成します。

p {
  column-count: 3;
  column-gap: 5rem;
  column-rule: 1px solid salmon; /* border between columns */
}

5. 位置を使用した要素の中央配置

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

6. カンマ区切りのリスト

li:not(:last-child)::after {
  content: ",";
}

7. 滑らかなスクロール。

html {
  scroll-behavior: smooth;
}

8. hyphens

hyphensは、改行時に単語をハイフンで接続する方法をブラウザに指示します。ハイフンの使用を完全にブロックしたり、ブラウザがいつ使用するかを制御したり、ブラウザがいつ使用するかを決定するようにしたりできます。

9. first letter

避免不必要的 span ，并使用伪元素来设计你的内容，同样第一个字母的伪元素，我们还有第一行的伪元素。

h1::first-letter {
  color: #ff8a00;
}

10. accent-color

accent-color 属性能够使用自定义颜色值重新着色浏览器默认样式提供的表单控件的强调颜色。

11. Image filled text

h1 {
  background-image: url("illustration.webp");
  background-clip: text;
  color: transparent;
}

12. placeholder擬似要素

使用 placeholder 伪元素来改变 placeholder 样式：

input::placeholder {
  font-size: 1.5em;
  letter-spacing: 2px;
  color: green;
  text-shadow: 1px 1px 1px black;
}

13. colorsアニメーション

カラー回転フィルターを使用してエレメントのカラーを変更します。

button {
  animation: colors 1s linear infinite;
}

@keyframes colors {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

14. マージンの使用

.parent {
  display: flex; /* display: grid; also works */
}

.child {
  margin: auto;
}

15. clamp関数

clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。

h1 {
  font-size: clamp(5.25rem, 8vw, 8rem);
}

16. selection疑似クラス

選択したエレメントのスタイルを設定します。

::selection {
  color: coral;
}

17. decimal leading zero

リストスタイルのタイプを10進先頭ゼロに設定します。

li {
  list-style-type: decimal-leading-zero;
}

18. Flexの使用によるセンタリング

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

19. カーソルのカスタマイズ

html {
  cursor: url("no.png"), auto;
}

20. caret-color

caret-color 属性用来定义插入光标（caret）的颜色，这里说的插入光标，就是那个在网页的可编辑器区域内，用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。

22. resizeプロパティ#resizeプロパティ#

resizeプロパティをnoneに設定して、textareaのサイズ変更を回避

textarea {
  resize: none;
}

23. only-child

CSS 伪类 :only-child 匹配没有任何兄弟元素的元素。等效的选择器还可以写成 :first-child:last-child 或者 :nth-child(1):nth-last-child(1) ,当然,前者的权重会低一点.

24. グリッドを使用した要素の中央配置

.parent {
  display: grid;
  place-items: center;
}

25. text-indent

text-indent 属性能定义一个块元素首行文本内容之前的缩进量。

p {
  text-indent: 5.275rem;
}

26. list style type

CSS 属性 list-style-type 可以设置列表元素的 marker（比如圆点、符号、或者自定义计数器样式）。

li {
  list-style-type: "🟧";
}