Home » Web Development » 50+ thuộc tính thú vị trong CSS

50+ thuộc tính thú vị trong CSS

NTC 23/06/201923/06/2019Web DevelopmentNo Comments

Các bạn đã từng sử dụng qua những thuộc tính CSS dưới đây chưa? Có vài thuộc tính rất thú vị trong css và hữu ích mà bạn có thể chưa biết đấy, hãy cùng mình tìm hiểu nhé.

all

Thuộc tính all trong CSS sẽ đặt lại(reset) tất cả các thuộc tính khác (ngoài các thuộc tính unicode-pricei và direction) về trạng thái ban đầu hoặc trạng thái kế thừa của chúng. Nó chấp nhận các giá trị sau:

initial: thay đổi tất cả các thuộc tính của phần tử hoặc giá trị ban đầu của phần tử.
inherit: thay đổi tất cả các thuộc tính của phần tử hoặc phần tử cha của phần tử thành giá trị cha của chúng.
unset: thay đổi tất cả các thuộc tính của phần tử hoặc phần tử cha của phần tử thành giá trị cha của chúng nếu chúng có thể kế thừa hoặc thành giá trị riêng của chúng nếu không, nó tựa tựa như inherit vậy.

angle(góc)

Angle(góc) là giá trị chỉ hợp lệ với một vài thuộc tính trong CSS. Nó thường sử dụng với transform, ví dụ như transform: rotate(180deg)(quay phần tử một góc 180 độ), transform:skew(10deg,10deg);(nghiêng X 10 độ, Y 10 độ). Ngoài “deg” thì còn có thể sử dụng grad, rad hoặc turn.

Tham khảo thêm thuộc tính transform tại đây

animation-fill-mode

Thuộc tính này chỉ định kiểu nào được áp dụng cho thành phần khi animation không phát. Hãy tưởng tượng một hình ảnh động @keyframe làm mờ dần một phần tử (opacity: 1; đến opacity: 0;). Theo mặc định, sau khi animation hoàn tất, nó sẽ quay trở lại trạng thái ban đầu.

Bằng cách sử dụng chế độ animation-fill-mode: forwards; chúng ta có thể làm cho phần tử bị mờ dần bằng cách giữ lại các kiểu trong khung hình chính cuối cùng:

Nó bao gồm các thuộc tính sau:

none: (mặc định) phần tử có kiểu dáng ban đầu khi animation không được thực thi.
forwards: phần tử sẽ áp dụng các giá trị được thiết lập bởi khung hình chính cuối cùng khi animation được thực thi.
backwards: phần tử sẽ áp dụng các giá trị thuộc tính được xác định trong khung hình chính ở đầu animation.
both: animation sẽ tuân theo các quy tắc của cả forwards và backwards.
initial: đặt animation-fill-modethành giá trị mặc định của nó.
inherit: kế thừa animation-fill-mode từ phần tử cha.

Bạn có thể thấy trong thư viện phổ biến Animate.css, class .animated sử dụng chế độ animation-fill-mode: both.

animation-iteration-count

Thuộc tính này xác định số lần lặp lại animation @keyframe. Nó cũng có thể là một giá trị không nguyên, như animation-iteration-count: 1.5, sẽ phát một chu kỳ animation đầy đủ cộng với một nửa chu kỳ.

backface-visibility

Thuộc tính này xác định xem mặt “phía sau” của phần tử có hiển thị khi phần tử được xoay hay không. Nó được sử dụng với các thuộc tính transform 3D. Chấp nhận các giá trị sau:

visible: (mặc định) mặt sau của phần tử sẽ hiển thị, khi được xoay
hidden: mặt sau của phần tử sẽ bị ẩn khi xoay.
initial: đặt thuộc tính thành giá trị mặc định (hiển thị).
inherit: kế thừa thuộc tính từ phần tử cha.

background-attachment

Thuộc tính này chỉ định nếu hình nền được cố định trong màn hình khi bạn cuộn trang hoặc cuộn cùng với trang.

Scroll: (mặc định) hình nền được cố định với phần tử và không cuộn với nội dung.
Fixed: hình nền vẫn cố định khi bạn cuộn trang (hoặc phần tử)
Local: cuộn cùng với nội dung phần tử nếu phần tử có thể cuộn.

background-blend-mode

