Làm cách nào để áp dụng điều kiện css?

lựa chọn 1

Show


Nếu (điều kiện 1, "màu nền. màu đỏ; . màu đỏ;", "")

tùy chọn 2 (nếu bạn muốn tránh khoảng trắng trong lớp kiểu)

Nếu (điều kiện 1, "màu nền. màu đỏ; . màu đỏ;", "") )

Tôi thích coi CSS như một ngôn ngữ thiết kế có điều kiện. Trong những năm qua, CSS được biết đến như một cách để tạo kiểu cho các trang web. Tuy nhiên, giờ đây, CSS đã phát triển rất nhiều đến mức bạn có thể thấy các quy tắc có điều kiện. Điều thú vị là các quy tắc CSS đó không trực tiếp (tôi. e. vẫn không có if/else trong CSS), nhưng cách các tính năng trong CSS hoạt động là có điều kiện

Các công cụ thiết kế như Figma, Sketch và Adobe XD đã tạo ra một cải tiến lớn cho các nhà thiết kế của chúng tôi, nhưng chúng vẫn thiếu nhiều tính linh hoạt mà CSS có

Trong bài viết này, tôi sẽ điểm qua một vài tính năng CSS mà chúng ta sử dụng hàng ngày và cho bạn thấy chúng có điều kiện như thế nào. Ngoài ra, tôi sẽ so sánh một vài ví dụ CSS mạnh hơn nhiều so với các công cụ thiết kế

CSS có điều kiện là gì?

Nói một cách đơn giản, đó là về thiết kế có những điều kiện nhất định. Khi một hoặc nhiều điều kiện được đáp ứng, thiết kế có thể thay đổi do đó

Ví dụ: thêm một phần mới vào thiết kế phải đẩy các phần tử khác bên dưới nó. Trong hình dưới đây, chúng ta có một chồng vật phẩm ở bên trái. Khi thêm mới thì các mục khác bên dưới nó phải chuyển xuống dưới

Làm cách nào để áp dụng điều kiện css?

Về mặt logic, điều đó nghe có vẻ bình thường và được mong đợi. Trong các công cụ thiết kế, chúng tôi đã nhận được điều này vài năm trước. Trong Figma, chúng tôi có các tính năng “Bố cục tự động” thực hiện những điều trên. Trên web, chúng tôi đã có điều đó từ ngày đầu tiên, ngay cả khi không có CSS

CSS có điều kiện

Bạn có thể đang nghĩ CSS có điều kiện là cái quái gì. Đó thậm chí là một điều?

Điều chính cần phân biệt là một số thuộc tính CSS hoạt động trong các điều kiện hoặc tình huống cụ thể. Ví dụ: khi sử dụng bộ chọn CSS

@media (hover: hover) {
  .card:hover {
    /* Add hover styles. */
  }
}
6 để kiểm tra xem một phần tử có trống hay không, đó là bộ chọn giả có điều kiện

.alert p:empty {
  display: none;
}

Nếu tôi muốn giải thích những điều trên cho cô con gái 2 tuổi của mình, tôi sẽ làm như thế này

Nếu không có gì ở đây, nó sẽ biến mất

Bạn có nhận thấy câu lệnh if ở đây không? . Trong phần sau, tôi sẽ khám phá một số tính năng CSS hoạt động tương tự như câu lệnh if/else

Mục đích? . Ý tôi là, bạn sẽ có thể phát hiện ra CSS có điều kiện bằng cách chỉ nhìn vào CSS của một thành phần, một phần hoặc một trang

CSS so với Figma

Tại sao lại là Figma? . Tôi muốn chia sẻ một ví dụ đơn giản. Có danh sách các thẻ được hiển thị theo chiều ngang

Làm cách nào để áp dụng điều kiện css?

