CSS tháng 8 2020

một vài kĩ thuật CSS mới đang được phát triển. Lưu ý là những kĩ thuật này đang được phát triển, nghĩa là chúng chỉ mới trong giai đoạn beta (thử nghiệm) nên chưa được hỗ trợ bởi các browser hiện tại đâu nhé.

Các bạn có thể theo dõi bài viết gốc của mình tại đây nhé: http://grab-cv.com/blog/tin-tuc-css-thang-8-2020-co-gi-moi

1. Flexbox Gaps

Điều này có lạ lẫm với bạn không? Với mình thì nó thật sự lạ lẫm nhưng cũng không ngạc nhiên lắm. Từ trước đến nay, CSS luôn có những cái gọi là "trick" được truyền tay nhau để giúp thỏa mãn được các thiết kế từ các bạn designer, và CSS luôn cố gắng tạo ra những thuộc tính native để thay thế cho các trick đó. "Gap" là một trong số chúng.

Mà "Gap" là gì vậy? Thật ra nó chỉ đơn giản là một vùng trống giữa các element mà thôi, chả có gì đặc biệt đúng không nào.

Tuy nhiên ngày xưa, và cả hiện tại nữa, để tạo ra các gap như vậy, chúng ta thường dùng margin. Có thể bạn sẽ thắc mắc rằng "margin mà gọi là trick à", thì bạn đã đúng nhé, margin không phải là trick. Tuy nhiên nếu dùng margin (ví dụ mỗi item sẽ có margin-right và margin-bottom), bạn thường sẽ phải clear margin của item cuối cùng, nếu bạn không muốn có một vùng margin thừa ở cuối (còn rất nhiều cách khác để xử lý margin của item cuối). Và lúc này, giá như có một thuộc tính định nghĩa ra khoảng cách giữa các item thì tốt biết mấy nhỉ.

.container {
  display: inline-flex;
}

.item {
  width: 113px;
  height: 74px;
  margin-right: 20px;
  background-color: #F7B500;
  border-radius: 8px;
}

Như hình trên, bạn thấy có một phần margin ở cuối bị dư ra.

Và CSS Grid ra đời để giải quyết các vấn đề về tạo grid chỉ với CSS, kèm theo là các thuộc tính gap, column-gap, row-gap. Tên thuộc tính rất rõ rồi đúng không nào, mình sẽ không nói thêm về nó, vì nó đã tồn tại được một thời gian rồi chứ không còn mới mẻ gì.

Nhưng, đó là những thuộc tính của CSS Grid nhé, còn với Flexbox thì không, bạn vẫn phải dùng margin (hoặc các cách khác) để tạo gap. Tin vui là thuộc tính gap sẽ được áp dụng cho Flexbox trong tương lai gần nhé. Bạn tham khảo danh sách các browser đã support Flexbox gap tại đây: https://caniuse.com/#search=flexbox gap

.container {
  display: inline-flex;
  gap: 20px;
}

.item {
  width: 113px;
  height: 74px;
  background-color: #F7B500;
  border-radius: 8px;
}

Như hình trên, phần margin dư không còn nữa, đơn giản vì chả có margin nào được khai báo cả.

2. Aspect Ratio Unit

Một câu hỏi nhỏ dành cho bạn như sau: bạn hãy tạo ra một thẻ div với kích thước 100x100 px. Đơn giản phải không nào:

.item {
  width: 100px;
  height: 100px;
}

Hãy nâng cấp câu hỏi trên khó hơn một tí: với thẻ div 100x100 px trên, bạn hãy biến nó thành 200x200 px, nhưng chỉ được thay đổi chiều rộng mà không được thay đổi chiều cao. Hay nói cách khác, bất kể width là bao nhiêu, hãy làm height của nó bằng với width. Khó hơn rồi đúng không nào.

Để làm được điều đó, chúng ta thường sử dụng trick theo đúng nghĩa đen luôn là padding hack.

.item {
  width: 200px;
}

.item::after {
  content: '';
  display: block;
  padding-top: 100%;
}

Và thuộc tính aspect-ratio ra đời để giải quyết vấn đề này.

.item {
  width: 200px;
  aspect-ratio: 1 / 1;
}

Thuộc tính này hiện chưa được support chính thức bởi browser, vì thế các bạn hãy cẩn thận trước khi sử dụng cho production nhé. Để thử nghiệm cho biết (như hình chụp của mình ở trên), bạn có thể bật cờ "Experimental Web Platform features" của Chrome để thử các tính năng mới.