Thuộc tính này chỉ định cách background images, gradients, và colors của phần tử hòa trộn với nhau. Ví dụ: bạn có thể thêm background-image và background-color, sau đó đặt blend-mode thành “lighten”. Các chế độ hòa trộn sau đây có thể được sử dụng:

color
color-burn

color-dodge
darken
difference

exclusion
hard-light
hue

lighten
luminosity
multiply

overlay
saturation
screen

soft-light

background-clip

Thuộc tính background-clip xác định khu vực của thành phần nơi hình nền được áp dụng. Bạn có thể làm cho nền đi bên dưới đường viền của nó hoặc chỉ điền vào khu vực nội dung của nó.

border-box: (default) cho phép phạm vi nền đến cạnh ngoài của (border)đường viền
content-box: nền được cắt vào hộp nội dung của phần tử
padding-box: nền được cắt vào cạnh ngoài của phần tử đệm, vì vậy nó được áp dụng cho nội dung và phần đệm, nhưng không nằm dưới đường viền
text: nền được cắt thành văn bản nền trước.

background-origin

Thuộc tính này xác định nếu nền chỉ được áp dụng cho khu vực nội dung của thành phần, hoặc khu vực đệm và đường viền. Sự khác biệt giữa cái này và background-clip là background-clip cắt xén nền và background-origin thay đổi kích thước của nó.

box-decoration-break

Thuộc tính này chỉ định background, padding, border, box-shadow, margin, và clip của phần tử được áp dụng khi nó được bọc trên nhiều dòng. Nếu chúng ta có văn bản được bọc trên nhiều dòng, thông thường sẽ tăng chiều cao của phần tử, tuy nhiên, box-decoration-break có thể áp dụng kiểu dáng cho từng dòng riêng biệt, thay vì toàn bộ phần tử.

clone: mỗi phần tử của phần tử nhận kiểu dáng, box shadows và padding được áp dụng cho từng phần riêng lẻ
slice: phần tử được hiển thị như thể phần tử không bị phân mảnh

Note: Bạn chỉ có thể sử dụng box-decoration-break trên các yếu tố nội tuyến. Theo MDN, bạn chỉ có thể sử dụng nó trên các yếu tố nội tuyến của Firefox và Chrome, nhưng tôi đã thử nghiệm nó và các trình duyệt hiện tại cho thấy các kết quả khác nhau. Nó hoạt động trên Firefox và Chrome 54, Opera 41 và Safari 10 với tiền tố -webkit.

calc()

Hàm calc() có thể được sử dụng để tạo các giá trị. Ví dụ: width: calc(100% - 32px) sẽ làm cho phần tử có chiều rộng đầy đủ trừ đi 32 pixel. Nó có thể rất hữu ích để thiết lập độ rộng cột và trừ đi các lề. Không cần lồng hai phần tử và tạo phần đệm cho phần tử cha để đạt được kết quả tương tự.

Nó chấp nhận một biểu thức với các toán tử cộng, trừ, nhân và chia. Toán tử có thể là bất kỳ giá trị độ dài cú pháp. Bạn thậm chí có thể làm một cái gì đó như calc(var(--someValue) / 2 - 2em) – thuộc tính Variables trong CSS.

Dự phòng sẽ như thế này, đối với các trình duyệt không hỗ trợ:

width: 98%; /* fallback for browsers without support for calc() */
width: calc(100% – 1em);

column-count

Thuộc tính column-count xác định số lượng cột mà một phần tử có. column-count: 3 sẽ trải các phần tử văn bản (hoặc phần tử nội tuyến-*) thành 3 cột. Bạn có thể áp dụng inline-block và block cho phần tử. Cái này sẽ không làm việc với display: table nhưng vẫn sẽ làm việc với display: table-cell.

column-gap: thuộc tính chỉ định kích thước của khoảng cách giữa các cột
column-rule: là một đường thẳng đứng được vẽ giữa cột ngăn cách chúng một cách trực quan. Đây là thuộc tính có thể coi là rút gọn (nó rất giống với đường border-*)
column-rule-color: chỉ định màu của dòng. Giá trị có thể là một màu được đặt tên (red, green, transparent), hex, rgb/rgba, hsl/hsla
column-rule-style: nó chỉ định style của dòng. It accepts the following values: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
column-rule-width: chỉ định chiều rộng của dòng và chấp nhận các giá trị được đặt tên (thin, medium, thick), px, em, initial, inherit và unset

