Tổng hợp các thủ thuật css (Phần 1)

Css có thể không khó nhưng để thuần thục được nó và xử lý được mọi tình huống layout theo cách “chuẩn” nhất thì đôi khi cũng là câu chuyện dài.

Có nhiều cách viết css khác nhau cho một thiết kế để đảm bảo UI hiển thị đúng và chuẩn theo thiết kế, đôi khi viết theo thói quen và cách viết cũ vẫn đảm bảo được nên việc áp dụng các kiến thức mới không được để ý mấy.

Có nhiều thủ thuật css mà nếu áp dụng sẽ thay đổi và tối ưu được rất nhiều cách viết HTML theo thói quen cũ.

1. Selector :not()

Khi viết css cho menu trường hợp có 1 border ngăn cách thường thường chúng ta sẽ viết như này đúng không ?

.nav li {
  border-right: 1px solid black;
}
.nav li:last-child {
  border-right: 0;
}

Tuy nhiên có 1 mẹo để giảm số lượng dòng code mà vẫn có đc UI như trên, đó là sử dụng selector :not(:last-child):

.nav li:not(:last-child){border-right:1px #000 solid;}

Gọn hơn rất nhiều nhé anh em 🙂

2. Responsive cho background image:

Thông thường thì để dễ dàng nhất cho việc hiển thị responsive cho image thì ảnh được gọi từ thẻ [img] trong HTML với thuộc tính Css như sau

max-width:100%;
height:auto;

Khi đó image sẽ tự động scale theo độ phân giải màn hình thiển thị với chiều rộng lớn nhất bằng khung bọc nó và chiều cao sẽ tự động scale theo

Tuy nhiên trong nhiều trường hợp không thể sử dụng thẻ [img] mà bắt buộc phải dùng background-image. Để xử lý responsive trong trường hợp này là tương đối khó, hoặc không thể.

// CSS
.bg-image{
width: 500px;
max-width: 100%;
height: 350px;
background: url("https://css3c.com/wp-content/uploads/2019/03/cssmagic-1.jpg") no-repeat 0 0;
background-size: contain;}

Viết như trên thì hình đã được scale, tuy nhiên nó vẫn chiếm 1 cái height cố định, không set được height auto cho nó.

Chúng ta sử dụng cách viết sau để scale tự động height cho nó :

.bg-image {
  width: 500px;
  max-width: 100%;
  height: 350px;
  background: url("https://css3c.com/wp-content/uploads/2019/03/cssmagic-1.jpg") no-repeat 0 0;
  background-size: contain;
}
 
// Thêm đoạn code như thế này vào
// breakpoint là 500px tương ứng với width của image
@media (max-width: 500px) {
  .bg-image {
    height: 0;
    /* (heightImage/widthImage)*100% */
    padding-bottom: 70%; 
  }
}

See the Pen ZPKKrO by Cong (@kcnguyen) on CodePen.

3. Valid CSS Content

Có một thuộc tính nội dung trong CSS được tạo ra để sử dụng song song với các phần tử là :: before và :: after . Nó chèn nội dung vào phần tử. Nó như này:

See the Pen Valid CSS Content by Cong (@kcnguyen) on CodePen.

Và rất nhiều thứ khác hay ho nữa

Leave a Reply

Your email address will not be published. Required fields are marked *