Thông tin mới nhất về CSS và giao diện người dùng web: Tóm tắt sự kiện I/O 2024

Nền tảng web này vẫn tiếp tục đổi mới, trong đó CSS và giao diện người dùng web là những tính năng đi đầu trong quá trình cải tiến thú vị này. Chúng ta đang trải qua thời kỳ vàng cho giao diện người dùng web với các tính năng CSS mới xuất hiện trên các trình duyệt với tốc độ mà chúng ta chưa từng thấy trước đây, mở ra vô số khả năng tạo trải nghiệm web đẹp mắt và hấp dẫn. Bài đăng này trên blog sẽ tìm hiểu sâu hơn về tình trạng hiện tại của CSS, khám phá một số tính năng mới, thay đổi cuộc chơi và định hình lại cách chúng tôi xây dựng các ứng dụng web. Các tính năng này xuất hiện trực tiếp tại Google I/O 2024.

Trải nghiệm tương tác mới lạ

Về cơ bản, trải nghiệm web là cuộc gọi và phản hồi giữa bạn và người dùng. Đó là lý do tại sao việc đầu tư vào những tương tác chất lượng của người dùng lại quan trọng đến vậy. Chúng tôi đang nỗ lực thực hiện một số điểm cải tiến thực sự quan trọng nhằm mở ra những tính năng mà trước đây chúng tôi chưa từng có trên web giúp điều hướng bên trong các trang web và điều hướng giữa các trang web đó.

Ảnh động dựa trên thao tác cuộn

Giống như tên gọi của nó, API ảnh động dựa trên cuộn cho phép bạn tạo ảnh động dựa trên cuộn động mà không cần phụ thuộc vào trình quan sát cuộn hoặc tập lệnh nặng khác.

Tạo ảnh động dựa trên thao tác cuộn

Tương tự như cách hoạt động của ảnh động dựa trên thời gian trên nền tảng, giờ đây, bạn có thể sử dụng tiến trình cuộn của trình cuộn để bắt đầu, tạm dừng và đảo ngược ảnh động. Vì vậy, khi cuộn tiến lên, bạn sẽ thấy tiến trình ảnh động đó và khi cuộn lùi, tiến trình sẽ quay lại theo chiều ngược lại. Tính năng này cho phép bạn tạo hình ảnh một phần hoặc toàn trang có các phần tử ảnh động vào và bên trong khung nhìn, còn gọi là kể chuyện khi cuộn (scrollytelling) để tạo hiệu ứng hình ảnh sinh động.

Bạn có thể dùng ảnh động dựa trên thao tác cuộn để làm nổi bật nội dung quan trọng, dẫn dắt người dùng theo một câu chuyện hay chỉ đơn giản là thêm thao tác động vào trang web.

