Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 5)

https://viblo.asia/p/mot-vai-thu-thuat-css-ma-chinh-frontend-co-the-con-chua-biet-phan-5-jvElaWGmKkw

Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 5)

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

Hello xin chào mọi người, mình đã trở lại và tiếp tục với phần 5 của series về Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết

Bắt đầu thôi nào!

1. CSS canh giữa 1 thành phần theo chiều ngang và dọc với code ngắn nhất

Có khá nhiều bài viết hướng dẫn canh giữa 1 thành phần theo chiều ngang, theo chiều dọc hoặc theo cả 2 chiều với từng trường hợp yêu cầu ta ứng dụng mỗi kiểu CSS khác nhau.

Dạo gần đây bên cạnh Flexbox với 3 dòng code là giúp ta canh giữa dễ dàng:

.container {
    display: flex;
    align-items: center;
    justify-content: center;
}

Thì chắc rằng những người làm Frontend như mình đã nghe qua về CSS Grid. Nói sơ qua là CSS Grid ra đời đã làm thay đổi tư duy làm layout của người làm Frontend khá nhiều, nó xử nhiều layout vô cùng khó bằng CSS trước đây 1 cách gọn gàng. Vậy thì CSS Grid có thể thay thế cho Flexbox giải quyết trường hợp canh giữa trên không? Được! Hoàn toàn được, với CSS Grid thì code sẽ như sau:

.container {
    display: grid;
    align-items: center;
    justify-items: center;
}

Cái cách đặt tên properties của CSS Grid cũng dễ nhớ hơn nữa. Không những thế CSS Grid còn cung cấp shorthand properties cho 2 thuộc tính align-items và justify-items này bằng thuộc tính place-items. Vậy code của chúng ta sẽ sửa lại như sau:

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

Kết quả cho ra là như nhau với 3 kiểu code trên:

<div class="wrapper">
  <div class="container flexbox">
    <h3>Flexbox!</h3>
  </div>
  <div class="container css-grid">
    <h3>CSS Grid without Shorthand Properties!</h3>
  </div>
  <div class="container css-grid-shortest">
    <h3>CSS Grid with Shorthand Properties!</h3>
  </div>
</div>


body {
  background-color: #eee;  
}

.wrapper {
  display: flex;
}

.container {
  width: 350px;
  height: 250px;
  border: 2px dotted red;
  margin: 20px;
  background-color: #fff;
  text-align: center;
}

// Flexbox
.flexbox {
  display: flex;
  align-items: center;
  justify-content: center;
}

// CSS Grid without Shorthand Properties
.css-grid {
  display: grid;
  align-items: center;
  justify-items: center;
}

// CSS Grid with Shorthand Properties
.css-grid-shortest {
  display: grid;
  place-items: center;
}

Để hiểu thêm cách hoạt động của thuộc tính này các bạn có thể xem thêm ở đây

2. Thừa kế color trong thuộc tính border

Bạn đã từng CSS cho 1 button như này:

<button>Hover me</button>

// You do like that
button {
  color: lightblue;
  border: 1px solid lightblue;

  &:hover {
    color: orange;
    border: 1px solid orange;
  }
}



// Don't mention it. Just styled for easy to look
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #eee;
  
  button {
    padding: 15px 50px;
    background-color: #fff;
    cursor: pointer;
    font-size: 20px;
  }
}

Đoạn CSS cho button ở đấy nó kiểu như này:

color: lightblue;
border: 1px solid lightblue;

&:hover {
  color: orange;
  border: 1px solid orange;
}

Nhưng liệu bạn có biết rằng với thuộc tính border màu của nó là inherit, tức là nếu bạn khai báo border: 1px solid thì màu border-color sẽ lấy màu như thuộc tính color, trong trường hợp nếu element đó bạn không có mô tả color cho nó thì hầu hết browsers sẽ mặc định lấy màu black. Tận dụng tính năng này, quay lại CSS cho button ở trên, code của chúng ta sẽ đơn giản hơn:

color: lightblue;
border: 1px solid;

&:hover {
  color: orange;
}

Vẫn cho được kết quả tương tự:

<button>Hover me</button>

// You do like that
button {
  color: lightblue;
  border: 1px solid;

  &:hover {
    color: orange;
  }
}



// Don't mention it. Just styled for easy to look
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #eee;
  
  button {
    padding: 15px 50px;
    background-color: #fff;
    cursor: pointer;
    font-size: 20px;
  }
}

3. Dùng display: flex thì icon bị móp méo khi text dài

Đối với các bạn Frontend thì không còn quá lạ với Flexbox gì nữa rồi, từ khi biết đến Flexbox mình hầu như không dùng float hay display: inline-block khi làm layout nữa, vì Flexbox quá tiện, code ít nhưng làm được nhiều thứ.

Nhưng có bao giờ bạn gặp lỗi như dưới đây:

Đầu tiên là các bạn không lường trước được text sẽ dài, đến tay QA là phát hiện ra lỗi ngay, lúc này có thể nhiều bạn sẽ fix bằng cách sét thêm cho class .wrap-icon có thuộc tính min-width: 50px. Nhưng theo mình đây không phải là cách hay, thay vào đó bạn nên set class .text có thuộc tính flex: 1

<div class="demo">
  <!-- Case less text in the right. It work fine!-->
  <div class="😅">
    <div class="wrap-icon">
      <div class="fa fa-lock"></div>
    </div>
    <div class="text">Lorem ipsum dolor sit amet</div>
  </div>
  <!-- Case more text in the right. It work not fine!-->
  <div class="😅">
    <div class="wrap-icon">
      <div class="fa fa-lock"></div>
    </div>
    <div class="text">Expedita possimus quisquam ipsam veritatis doloribus voluptas illum nostrum perspiciatis laudantium, minima?</div>
  </div>
</div>

// Main layout
.😅 {
  width: 400px;
  display: flex;
  
  .wrap-icon {
    width: 50px;
    height: 50px;
  }
  
  .text {
    flex: 1;
  }
}



// Don't mention it. Just styled for easy to look
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #eee;
  
  .😅 {
    margin-bottom: 20px;
    padding: 10px;
    background-color: #A16FB3;
    border: 2px solid black;
    border-radius: 5px;
    align-items: center;

    .wrap-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: orange;
      border-radius: 50%;

      .fa {
        font-size: 30px;
      }
    }
    
    .text {
      margin-left: 10px;
    }
  }
}

Tổng kết

Hi vọng mọi người sẽ tăng thêm skill CSS với 3 tips trên.

Nếu thấy thích thì Upvote, thấy hay thì Clip bài này của mình nhé! ^^

P/s: Tiêu đề câu view thôi nhé! Anh em Frontend pro rồi đừng chém em ạ!