這些CSS提效技巧，你需要知道！

前端小智發表於2022-05-04
CSS
作者：knaagar
譯者：前端小智
來源：dev

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

漸變文字

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

image.png

修改 media defaults

編寫css重置時，新增這些屬性以改善媒體預設值。

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

column count

使用列屬性為文字元素製作漂亮的列布局。

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

image.png

使用 position 居中元素

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

逗號分隔的列表

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

image.png

平滑的滾動

 html {
  scroll-behavior: smooth;
}

hyphens

hyphens 告知瀏覽器在換行時如何使用連字元連線單詞。可以完全阻止使用連字元，也可以控制瀏覽器什麼時候使用，或者讓瀏覽器決定什麼時候使用。

first letter

避免不必要的 span ，並使用偽元素來設計你的內容，同樣第一個字母的偽元素，我們還有第一行的偽元素。

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

image.png

accent-color

accent-color 屬效能夠使用自定義顏色值重新著色瀏覽器預設樣式提供的表單控制元件的強調顏色。

Image filled text

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

image.png

placeholder 偽元素

使用 placeholder 偽元素來改變 placeholder 樣式：

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

image.png

colors 動畫

使用顏色旋轉濾鏡改變元素顏色。

button{
  animation: colors 1s linear infinite;
}

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

clamp() 函式

clamp() 函式的作用是把一個值限制在一個上限和下限之間，當這個值超過最小值和最大值的範圍時，在最小值和最大值之間選擇一個值使用。它接收三個引數：最小值、首選值、最大值。

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

selection 偽類

設定選中元素的樣式。

::selection{
  color:coral;
}

decimal leading zero

將列表樣式型別設定為十進位制前導零。

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

image.png

自定義游標

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

caret-color

caret-color 屬性用來定義插入游標（caret）的顏色，這裡說的插入游標，就是那個在網頁的可編輯器區域內，用來指示使用者的輸入具體會插入到哪裡的那個一閃一閃的形似豎槓 | 的東西。

only-child

CSS偽類 :only-child 匹配沒有任何兄弟元素的元素。等效的選擇器還可以寫成 :first-child:last-child 或者 :nth-child(1):nth-last-child(1) ,當然,前者的權重會低一點.

image.png

使用 grid 居中元素

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

text-indent

text-indent 屬效能定義一個塊元素首行文字內容之前的縮排量。

p{
  text-indent:5.275rem;
}

image.png

list style type

CSS 屬性 list-style-type 可以設定列表元素的 marker（比如圓點、符號、或者自定義計數器樣式）。

li{
  list-style-type:'?';
}

image.png

原文： https://dev.to/devsyedmohsin/...

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章