@keyframes appear {
  from {
    opacity: 0;
    scale: 0.8;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

img {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

Mã trước xác định một ảnh động đơn giản xuất hiện trong khung nhìn bằng cách thay đổi độ mờ và tỷ lệ của hình ảnh. Ảnh động được điều khiển theo vị trí cuộn. Để tạo hiệu ứng này, trước tiên hãy thiết lập ảnh động CSS, sau đó thiết lập animation-timeline. Trong trường hợp này, hàm view() với các giá trị mặc định sẽ theo dõi hình ảnh tương ứng với cửa sổ cuộn (trong trường hợp này cũng là khung nhìn).

Điều quan trọng là phải lưu ý đến khả năng hỗ trợ của trình duyệt và lựa chọn ưu tiên của người dùng, đặc biệt là đối với nhu cầu về hỗ trợ tiếp cận. Do đó, hãy sử dụng quy tắc @supports để kiểm tra xem trình duyệt có hỗ trợ ảnh động dựa trên thao tác cuộn hay không và gói ảnh động dựa trên thao tác cuộn trong truy vấn lựa chọn ưu tiên của người dùng như @media (prefers-reduced-motion: no-preference) để tuân thủ lựa chọn ưu tiên về chuyển động của người dùng. Sau khi thực hiện các bước kiểm tra này, bạn biết rằng các kiểu của mình sẽ hoạt động tốt và ảnh động không gây ra vấn đề gì cho người dùng.

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Apply scroll-driven animations here */
  }
}

Hoạt ảnh dựa trên cuộn có thể mang nghĩa là trải nghiệm thông báo cuộn toàn trang, nhưng cũng có thể có nghĩa là các hoạt ảnh tinh tế hơn như thanh tiêu đề thu nhỏ và hiển thị bóng khi bạn cuộn ứng dụng web.

@keyframes shrink-name {
  from {
    font-size: 2em;
  }
  to {
    font-size: 1.5em;
  }
}

@keyframes add-shadow {
  from {
    box-shadow: none;
  }
  to {
    box-shadow: 0 4px 2px -2px gray;
  }
}

header {
  animation: add-shadow linear both;
}

h2 {
  animation: shrink-name linear both;
}

header, h2 {
  animation-timeline: scroll();
  animation-range: 0 150px;
}

Bản minh hoạ này sử dụng một vài ảnh động khung hình chính khác nhau (tiêu đề, văn bản, thanh điều hướng và nền) sau đó áp dụng ảnh động di chuyển tương ứng cho mỗi ảnh động. Mặc dù mỗi ảnh động có kiểu ảnh động khác nhau, nhưng tất cả đều có cùng dòng thời gian ảnh động, trình cuộn gần nhất và cùng phạm vi ảnh động – từ đầu trang đến 150 pixel.

Lợi ích về hiệu suất của ảnh động dựa trên cuộn

API tích hợp sẵn này giúp bạn giảm bớt gánh nặng mã mà bạn cần duy trì, cho dù đó là tập lệnh tuỳ chỉnh bạn đã viết hay việc thêm một phần phụ thuộc bổ sung của bên thứ ba. Việc này cũng giúp bạn không cần phải gửi nhiều trình quan sát thao tác cuộn, có nghĩa là một số lợi ích khá đáng kể về hiệu suất. Điều này là do hoạt ảnh theo hướng cuộn hoạt động ngoài luồng chính khi tạo ảnh động cho các thuộc tính có thể được tạo ảnh động trên trình tổng hợp như biến đổi và độ mờ, cho dù bạn đang sử dụng API mới trực tiếp trong CSS hay sử dụng hook JavaScript.

Gần đây, Tokopedia đã sử dụng ảnh động di chuyển để làm thanh điều hướng của sản phẩm xuất hiện khi bạn cuộn. Việc sử dụng API này mang lại một số lợi ích nghiêm trọng, cả về quản lý mã và hiệu suất.

Chúng tôi đã giảm được đến 80% số dòng mã so với khi sử dụng các sự kiện cuộn JS thông thường và quan sát thấy mức sử dụng CPU trung bình giảm từ 50% xuống còn 2% trong khi cuộn. – Andy Wihalim, Kỹ sư phần mềm cấp cao, Tokopedia"

Tương lai của hiệu ứng cuộn

Chúng tôi biết những tác động này sẽ tiếp tục biến môi trường web thành một nơi hấp dẫn hơn và chúng tôi đang nghĩ đến những điều có thể xảy ra tiếp theo. Điều này bao gồm khả năng không chỉ sử dụng dòng thời gian hoạt ảnh mới, mà còn sử dụng điểm cuộn để kích hoạt sự bắt đầu của một hoạt ảnh, được gọi là hoạt ảnh được kích hoạt cuộn.

Và thậm chí nhiều tính năng cuộn khác sẽ được triển khai cho các trình duyệt trong tương lai. Bản minh hoạ sau đây cho thấy sự kết hợp của các tính năng trong tương lai này. Phương thức này sử dụng CSS scroll-start-target để đặt ngày và giờ ban đầu trong bộ chọn và sự kiện JavaScript scrollsnapchange để cập nhật ngày trong tiêu đề, khiến việc đồng bộ hoá dữ liệu với sự kiện được chụp nhanh trở nên đơn giản.

Bạn cũng có thể dựa trên dữ liệu này để cập nhật một bộ chọn theo thời gian thực bằng sự kiện scrollsnapchanging trong JavaScript.

Các tính năng cụ thể này hiện chỉ có trong Canary sau một lá cờ. Tuy nhiên, chúng mở ra những tính năng mà trước đây bạn không thể hoặc rất khó xây dựng trong nền tảng này, đồng thời làm nổi bật tương lai của các khả năng tương tác dựa trên thao tác cuộn.

Để tìm hiểu thêm về cách bắt đầu sử dụng ảnh động dựa trên thao tác cuộn, nhóm của chúng tôi vừa ra mắt một loạt video mới trên kênh YouTube của Chrome dành cho nhà phát triển. Tại đây, bạn sẽ tìm hiểu thông tin cơ bản về ảnh động dựa trên cuộn do Bramus Van Damme cung cấp, bao gồm cách hoạt động của tính năng này, từ vựng, nhiều cách tạo hiệu ứng cũng như cách kết hợp hiệu ứng để tạo trải nghiệm phong phú. Đây là một loạt video tuyệt vời nên xem.

Chuyển đổi khung hiển thị

Chúng tôi vừa đề cập đến một tính năng mới mạnh mẽ giúp tạo ảnh động trong các trang web, nhưng cũng có một tính năng mới mạnh mẽ có tên là chuyển đổi chế độ xem để tạo ảnh động giữa các trang nhằm tạo trải nghiệm người dùng liền mạch. Hiệu ứng chuyển đổi chế độ xem mang đến một cấp độ linh hoạt mới cho web, cho phép bạn tạo chuyển đổi liền mạch giữa các chế độ xem khác nhau trong một trang hoặc thậm chí trên các trang khác nhau.

Airbnb là một trong những công ty đã thử nghiệm việc tích hợp các chuyển đổi chế độ xem vào giao diện người dùng của họ để mang lại trải nghiệm điều hướng web mượt mà và liền mạch. Điều này bao gồm thanh bên của trình chỉnh sửa trang thông tin, ngay đến chỉnh sửa ảnh và thêm tiện nghi, tất cả trong một luồng người dùng linh hoạt.

Mặc dù các hiệu ứng toàn trang này rất đẹp và liền mạch, nhưng bạn cũng có thể tạo các tương tác vi mô, chẳng hạn như ví dụ này khi chế độ xem danh sách của bạn được cập nhật về tương tác của người dùng. Bạn có thể tạo hiệu ứng này một cách dễ dàng nhờ các hiệu ứng chuyển đổi khung hiển thị.

Cách nhanh chóng bật chuyển đổi chế độ xem trong ứng dụng trang đơn của bạn cũng đơn giản như gói một tương tác bằng document.startViewTransition và đảm bảo mỗi phần tử đang chuyển đổi có view-transition-name, cùng dòng hoặc tự động sử dụng JavaScript khi bạn tạo các nút DOM.

document.querySelectorAll('.delete-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.startViewTransition(() => {
      btn.closest('.card').remove();
    });
  })
});

/* Styles for the transition animation */
::view-transition-old(.card):only-child {
  animation: fade-out ease-out 0.5s;
}

Xem các lớp chuyển đổi

Bạn có thể sử dụng tên chuyển đổi chế độ xem để áp dụng ảnh động tuỳ chỉnh cho chuyển đổi chế độ xem, mặc dù việc này có thể rườm rà khi chuyển đổi nhiều phần tử. Bản cập nhật mới đầu tiên cho việc chuyển đổi chế độ xem trong năm nay giúp đơn giản hoá vấn đề này và giới thiệu khả năng tạo các lớp chuyển đổi chế độ xem có thể áp dụng cho ảnh động tuỳ chỉnh.

Xem các loại chuyển đổi

Một điểm cải tiến lớn khác cho hiệu ứng chuyển đổi khung hiển thị là việc hỗ trợ cho các kiểu chuyển đổi khung hiển thị. Các loại chuyển đổi chế độ xem rất hữu ích khi bạn muốn có một loại chuyển đổi chế độ xem trực quan khác khi tạo ảnh động cho và từ chế độ xem trang.

Ví dụ: có thể bạn muốn một trang chủ tạo hiệu ứng động cho trang blog theo cách khác với trang blog đó hoạt ảnh trở lại trang chủ. Hoặc bạn có thể muốn các trang hoán đổi qua lại theo nhiều cách như trong ví dụ này, di chuyển từ trái sang phải và ngược lại. Trước khi thực hiện việc này khá rắc rối. Bạn có thể thêm các lớp vào DOM để áp dụng kiểu, sau đó sẽ phải xoá các lớp này. Các loại chuyển đổi khung hiển thị cho phép trình duyệt dọn dẹp các hiệu ứng chuyển đổi cũ thay vì yêu cầu bạn thực hiện việc này theo cách thủ công trước khi bắt đầu các chuyển đổi mới, thực hiện công việc này cho bạn.

Bạn có thể thiết lập các loại trong hàm document.startViewTransition. Hàm này hiện chấp nhận một đối tượng. update là hàm callback cập nhật DOM và types là một mảng có các loại.

document.startViewTransition({
  update: myUpdate,
  types: ['slide', 'forwards']
})

Chuyển đổi chế độ xem nhiều trang