Tìm hiểu thêm về column-count tại đây

content

Thuộc tính content được sử dụng cùng với các yếu tố giả như ::before và ::after. Ví dụ tạo dấu phẩy sau thẻ <li>

ul > li:not(:last-child):after {
content: “, “;
}

counters

Counters cho phép đưa ra số (chỉ mục) cho các phần tử. Ví dụ: bạn có một bài viết, với một số chủ đề, mỗi chủ đề có tiêu đề <h2> ở đầu và bạn có <h3> tiêu đề phụ. Bạn có thể tự động đánh số chúng!

Có bốn thuộc tính để làm việc với counters:

counter-reset: Đặt lại hoặc tạo một bộ đếm. giá trị của tài sản này là tên của bộ đếm mà bạn xác định
counter-increment: tăng bộ đếm. giá trị của tài sản này là tên của bộ đếm mà bạn muốn tăng
content() sử dụng để thêm chỉ mục vào các phần tử.
counter() Hàm lấy giá trị của bộ đếm

body {
  counter-reset: heading; /* init the counter for headings (you can give it any other name) */
}
h2 {
  counter-increment: heading; /* increments the counter on every <h1> tag */
  counter-reset: subheading;  /* here we init or reset the subheading */
  /* so that we get 1.1, 1.2, 1.3, then after new heading it will go 2.1, 2.2, 2.3 */
}
h2:before {
  content: counter(heading) " - "; /* using :before selector and counter() function we can add the index to the heading */
}
h3 {
  counter-increment: subheading; /* increment the subheading counter on every <h2> tag */
}
h3:before {
  content: counter(heading) "." counter(subheading) " - ";
}

currentColor

Từ khóa currentColor đại diện cho giá trị của thuộc tính màu của các thành phần. Nếu phần tử cha có color màu tím và phần tử con muốn background màu tím thì chỉ cần thêm giá trị currentColor là được.

filter

Thuộc tính filter áp dụng hiệu ứng hình ảnh cho các yếu tố. Nó đi kèm với các chức năng được xác định trước như blur, brightness, contrast, sepia; và bạn cũng có thể áp dụng các bộ lọc SVG tùy chỉnh.

Bạn có thể kết hợp nhiều bộ lọc để thực hiện các hiệu ứng phức tạp. Dưới đây là một số ví dụ trong đó các bộ lọc giống như Instagram đã được tạo lại bằng các filters.

Dưới đây là một ví dụ về chuyển đổi màu sắc bằng filters:

flex

Thuộc tính flex là một thuộc tính một phần của flexbox layout. Cách sử dụng phổ biến nhất của nó là flex: 1; cái mà đẩy một phần tử chiếm nhiều chỗ nhất có thể, hoặc cân bằng bao nhiêu không gian nó đang sử dụng với các phần tử khác cũng sử dụng thuộc tính flex. Giá trị mặc định cho flex là 0 1 auto.

flex-flow

Flex-flow là thuộc tính rút gọn của flex-direction và flex-wrap . Nó chấp nhận các giá trị của flex-direction (row, row-reverse, column, column-reverse), giá trị của flex-wrap (nowrap, wrap, wrap-reverse). Nhưng bạn cũng có thể sử dụng nó như flex-flow: row nowrap;

flex-basis

Thuộc tính flex-basis xác định kích thước ban đầu của phần tử flex (hơi giống width, trong bố trí ngang của flexbox ). Nó chấp nhận các giá trị chiều rộng như px, em và auto. Nó cũng chấp nhận các từ khóa kích thước nội tại: fill, max-content, min-content và fit-content .

font-smoothing

Thuộc tính font-smoothing kiểm soát cách khử răng cưa được áp dụng cho phông chữ. Vấn đề là sau khi trình duyệt khử răng cưa tiêu chuẩn, phông chữ của bạn có thể trông hơi khác so với những gì bạn thấy trong phần mềm thiết kế. Webkit và Firefox có những giá trị khác nhau cho thuộc tính này:

-webkit-font-smoothing:

none: tắt khử răng cưa, hiển thị phông chữ với các cạnh sắc nét
antialiased: làm mịn phông chữ ở mức pixel, điều này làm cho văn bản sáng trông nhẹ hơn trên nền tối
subpixel-antialiased: làm mịn phông chữ ở mức subpixel để nhìn rõ hơn trên màn hình retina.