Khi bạn suy nghĩ sâu sắc về nó, bạn sẽ phát hiện ra một số khác biệt lớn. Ví dụ: phiên bản CSS

  • Có thể bọc thành một dòng mới nếu không đủ chỗ
  • Hoạt động với cả hai hướng LTR và RTL
  • @media (hover: hover) {
      .card:hover {
        /* Add hover styles. */
      }
    }
    
    7 sẽ được sử dụng cho các hàng khi gói hàng

Figma không có bất kỳ thứ nào ở trên

Trong CSS, có ba quy tắc có điều kiện xảy ra

  • Nếu
    @media (hover: hover) {
      .card:hover {
        /* Add hover styles. */
      }
    }
    
    8 được đặt thành
    @media (hover: hover) {
      .card:hover {
        /* Add hover styles. */
      }
    }
    
    9, thì các mặt hàng có thể được bọc khi không còn chỗ trống
  • Khi các mục được bao bọc thành một dòng mới,
    @media (hover: hover) {
      .card:hover {
        /* Add hover styles. */
      }
    }
    
    7 sẽ hoạt động đối với các khoảng trống theo chiều ngang và chiều dọc
  • Nếu hướng trang là RTL (phải sang trái), các mục sẽ chuyển đổi thứ tự của chúng (e. g. thiết kế sẽ là cái đầu tiên từ bên phải)

Đây chỉ là một ví dụ, và tôi có thể viết một cuốn sách như thế. Hãy khám phá một số trường hợp mà CSS có thể có điều kiện

Ví dụ CSS có điều kiện

truy vấn phương tiện

Chúng ta không thể nói về CSS có điều kiện mà không đề cập đến truy vấn phương tiện CSS. Thông số CSS được đặt tên là Mô-đun quy tắc có điều kiện CSS. Thành thật mà nói, đây là lần đầu tiên tôi biết về tiêu đề đó

Khi tôi thực hiện nghiên cứu của mình về những người hỏi hoặc đề cập đến “CSS có điều kiện”, tôi đã nhiều lần nhận thấy rằng các truy vấn phương tiện là thứ gần nhất với câu lệnh “nếu” trong CSS

.section {
  display: flex;
  flex-direction: column;
}

@media (min-width: 700px) {
  .section {
    flex-direction: row;
  }
}

Nếu chiều rộng khung nhìn là 700px hoặc lớn hơn, hãy thay đổi

.card-wrapper {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
    align-items: center;
  }
}
1 của
.card-wrapper {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
    align-items: center;
  }
}
2 thành
.card-wrapper {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
    align-items: center;
  }
}
3. Đó là câu lệnh if rõ ràng phải không?

Điều tương tự cũng có thể áp dụng cho các truy vấn phương tiện như

.card-wrapper {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
    align-items: center;
  }
}
4. Trong CSS sau, kiểu di chuột sẽ chỉ được áp dụng nếu người dùng đang sử dụng chuột hoặc bàn di chuột

@media (hover: hover) {
  .card:hover {
    /* Add hover styles. */
  }
}

Truy vấn vùng chứa kích thước

Với các truy vấn vùng chứa, chúng ta có thể kiểm tra xem cha của một thành phần có kích thước cụ thể hay không và định kiểu cho thành phần con tương ứng

Làm cách nào để áp dụng điều kiện css?

.card-wrapper {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
    align-items: center;
  }
}

Tôi đã viết về các truy vấn vùng chứa nhiều lần và có một nơi để tôi chia sẻ các bản trình diễn về nó

Truy vấn vùng chứa kiểu

Tại thời điểm viết bài viết này, đây là một cờ trong Chrome Canary và được dự định cung cấp trong Chrome ổn định

Với truy vấn kiểu, chúng tôi có thể kiểm tra xem một thành phần có được đặt trong một trình bao bọc có biến CSS cụ thể hay không và nếu có, chúng tôi sẽ tạo kiểu cho nó phù hợp

Trong hình dưới đây, chúng tôi có một nội dung bài viết đến từ CMS. Chúng tôi có một phong cách mặc định cho hình và một phong cách khác có vẻ nổi bật