Điều làm cho web mạnh mẽ chính là khả năng mở rộng của web. Nhiều ứng dụng không chỉ là một trang đơn mà là một tấm thảm mạnh mẽ chứa nhiều trang. Đó là lý do chúng tôi vui mừng thông báo rằng chúng tôi sẽ hỗ trợ tính năng chuyển đổi chế độ xem nhiều tài liệu cho các ứng dụng nhiều trang trong Chromium 126.

Bộ tính năng trên nhiều tài liệu mới này bao gồm các trải nghiệm web hoạt động trong cùng một nguồn gốc, chẳng hạn như điều hướng từ web.dev đến web.dev/blog, nhưng không bao gồm việc điều hướng trên nhiều nguồn gốc, chẳng hạn như điều hướng từ web.dev đến blog.web.dev hoặc đến một miền khác như google.com.

Một trong những điểm khác biệt chính đối với hiệu ứng chuyển đổi khung hiển thị cùng tài liệu là bạn không cần gói hiệu ứng chuyển đổi bằng document.startViewTransition(). Thay vào đó, hãy chọn sử dụng cả hai trang có liên quan đến việc chuyển đổi chế độ xem bằng cách sử dụng quy tắc tại CSS @view-transition.

@view-transition {
  navigation: auto;
}

Để có hiệu ứng tuỳ chỉnh hơn, bạn có thể hook trong JavaScript bằng trình nghe sự kiện pageswap hoặc pagereveal mới, cho phép bạn truy cập vào đối tượng chuyển đổi khung hiển thị.

Với pageswap, bạn có thể thực hiện một số thay đổi vào phút chót trên trang gửi đi ngay trước khi chụp bản tổng quan nhanh cũ. Đồng thời, bạn có thể dùng pagereveal để tuỳ chỉnh trang mới trước khi trang bắt đầu hiển thị sau khi khởi chạy.

window.addEventListener('pageswap', async (e) => {
    // ...
});

window.addEventListener('pagereveal', async (e) => {
    // ...
});

Trong tương lai, chúng tôi dự định mở rộng phạm vi chuyển đổi giữa các chế độ xem, bao gồm:

• Chuyển đổi có giới hạn: Cho phép bạn giới hạn hoạt động chuyển đổi sang cây con DOM, cho phép phần còn lại của trang tiếp tục tương tác và hỗ trợ nhiều chuyển đổi khung hiển thị chạy cùng lúc.
• Chuyển đổi chế độ xem bằng cử chỉ: Sử dụng cử chỉ kéo hoặc vuốt để kích hoạt chuyển đổi chế độ xem trên nhiều tài liệu nhằm mang lại nhiều trải nghiệm giống như quảng cáo gốc trên web.
• So khớp điều hướng trong CSS: Tuỳ chỉnh trực tiếp việc chuyển đổi chế độ xem trên nhiều tài liệu trong CSS thay vì sử dụng các sự kiện pageswap và pagereveal trong JavaScript Để tìm hiểu thêm về các chuyển đổi chế độ xem cho các ứng dụng nhiều trang, bao gồm cả cách thiết lập hiệu quả nhất bằng cách kết xuất trước, hãy xem bài nói chuyện sau của Bramus Van Damme:

Thành phần giao diện người dùng được công cụ hỗ trợ: Đơn giản hoá các hoạt động tương tác phức tạp

Việc tạo các ứng dụng web phức tạp không phải là công việc dễ dàng, nhưng CSS và HTML đang phát triển để giúp quá trình này dễ quản lý hơn nhiều. Các tính năng và tính năng nâng cao mới đang đơn giản hoá việc tạo các thành phần giao diện người dùng, cho phép bạn tập trung vào việc tạo ra những trải nghiệm tuyệt vời. Điều này được thực hiện thông qua nỗ lực cộng tác với sự tham gia của một số cơ quan tiêu chuẩn và nhóm cộng đồng chủ chốt, bao gồm Nhóm làm việc CSS, Nhóm cộng đồng giao diện người dùng mở và whatWG (Nhóm công nghệ ứng dụng siêu văn bản web).

Một vấn đề lớn của các nhà phát triển là một yêu cầu có vẻ đơn giản: khả năng tạo kiểu cho trình đơn thả xuống (phần tử lựa chọn). Mặc dù trên bề ngoài, đây có vẻ đơn giản, nhưng đây là một vấn đề phức tạp, liên quan đến rất nhiều phần của nền tảng; từ bố cục và hiển thị, cuộn và tương tác cho đến việc tạo kiểu tác nhân người dùng và thuộc tính CSS, và thậm chí là thay đổi chính HTML.

Một trình đơn thả xuống bao gồm nhiều phần và bao gồm nhiều trạng thái cần phải được tính đến, chẳng hạn như:

• Liên kết bàn phím (để nhập/thoát tương tác)
• Nhấp để đóng
• Quản lý cửa sổ bật lên đang hoạt động (đóng các cửa sổ bật lên khác khi một cửa sổ mở ra)
• Quản lý tiêu điểm thẻ
• Trực quan hoá giá trị lựa chọn đã chọn
• Kiểu tương tác mũi tên
• Quản lý trạng thái (mở/đóng)

Hiện tại, rất khó để tự quản lý tất cả trạng thái này nhưng nền tảng cũng không hề dễ dàng. Để khắc phục vấn đề này, chúng tôi đã chia nhỏ các phần đó và chuyển giao một số tính năng cơ bản để bật trình đơn tạo kiểu thả xuống và còn nhiều tính năng khác nữa.

API Cửa sổ bật lên

Đầu tiên, chúng tôi vận chuyển một thuộc tính toàn cầu có tên là popover. Tôi rất vui được thông báo rằng thuộc tính này vừa đạt trạng thái mới của Baseline cách đây vài tuần.

Các phần tử cửa sổ bật lên bị ẩn bằng display: none cho đến khi được mở bằng một phương thức gọi, chẳng hạn như một nút hoặc JavaScript. Để tạo cửa sổ bật lên cơ bản, hãy đặt thuộc tính cửa sổ bật lên trên phần tử và liên kết mã nhận dạng của cửa sổ đó với nút bằng popovertarget. Giờ đây, nút này là phương thức gọi,

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

Với thuộc tính cửa sổ bật lên hiện được bật, trình duyệt xử lý nhiều hành vi chính mà không cần bất kỳ tập lệnh bổ sung nào bao gồm:

