Những thuộc tính thú vị trong CSS P2

Bài đăng này đã không được cập nhật trong 3 năm

Sau phần một về các thuộc tính thụ vị trong CSS, thì hôm nay mình sẽ tiếp tục với 10 thuộc tính tiếp theo. Không chờ lâu, bắt đầu nào !!!

1. calc

Hàm calc(), đúng như tên của nó đây là một hàm tính toán có khả năng tạo ra một value cho một property trong css.

width: calc(100% - 32px)

Chiều rộng sẽ bằng 100% 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 nhiều phần tử vào nhau. Chấp nhận một biểu thức với các toán tử +, -, * và \. Toán tử có thể là bất kỳ một kiểu giá trị độ dài.

calc(var(--someValue) / 2 - 2em)

Nên sử dụng fallback 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);

2. column-count

Thuộc tính column-count xác định số lượng cột mà một phần tử có thể có.

VÍ dụ column-count: 3 sẽ trải các phần tử text (hoặc phần tử inline-*-) thành 3 cột. Có thể áp dụng inline-block và block cho các element bên trong. Cái này sẽ không hoạt động với display: table nhưng vẫn sẽ làm việc với display: table-cell.

Ngoài ra ta còn có nhưng thuộc tính column-* khác.

column-gap: 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ác cột một cách trực quan. Đây là thuộc tính có thể coi là rút gọn ( hoặc rất giống với đường border)
column-rule-color: chỉ định màu của column-rule: red, #FFF,...
column-rule-style: nó chỉ định style của column-rule: Chấp nhận các value tương tự như border-style: none, hidden, dotted,...
column-rule-width: chỉ định chiều rộng của column-rule. Chấp nhận các value như border-style: thin, medium, px,...

3. content

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

ul > li:after {
 content: ", ";
}

4. counters

Counters cho phép đưa ra số (index) 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ới một bộ đếm, value của property này là tên của counter mà bạn xác định.
counter-increment: tăng bộ đếm, có value của là tên của counter mà bạn muốn tăng.
content() sử dụng để thêm index vào các phần tử.
counter() Hàm lấy giá trị của bộ đếm

5. currentColor

currentColor có thể coi là đại diện cho color của element đó hoặc là từ element cha của nó.

.parent {
  color: #ccc;
  border: 1px solid currentColor;
}
.child {
  background: currentColor;
}

Có một trick nhỏ để thẻ svg cùng màu với element bên ngoài bao bọc nó.

button {
  color: red;
}
button svg {
  fill: currentColor;
}

6. filter

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

Và đặc biệt, có thể kết hợp nhiều funtion khác nhau vào một filter.

7. flex

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

8. flex-flow

Flex-flow là shorthand của flex-direction và flex-wrap.

Chấp nhận các value của

flex-direction: row, row-reverse, column, column-reverse
flex-wrap: nowrap, wrap, wrap-reverse.

Có thể sử dụng ngắn gọn hơn nữa như:

flex-flow: row nowrap;

9. flex-basis

Thuộc tính flex-basis xác định kích thước ban đầu của một element flex (hơi giống width, bên trong 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 value như: fill, max-content, min-content và fit-content.

10. font-kerning

Thuộc tính font-kerning - kerning được sử dụng để chỉ khoảng cách giữa các ký tự với nhau trong cùng một font chữ, browser sẽ sử dụng thông tin được lưu trong font để tính toán khoảng cách, hoặc sẽ disable nó đi.

Nếu một font chữ có kerning thì các ký tự có thể chồng chéo lên nhau theo chiều dọc. Điều này có nghĩa là, các ký tự không thực sự dính chặt vào nhau, mà thay vào đó 2 ký tự sẽ được cùng chung một không gian dọc. Có các value sau:

auto: Nếu kerning tồn tại thì sẽ sử dụng ngược lại thì không.
normal: Mặc định áp dụng thông tin có trong font.
none: browser sẽ không sử dung kerning