Làm cách nào để áp dụng điều kiện css?

Để thực hiện điều đó với truy vấn kiểu, chúng ta có thể tạo kiểu mặc định, sau đó kiểm tra xem hình có biến CSS đặc biệt để cho phép tạo kiểu tùy chỉnh hay không

figure {
  container-name: figure;
  --featured: true;
}

/* Featured figure style. */
@container figure style(--featured: true) {
  img {
    /* Custom styling */
  }

  figcaption {
    /* Custom styling */
  }
}

Và nếu không có

.card-wrapper {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
    align-items: center;
  }
}
5, chúng tôi sẽ mặc định là thiết kế hình cơ sở. Chúng ta có thể sử dụng từ khóa not để kiểm tra khi hình không có biến CSS đó

/* Default figure style. */
@container figure not style(--featured: true) {
  figcaption {
    /* Custom styling */
  }
}

Đó là một câu lệnh if, nhưng nó ẩn

Một ví dụ khác là có một thành phần được tạo kiểu khác dựa trên cha mẹ của nó. Xét hình sau

Làm cách nào để áp dụng điều kiện css?

Kiểu thẻ có thể chuyển sang màu tối nếu được đặt trong vùng chứa có biến CSS

.card-wrapper {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
    align-items: center;
  }
}
6

.special-wrapper {
  --theme: dark;
  container-name: stats;
}

@container stats style(--theme: dark) {
  .stat {
    /* Add the dark styles. */
  }
}

Nếu chúng ta đọc ở trên, nó cảm thấy như

Nếu số liệu thống kê vùng chứa có biến

.card-wrapper {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
    align-items: center;
  }
}
6, hãy thêm CSS sau

Hỗ trợ @CSS

Tính năng

.card-wrapper {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
    align-items: center;
  }
}
8 cho phép chúng tôi kiểm tra xem một tính năng CSS nhất định có được hỗ trợ trong trình duyệt hay không

@supports (aspect-ratio: 1) {
  .card-thumb {
    aspect-ratio: 1;
  }
}

Chúng tôi cũng có thể kiểm tra sự hỗ trợ của bộ chọn, như

.card-wrapper {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
    align-items: center;
  }
}
9

@supports selector(:has(p)) {
  .card-thumb {
    aspect-ratio: 1;
  }
}

Gói Flexbox

Theo MDN

Thuộc tính CSS flex-wrap đặt xem các mục flex được buộc trên một dòng hay có thể bao thành nhiều dòng. Nếu cho phép gói, nó sẽ đặt hướng trong đó các dòng được xếp chồng lên nhau

Thuộc tính

@media (hover: hover) {
  .card:hover {
    /* Add hover styles. */
  }
}
8 cho phép các mục linh hoạt được ngắt dòng thành một dòng mới trong trường hợp không có đủ chỗ trống

Xem xét ví dụ sau. Chúng tôi có một thẻ chứa tiêu đề và liên kết. Khi không gian nhỏ, mỗi mục con nên ngắt thành một dòng mới

.card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.card__title {
  margin-right: 12px;
}

Làm cách nào để áp dụng điều kiện css?

Điều đó nghe có vẻ giống như một điều có điều kiện đối với tôi. Nếu không có chỗ trống, hãy ngắt dòng thành (các) dòng mới

Làm cách nào để áp dụng điều kiện css?

Khi mỗi mục linh hoạt kết thúc thành một dòng, làm cách nào để quản lý khoảng cách giữa các mục linh hoạt, bạn hỏi? . Vấn đề là chúng tôi không biết khi nào các mục sẽ được bọc vì nó phụ thuộc vào nội dung

Điều tốt là khoảng cách có thể có điều kiện với thuộc tính

@media (hover: hover) {
  .card:hover {
    /* Add hover styles. */
  }
}
7. Khi chúng ở trên cùng một dòng, khoảng cách sẽ nằm ngang và với nhiều dòng, khoảng cách sẽ nằm dọc