• Quảng bá lên lớp trên cùng.: Một lớp riêng biệt phía trên phần còn lại của trang, vì vậy, bạn không cần phải thao tác với z-index.
• Chức năng đóng mở đèn.: Thao tác nhấp vào bên ngoài vùng cửa sổ bật lên sẽ đóng cửa sổ bật lên và tiêu điểm trả lại.
• Quản lý tiêu điểm thẻ mặc định.: Khi bạn mở cửa sổ bật lên, thẻ tiếp theo sẽ dừng lại bên trong cửa sổ bật lên.
• Các liên kết bàn phím tích hợp sẵn.: Thao tác nhấn phím esc hoặc bật/tắt hai lần sẽ đóng cửa sổ bật lên và tiêu điểm quay lại.
• Liên kết thành phần mặc định. : Trình duyệt kết nối cửa sổ bật lên với trình kích hoạt theo đúng ngữ nghĩa.

Thậm chí bạn có thể đang sử dụng API cửa sổ bật lên này ngay hôm nay mà không nhận ra. GitHub đã triển khai cửa sổ bật lên trên trình đơn "new" của trang chủ và trong phần tổng quan về quy trình xem xét yêu cầu lấy dữ liệu (pull request). Họ đã dần cải thiện tính năng này bằng cách sử dụng popover polyfill, do Oddbird xây dựng với một số sự hỗ trợ đáng kể của Keith Cirkel do GitHub sở hữu, để hỗ trợ các trình duyệt cũ.

"Chúng tôi đã cố gắng ngưng sử dụng hàng nghìn dòng mã bằng cách chuyển sang cửa sổ bật lên. Popover giúp chúng tôi loại bỏ nhu cầu phải đối mặt với các số chỉ mục z kỳ diệu... việc thiết lập mối quan hệ cây hỗ trợ tiếp cận chính xác với hành vi của nút khai báo. Các hành vi tiêu điểm được tích hợp sẽ giúp Hệ thống thiết kế của chúng tôi triển khai các mẫu theo đúng cách dễ dàng hơn rất nhiều.-Keith Cirkel, Kỹ sư phần mềm, GitHub"

Tạo ảnh động cho hiệu ứng nhập và thoát

Khi có cửa sổ bật lên, bạn có thể sẽ muốn thêm một số tương tác. Chúng tôi đã ra mắt bốn tính năng tương tác mới vào năm ngoái để hỗ trợ cửa sổ bật lên dạng ảnh động. Những quốc gia/khu vực này bao gồm:

Có thể tạo ảnh động cho display và content-visibility trên dòng thời gian khung hình chính.

Thuộc tính transition-behavior với từ khoá allow-discrete để bật hiệu ứng chuyển đổi của các thuộc tính rời rạc như display.

Quy tắc @starting-style để tạo hiệu ứng ảnh động cho mục nhập từ display: none và vào lớp trên cùng.

Thuộc tính lớp phủ để kiểm soát hành vi của lớp trên cùng trong quá trình tạo ảnh động.

Các thuộc tính này hoạt động với mọi phần tử mà bạn đang tạo ảnh động cho lớp trên cùng, cho dù đó là cửa sổ bật lên hay hộp thoại. Tổng cộng, giao diện như sau cho một hộp thoại có phông nền:

dialog, ::backdrop{
  opacity: 0;
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

[open], [open]::backdrop {
  opacity: 1;
}

@starting-style {
  [open], [open]::backdrop {
    opacity: 0;
  }
}

Trước tiên, hãy thiết lập @starting-style để trình duyệt biết nên tạo ảnh động cho phần tử này vào DOM từ kiểu nào. Thao tác này được thực hiện cho cả hộp thoại và phông nền. Sau đó, tạo kiểu trạng thái mở cho cả hộp thoại và phông nền. Đối với hộp thoại, thuộc tính này sử dụng thuộc tính open, còn đối với cửa sổ bật lên là phần tử giả ::popover-open. Cuối cùng, hãy tạo ảnh động cho opacity, display và overlay bằng từ khoá allow-discrete để bật chế độ ảnh động, trong đó các thuộc tính riêng biệt có thể chuyển đổi.

Định vị quảng cáo cố định cuối màn hình

Cửa sổ bật lên chỉ là phần mở đầu của câu chuyện. Một bản cập nhật rất thú vị là Chrome 125 hiện đã hỗ trợ vị trí cố định.

Bằng cách sử dụng vị trí neo, chỉ với một vài dòng mã, trình duyệt có thể xử lý logic để chia sẻ Internet từ một phần tử đã được định vị với một hoặc nhiều phần tử neo. Trong ví dụ sau, một chú thích đơn giản được liên kết với mỗi nút, được đặt ở chính giữa dưới cùng.

Thiết lập mối quan hệ định vị neo trong CSS bằng cách sử dụng thuộc tính anchor-name trên phần tử neo (trong trường hợp này là nút) và thuộc tính position-anchor trên phần tử được định vị (trong trường hợp này là chú giải công cụ). Sau đó, áp dụng vị trí tuyệt đối hoặc cố định tương ứng với điểm neo bằng cách sử dụng hàm anchor(). Đoạn mã sau đây đặt phần đầu chú giải công cụ ở cuối nút.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
}

Ngoài ra, bạn có thể sử dụng tên neo ngay trong hàm neo và bỏ qua thuộc tính position-anchor. Điều này có thể hữu ích khi neo vào nhiều phần tử.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
}

Cuối cùng, sử dụng từ khoá anchor-center mới cho các thuộc tính justify và align để căn giữa phần tử được định vị vào điểm neo của phần tử đó.

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  top: anchor(--my-anchor bottom);
  justify-self: anchor-center;
}

Mặc dù việc sử dụng vị trí neo với cửa sổ bật lên sẽ rất thuận tiện, nhưng cửa sổ bật lên chắc chắn không bắt buộc phải sử dụng vị trí neo. Bạn có thể sử dụng vị trí neo với hai (hoặc nhiều) phần tử bất kỳ để tạo mối quan hệ trực quan. Trên thực tế, bản minh hoạ sau đây, lấy cảm hứng từ một bài viết của Roman Komarov, cho thấy kiểu dấu gạch dưới được liên kết để liệt kê các mục khi bạn di chuột hoặc nhấn phím trên các mục đó.

Ví dụ này sử dụng hàm neo để thiết lập vị trí neo bằng cách sử dụng các thuộc tính vật lý của left, right và bottom. Khi bạn di chuột qua một trong các đường liên kết, điểm neo mục tiêu sẽ thay đổi và trình duyệt sẽ di chuyển mục tiêu để áp dụng vị trí, đồng thời tạo ảnh động màu sắc để tạo hiệu ứng gọn gàng.

ul::before {
  content: "";
  position: absolute;
  left:   anchor(var(--target) left);
  right:  anchor(var(--target) right);
  bottom: anchor(var(--target) bottom);
  ...
}

li:nth-child(1) { --anchor: --item-1 }
ul:has(:nth-child(1) a:is(:hover, :focus-visible)) {
  --target: --item-1;
  --color: red;
}

Vị trí inset-area

