Làm cách nào để áp dụng điều kiện css?
lựa chọn 1 Show
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 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ệnBạ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 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
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
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 FigmaTạ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 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
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
Đâ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ệntruy vấn phương tiệnChú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
Điều tương tự cũng có thể áp dụng cho các truy vấn phương tiện như 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
Truy vấn vùng chứa kích thướcVớ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
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ểuTạ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 Để 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
Và nếu không có 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 đó
Đó 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 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 6
Nếu chúng ta đọc ở trên, nó cảm thấy như
Hỗ trợ @CSSTính năng 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
Chúng tôi cũng có thể kiểm tra sự hỗ trợ của bộ chọn, như 9
Gói FlexboxTheo MDN
Thuộc tính 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ốngXem 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
Đ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 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 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 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 7 chuyển đổi khoảng cáchNhân tiện, tôi coi 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ốnTài sản figure { container-name: figure; --featured: true; } /* Featured figure style. */ @container figure style(--featured: true) { img { /* Custom styling */ } figcaption { /* Custom styling */ } } 6Hơn nữa, tài sản 6 cũng có thể hoạt động có điều kiện. Xét ví dụ sau. Tôi đã thêm 8 vào tiêu đề thẻ để làm cho nó lấp đầy chỗ trống 1Đ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 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 9Trong CSS sau, tôi đặt chiều rộng tối đa của tiêu đề thành 0. Nếu ít hơn, nó sẽ quấn thành một dòng mới 2Để 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 Nếu thẻ có hình ảnh 3Và nếu nó không có hình ảnh 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ệnTrong 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 2Với CSS 9, chúng tôi có thể kiểm tra xem tùy chọn 4 có được chọn hay không và nếu có, hãy hiển thị trường nhập liệu 5cảnh báoKhi 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 Trong ví dụ này, chúng tôi có một cảnh báo trong trang và với CSS 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 6Rất hữu ích Thay đổi cột lưới dựa trên số lượng mụcBạ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? CSS 9 có thể làm điều đó, có điều kiện 7Trong ví dụ này, nó nói rằng nếu 7 có năm mục, thì biến 8 sẽ thay đổi thành 9Để tìm hiểu thêm về bộ chọn CSS 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. */ } } 1Cách thức hoạt động của 1 trong lưới CSS là có điều kiện. Khi chúng tôi sử dụng từ khóa 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”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ử 4 được theo sau bởi một phần tử 5, thì phần tử 5 sẽ nhận được các kiểu tùy chỉnh 8Lề trên của 5 đã được sửa đổi có điều kiệnLớp giả .special-wrapper { --theme: dark; container-name: stats; } @container stats style(--theme: dark) { .stat { /* Add the dark styles. */ } } 8Một tính năng thú vị khác trong CSS là 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 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 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 9Bộ chọn @supports (aspect-ratio: 1) { .card-thumb { aspect-ratio: 1; } } 1Lớ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 0Bán kính đường viền có điều kiệnCá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 2 cho một thẻ trên trang web FacebookÝ 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 1Bạn có thể đọc bài viết ở đây Dấu tách dòng có điều kiệnMộ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 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 8 và 6, chúng tôi có thể đạt được điều đó 2Điều này đã được viết trên blog của tôi và giải pháp 7 là một gợi ý của Temani Afifkích thước nội tại. nội dung phù hợpTừ khóa 8 là sự kết hợp của 9 và 0. Tôi biết, nó không rõ ràng. Hãy cùng xem sơ đồ sauNếu chúng tôi có một phần tử với 1, nó sẽ hoạt động có điều kiện theo sơ đồ trên 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ánhCác hàm so sánh CSS là 2, 3 và 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Ý 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à 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 điều đó, tôi có thể sử dụng hàm 3 để chọn một trong hai giá trị (1rem hoặc giá trị động) theo điều kiện 4Bạ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à 7 và 8 5Nếu đầu vào được chọn, hãy thêm các kiểu đó vào 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ìnhTô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ậnTô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. |