.section {
  display: flex;
  flex-direction: column;
}

@media (min-width: 700px) {
  .section {
    flex-direction: row;
  }
}
0

Đây là một trong những tính năng flexbox yêu thích của tôi. Dưới đây là hình ảnh về cách

@media (hover: hover) {
  .card:hover {
    /* Add hover styles. */
  }
}
7 chuyển đổi khoảng cách

Làm cách nào để áp dụng điều kiện css?

Nhân tiện, tôi coi

@media (hover: hover) {
  .card:hover {
    /* Add hover styles. */
  }
}
8 là CSS phòng thủ. Tôi gần như thêm nó vào bất kỳ thùng chứa linh hoạt nào để tránh mọi sự cố không mong muốn

Hơn nữa, tài sản

figure {
  container-name: figure;
  --featured: true;
}

/* Featured figure style. */
@container figure style(--featured: true) {
  img {
    /* Custom styling */
  }

  figcaption {
    /* Custom styling */
  }
}
6 cũng có thể hoạt động có điều kiện. Xét ví dụ sau. Tôi đã thêm
figure {
  container-name: figure;
  --featured: true;
}

/* Featured figure style. */
@container figure style(--featured: true) {
  img {
    /* Custom styling */
  }

  figcaption {
    /* Custom styling */
  }
}
8 vào tiêu đề thẻ để làm cho nó lấp đầy chỗ trống

.section {
  display: flex;
  flex-direction: column;
}

@media (min-width: 700px) {
  .section {
    flex-direction: row;
  }
}
1

Làm cách nào để áp dụng điều kiện css?

Điều đó hoạt động tốt, nhưng khi chiều rộng của thẻ quá nhỏ, tiêu đề thẻ sẽ ngắt dòng thành một dòng mới

Làm cách nào để áp dụng điều kiện css?

Không có gì quá tệ, nhưng chúng ta có thể làm tốt hơn không? . “Này, nếu chiều rộng của bạn nhỏ hơn X, hãy ngắt thành một dòng mới”. Chúng ta có thể làm điều đó bằng cách đặt thuộc tính

figure {
  container-name: figure;
  --featured: true;
}

/* Featured figure style. */
@container figure style(--featured: true) {
  img {
    /* Custom styling */
  }

  figcaption {
    /* Custom styling */
  }
}
9

Trong CSS sau, tôi đặt chiều rộng tối đa của tiêu đề thành

/* Default figure style. */
@container figure not style(--featured: true) {
  figcaption {
    /* Custom styling */
  }
}
0. Nếu ít hơn, nó sẽ quấn thành một dòng mới

.section {
  display: flex;
  flex-direction: column;
}

@media (min-width: 700px) {
  .section {
    flex-direction: row;
  }
}
2

Làm cách nào để áp dụng điều kiện css?

Để tìm hiểu thêm về thuộc tính flex trong CSS, tôi đã viết một bài chi tiết về điều đó

Đi xa hơn và giải thích về việc thêm flex-grow, string. vv trên đường đi

Bộ chọn .card-wrapper { container-type: inline-size; } @container (min-width: 400px) { .card { display: flex; align-items: center; } } 9

Đối với tôi, đây là điều gần nhất với câu lệnh “if” trong CSS ngay bây giờ. Nó hoạt động theo cách bắt chước câu lệnh if/else

Thay đổi kiểu thẻ

Trong ví dụ này, chúng ta cần có hai kiểu khác nhau, tùy thuộc vào thẻ có hình ảnh hay không

Làm cách nào để áp dụng điều kiện css?

Nếu thẻ có hình ảnh

.section {
  display: flex;
  flex-direction: column;
}

@media (min-width: 700px) {
  .section {
    flex-direction: row;
  }
}
3

Và nếu nó không có hình ảnh

.section {
  display: flex;
  flex-direction: column;
}