Ngoài vị trí tuyệt đối theo hướng mặc định mà bạn có thể đã sử dụng trước đây, còn có một cơ chế bố cục mới đi kèm. Cơ chế này đã được đưa vào như một phần của API định vị neo được gọi là vùng lồng ghép. Vùng lồng ghép giúp dễ dàng đặt các phần tử được định vị tương ứng với các neo tương ứng và hoạt động trên một lưới 9 ô với phần tử neo ở giữa. Ví dụ: inset-area: top đặt phần tử đã được định vị ở trên cùng và inset-area: bottom đặt phần tử được định vị ở dưới cùng.

Phiên bản đơn giản của bản minh hoạ cố định đầu tiên sẽ có dạng như sau với inset-area:

.anchor {
  anchor-name: --my-anchor;
}

.positioned {
  position: absolute;
  position-anchor: --my-anchor;
  inset-area: bottom;
}

Bạn có thể kết hợp các giá trị vị trí này với các từ khoá mở rộng để bắt đầu ở vị trí trung tâm hoặc mở rộng sang trái, mở rộng sang phải hoặc mở rộng tất cả để có tập hợp đầy đủ các cột hoặc hàng có sẵn. Bạn cũng có thể sử dụng các thuộc tính logic. Để dễ dàng xem và chọn cơ chế bố cục này, hãy dùng thử công cụ này trong Chrome phiên bản 125 trở lên:

Vì các phần tử này được liên kết, nên phần tử được định vị sẽ linh động di chuyển xung quanh trang khi neo di chuyển. Vì vậy, trong trường hợp này, chúng ta có các phần tử thẻ theo kiểu truy vấn vùng chứa. Các phần tử này sẽ thay đổi kích thước dựa trên kích thước nội tại của chúng (điều bạn không thể làm với các truy vấn đa phương tiện) và trình đơn cố định sẽ thay đổi theo bố cục mới khi giao diện người dùng của thẻ thay đổi.

Vị trí neo động với position-try-options

Các trình đơn và thành phần điều hướng trình đơn con sẽ dễ tạo hơn rất nhiều nhờ sự kết hợp giữa cửa sổ bật lên và vị trí neo. Đồng thời, khi nhấn vào cạnh của khung nhìn bằng phần tử cố định, bạn cũng có thể để trình duyệt xử lý thay đổi vị trí cho bạn. Bạn có thể thực hiện việc này theo một số cách. Lý do đầu tiên là tạo quy tắc định vị của riêng bạn. Trong trường hợp này, ban đầu, trình đơn con được đặt ở bên phải nút "cửa hàng". Tuy nhiên, bạn có thể tạo một khối @position-try khi không có đủ không gian ở bên phải trình đơn, cung cấp cho khối một giá trị nhận dạng tuỳ chỉnh là --bottom. Sau đó, bạn kết nối khối @position-try này với neo bằng position-try-options.

Bây giờ, trình duyệt sẽ chuyển đổi giữa các trạng thái cố định này, thử vị trí phù hợp trước rồi chuyển xuống dưới cùng. Bạn có thể thực hiện việc này với hiệu ứng chuyển cảnh mượt mà.

#submenu {
  position-anchor: --submenu;
  top: anchor(top);
  left: anchor(right);
  margin-left: var(--padding);

  position-try-options: --bottom;

  transition: top 0.25s, left 0.25s;
  width: max-content;
}

@position-try --bottom {
  top: anchor(left);
  left: anchor(bottom);
  margin-left: var(--padding);
}

Cùng với logic định vị rõ ràng, có một số từ khoá mà trình duyệt cung cấp nếu bạn muốn thực hiện một số tương tác cơ bản như lật văn bản liên kết trong khối hoặc hướng nội tuyến.

position-try-options: flip-block, flip-inline;

Để có trải nghiệm lật một cách đơn giản, hãy tận dụng các giá trị từ khoá lật này và bỏ qua việc viết định nghĩa position-try hoàn toàn. Vì vậy, giờ đây bạn có thể có một phần tử định vị cố định đáp ứng vị trí với đầy đủ chức năng chỉ với một vài dòng CSS.

.tooltip {
  inset-area: top;
  position-try-options: flip-block;
}

Tìm hiểu thêm về cách sử dụng vị trí neo.

Tương lai của giao diện người dùng theo lớp

Chúng tôi thấy trải nghiệm được chia sẻ Internet ở mọi nơi và bộ tính năng được giới thiệu trong bài đăng này là một khởi đầu tuyệt vời để phát huy khả năng sáng tạo và kiểm soát tốt hơn các thành phần định vị neo và giao diện phân lớp. Nhưng đây chỉ là khởi đầu. Ví dụ: hiện tại, popover chỉ hoạt động với các nút dưới dạng phần tử gọi hoặc với JavaScript. Đối với những bản xem trước theo kiểu Wikipedia, một mẫu có trên mọi nền tảng web, người dùng phải tương tác được với mẫu đó, đồng thời kích hoạt cửa sổ bật lên từ một đường liên kết và khi người dùng thể hiện sự quan tâm mà không nhất thiết phải nhấp vào, chẳng hạn như di chuột hoặc lấy tiêu điểm thẻ.

Trong bước tiếp theo cho API Cửa sổ bật lên, chúng tôi đang nghiên cứu interesttarget để giải quyết những nhu cầu này và giúp bạn dễ dàng tạo lại những trải nghiệm này bằng các tính năng hỗ trợ tiếp cận phù hợp được tích hợp sẵn. Đây là một vấn đề khó khăn liên quan đến việc hỗ trợ tiếp cận cần giải quyết, với rất nhiều câu hỏi mở về những hành vi lý tưởng. Tuy nhiên, việc giải quyết và chuẩn hoá chức năng này ở cấp nền tảng sẽ giúp cải thiện những trải nghiệm này cho mọi người.

<a interesttarget="my-tooltip">Hover/Focus to show the tooltip</a>

<span popover=hint id="my-toolip">This is the tooltip</span>

Ngoài ra, một trình gọi chung khác (invoketarget) sẽ có sẵn trong tương lai để bạn thử nghiệm trong Canary nhờ vào công trình của hai nhà phát triển bên thứ ba là Keith Cirkel và Luke Warlow. invoketarget hỗ trợ trải nghiệm khai báo dành cho nhà phát triển mà popovertarget cung cấp cửa sổ bật lên, được chuẩn hoá cho tất cả các thành phần tương tác, bao gồm <dialog>, <details>, <video>, <input type="file">, v.v.

<button invoketarget="my-dialog">
  Open Dialog
</button>

<dialog id="my-dialog">
  Hello world!
</dialog>

