CSS đang trở nên điên cuồng, tôi nói cho bạn biết điều gì

Được xuất bản lại bởi Plato

Người theo dõi: 0

Khi ai đó chỉ ngồi một chỗ để xem CSS phát triển, có cảm giác như chúng ta đang ở một trong những thời điểm đổi mới nóng bỏng nhất trong lịch sử CSS. Nó thực sự là một cái gì đó khi chúng tôi có flexbox trên tất cả các trình duyệt và không lâu sau đó là lưới. Họ đã thay đổi trò chơi từ CSS giống như một bộ sưu tập các thủ thuật khó xử sang một thứ gì đó hợp lý hơn và hợp thời đại hơn.

Cảm giác đó cứ ngày càng chân thật hơn mọi lúc. Chỉ trong thời gian ngắn vừa qua, đây là danh sách những điều đang xảy ra.

⚠️🤷 Cú pháp có thể không giống hoàn toàn với bất kỳ đoạn mã nào bên dưới khi chúng được giao hàng thật. 🤷⚠️

Làm tổ bản địa

Native Nesting đã trở thành một Bản thảo công khai đầu tiên, có nghĩa là nó gần trở thành một điều thực tế hơn bao giờ hết. Rất nhiều người sử dụng bộ tiền xử lý chỉ để thuận tiện cho việc lồng ghép và điều này sẽ hữu ích cho những người muốn đơn giản hóa các công cụ xây dựng của họ để tránh điều đó.

Tôi đặc biệt thích cách bạn có thể lồng các quy tắc có điều kiện.

.card { & .title { } & .body { } @media (min-inline-size > 1000px) { & { } } @nest body.dark & { }
}

Tôi cũng đã nghe những lời thì thầm về việc đây cũng là một ý tưởng khả thi, điều này giúp tránh yêu cầu & trên các bộ chọn đơn giản và cũng có thể tránh @nest ở tất cả.

.card {{ .title { } .body { } body.dark & { }
}}

Truy vấn vùng chứa

Truy vấn vùng chứa chỉ là Bản nháp của Biên tập viên (Mô-đun quản lý CSS cấp 3) vào lúc này, nhưng họ đã có triển khai trong Chrome (có cờ). Đây là một vấn đề rất lớn vì chúng cho phép chúng tôi đưa ra quyết định về kiểu dáng dựa trên kích thước của chính vùng chứa, điều này trong thế giới định hướng thành phần ngày nay, chỉ là một ý tưởng hoàn toàn hay.

Xem mật mã cho một trang web ví dụ đơn giản (có thể trông kỳ lạ nếu bạn không bật cờ trong Chrome).

/* Set containment on the parent you're querying */
.card-container { /* Both work right now, not sure which is right */ contain: style layout inline-size; container: inline-size;
}
.card { display: flex;
}
@container (max-width: 500px) { /* Must style a child, not the container */ .card { flex-direction: column; }
}

Đơn vị vùng chứa

Đơn vị vùng chứa có một thông số kỹ thuật dự thảo đồng thời, đối với tôi, gần như tăng gấp đôi mức độ hữu ích của các truy vấn vùng chứa. Ý tưởng là bạn có một đơn vị dựa trên kích thước của vùng chứa (chiều rộng, chiều cao hoặc “kích thước nội tuyến” / “kích thước khối”). Tôi tưởng tượng qi đơn vị là hữu ích nhất.

Hy vọng rằng sắp tới, chúng tôi sẽ viết CSS phạm vi vùng chứa tự định kiểu dựa trên kích thước của chính nó và có thể chuyển kích thước đó cho các thuộc tính khác sử dụng bên trong. Các font-size thuộc tính là một ví dụ dễ hiểu về mức độ hữu ích của điều này (phông chữ có kích thước thay đổi dựa trên vùng chứa của chúng), nhưng tôi chắc chắn rằng các đơn vị vùng chứa sẽ được sử dụng cho tất cả các loại nội dung, như gap, padding, và ai biết tất cả những gì khác.

/* Set containment on the parent you're querying */
.card-container { /* Both work right now, not sure which is right */ contain: style layout inline-size; container: inline-size;
}
.card h2 { font-size: 1.5rem; /* fallback */
}
@container type(inline-size) { .card h2 { font-size: clamp(14px, 1rem + 2qi, 56px) }
}

Lớp xếp tầng