@media (min-width: 700px) {
  .section {
    flex-direction: row;
  }
}
4

Đó là một tuyên bố nếu, và tôi thực sự nghĩ như vậy. Xin lỗi, tôi đã quá phấn khích

Ẩn hoặc hiển thị các mục biểu mẫu có điều kiện

Trong các biểu mẫu, thông thường có một trường đầu vào hoặc một nhóm đầu vào bị ẩn theo mặc định và nó sẽ được hiển thị sau khi người dùng kích hoạt một tùy chọn từ menu

/* Default figure style. */
@container figure not style(--featured: true) {
  figcaption {
    /* Custom styling */
  }
}
2

Làm cách nào để áp dụng điều kiện css?

Với CSS

.card-wrapper {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
    align-items: center;
  }
}
9, chúng tôi có thể kiểm tra xem tùy chọn
/* Default figure style. */
@container figure not style(--featured: true) {
  figcaption {
    /* Custom styling */
  }
}
4 có được chọn hay không và nếu có, hãy hiển thị trường nhập liệu

.section {
  display: flex;
  flex-direction: column;
}

@media (min-width: 700px) {
  .section {
    flex-direction: row;
  }
}
5

cảnh báo

Khi có một thông báo cảnh báo trên một trang, chẳng hạn như cảnh báo chính về điều gì đó không ổn trong hệ thống, chúng tôi có thể cần phải làm cho thông báo đó rõ ràng hơn nữa

Làm cách nào để áp dụng điều kiện css?

Trong ví dụ này, chúng tôi có một cảnh báo trong trang và với CSS

.card-wrapper {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
    align-items: center;
  }
}
9, chúng tôi có thể kiểm tra xem trang tổng quan có cảnh báo hay không và nếu có, hãy tạo kiểu cho phù hợp

.section {
  display: flex;
  flex-direction: column;
}

@media (min-width: 700px) {
  .section {
    flex-direction: row;
  }
}
6

Rất hữu ích

Thay đổi cột lưới dựa trên số lượng mục

Bạn đã bao giờ cần hiển thị và thay đổi độ rộng của cột trong lưới dựa trên số lượng mục con chưa?

Làm cách nào để áp dụng điều kiện css?

CSS

.card-wrapper {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
    align-items: center;
  }
}
9 có thể làm điều đó, có điều kiện

.section {
  display: flex;
  flex-direction: column;
}

@media (min-width: 700px) {
  .section {
    flex-direction: row;
  }
}
7

Trong ví dụ này, nó nói rằng nếu

/* Default figure style. */
@container figure not style(--featured: true) {
  figcaption {
    /* Custom styling */
  }
}
7 có năm mục, thì biến
/* Default figure style. */
@container figure not style(--featured: true) {
  figcaption {
    /* Custom styling */
  }
}
8 sẽ thay đổi thành
/* Default figure style. */
@container figure not style(--featured: true) {
  figcaption {
    /* Custom styling */
  }
}
9

Để tìm hiểu thêm về bộ chọn CSS

.card-wrapper {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
    align-items: center;
  }
}
9, tôi đã viết một bài có rất nhiều ví dụ

Hàm lưới CSS .special-wrapper { --theme: dark; container-name: stats; } @container stats style(--theme: dark) { .stat { /* Add the dark styles. */ } } 1

Cách thức hoạt động của

.special-wrapper {
  --theme: dark;
  container-name: stats;
}

@container stats style(--theme: dark) {
  .stat {
    /* Add the dark styles. */
  }
}
1 trong lưới CSS là có điều kiện. Khi chúng tôi sử dụng từ khóa
.special-wrapper {
  --theme: dark;
  container-name: stats;
}

@container stats style(--theme: dark) {
  .stat {
    /* Add the dark styles. */
  }
}
3, chúng tôi đang nói với trình duyệt. “nếu có chỗ trống, hãy làm cho các mục lưới lấp đầy chỗ trống”