Chúng tôi biết rằng có những trường hợp sử dụng chưa được API này hỗ trợ. Ví dụ: tạo kiểu cho mũi tên kết nối một phần tử cố định với điểm neo của phần tử đó, đặc biệt là khi vị trí của phần tử neo này thay đổi và cho phép một phần tử " trượt" và ở trong khung nhìn thay vì bám theo một vị trí khác đã đặt khi nó đạt đến hộp giới hạn. Vì vậy, mặc dù chúng tôi rất hào hứng ra mắt API mạnh mẽ này, nhưng chúng tôi cũng mong muốn mở rộng thêm nhiều tính năng hơn nữa trong tương lai.

Chọn kiểu cách

Bằng cách sử dụng popover và anchor cùng nhau, nhóm này đã hoàn thiện việc có thể tuỳ chỉnh trình đơn thả xuống có thể chọn. Tin vui là đã có nhiều tiến bộ. Tin không vui là API này hiện vẫn còn ở trạng thái thử nghiệm. Tuy nhiên, tôi rất vui được chia sẻ một số bản minh hoạ và thông tin cập nhật trực tiếp về tiến độ của chúng ta và hy vọng sẽ nhận được một số ý kiến phản hồi của bạn. Đầu tiên, đã có tiến bộ về cách đưa người dùng vào trải nghiệm chọn lọc mới và có thể tuỳ chỉnh. Cách hiện tại đang được tiến hành để thực hiện việc này là sử dụng thuộc tính giao diện trong CSS, được đặt thành appearance: base-select. Sau khi thiết lập giao diện, bạn sẽ chọn sử dụng một giao diện mới, có thể tuỳ chỉnh.

select {
  appearance: base-select;
}

Ngoài appearance: base-select, có một số bản cập nhật HTML mới. Chẳng hạn như khả năng gói các tuỳ chọn trong một datalist để tuỳ chỉnh và khả năng thêm nội dung tuỳ ý không tương tác (như hình ảnh) trong các lựa chọn của bạn. Bạn cũng sẽ có quyền truy cập vào một phần tử mới là <selectedoption>. Phần tử này sẽ phản ánh nội dung của các tuỳ chọn vào chính phần tử đó. Sau đó, bạn có thể tuỳ chỉnh phần tử này theo nhu cầu của mình. Phần tử này thực sự hữu ích.

<select>
  <button type=popover>
    <selectedoption></selectedoption>
  </button>
  <datalist>
    <option value="" hidden>
      <p>Select a country</p>
    </option>
    <option value="andorra">
      <img src="Flag_of_Andorra.svg" />
      <p>Andorra</p>
    </option>
    <option value="bolivia">
      <img src="Flag_of_Bolivia.svg" />
      <p>Bolivia</p>
    </option>
...
  </datalist>
</select>

Mã sau đây minh hoạ cách tuỳ chỉnh <selectedoption> trong giao diện người dùng của Gmail, trong đó một biểu tượng hình ảnh đại diện cho loại thư trả lời được chọn để tiết kiệm không gian. Bạn có thể sử dụng các kiểu hiển thị cơ bản trong selectedoption để phân biệt kiểu tuỳ chọn với kiểu bản xem trước. Trong trường hợp này, văn bản xuất hiện trong tuỳ chọn có thể bị ẩn đi trong selectedoption.

selectedoption .text {
  display: none;
}

Một trong những ưu điểm lớn nhất khi sử dụng lại phần tử <select> cho API này là khả năng tương thích ngược. Khi chọn quốc gia này, bạn có thể thấy một giao diện người dùng được tuỳ chỉnh với hình ảnh cờ trong các lựa chọn để người dùng dễ dàng phân tích cú pháp nội dung hơn. Vì trình duyệt không được hỗ trợ sẽ bỏ qua các dòng mà chúng không hiểu, chẳng hạn như nút tuỳ chỉnh, danh sách dữ liệu, chế độ đã chọn và hình ảnh trong các lựa chọn, nên phương án dự phòng sẽ tương tự như giao diện người dùng chọn mặc định hiện tại.

Với các lựa chọn có thể tuỳ chỉnh, khả năng là vô tận. Tôi đặc biệt thích bộ chọn quốc gia theo phong cách Airbnb này vì có một phong cách thông minh cho thiết kế phản hồi nhanh. Bạn có thể thực hiện điều này và nhiều việc khác nữa với lựa chọn kiểu cách sắp tới, biến tính năng này thành một bổ sung rất cần thiết cho nền tảng web.

Phong cầm độc quyền

Việc giải quyết một số kiểu chọn lọc (và tất cả các thành phần đi kèm) không phải là thành phần giao diện người dùng duy nhất mà nhóm Chrome đang tập trung vào. Bản cập nhật bổ sung đầu tiên của thành phần là khả năng tạo đàn phong cầm độc quyền, trong đó mỗi lần chỉ có thể mở một vật phẩm trong đàn phong cầm

Cách bật tính năng này là áp dụng cùng một giá trị tên cho nhiều phần tử chi tiết, từ đó tạo ra một nhóm chi tiết được kết nối, giống như một nhóm các nút chọn

<details name="learn-css" open>
  <summary>Welcome to Learn CSS!</summary>
</details>

<details name="learn-css">
  <summary>Box Model</summary>
  <p>...</p>
</details>

<details name="learn-css">
  <summary>Selectors</summary>
  <p>...</p>
</details>

:user-valid và :user-invalid

Một điểm cải tiến khác về thành phần giao diện người dùng là các lớp giả :user-valid và :user-invalid. Ổn định trong tất cả trình duyệt gần đây, các lớp giả :user-valid và :user-invalid hoạt động tương tự như các lớp giả :valid và :invalid, nhưng chỉ khớp với một phần điều khiển biểu mẫu sau khi người dùng đã tương tác đáng kể với dữ liệu đầu vào. Điều này có nghĩa là cần ít mã hơn đáng kể để xác định xem giá trị biểu mẫu đã được tương tác hay đã trở nên "bẩn". Điều này có thể rất hữu ích trong việc cung cấp phản hồi cho người dùng và giảm nhiều tập lệnh cần thiết để thực hiện việc này trước đây.

input:user-valid,
select:user-valid,
textarea:user-valid {
    --state-color: green;
    --bg: linear-gradient(...);
}

input:user-invalid,
select:user-invalid,
textarea:user-invalid {
    --state-color: red;
    --bg: linear-gradient(...);
}

Tìm hiểu thêm về cách sử dụng phần tử giả xác thực biểu mẫu user-*.

field-sizing: content