-moz-osx-font-smoothing:

auto: để trình duyệt chọn phương pháp làm mịn
grayscale: kết xuất văn bản với khử răng cưa thang độ xám. điều này mang lại đầu ra tương tự như “khử răng cưa” trên webkit và làm cho văn bản sáng trông nhẹ hơn trên nền tối.

font-variant

Giá trị small-caps cho font-variant sẽ để cho chúng hiển thị văn bản bằng chữ in hoa nhỏ. Điều này có thể hữu ích khi sử dụng cùng với CSS ::first-line .

grid

Layout grid trong CSS cho phép chúng ta tạo lưới hai chiều mà không gặp sự cố như thường gặp với tables và floats. Nó đáng để tìm hiểu vì hiện tại có sự hỗ trợ rất rộng rãi.

Một grid bao gồm các container và các items bên trong nó. Sau đó, bạn phải xác định cách không gian được phân phối giữa các hàng và cột. Các giá trị đại diện cho kích thước cột và bạn cũng có thể đặt tên cho chúng.

.container {
  display: grid;
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

Lưu ý trong “grid-template-columns”, cột thứ nhất và thứ năm có chiều rộng 40px, cột thứ hai và thứ tư chiều rộng 50px và cột ở giữa sẽ lấy phần còn lại của không gian. Chúng ta hãy xem làm thế nào để định vị mục bên trong container. Chúng ta phải thực sự đặt điểm bắt đầu và điểm kết thúc cho phần tử. Mục này sẽ áp dụng CSS sau đây cho nó:

.item {
  grid-column-start: 2; // will start at the point where the second column starts
  grid-column-end: 5;   // will end at the point where the second column starts
  grid-row-start: 1;    // will start at the point where the first row starts
  grid-row-end: 3;      // will end at the point where the third row starts
}

hyphens

Thuộc tính dấu gạch ngang chỉ định cách trình duyệt gạch nối văn bản.

none: không áp dụng dấu gạch ngang, văn bản sẽ tràn vào container
auto: trình duyệt sẽ tự động gạch nối văn bản
manual: tự xác định điểm dừng

Có hai ký tự ngắt dòng bạn có thể sử dụng:

 – sẽ cho trình duyệt biết rằng đó là một vị trí trong văn bản nơi phép nối có thể được thực hiện nếu cần thiết
&hyphen; – sẽ hiển thị dấu gạch nối ngay cả khi dòng không bị hỏng

image-rendering

Thuộc tính image-rendering xác định cách hiển thị hình ảnh khi được chia tỷ lệ. Trình duyệt tự động áp dụng bí danh cho hình ảnh đã thay đổi kích thước và bạn có thể kiểm soát điều đó với các thuộc tính này:

auto: (default) trình duyệt tự động áp dụng bí danh
crisp-edges: độ tương phản và các cạnh được giữ nguyên, để chúng không bị nhẵn hoặc mờ khi thu nhỏ

pixelated: giá trị này chỉ được áp dụng cho các hình ảnh tăng kích thước và làm cho hình ảnh xuất hiện pixelated

list-style-image

Bạn có thể sử dụng thuộc tính list-style-image trên thẻ <ul> để sử dụng hình ảnh làm điểm đánh dấu trong danh sách.

ul {
list-style-image: url(‘square.gif’);
}

Xem thêm:

Cài đặt WordPress với Caddy web server trên Ubuntu 18.04

list-style-position

Thuộc tính list-style-position chỉ định vị trí điểm đánh dấu danh sách sẽ xuất hiện. Nó chấp nhận hai giá trị:

inside: điểm đánh dấu xuất hiện bên trong nội dung mục danh sách

outside: điểm đánh dấu xuất hiện bên ngoài nội dung mục danh sách

object-fit

Nó giống như thuộc tính background-size vậy nhưng có điều đạc biệt hơn là thuộc tính object-fit được sử dụng cho phần tử hình ảnh <img>. Nó chấp nhận các thuộc tính sau:

fill

contain
cover
none

scale-down

Xem thêm ví dụ dưới để hiểu rõ hơn.

order

Thuộc tính order chỉ định các mục trong một flex container. giá trị là một số, cũng có thể là số âm hoặc “inherit”, “initial”, “unset”.

<div class="flex-container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.item:nth-child(1) { order: 3 }
.item:nth-child(2) { order: 1 }
.item:nth-child(3) { order: 2 }

Code này sẽ hiển thị các mục theo thứ tự 2, 3, 1.

overflow-wrap

Thuộc tính này chỉ định nếu ngắt dòng sẽ xảy ra trong các từ dài nếu chúng không vừa trong container dưới dạng một từ.

normal: ngắt từ ở điểm ngắt bình thường
break-word: phá vỡ các từ thông thường không thể phá vỡ, nếu không có không gian

Nó cũng nhận các giá trị global như inherit, initial, unset.

page-break-*

Có ba thuộc tính CSS cho phép bạn điều chỉnh ngắt trang:

page-break-before: ngắt trang trước phần tử
page-break-after: ngắt trang sau phần tử
page-break-inside: ngắt trang bên trong phần tử

Nó chấp nhận các giá trị sau: auto, always, avoid, left, right, recto, verso. Trong đó recto và verso là 2 giá trị đang trong quá trình thử nghiệm.

perspective

Thuộc tính CSS perspective cung cấp phối cảnh phần tử trong 3D (nó chỉ liên quan đến các phần tử được chuyển đổi 3D). Giá trị của nó là khoảng cách từ khung nhìn đến mặt phẳng z. Giá trị là độ dài, có thể được biểu thị bằng px hoặc em hoặc từ khóa “none”.

Thuộc tính phải được áp dụng cho phần tử cha (vùng chứa) hoặc phần tử mà bạn muốn phối cảnh được áp dụng.

pointer-events

Thuộc tính này chỉ định cách các phần tử phản ứng với các sự kiện chuột.

auto: element hoạt động bình thường
none: bỏ qua tất cả các sự kiện clicks, selects, dragging,…

Nó cũng có các giá trị đặc biệt là duy nhất cho các phần tử SVG:

visiblePainted
visibleFill
visibleStroke
visible
painted
fill
stroke
all

position

Bạn có thể quen thuộc với các giá trị position như static, relative, absolute, và fixed. Có một giá trị thú vị khác: sticky

Các yếu tố có vị trí: sticky được coi là tương đối, cho đến khi chúng đạt đến điểm nhất định, sau đó chúng trở nên cố định. Đây thường là thứ chúng ta phải sử dụng JavaScript, nhưng bây giờ có thể thực hiện được bằng CSS thuần túy.

resize

Thuộc tính resize xác định liệu phần tử có thể được thay đổi kích thước bởi người dùng. Bạn có thể làm cho một phần tử có thể thay đổi kích thước theo chiều dọc, chiều ngang hoặc cả hai.

none: element không thể thay đổi kích thước. Đây là giá trị mặc định cho hầu hết các thành phần, ngoại trừ textarea là “both” theo mặc định
both: có thể thay đổi cả hai hướng
horizontal: có thể thay đổi theo chiều ngang
vertical: có thể thay đổi theo chiều dọc

Quan trọng: để làm cho một phần tử có thể thay đổi kích thước, overflow của nó phải được đặt thành visible.

shape-outside

Thuộc tính shape-outside cho phép chúng ta bọc văn bản trong một hình dạng xung quanh một phần tử nổi. Có thể đó là một hình ảnh tròn và bạn muốn văn bản bao quanh vòng tròn đó. Thuộc tính sẽ được áp dụng cho phần tử mà bạn muốn bọc nội dung xung quanh. Nó chấp nhận các giá trị sau:

Giá trị từ khóa: none, margin-box, padding-box, border-box, padding-box
Các giá trị hàm: circle(), ellipse(), inset(), polygon()

Bạn cũng có thể chuyển URL tới một hình ảnh xung quanh nội dung sẽ bao bọc, và nó chấp nhận các giá trị toàn cầu initial, inherit, và unset.

Nếu bạn chọn sử dụng một hình ảnh, thuộc tính shape-image-threshold sẽ xác định ngưỡng kênh alpha để tách hình dạng khỏi hình ảnh. Firefox và IE vẫn chưa hỗ trợ cho thuộc tính này và Safari hỗ trợ nó với tiền tố -webkit-.

Xem thêm chi tiết tại đây.

@supports

Quy tắc CSS này cung cấp cho bạn khả năng kiểm tra xem trình duyệt có hỗ trợ các thuộc tính nhất định (hoặc kết hợp thuộc tính / giá trị) trước khi sử dụng chúng không.

@supports (display: grid) {
  .container {
    display: grid;
  }
}            

@supports (image-rendering) {
  img {
    image-rendering: pixelated;
  }
}

Bạn có thể thêm nhiều thuộc tính như thế này:

@supports (display: grid) and ((image-rendering: crisp-edges) or (image-rendering: pixelated)) {

}

var()

Click vào button trên và check lại màu toàn bộ trang web thử xem, nó thay đổi rồi 😀

Thuộc tính var() là một phần của việc sử dụng các thuộc tính tùy chỉnh CSS.

Các biến CSS được xác định bởi các tác giả và đại diện cho các giá trị cụ thể có thể được sử dụng nhiều lần trong tài liệu. Hàm var() có thể được sử dụng làm giá trị của bất kỳ thuộc tính nào, nhưng không thể được sử dụng làm thuộc tính hoặc bộ chọn. Giá trị đầu tiên của hàm là tên của thuộc tính tùy chỉnh; thứ hai là một giá trị dự phòng tùy chọn, được sử dụng nếu đối số thứ nhất không hợp lệ.

Hãy xem cú pháp:

:root {
  --primary-color: #cccccc;
}
body {
  color: var(--primary-color);
}

Với giá trị dự phòng:

body {
  color: var(--primary-color, #cccccc);
}

Trong Sass, điều đó sẽ giống như:

$primary-color: #ccc;

body {
  color: $primary-color;
}

Thật không may, các thuộc tính tùy chỉnh không được hỗ trợ trong IE11, Edge 14 và Opera mini. Edge 15 sẽ có hỗ trợ một phần.

table-layout

Bao giờ cần phải làm cho tất cả các ô trong một bảng bị buộc phải có cùng chiều rộng?

table {
  table-layout: fixed;
}

text-transform

Thuộc tính text-transform có thể thay đổi trường hợp văn bản thành chữ thường – lowercase hoặc chữ hoa – uppercase. Bạn cũng có thể viết hoa chữ cái đầu tiên của mỗi từ với capitalize. Xem thêm chi tiết tại đây.

transition-timing-function

Thuộc tính transition-timing-function xác định đường cong tốc độ của hiệu ứng chuyển tiếp, như ease-in hoặc ease-out. Đây là hai giá trị ít được biết đến:

steps(n, start|end): thay vì chỉ định chuyển tiếp trơn tru với các chức năng thời gian như vậy là ease, điều này hoàn thành hoạt hình theo số bước bạn xác định. Tham số thứ hai là tùy chọn và chỉ định tại điểm nào trong khoảng sẽ xảy ra thay đổi. Các giá trị mặc định cho tham số thứ hai là kết thúc. Bạn cũng có thể sử dụng các chức năng tốc ký step-start(n) và step-end(n).
cubic-bezier(n, n, n, n):

Bạn có thể sử dụng tool này để tạo cubic bezier timing functions.

Bạn cũng có thể sử dụng các công cụ phát triển Chrome để sửa đổi đường cong bezier.

vh, vw, vmin, vmax

Các giá trị này được sử dụng để định cỡ các thứ liên quan đến kích thước khung nhìn. Mặc dù chiều rộng là luôn luôn tương đối so với parent container, vh hoặc vw luôn sử dụng kích thước khung nhìn làm cơ sở.

vh: 1 vh bằng 1/100 chiều cao khung nhìn
vw: 1 vw bằng 1/100 chiều rộng khung nhìn
vmin: nó là giá trị nhỏ nhất của vh và vw
vmax: là giá trị lớn nhất của hai

Đối với cửa sổ tr

ình duyệt có chế độ xem 1280x655px, 1vh bằng 6,55 pixel, 1vw bằng 12,8 pixel, vmin là 6,55 pixel (nhỏ nhất trong hai giá trị) và vmax là 12,8 pixel (lớn nhất trong hai giá trị).

white-space

Thuộc tính này xác định cách xử lý khoảng trắng bên trong phần tử.

normal: thu gọn các dòng mới, thu hẹp không gian và các tab, text wrap
nowrap: thu gọn dòng mới, thu gọn không gian và tab, text nowrap
pre: giữ các dòng mới, giữ các khoảng trắng và các tab, text nowrap
pre-wrap: giữ dòng mới, giữ khoảng trắng và tab, text wrap
pre-line: bảo tồn các dòng mới, thu hẹp không gian và các tab, text wrap

word-break

Thuộc tính này chỉ định các quy tắc ngắt dòng.

normal: sử dụng các quy tắc tiêu chuẩn để ngắt các từ
break-all: dòng có thể bị ngắt giữa hai chữ cái bất kỳ
keep-all: xuống dòng bị cấm giữa các chữ cái

word-spacing

Tương đương với letter-spacing nhưng vì lời nói! Bạn có thể tăng (hoặc giảm) khoảng trống giữa các từ. Giá trị tiêu chuẩn cho tài sản này là normal trong đó sử dụng khoảng trắng mặc định: 0,25em.

will-change

thuộc tính will-change cho phép tác giả cho trình duyệt biết những thay đổi mong đợi trên một yếu tố. Thay đổi, như trong, thay đổi giá trị thuộc tính, có thể là một phần của hình ảnh động. Ý tưởng là cung cấp cho trình duyệt một cảnh báo về animation bạn định thực hiện, vì trình duyệt không thể luôn dự đoán điều này. Khi bạn đưa ra một gợi ý, nó có thể tối ưu hóa cho hiệu suất.

normal: thực hiện tối ưu hóa tiêu chuẩn
scroll-position: chuẩn bị trình duyệt để thay đổi vị trí cuộn
content: nội dung của phần tử sẽ thay đổi

Bạn cũng có thể đặt các thuộc tính cụ thể mà bạn sẽ thay đổi, như thế này:

.will-be-animated { will-change: top, left; }

Trước khi giới thiệu thuộc tính này, chúng tôi thường sử dụng các thủ thuật như thế này để lừa trình duyệt hoạt hình một số yếu tố có hiệu suất tốt hơn (bằng cách “forcing” phần tử “onto the GPU”):

.will-be-animated { transform: translate3d(0, 0, 0); }

writing-mode

Thuộc tính writing-mode xác định liệu văn bản được đặt theo chiều ngang hay chiều dọc cũng là hướng.

horizontal-tb: nội dung chảy từ trái sang phải, từ trên xuống dưới
vertical-rl: nội dung chảy từ trên xuống dưới, từ phải sang trái
vertical-lr: nội dung chảy từ trên xuống dưới, từ trái sang phải

:-webkit-autofill

Lớp giả CSS này phù hợp với các yếu tố đầu vào đã được trình duyệt tự động điền. Điều này cho bạn một cơ hội để thay đổi phong cách đó. Ví dụ, trong Chrome, chúng có nền màu vàng.

-webkit-overflow-scrolling

Thuộc tính này cho phép chúng ta cuộn đà iOS trên các yếu tố trên thiết bị cảm ứng. Có hai giá trị:

auto: sử dụng cuộn thông thường, trong đó cuộn dừng lại khoảnh khắc khi bạn gỡ ngón tay ra khỏi màn hình
touch: sử dụng động lượng cuộn

webkit-touch-callout

Thuộc tính này cho phép chúng tôi ẩn chú thích mặc định trên thiết bị iOS. Khi bạn chạm và giữ mục tiêu, một menu sẽ xuất hiện với các điều khiển thông tin.

none: vô hiệu hóa chú thích
default: chú thích được hiển thị

-webkit-scrollbar

Có một cách để ẩn thanh cuộn trên một phần tử

#container::-webkit-scrollbar { display: none; }

Ngoài ra còn có một cách để tự động cuộn thanh cuộn trên IE10 + và Edge.

html { -ms-overflow-style: ms-autohiding-scrollbar; }

Animatable

Chúng ta thường áp dụng các hiệu ứng chuyển tiếp cho độ mờ đục, màu nền, v.v. nhưng thật tốt khi biết rằng chúng ta có thể làm động các thứ khác, như letter-spacing, ví dụ:

https://codepen.io/gregh/pen/ZLYvBO

Tổng kết

Trên đây là 50+ thuộc tính thú vị trong CSS có thể bạn chưa biết, nó thực sự hữu ích trong các trường hợp tương ứng. Bài viết được dịch từ https://css-tricks.com/lets-look-50-interesting-css-properties-values/, có sự hỗ trợ từ google translate, câu từ văn chữ còn lủng củng. Mong các bạn bỏ quá cho 😀

animation css, css snippet, css thật là thú vị, flex box css, grid layout css, var trong css