Làm cách nào để áp dụng điều kiện css?

Bộ kết hợp anh chị em liền kề

Bộ kết hợp đó khớp với phần tử thứ hai xuất hiện ngay sau phần tử

Trong ví dụ sau, nếu một phần tử

.special-wrapper {
  --theme: dark;
  container-name: stats;
}

@container stats style(--theme: dark) {
  .stat {
    /* Add the dark styles. */
  }
}
4 được theo sau bởi một phần tử
.special-wrapper {
  --theme: dark;
  container-name: stats;
}

@container stats style(--theme: dark) {
  .stat {
    /* Add the dark styles. */
  }
}
5, thì phần tử
.special-wrapper {
  --theme: dark;
  container-name: stats;
}

@container stats style(--theme: dark) {
  .stat {
    /* Add the dark styles. */
  }
}
5 sẽ nhận được các kiểu tùy chỉnh

.section {
  display: flex;
  flex-direction: column;
}

@media (min-width: 700px) {
  .section {
    flex-direction: row;
  }
}
8

Làm cách nào để áp dụng điều kiện css?

Lề trên của

.special-wrapper {
  --theme: dark;
  container-name: stats;
}

@container stats style(--theme: dark) {
  .stat {
    /* Add the dark styles. */
  }
}
5 đã được sửa đổi có điều kiện

Lớp giả .special-wrapper { --theme: dark; container-name: stats; } @container stats style(--theme: dark) { .stat { /* Add the dark styles. */ } } 8

Một tính năng thú vị khác trong CSS là

.special-wrapper {
  --theme: dark;
  container-name: stats;
}

@container stats style(--theme: dark) {
  .stat {
    /* Add the dark styles. */
  }
}
8. Giả sử bạn muốn kiểm tra xem đầu vào có được đặt tiêu điểm hay không và nếu có, hãy thêm đường viền vào phần gốc của nó

Xem xét ví dụ sau

Làm cách nào để áp dụng điều kiện css?

Chúng tôi có một thành phần tìm kiếm. Khi đầu vào được tập trung, toàn bộ trình bao bọc sẽ có một đường viền. Với

.special-wrapper {
  --theme: dark;
  container-name: stats;
}

@container stats style(--theme: dark) {
  .stat {
    /* Add the dark styles. */
  }
}
8, chúng tôi có thể kiểm tra xem đầu vào có được tập trung hay không và định kiểu cho phù hợp

.section {
  display: flex;
  flex-direction: column;
}

@media (min-width: 700px) {
  .section {
    flex-direction: row;
  }
}
9

Làm cách nào để áp dụng điều kiện css?

Bộ chọn @supports (aspect-ratio: 1) { .card-thumb { aspect-ratio: 1; } } 1

Lớp giả này loại trừ các phần tử không khớp với một bộ chọn nhất định. Ví dụ: có thể hữu ích khi kiểm tra xem một mục có phải là mục cuối cùng hay không và nếu có, hãy xóa đường viền

@media (hover: hover) {
  .card:hover {
    /* Add hover styles. */
  }
}
0

Làm cách nào để áp dụng điều kiện css?

Bán kính đường viền có điều kiện

Cách đây một thời gian, tôi đã viết về cách tôi phát hiện ra một cách tiếp cận có điều kiện thú vị để thêm

@supports (aspect-ratio: 1) {
  .card-thumb {
    aspect-ratio: 1;
  }
}
2 cho một thẻ trên trang web Facebook

Làm cách nào để áp dụng điều kiện css?

Ý tưởng là khi thẻ bằng hoặc lớn hơn khung nhìn, bán kính phải là ____20_______3, nếu không, thì là ____20_______4

@media (hover: hover) {
  .card:hover {
    /* Add hover styles. */
  }
}
1

Bạn có thể đọc bài viết ở đây

Dấu tách dòng có điều kiện