Một nội dung cập nhật tiện lợi khác cho thành phần đã ra mắt gần đây là field-sizing: content. API này có thể được áp dụng cho các thành phần điều khiển biểu mẫu như dữ liệu đầu vào và vùng văn bản. Thao tác này cho phép kích thước của đầu vào tăng (hoặc thu nhỏ) tuỳ theo nội dung. field-sizing: content có thể đặc biệt thuận tiện cho vùng văn bản vì bạn không còn được giải quyết cho các kích thước cố định nữa. Do đó, bạn có thể phải cuộn lên để xem nội dung bạn đã viết trong các phần trước của câu lệnh trong một hộp nhập quá nhỏ.

textarea, select, input {
  field-sizing: content;
}

Tìm hiểu thêm về cách định kích thước trường.

<hr> tại <select>

Một tính năng thành phần nhỏ nhưng hữu ích khác là khả năng bật <hr> hoặc phần tử quy tắc ngang trong phần lựa chọn. Mặc dù phương pháp này không được sử dụng nhiều về ngữ nghĩa, nhưng nó giúp bạn tách riêng nội dung trong một danh sách chọn lọc, đặc biệt là nội dung mà bạn có thể không nhất thiết muốn nhóm với một nhóm tối ưu hoá, chẳng hạn như giá trị phần giữ chỗ.

<select name="majors" id="major-select">
  <option value="">Select a major</option>
  <hr>
  <optgroup label="School of Fine Arts">
    <option value="arthist">
Art History
  </option>
  <option value="finearts">
    Fine Arts
  </option>
...
</select>

Tìm hiểu thêm về cách sử dụng sử dụng số giờ chọn lọc

Cải thiện chất lượng cuộc sống

Chúng ta không ngừng lặp đi lặp lại và không chỉ dừng lại ở hoạt động tương tác và thành phần. Có nhiều thông tin cập nhật khác về chất lượng cuộc sống đã được gửi đến trong năm vừa qua.

Lồng ghép với thiết bị quan sát

Tính năng lồng ghép CSS gốc đã có mặt trên tất cả các trình duyệt vào năm ngoái, và từ đó đã được cải thiện để hỗ trợ tương lai, nghĩa là & trước khi tên phần tử không còn là yêu cầu bắt buộc nữa. Điều này giúp cho việc lồng ghép có cảm giác thoải mái hơn rất nhiều và tương tự như cách tôi đã từng làm trước đây.

Một trong những điều tôi thích về tính năng lồng ghép CSS là nó cho phép bạn chặn các thành phần một cách trực quan, và trong các thành phần đó bao gồm cả trạng thái và đối tượng sửa đổi, chẳng hạn như truy vấn vùng chứa và truy vấn đa phương tiện. Trước đây, tôi đã có thói quen nhóm tất cả những truy vấn này ở cuối tệp cho mục đích cụ thể. Giờ đây, bạn có thể viết chúng theo cách hợp lý, ngay bên cạnh phần còn lại của mã

.card {
  /* card base styles */

  h2 {
    /* child element style */
  }

  &.highlight {
    /* modifier style */
  }

  &:hover, &:focus {
    /* state styles */
  }

  @container (width >= 300px) {
    /* container query styles */
  }
}

Căn chỉnh nội dung cho bố cục khối

Một thay đổi rất thú vị khác là khả năng sử dụng các cơ chế căn giữa như align-content trong bố cục khối. Điều này có nghĩa là giờ đây, bạn có thể làm những việc như căn giữa theo chiều dọc trong một div mà không cần áp dụng bố cục linh hoạt hoặc bố cục lưới, cũng như không có tác dụng phụ như ngăn thu gọn lề – điều mà bạn có thể không muốn với các thuật toán bố cục đó.

div {
  align-content: center;
}

Xuống dòng tự động: cân bằng và đẹp mắt

Nói về bố cục, bố cục văn bản đã được cải thiện đáng kể nhờ có thêm text-wrap: balance và pretty. text-wrap: balance được dùng cho một khối văn bản đồng nhất hơn, trong khi text-wrap: pretty tập trung vào việc giảm bớt các singleton ở dòng cuối cùng trong văn bản.

h1 {
  text-wrap: balance;
}

Tìm hiểu thêm về thuộc tính text-wrap: cán cân.

Tin cập nhật về kiểu chữ quốc tế

Bản cập nhật bố cục kiểu chữ cho tính năng văn bản CJK đã có nhiều thay đổi thú vị trong năm qua, chẳng hạn như tính năng word-break: auto-phrase gói đường kẻ ở ranh giới của cụm từ tự nhiên.

Và text-spacing-trim, áp dụng khoảng cách giữa các ký tự dấu câu để cải thiện mức độ dễ đọc của kiểu chữ Trung, Nhật và Hàn nhằm mang lại kết quả bắt mắt hơn.

Cú pháp màu tương đối

Trong thế giới giao diện màu, chúng ta đã thấy một bản cập nhật lớn với cú pháp màu tương đối.

Trong ví dụ này, màu ở đây sử dụng giao diện dựa trên Oklch. Khi giá trị sắc độ điều chỉnh dựa trên thanh trượt, toàn bộ giao diện sẽ thay đổi. Bạn có thể thực hiện điều này bằng cú pháp màu tương đối. Nền sử dụng màu chính, dựa trên sắc độ và điều chỉnh độ sáng, kênh sắc độ và kênh màu để điều chỉnh giá trị của màu đó. --i là chỉ mục đồng cấp trong danh sách để tăng dần giá trị, cho biết cách bạn có thể kết hợp bước với các thuộc tính tuỳ chỉnh và cú pháp màu tương đối để tạo giao diện.

:root {
  --hue: 230;
  --primary: oklch(70% .2 var(--hue));
}

li {
  --_bg: oklch(from var(--primary)
    calc(l - (var(--i) * .05))
    calc(c - (var(--i) * .01))
    calc(h - (var(--i) + 5)));
}

Hàm light-dark()

Cùng với hàm light-dark(), việc tuỳ chỉnh giao diện đã trở nên linh hoạt và đơn giản hơn nhiều.

Hàm light-dark() là một điểm cải tiến mang tính tiện dụng, giúp đơn giản hoá các tuỳ chọn sắp xếp giao diện màu để bạn có thể viết kiểu giao diện một cách ngắn gọn hơn, như đã được Adam Argyle minh hoạ rất rõ ràng trong sơ đồ trực quan này. Trước đây, bạn cần 2 khối mã khác nhau (giao diện mặc định và truy vấn lựa chọn ưu tiên của người dùng) để thiết lập các tuỳ chọn giao diện. Giờ đây, bạn có thể viết các lựa chọn kiểu này cho cả giao diện sáng và tối trong cùng một dòng CSS bằng cách sử dụng hàm light-dark().

html {
  color-scheme: light dark;
}

button {
    background-color: light-dark(lightblue, darkblue);
}

