Kiểm soát bố cục vĩ mô và vi mô trong kỷ nguyên mới của thiết kế web đáp ứng.
Thiết kế đáp ứng ngày nay
Ngày nay, khi sử dụng thuật ngữ "thiết kế đáp ứng", bạn có thể đang nghĩ đến việc sử dụng truy vấn đa phương tiện để thay đổi bố cục khi đổi kích thước thiết kế từ kích thước thiết bị di động sang kích thước máy tính bảng, rồi đến kích thước máy tính.
Nhưng chẳng bao lâu nữa, quan niệm này về thiết kế đáp ứng có thể bị coi là lỗi thời, giống như việc sử dụng bảng cho bố cục trang.
Truy vấn đa phương tiện dựa trên khung nhìn cung cấp cho bạn một số công cụ mạnh mẽ, nhưng thiếu nhiều sự tinh tế. Các thành phần này không có khả năng đáp ứng nhu cầu của người dùng và không thể tự chèn kiểu thích ứng vào thành phần.
Bạn có thể sử dụng thông tin khung nhìn chung để tạo kiểu cho các thành phần, nhưng các thành phần đó vẫn không có kiểu riêng và điều này không hiệu quả khi hệ thống thiết kế của chúng ta dựa trên thành phần chứ không phải dựa trên trang.
Tin vui là hệ sinh thái đang thay đổi và thay đổi khá nhanh. CSS đang phát triển và một kỷ nguyên mới của thiết kế đáp ứng đang đến gần.
Chúng tôi thấy điều này xảy ra khoảng 10 năm một lần. 10 năm trước, khoảng năm 2010-2012, chúng ta đã chứng kiến một sự thay đổi lớn về thiết kế đáp ứng và thiết bị di động, cũng như sự xuất hiện của CSS3.
Vì vậy, hệ sinh thái đã sẵn sàng cho một số thay đổi khá lớn đối với CSS. Các kỹ sư tại Chrome và trên nền tảng web đang tạo nguyên mẫu, lập thông số kỹ thuật và bắt đầu triển khai cho kỷ nguyên tiếp theo của thiết kế đáp ứng.
Những nội dung cập nhật này bao gồm các tính năng đa phương tiện dựa trên lựa chọn ưu tiên của người dùng, truy vấn vùng chứa và truy vấn đa phương tiện cho các loại màn hình mới, chẳng hạn như màn hình gập.
Phản hồi người dùng
Các tính năng đa phương tiện mới về lựa chọn ưu tiên của người dùng giúp bạn tạo kiểu cho trải nghiệm web phù hợp với lựa chọn ưu tiên và nhu cầu cụ thể của người dùng. Điều này có nghĩa là các tính năng đa phương tiện ưu tiên cho phép bạn điều chỉnh trải nghiệm người dùng cho phù hợp với trải nghiệm của người dùng.
Các tính năng đa phương tiện theo lựa chọn ưu tiên của người dùng bao gồm:
prefers-reduced-motionprefers-contrastprefers-reduced-transparencyprefers-color-schemeinverted-colors- Cùng nhiều thông tin khác
Các tính năng lựa chọn ưu tiên sẽ chọn các lựa chọn ưu tiên mà người dùng đã đặt trong hệ điều hành của họ, đồng thời giúp xây dựng trải nghiệm trên web mạnh mẽ và được cá nhân hoá hơn, đặc biệt là cho những người có nhu cầu hỗ trợ tiếp cận.
prefers-reduced-motion
Người dùng đã đặt lựa chọn ưu tiên về hệ điều hành cho giảm chuyển động đang yêu cầu ít ảnh động hơn khi sử dụng máy tính nói chung. Do đó, có thể họ sẽ không thích màn hình giới thiệu hào nhoáng, ảnh động lật thẻ, trình tải phức tạp hoặc các ảnh động hào nhoáng khác khi sử dụng web.
Với prefers-reduced-motion, bạn có thể thiết kế các trang có tính đến chế độ giảm chuyển động và tạo trải nghiệm nâng cao chuyển động cho những người không đặt lựa chọn ưu tiên này.
Thẻ này có thông tin ở cả hai mặt. Trải nghiệm giảm chuyển động cơ bản là hiệu ứng mờ dần để hiển thị thông tin đó, trong khi trải nghiệm tăng cường chuyển động là hiệu ứng lật thẻ.
Prefers-reduced-motion không có nghĩa là "không chuyển động", vì chuyển động rất quan trọng để truyền tải thông tin trực tuyến. Thay vào đó, hãy cung cấp trải nghiệm cơ bản, vững chắc để hướng dẫn người dùng mà không cần chuyển động không cần thiết, đồng thời dần cải tiến tăng dần trải nghiệm đó cho những người dùng không có nhu cầu hoặc lựa chọn ưu tiên về hỗ trợ tiếp cận.
prefers-color-scheme
Một tính năng đa phương tiện khác về lựa chọn ưu tiên là
prefers-color-scheme. Tính năng này giúp bạn tuỳ chỉnh giao diện người dùng theo giao diện mà người dùng ưa thích. Trong hệ điều hành của mình, dù là trên máy tính hay thiết bị di động, người dùng đều có thể đặt lựa chọn ưu tiên cho giao diện sáng, tối hoặc tự động. Giao diện này sẽ thay đổi tuỳ thuộc vào thời gian trong ngày.
Nếu bạn thiết lập trang bằng thuộc tính tuỳ chỉnh CSS, thì việc hoán đổi giá trị màu sẽ trở nên đơn giản. Bạn có thể nhanh chóng cập nhật các giá trị chủ đề màu sắc, chẳng hạn như backgroundColor và textOnPrimary để tự động điều chỉnh theo chủ đề mới trong truy vấn phương tiện.
Để dễ dàng kiểm thử một số truy vấn lựa chọn ưu tiên này, bạn có thể sử dụng Công cụ cho nhà phát triển để mô phỏng thay vì mở lựa chọn ưu tiên về hệ thống mỗi lần.
Thiết kế cho giao diện tối
Khi thiết kế cho giao diện tối, bạn không chỉ cần đảo ngược màu nền và màu văn bản hoặc thanh cuộn tối. Có một vài điều cần cân nhắc mà bạn có thể chưa biết. Ví dụ: bạn có thể cần giảm độ bão hoà màu trên nền tối để giảm độ rung hình ảnh.
Thay vì sử dụng bóng để tạo chiều sâu và làm nổi bật một phần tử, bạn có thể sử dụng ánh sáng trong màu nền của phần tử để làm nổi bật phần tử đó. Điều này là do bóng đổ sẽ không hiệu quả trên nền tối.
Giao diện tối không chỉ mang lại trải nghiệm người dùng tuỳ chỉnh hơn mà còn có thể cải thiện đáng kể thời lượng pin trên màn hình AMOLED. Đó là những màn hình chúng ta thấy trên các điện thoại cao cấp mới hơn và chúng ngày càng trở nên phổ biến trên các thiết bị di động.
Một nghiên cứu về Android năm 2018 về giao diện tối cho thấy mức tiết kiệm điện năng lên đến 60%, tuỳ thuộc vào độ sáng màn hình và giao diện người dùng tổng thể. Số liệu thống kê 60% này có được từ việc so sánh màn hình phát của YouTube khi video bị tạm dừng ở độ sáng màn hình 100% khi dùng giao diện tối cho giao diện người dùng của ứng dụng so với khi dùng giao diện sáng.
Bạn nên luôn cung cấp trải nghiệm giao diện tối cho người dùng bất cứ khi nào có thể.
Thích ứng với vùng chứa
Một trong những lĩnh vực mới nổi thú vị nhất trong CSS là truy vấn vùng chứa, cũng thường được gọi là truy vấn phần tử. Thật khó để đánh giá thấp những gì mà sự chuyển đổi từ thiết kế đáp ứng dựa trên trang sang thiết kế đáp ứng dựa trên vùng chứa sẽ làm để phát triển hệ sinh thái thiết kế.
Sau đây là ví dụ về các khả năng mạnh mẽ mà truy vấn vùng chứa cung cấp. Bạn có thể điều chỉnh bất kỳ kiểu nào của phần tử thẻ, bao gồm cả danh sách đường liên kết, cỡ chữ và bố cục tổng thể dựa trên vùng chứa mẹ:
Ví dụ này cho thấy hai thành phần giống hệt nhau có hai kích thước vùng chứa khác nhau, cả hai đều chiếm không gian trong bố cục được tạo bằng CSS Grid. Mỗi thành phần đều phù hợp với không gian riêng và có kiểu dáng tương ứng.
Mức độ linh hoạt này là điều không thể thực hiện được nếu chỉ dùng truy vấn đa phương tiện.
Truy vấn vùng chứa cung cấp một phương pháp linh hoạt hơn nhiều cho thiết kế đáp ứng. Điều này có nghĩa là nếu bạn đặt thành phần thẻ này trong thanh bên hoặc phần chính hoặc trong một lưới bên trong phần nội dung chính của trang, thì chính thành phần đó sẽ sở hữu thông tin thích ứng và kích thước theo vùng chứa, chứ không phải khung nhìn
Điều này yêu cầu quy tắc @ @container. Quy tắc này hoạt động tương tự như truy vấn đa phương tiện bằng @media, nhưng thay vào đó, @container truy vấn vùng chứa mẹ để lấy thông tin thay vì khung nhìn và tác nhân người dùng.
.card {
container-type: inline-size;
}
@container (max-width: 850px) {
.links {
display: none;
}
.time {
font-size: 1.25rem;
}
/* ... */
}
Trước tiên, hãy đặt vùng chứa trên phần tử mẹ. Sau đó, hãy viết một truy vấn @container để tạo kiểu cho bất kỳ phần tử nào trong vùng chứa dựa trên kích thước của vùng chứa đó, bằng cách sử dụng min-width hoặc max-width.
Đoạn mã trên sử dụng max-width và đặt các đường liên kết thành display:none, cũng như giảm cỡ chữ của thời gian khi vùng chứa có chiều rộng nhỏ hơn 850px.
Thẻ truy vấn vùng chứa
Trong trang web minh hoạ về cây trồng này, mỗi thẻ sản phẩm (bao gồm cả thẻ trong phần chính, thanh bên của các mặt hàng đã xem gần đây và lưới sản phẩm) đều là cùng một thành phần, có cùng mã đánh dấu.
Không có truy vấn đa phương tiện nào được dùng để tạo toàn bộ bố cục này, chỉ có truy vấn vùng chứa. Điều này cho phép mỗi thẻ sản phẩm chuyển sang bố cục phù hợp để lấp đầy không gian của thẻ. Ví dụ: lưới sử dụng bố cục cột minmax để cho phép các phần tử tràn vào không gian của chúng và bố trí lại lưới khi không gian đó quá hẹp (tức là đạt đến kích thước tối thiểu).
.product {
container-type: inline-size;
}
@container (min-width: 350px) {
.card-container {
padding: 0.5rem 0 0;
display: flex;
}
.card-container button {
/* ... */
}
}
Khi có ít nhất 350px không gian trong lưới, bố cục thẻ sẽ chuyển sang chiều ngang bằng cách đặt thành display: flex, có hướng linh hoạt mặc định là "hàng".
Khi không gian hẹp hơn, các thẻ sản phẩm sẽ xếp chồng lên nhau. Mỗi thẻ sản phẩm đều có kiểu riêng, điều này không thể thực hiện được nếu chỉ dùng kiểu chung.
Kết hợp truy vấn vùng chứa với truy vấn đa phương tiện
Truy vấn vùng chứa có rất nhiều trường hợp sử dụng, một trong số đó là thành phần lịch. Bạn có thể sử dụng truy vấn vùng chứa để bố trí lại các sự kiện trên lịch và các phân đoạn khác dựa trên chiều rộng hiện có của vùng chứa mẹ.
Truy vấn vùng chứa minh hoạ này để thay đổi bố cục và kiểu của ngày và thứ trong tuần của lịch, cũng như điều chỉnh lề và cỡ chữ cho các sự kiện đã lên lịch để giúp các sự kiện đó phù hợp hơn với không gian.
Sau đó, hãy sử dụng truy vấn đa phương tiện để chuyển toàn bộ bố cục cho các kích thước màn hình nhỏ hơn. Ví dụ này cho thấy sức mạnh của việc kết hợp truy vấn đa phương tiện (điều chỉnh kiểu chung hoặc kiểu vĩ mô) với truy vấn vùng chứa (điều chỉnh phần tử con của vùng chứa và kiểu vi mô của chúng).
Vì vậy, giờ đây, chúng ta có thể nghĩ đến bố cục Macro và Micro trong cùng một thành phần giao diện người dùng để đưa ra một số quyết định thiết kế thực sự tinh tế.
Sử dụng truy vấn vùng chứa ngay hôm nay
Giờ đây, bạn có thể chơi các bản minh hoạ này bằng một cờ trong Chrome Canary. Chuyển đến about://flags trong Canary rồi bật cờ #enable-container-queries.
Thao tác này sẽ bật tính năng hỗ trợ cho các giá trị @container, inline-size và block-size cho thuộc tính contain và cách triển khai Lưới LayoutNG.
Cờ này cũng bật các tính năng tương ứng của Chrome DevTools. Tìm hiểu cách kiểm tra và gỡ lỗi truy vấn vùng chứa trong Công cụ cho nhà phát triển.
Kiểu trong phạm vi
Để xây dựng dựa trên truy vấn vùng chứa, hãy sử dụng kiểu trong phạm vi với @scope để giới hạn phạm vi của bộ chọn.
Kiểu trong phạm vi cho phép tạo kiểu theo thành phần cụ thể để tránh xung đột tên, điều mà nhiều khung và trình bổ trợ như mô-đun CSS đã cho phép chúng ta thực hiện trong các khung. Kiểu trong phạm vi cho phép bạn viết các kiểu được đóng gói sẵn cho các thành phần có CSS dễ đọc mà không cần điều chỉnh mã đánh dấu.
/* @scope (<root>#) [to (<boundary>#)]? { … } */
@scope (.tabs) to (.panel) {
:scope { /* targeting the scope root */ }
.light-theme :scope .tab { /* contextual styles */ }
}
Phạm vi cho phép bạn tạo bộ chọn "hình bánh rán", trong đó bạn có thể chỉ định giới hạn trên và giới hạn dưới. Bộ chọn có trong quy tắc @scope được so khớp giữa các giới hạn đó.
Ví dụ: một bảng điều khiển thẻ, trong đó bạn muốn các thẻ có kiểu trong phạm vi nhưng bảng điều khiển trong các thẻ đó không bị ảnh hưởng bởi các kiểu trong phạm vi đó.
Thích ứng với kiểu dáng thiết bị
Chủ đề tiếp theo trong cuộc trò chuyện của chúng ta về kỷ nguyên mới của thiết kế đáp ứng là sự thay đổi về kiểu dáng và khả năng ngày càng tăng của những gì chúng ta cần thiết kế cho cộng đồng web (chẳng hạn như màn hình thay đổi hình dạng hoặc thực tế ảo).
Màn hình gập hoặc màn hình linh hoạt và thiết kế cho màn hình trải rộng là một ví dụ về sự thay đổi kiểu dáng mà chúng ta có thể thấy hiện nay. Và việc mở rộng màn hình là một thông số kỹ thuật khác đang được nghiên cứu để đáp ứng các kiểu dáng và nhu cầu mới này.
Truy vấn nội dung nghe nhìn thử nghiệm cho chế độ trải dài trên màn hình có thể giúp chúng ta trong trường hợp này. Hiện tại, hành vi của ứng dụng như sau: @media
(spanning: <type of fold>). Bản minh hoạ thiết lập bố cục lưới có hai cột: một cột có chiều rộng là --sidebar-width (mặc định là 5rem) và cột còn lại là 1fr. Khi bố cục được xem trên màn hình kép có một nếp gấp dọc, giá trị của --sidebar-width sẽ được cập nhật bằng giá trị môi trường của nếp gấp bên trái.
:root {
--sidebar-width: 5rem;
}
@media (spanning: single-fold-vertical) {
--sidebar-width: env(fold-left);
}
main {
display: grid;
grid-template-columns: var(--sidebar-width) 1fr;
}
Điều này cho phép bố cục trong đó thanh bên (trong trường hợp này là thanh điều hướng) lấp đầy không gian của một trong các nếp gấp, trong khi giao diện người dùng của ứng dụng lấp đầy không gian còn lại. Điều này giúp ngăn chặn "nếp gấp" trong giao diện người dùng.
Bạn có thể kiểm thử màn hình gập trong trình mô phỏng Chrome DevTools để gỡ lỗi và tạo nguyên mẫu cho màn hình trải dài ngay trong trình duyệt.
Kết luận
Khám phá thiết kế giao diện người dùng ngoài màn hình phẳng là một lý do khác khiến truy vấn vùng chứa và kiểu trong phạm vi lại quan trọng đến vậy. Chúng cho phép bạn tách biệt kiểu thành phần khỏi bố cục trang, kiểu chung và kiểu người dùng, giúp thiết kế đáp ứng linh hoạt hơn. Điều này có nghĩa là giờ đây, bạn có thể thiết kế bố cục vĩ mô bằng cách sử dụng truy vấn đa phương tiện dựa trên trang, bao gồm cả các sắc thái trải dài trên màn hình. Đồng thời, sử dụng bố cục vi mô với truy vấn vùng chứa trên các thành phần và thêm truy vấn đa phương tiện dựa trên lựa chọn ưu tiên của người dùng để tuỳ chỉnh trải nghiệm người dùng dựa trên lựa chọn ưu tiên và nhu cầu riêng của họ.
Đây là giao diện thích ứng mới.
Nó kết hợp bố cục vĩ mô với bố cục vi mô, và trên hết, nó tính đến khả năng tuỳ chỉnh của người dùng và kiểu dáng.
Bất kỳ thay đổi nào trong số này cũng sẽ tạo ra một sự thay đổi đáng kể trong cách chúng ta thiết kế cho web. Nhưng khi kết hợp lại, chúng cho thấy một sự thay đổi thực sự lớn trong cách chúng ta hình thành khái niệm về thiết kế đáp ứng. Đã đến lúc nghĩ về thiết kế thích ứng ngoài kích thước khung nhìn và bắt đầu xem xét tất cả các trục mới này để có trải nghiệm tuỳ chỉnh và dựa trên thành phần tốt hơn.
Kỷ nguyên tiếp theo của thiết kế đáp ứng đã đến và bạn có thể bắt đầu tự khám phá.
web.dev/learnCSS
Và hiện tại, nếu bạn muốn nâng cấp trò chơi CSS của mình và có thể xem lại một số kiến thức cơ bản, thì nhóm của tôi sẽ ra mắt một khoá học và tài liệu tham khảo CSS hoàn toàn mới, hoàn toàn miễn phí trên web.dev. Bạn có thể truy cập vào khoá học này qua web.dev/learnCSS.
Tôi hy vọng bạn thích thông tin tổng quan này về kỷ nguyên tiếp theo của thiết kế đáp ứng và một số dữ liệu gốc sẽ đi kèm với kỷ nguyên này. Tôi cũng hy vọng bạn cũng hào hứng như tôi về ý nghĩa của kỷ nguyên này đối với tương lai của thiết kế web.
Điều này mở ra cơ hội lớn cho chúng ta với tư cách là một cộng đồng giao diện người dùng để áp dụng các kiểu dựa trên thành phần, kiểu dáng mới và tạo ra trải nghiệm thích ứng với người dùng.