Bài 8. CSS mới: :has, container, nesting

:has() - bộ chọn "cha"

/* thẻ có chứa ảnh thì chia hai cột */
.the:has(img) { display: grid; grid-template-columns: 120px 1fr; }
/* nhãn đổi màu khi ô nhập không hợp lệ */
label:has(+ input:invalid) { color: crimson; }

Container queries

.khung { container-type: inline-size; }
.the { display: block; }
@container (min-width: 480px) {
  .the { display: flex; gap: 16px; }
}

Thẻ tự đổi bố cục theo chỗ đặt: trong thanh bên hẹp thì xếp dọc, trong vùng chính rộng thì xếp ngang.

CSS lồng nhau

.menu {
  display: flex;
  a {
    padding: 8px 14px;
    &:hover { background: #e8f5e9; }
    &.active { font-weight: 700; }
  }
}

dialog và popover

<dialog id="hop">
  <p>Bạn chắc chắn muốn xóa?</p>
  <form method="dialog"><button>Hủy</button><button value="ok">Xóa</button></form>
</dialog>
<button onclick="hop.showModal()">Xóa</button>

<button popovertarget="goi-y">Gợi ý</button>
<div id="goi-y" popover>Nội dung hiện khi bấm, bấm ngoài là đóng.</div>

Một vài tính năng hay khác

• aspect-ratio: 16/9 giữ tỉ lệ khung.
• gap cho cả flex và grid.
• color-mix() trộn màu, text-wrap: balance cân tiêu đề.
• scroll-snap, position: sticky làm cuộn đẹp.
• @layer kiểm soát thứ tự ưu tiên.