Một trường hợp sử dụng thú vị khác mà CSS hoạt động có điều kiện là có một dấu phân cách dòng chuyển đổi hướng và kích thước của nó dựa trên việc các mục có được bao bọc hay không

Trong hình dưới đây, các bạn chú ý đường kẻ phân cách giữa 2 phần

Làm cách nào để áp dụng điều kiện css?

Tôi muốn dòng đó chuyển đổi theo chiều ngang khi các mục linh hoạt được xếp chồng lên nhau. Bằng cách sử dụng so sánh

@media (hover: hover) {
  .card:hover {
    /* Add hover styles. */
  }
}
8 và
@supports (aspect-ratio: 1) {
  .card-thumb {
    aspect-ratio: 1;
  }
}
6, chúng tôi có thể đạt được điều đó

@media (hover: hover) {
  .card:hover {
    /* Add hover styles. */
  }
}
2

Điều này đã được viết trên blog của tôi và giải pháp

@supports (aspect-ratio: 1) {
  .card-thumb {
    aspect-ratio: 1;
  }
}
7 là một gợi ý của Temani Afif

Làm cách nào để áp dụng điều kiện css?

kích thước nội tại. nội dung phù hợp

Từ khóa

@supports (aspect-ratio: 1) {
  .card-thumb {
    aspect-ratio: 1;
  }
}
8 là sự kết hợp của
@supports (aspect-ratio: 1) {
  .card-thumb {
    aspect-ratio: 1;
  }
}
9 và
@supports selector(:has(p)) {
  .card-thumb {
    aspect-ratio: 1;
  }
}
0. Tôi biết, nó không rõ ràng. Hãy cùng xem sơ đồ sau

Làm cách nào để áp dụng điều kiện css?

Nếu chúng tôi có một phần tử với

@supports selector(:has(p)) {
  .card-thumb {
    aspect-ratio: 1;
  }
}
1, nó sẽ hoạt động có điều kiện theo sơ đồ trên

@media (hover: hover) {
  .card:hover {
    /* Add hover styles. */
  }
}
3

Đây là video về những gì đang xảy ra khi thay đổi kích thước

Tôi đã viết về kích thước nội tại trên blog của mình nếu bạn quan tâm

chức năng so sánh

Các hàm so sánh CSS là

@supports selector(:has(p)) {
  .card-thumb {
    aspect-ratio: 1;
  }
}
2,
@supports selector(:has(p)) {
  .card-thumb {
    aspect-ratio: 1;
  }
}
3 và
@supports (aspect-ratio: 1) {
  .card-thumb {
    aspect-ratio: 1;
  }
}
7. Một ví dụ cụ thể mà tôi cảm thấy có điều kiện là điều mà tôi tình cờ bắt gặp trong một bài báo gần đây tôi đã viết

Làm cách nào để áp dụng điều kiện css?

Ý tưởng là tôi có hai vùng chứa khác nhau, một vùng chứa tiêu đề bài viết (tiêu đề và ngày tháng) và vùng chứa nội dung chính cộng với phần phụ

Tôi muốn căn chỉnh cạnh của nội dung tiêu đề với nội dung cơ thể

Trên thiết bị di động, tôi muốn phần đệm từ bên trái là

@supports selector(:has(p)) {
  .card-thumb {
    aspect-ratio: 1;
  }
}
5, nhưng trên các khung nhìn lớn hơn, nó sẽ động theo chiều rộng của khung nhìn

Làm cách nào để áp dụng điều kiện css?

Để làm được điều đó, tôi có thể sử dụng hàm

@supports selector(:has(p)) {
  .card-thumb {
    aspect-ratio: 1;
  }
}
3 để chọn một trong hai giá trị (1rem hoặc giá trị động) theo điều kiện

@media (hover: hover) {
  .card:hover {
    /* Add hover styles. */
  }
}
4

Bạn có thể tìm hiểu thêm về kỹ thuật này trong bài viết của tôi Inside the mind of a frontend developer. bố cục bài viết