Nếu người dùng đã chọn giao diện sáng, nút này sẽ có nền màu xanh dương nhạt. Nếu người dùng đã chọn giao diện tối, nút này sẽ có nền màu xanh dương đậm.

Bộ chọn :has()

Và trong tháng 12 năm ngoái, tôi sẽ bỏ sót khi nói về giao diện người dùng hiện đại mà không đề cập đến một trong những điểm nổi bật về khả năng tương tác có tác động lớn nhất từ năm ngoái, đó chính là bộ chọn :has(), xuất hiện trên các trình duyệt vào tháng 12 năm ngoái. API này là một yếu tố đột phá trong việc viết các kiểu logic.

Bộ chọn :has() cho phép bạn kiểm tra xem một phần tử con có các phần tử con cụ thể hay không hoặc liệu những phần tử con đó có đang ở một trạng thái cụ thể hay không. Về cơ bản, bộ chọn này cũng có thể hoạt động như một bộ chọn mẹ.

:has() đã được chứng minh là đặc biệt hữu ích đối với nhiều công ty, bao gồm cả PolicyBazaar, công ty sử dụng :has() để tạo kiểu cho các khối dựa trên nội dung bên trong của họ, chẳng hạn như trong phần so sánh, trong đó kiểu sẽ điều chỉnh xem có kế hoạch so sánh trong khối hay không hoặc nếu khối đó trống.

“Với bộ chọn :has(), chúng tôi có thể loại bỏ việc xác thực dựa trên JavaScript đối với lựa chọn của người dùng và thay thế bằng một giải pháp CSS hoạt động trơn tru với trải nghiệm tương tự như trước đây.– Aman Soni, Trưởng nhóm kỹ thuật, PolicyBazaar”

Cụm từ tìm kiếm về vùng chứa

Một bổ sung quan trọng khác cho web hiện mới ra mắt và ngày càng được sử dụng nhiều là truy vấn vùng chứa, cho phép truy vấn kích thước nội tại của phần tử mẹ để áp dụng kiểu: một lược răng tinh gọn hơn nhiều so với các truy vấn đa phương tiện chỉ truy vấn kích thước khung nhìn.

Gần đây, Angular vừa ra mắt một trang web tài liệu mới, đẹp mắt trên angular.dev bằng cách sử dụng các truy vấn vùng chứa để tạo kiểu cho các khối tiêu đề dựa trên không gian có sẵn trên trang. Vì vậy, ngay cả khi bố cục thay đổi và chuyển từ bố cục thanh bên nhiều cột sang bố cục một cột, các khối tiêu đề có thể tự điều chỉnh.

Nếu không có truy vấn vùng chứa, việc thực hiện những việc như thế này khá khó khăn và gây tổn hại đến hiệu suất, đòi hỏi trình quan sát thay đổi kích thước và trình quan sát phần tử. Giờ đây, việc tạo kiểu cho một phần tử dựa trên kích thước mẹ không hề đơn giản.

@property

Và cuối cùng, chẳng bao lâu nữa, chúng tôi rất vui khi thấy @property land trong Baseline. Đây là tính năng chính để cung cấp ý nghĩa ngữ nghĩa cho các thuộc tính tuỳ chỉnh CSS (còn được gọi là biến CSS) và cho phép hàng loạt tính năng tương tác mới. @property cũng kích hoạt các giá trị ngữ cảnh, kiểm tra kiểu, mặc định và dự phòng trong CSS. Mở ra cánh cửa cho các tính năng mạnh mẽ hơn nữa như truy vấn kiểu dải ô. Đây là một tính năng chưa từng có trước đây và hiện cung cấp rất nhiều chiều sâu cho ngôn ngữ của CSS.

@property --card-bg {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0bae8;
}

Kết luận

Với tất cả những tính năng mới mẻ và mạnh mẽ này trên giao diện người dùng, bạn có thể sử dụng vô vàn khả năng trên nhiều trình duyệt. Trải nghiệm tương tác mới lạ với hoạt ảnh di chuyển và chuyển đổi chế độ xem giúp web trở nên linh hoạt và tương tác hơn theo cách chúng tôi chưa từng thấy trước đây. Ngoài ra, các thành phần giao diện người dùng cấp độ tiếp theo giúp bạn dễ dàng xây dựng các thành phần mạnh mẽ, được tuỳ chỉnh đẹp mắt mà không làm mất toàn bộ trải nghiệm gốc. Cuối cùng, việc cải thiện chất lượng cuộc sống về kiến trúc, bố cục, kiểu chữ và thiết kế thích ứng không chỉ giải quyết những vấn đề nhỏ mà còn cung cấp cho nhà phát triển các công cụ cần thiết để xây dựng các giao diện phức tạp hoạt động trên nhiều loại thiết bị, kiểu dáng và nhu cầu của người dùng.

Với các tính năng mới này, bạn có thể loại bỏ tập lệnh của bên thứ ba đối với những tính năng nặng về hiệu suất như kỹ thuật cuộn và chia sẻ kết nối các phần tử với nhau bằng vị trí neo, tạo chuyển đổi trang linh hoạt, cuối cùng là tạo kiểu trình đơn thả xuống và cải thiện cấu trúc tổng thể của mã một cách tự nhiên.

Giờ là thời điểm tốt nhất để trở thành một nhà phát triển web. Kể từ khi ra mắt CSS3, chưa có nhiều người háo hức đón chờ. Những tính năng chúng tôi cần nhưng chỉ mơ ước thực sự có thể đặt chân đến trong quá khứ, cuối cùng đã trở thành hiện thực và trở thành một phần của nền tảng. Và chính vì ý kiến của các bạn mà chúng tôi có thể ưu tiên và cuối cùng là hiện thực hoá những tính năng này. Chúng tôi đang nỗ lực để giúp bạn dễ dàng thực hiện những công việc khó khăn, tẻ nhạt một cách tự nhiên để bạn có thể dành nhiều thời gian hơn cho việc xây dựng những thứ quan trọng – như các tính năng cốt lõi và các chi tiết thiết kế làm cho thương hiệu của bạn khác biệt.

Để tìm hiểu thêm về những tính năng mới này khi chúng ra mắt, hãy theo dõi tại developer.chrome.com và web.dev. Đây là nơi nhóm chúng tôi chia sẻ những tin tức mới nhất về công nghệ web. Hãy dùng thử hoạt ảnh điều khiển bằng thao tác cuộn, chuyển đổi chế độ xem, vị trí neo hoặc thậm chí là lựa chọn có kiểu cách và cho chúng tôi biết suy nghĩ của bạn. Chúng tôi luôn sẵn sàng lắng nghe và sẵn sàng trợ giúp.