Lớp xếp tầng (Trong Thông số kỹ thuật Bản thảo đang làm việc) giới thiệu một mô hình hoàn toàn mới mà các bộ chọn CSS giành chiến thắng trong Cascade. Hiện tại, nó chủ yếu là một cuộc thi về tính cụ thể. Những người chọn có tính cụ thể cao nhất sẽ thắng, chỉ thua các kiểu nội tuyến và các quy tắc cụ thể với !important điều khoản. Nhưng với các lớp, bất kỳ bộ chọn phù hợp nào trên lớp cao hơn sẽ giành chiến thắng.

@layer base; @layer theme; @layer utilities; /* Reset styles with no layer (super low) */
* { box-sizing: border-box; } @layer theme { .card { background: var(--card-bg); }
} @layer base { /* Most styles? */
} @layer utilities { .no-margin { margin: 0; }
}

@khi nào

Tab Atkins ' đề nghị cho CSS Khi / Quy tắc khác đã được chấp nhận và là một cách thể hiện @media và @supports truy vấn theo cách mà bạn có thể dễ dàng diễn đạt hơn nhiều else các điều kiện. Mặc dù các truy vấn phương tiện đã có một số khả năng làm logic, thực hiện các truy vấn loại trừ lẫn nhau từ lâu đã khó diễn đạt và điều này làm cho nó trở nên rất đơn giản.

@when media(width >= 400px) and media(pointer: fine) and supports(display: flex) { /* A */
} @else supports(caret-color: pink) and supports(background: double-rainbow()) { /* B */
} @else { /* C */
}

Xác định phạm vi

Ý tưởng Kiểu phạm vi (cái này là bản nháp của biên tập viên) là nó cung cấp cú pháp để viết một khối kiểu chỉ áp dụng cho một bộ chọn nhất định và bên trong, nhưng cũng có khả năng dừng phạm vi, tạo một chiếc bánh donut phạm vi.

Phần yêu thích của tôi trong tất cả những điều này là công cụ sức mạnh "gần". Miriam giải thích như thế này:

.light-theme a { color: purple; }
.dark-theme a { color: plum; }

<div class="dark-theme"> <a href="#">plum</a> <div class="light-theme"> <a href="#">also plum???</a> </div>
</div>

Điểm tốt phải không ?! Không có cách nào tuyệt vời để thể hiện rằng bạn muốn sự gần gũi của liên kết đó với .light-theme để thắng. Hiện tại, thực tế là tính cụ thể của cả hai chủ đề là như nhau, nhưng .dark-theme đến sau - vì vậy nó thắng. Hy vọng rằng các phong cách phạm vi cũng giúp ích cho góc này.

@scope (.card) to (.content) { :scope { display: grid; grid-template-columns: 50px 1fr; } img { filter: grayscale(100%); border-radius: 50%; } .content { ... }
}

/* Proximity help! */
@scope (.light-theme) { a { color: purple; }
} @scope (.dark-theme) { a { color: plum; }
}

Bạn không thể sử dụng bất cứ điều gì trong danh sách này ngay bây giờ trên các trang web sản xuất của bạn. Sau ngần ấy năm cố gắng làm theo kiểu này, tôi vẫn không biết cuối cùng mọi chuyện diễn ra như thế nào. Tôi nghĩ rằng các thông số kỹ thuật cần phải được hoàn thiện và thống nhất trước. Sau đó, các trình duyệt chọn chúng, hy vọng nhiều hơn một. Và một khi họ có, sau đó tôi nghĩ rằng các thông số kỹ thuật có thể được hoàn thiện?

Tôi không biết. Có thể một số trong số đó sẽ chết. Có thể một số sẽ xảy ra siêu nhanh và một số siêu chậm. Có thể, một số trong số đó sẽ giảm xuống trong một số trình duyệt nhưng không phải những trình duyệt khác. Này, ít nhất chúng ta có các trình duyệt thường xanh hiện nay để khi mọi thứ giảm xuống, nó sẽ diễn ra nhanh chóng. Tôi cảm thấy như hiện tại chúng ta đang ở trong giai đoạn mà hầu hết các tính năng CSS lớn nhất và tốt nhất đều được hỗ trợ trên tất cả các trình duyệt, nhưng với tất cả những điều này sắp tới, chúng ta sẽ chuyển sang giai đoạn hỗ trợ cho ý chí mới nhất và lớn nhất được nhiều đốm sáng hơn.

Nguồn: https://css-tricks.com/css-is-going-gosh-darned-hog-wild-i-tell-ya-what/

Dấu thời gian: 13 Tháng Mười