lớp giả

Có rất nhiều lớp giả trong CSS, nhưng những lớp mà tôi nghĩ đến là

@supports selector(:has(p)) {
  .card-thumb {
    aspect-ratio: 1;
  }
}
7 và
@supports selector(:has(p)) {
  .card-thumb {
    aspect-ratio: 1;
  }
}
8

@media (hover: hover) {
  .card:hover {
    /* Add hover styles. */
  }
}
5

Nếu đầu vào được chọn, hãy thêm các kiểu đó vào

@supports selector(:has(p)) {
  .card-thumb {
    aspect-ratio: 1;
  }
}
9. Nếu đầu vào được tập trung. và như thế

Nhưng mà. CSS không phải là ngôn ngữ lập trình

Tôi biết, cảm ơn vì đã cho tôi biết. Đây là lập luận mà tôi nghe rất nhiều. Cá nhân tôi không có ý kiến ​​mạnh mẽ về điều đó, nhưng CSS có điều kiện theo nhiều cách

Trên thực tế, hầu hết các ví dụ trên không thể được triển khai trong Javascript nếu không sử dụng câu lệnh điều kiện

Phần kết luận

Tôi rất thích viết bài này vì nó nhắc tôi nhớ tại sao tôi thích sử dụng CSS. Đối với tôi, CSS giống như một siêu năng lực vì nó cho phép tôi đưa ra rất nhiều quyết định thiết kế thông qua các tính năng có điều kiện của nó. Làm việc với các công cụ thiết kế đôi khi có thể cảm thấy hạn chế vì tôi cảm thấy như bị bó buộc trong một số bức tường nhất định. Tôi nghĩ rằng khả năng tạo các quy tắc có điều kiện với CSS là điều khiến nó trở nên khác biệt và khiến nó trở nên mạnh mẽ trong thiết kế web

Điều đó không có nghĩa là tôi thiết kế trên trình duyệt. Tôi coi các công cụ thiết kế như một khung vẽ mở để thử và thử nghiệm các ý tưởng thiết kế và xây dựng các sản phẩm giao diện người dùng bóng bẩy

Làm cách nào để đặt điều kiện trong CSS?

Không, chúng tôi không thể sử dụng điều kiện if-else trong CSS vì CSS không hỗ trợ logic. Nhưng chúng ta có thể sử dụng một số lựa chọn thay thế cho if-else được thảo luận bên dưới. Phương pháp 1. Trong phương pháp này, chúng tôi sẽ sử dụng các lớp trong tệp HTML để đạt được điều này . Chúng tôi sẽ xác định các tên lớp khác nhau theo các điều kiện mà chúng tôi muốn áp dụng trong CSS.

Làm cách nào để áp dụng CSS dựa trên điều kiện trong HTML?

Quy tắc có điều kiện CSS chẳng qua là một tính năng của CSS trong đó kiểu CSS được áp dụng dựa trên một điều kiện cụ thể . Vì vậy, điều kiện ở đây có thể đúng hoặc sai và dựa trên các câu lệnh/kiểu sẽ được thực thi. Các quy tắc này cuối cùng thuộc quy tắc CSS khi chúng bắt đầu bằng @.

Làm cách nào để áp dụng lớp CSS một cách có điều kiện trong JavaScript?

Một lớp CSS có thể được áp dụng có điều kiện trong React bằng cách sử dụng JavaScript đơn giản. .
Đặt tất cả các lớp CSS vào một mảng
Sử dụng toán tử bậc ba để đặt một chuỗi rỗng làm lớp khi điều kiện sai
Tham gia mảng bằng cách sử dụng khoảng trắng, để chuyển đổi nó thành Tên lớp

Tôi có thể viết if bằng CSS không?

Bạn không thể sử dụng câu lệnh if trong CSS cũng như trong HTML. Chúng không phải là ngôn ngữ lập trình, không có logic được xây dựng.