Hướng dẫn can you have logic in css? - bạn có thể có logic trong css?

Gói lên

CSS rất có khả năng làm thay đổi các hệ thống bố trí thông minh và phản ứng. Các cấu trúc và thuật toán kiểm soát của nó có thể hơi kỳ lạ so với các ngôn ngữ khác, nhưng chúng ở đó và chúng hoàn thành nhiệm vụ. Hãy dừng lại chỉ mô tả một số phong cách và bắt đầu làm cho chúng hoạt động.

Tôi có thể viết nếu tuyên bố trong CSS không?

Bạn không thể sử dụng các câu lệnh trong CSS và bạn cũng không thể 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. Không nếu/khác, các biến, chức năng, phương pháp, v.v.

3 Quy tắc CSS là gì?

:root {
    --color: red;
}
span {
    color: var(--color, blue);
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Tất cả các biến toàn cầu được xác định ở đầu và được sắp xếp theo chế độ xem. Phần đó một cách hiệu quả trở thành định nghĩa của hành vi, xóa các câu hỏi như:

Những khía cạnh toàn cầu nào của bảng kiểu chúng ta có? Tôi đang nghĩ về những thứ như :root { color: red; /* else */ } @media (min-width > 600px) { :root { color: blue; /* if */ } } 5, màu sắc, các biện pháp lặp lại, v.v.

Chúng ta có những khía cạnh thường xuyên thay đổi nào? Chiều rộng container, bố cục lưới và tương tự đến với tâm trí.

Giá trị nên thay đổi giữa các chế độ xem như thế nào? Những phong cách toàn cầu áp dụng cho chế độ xem nào?

[data-attr='true'] {
    /* if */
}
[data-attr='false'] {
    /* elseif */
}
:not([data-attr]) {
    /* else */
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Dưới đây là các định nghĩa quy tắc, được sắp xếp theo thành phần. Các truy vấn truyền thông không cần thiết ở đây nữa, bởi vì chúng đã được xác định ở đầu và đưa vào các biến. Chúng ta chỉ có thể mã theo các kiểu dáng không bị gián đoạn vào thời điểm này.

:checked {
    /* if */
}
:not(:checked) {
    /* else */
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Đọc tham số băm

:root {
    color: red; /* else */
}
@media (min-width > 600px) {
    :root {
        color: blue; /* if */
    }
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Một trường hợp đặc biệt của các lớp giả là bộ chọn :root { color: red; /* else */ } @media (min-width > 600px) { :root { color: blue; /* if */ } } 6, có thể đọc đoạn băm của URL. Đây là bản demo sử dụng thợ máy này để mô phỏng trải nghiệm giống như spa:

Tôi đã viết một bài viết về điều đó. Chỉ cần lưu ý rằng điều này có một số ý nghĩa tiếp cận nghiêm trọng và cần một số cơ chế JavaScript để thực sự không có rào cản. Đừng làm điều này trong một môi trường trực tiếp.

main {
    counter-reset: section;
}

section {
    counter-increment: section;
    counter-reset: section;
}

section > h2::before {
    content: 'Headline ' counter(section) ': ';
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Nhưng điều gì sẽ xảy ra nếu bạn muốn sử dụng một vòng lặp để xác định mẫu bố cục định kỳ? Loại vòng lặp này tối nghĩa hơn một chút: đó là thuộc tính ____20 của lưới.

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Điều này lấp đầy lưới với càng nhiều yếu tố càng tốt, trong khi chia tỷ lệ chúng để lấp đầy không gian có sẵn, nhưng chia chúng thành nhiều hàng khi cần. Nó lặp lại miễn là nó tìm thấy các vật phẩm và giới hạn chúng với chiều rộng tối thiểu là 300px và chiều rộng tối đa của một phần của kích thước riêng của nó. Có lẽ dễ dàng nhìn thấy hơn là giải thích:

Và cuối cùng, có bộ chọn vòng lặp. Họ lấy một đối số, có thể là một công thức để chọn chính xác.

section:nth-child(2n) {
    /* selects every even element */
}

section:nth-child(4n + 2) {
    /* selects every fourth, starting from the 2nd */
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Đối với các trường hợp cạnh thực sự đặc biệt, bạn có thể kết hợp

:checked {
    /* if */
}
:not(:checked) {
    /* else */
}

1 với

:checked {
    /* if */
}
:not(:checked) {
    /* else */
}

2, như:

section:nth-child(3n):not(:nth-child(6)) {
    /* selects every 3rd element, but not the 6th */
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Bạn có thể thay thế

:checked {
    /* if */
}
:not(:checked) {
    /* else */
}

1 bằng

:checked {
    /* if */
}
:not(:checked) {
    /* else */
}

4 và

:checked {
    /* if */
}
:not(:checked) {
    /* else */
}

5 để thay đổi phạm vi của một vài ví dụ cuối cùng.

Cổng logic

Ana Tudor đã viết một bài báo về CSS Logic Gates. Những người làm việc dựa trên ý tưởng kết hợp các biến với

:checked {
    /* if */
}
:not(:checked) {
    /* else */
}

6. Sau đó, cô tiếp tục mô hình 3D và các đối tượng hoạt hình với điều đó. Nó đọc giống như Arcane Magic, trở nên điên rồ hơn khi bài viết tiếp tục, và nói chung là một trong những giải thích tốt nhất tại sao CSS trên thực tế là ngôn ngữ lập trình.

Kỹ thuật

Bộ chọn cú

* + * {
    margin-top: 1rem;
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Bộ chọn OWL chọn mọi mục theo một mục. Áp dụng

:checked {
    /* if */
}
:not(:checked) {
    /* else */
}

7 cho việc thêm một cách hiệu quả khoảng cách giữa các mục, như

:checked {
    /* if */
}
:not(:checked) {
    /* else */
}

8, nhưng không có hệ thống lưới. Điều đó cũng có nghĩa là nó có thể tùy chỉnh hơn. Bạn có thể ghi đè lên

:checked {
    /* if */
}
:not(:checked) {
    /* else */
}

7 của mình và thích ứng với bất kỳ loại nội dung nào. Bạn muốn có

:root {
    color: red; /* else */
}
@media (min-width > 600px) {
    :root {
        color: blue; /* if */
    }
}

0 không gian giữa mỗi mục, nhưng

:root {
    color: red; /* else */
}
@media (min-width > 600px) {
    :root {
        color: blue; /* if */
    }
}

1 trước một tiêu đề? Điều đó dễ thực hiện với bộ chọn cú hơn là trong lưới.

Kevin Pennekamp có một bài viết chuyên sâu về nó thậm chí giải thích thuật toán của nó trong mã giả.

Kiểu dáng có điều kiện

Chúng tôi có thể tạo các công tắc trong mã CSS của mình để bật và tắt các quy tắc nhất định với các biến và

:checked {
    /* if */
}
:not(:checked) {
    /* else */
}

6. Điều này cho chúng ta điều kiện rất linh hoạt.

.box {
    padding: 1rem 1rem 1rem calc(1rem + var(--s) * 4rem);
    color: hsl(0, calc(var(--s, 0) * 100%), 80%);
    background-color: hsl(0, calc(var(--s, 0) * 100%), 15%);
    border: calc(var(--s, 0) * 1px) solid hsl(0, calc(var(--s, 0) * 100%), 80%);
}

.icon {
    opacity: calc(var(--s) * 100%);
    transform: scale(calc(var(--s) * 100%));
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Tùy thuộc vào giá trị của

:root {
    color: red; /* else */
}
@media (min-width > 600px) {
    :root {
        color: blue; /* if */
    }
}

3,

:root {
    color: red; /* else */
}
@media (min-width > 600px) {
    :root {
        color: blue; /* if */
    }
}

4, nó sẽ kích hoạt hoặc tắt các kiểu cảnh báo của nó.

Màu tương phản tự động

Chúng ta hãy thực hiện cùng một logic một bước nữa và tạo một biến màu phụ thuộc vào độ tương phản của nó với màu nền:

[data-attr='true'] {
    /* if */
}
[data-attr='false'] {
    /* elseif */
}
:not([data-attr]) {
    /* else */
}

0

Nhập chế độ FullScreenen EXIT Mode FullScreen

Đoạn trích này tính toán màu nền từ các giá trị HSL và màu phông chữ đen hoặc trắng, bằng cách đảo ngược giá trị độ sáng của nền. Điều này một mình có thể dẫn đến độ tương phản màu thấp (phông chữ màu xám 40% trên nền xám 60% là khá không thể đọc được), vì vậy tôi sẽ trừ một giá trị ngưỡng (điểm mà màu chuyển từ màu trắng sang đen), nhân nó với Một giá trị cực kỳ cao như 1000 và kẹp nó từ 10% đến 95%, để có được độ nhẹ hợp lệ cuối cùng. Tất cả đều có thể kiểm soát được bằng cách chỉnh sửa bốn biến ở đầu đoạn trích.

Phương pháp này cũng có thể được sử dụng để viết logic màu phức tạp và các chủ đề tự động, chỉ dựa trên các giá trị HSL.

Làm sạch bảng kiểu

Hãy kết hợp những gì chúng ta có cho đến nay để làm sạch bảng kiểu. Sắp xếp mọi thứ theo chế độ xem có vẻ hơi giống spaghetti, nhưng việc sắp xếp nó theo thành phần không cảm thấy tốt hơn. Với các biến chúng ta có thể có những điều tốt nhất của cả hai thế giới:

[data-attr='true'] {
    /* if */
}
[data-attr='false'] {
    /* elseif */
}
:not([data-attr]) {
    /* else */
}

1

Nhập chế độ FullScreenen EXIT Mode FullScreen

Tất cả các biến toàn cầu được xác định ở đầu và được sắp xếp theo chế độ xem. Phần đó một cách hiệu quả trở thành định nghĩa của hành vi, xóa các câu hỏi như:

• Những khía cạnh toàn cầu nào của bảng kiểu chúng ta có? Tôi đang nghĩ về những thứ như

  :root {
      color: red; /* else */
  }
  @media (min-width > 600px) {
      :root {
          color: blue; /* if */
      }
  }
  

  5, màu sắc, các biện pháp lặp lại, v.v.
• Chúng ta có những khía cạnh thường xuyên thay đổi nào? Chiều rộng container, bố cục lưới và tương tự đến với tâm trí.
• Giá trị nên thay đổi giữa các chế độ xem như thế nào? Những phong cách toàn cầu áp dụng cho chế độ xem nào?

Dưới đây là các định nghĩa quy tắc, được sắp xếp theo thành phần. Các truy vấn truyền thông không cần thiết ở đây nữa, bởi vì chúng đã được xác định ở đầu và đưa vào các biến. Chúng ta chỉ có thể mã theo các kiểu dáng không bị gián đoạn vào thời điểm này.

Đọc tham số băm

Một trường hợp đặc biệt của các lớp giả là bộ chọn

:root {
    color: red; /* else */
}
@media (min-width > 600px) {
    :root {
        color: blue; /* if */
    }
}

6, có thể đọc đoạn băm của URL. Đây là bản demo sử dụng thợ máy này để mô phỏng trải nghiệm giống như spa:

Tôi đã viết một bài viết về điều đó. Chỉ cần lưu ý rằng điều này có một số ý nghĩa tiếp cận nghiêm trọng và cần một số cơ chế JavaScript để thực sự không có rào cản. Đừng làm điều này trong một môi trường trực tiếp.

Đặt các biến trong JavaScript

Hiện tại, việc điều khiển các biến CSS đã trở thành một công cụ rất mạnh mẽ. Chúng ta cũng có thể tận dụng rằng trong JavaScript:

[data-attr='true'] {
    /* if */
}
[data-attr='false'] {
    /* elseif */
}
:not([data-attr]) {
    /* else */
}

2

Nhập chế độ FullScreenen EXIT Mode FullScreen

Các ví dụ codepen ở trên hoạt động như thế.

Gói lên

CSS rất có khả năng làm thay đổi các hệ thống bố trí thông minh và phản ứng. Các cấu trúc và thuật toán kiểm soát của nó có thể hơi kỳ lạ so với các ngôn ngữ khác, nhưng chúng ở đó và chúng hoàn thành nhiệm vụ. Hãy dừng lại chỉ mô tả một số phong cách và bắt đầu làm cho chúng hoạt động.

Tôi có thể viết nếu tuyên bố trong CSS không?

3 Quy tắc CSS là gì?

3 yếu tố của cú pháp CSS là gì?

Có hoặc vận hành trong CSS?