Kiểm soát bố cục vĩ mô và vi mô trong thời đại mới của thiết kế web thích ứng.
Thiết kế thích ứng hiện nay
Ngày nay, khi sử dụng thuật ngữ "thiết kế thích ứng", nhiều khả năng bạn sẽ nghĩ đến việc sử dụng các truy vấn nội dung nghe nhìn để thay đổi bố cục khi đổi kích thước một thiết kế từ kích thước di động thành kích thước máy tính bảng cho đến kích thước máy tính.
Nhưng sắp tới, cảm nhận này về thiết kế thích ứng có thể bị coi là đã lỗi thời so với việc sử dụng bảng cho bố cục trang.
Các truy vấn nội dung nghe nhì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 vẫn thiếu nhiều tính năng. Các API này không có khả năng phản hồi nhu cầu của người dùng và không thể chèn kiểu thích ứng vào chính các thành phần.
Bạn có thể sử dụng thông tin chung trong khung nhìn để 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 và điều đó không hoạt động khi hệ thống thiết kế của chúng tôi dựa trên thành phần chứ không dựa trên trang.
Tin vui là hệ sinh thái đang thay đổi và đang thay đổi khá nhanh chóng. CSS đang phát triển và một kỷ nguyên mới của thiết kế thích ứng đang sắp đế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, vào khoảng 2010-2012, chúng tôi chứng kiến sự thay đổi lớn với thiết kế dành cho thiết bị di động và thiết kế thích ứng, cùng với sự xuất hiện của CSS3.
Kết quả cho thấy một lần nữa, hệ sinh thái này đã sẵn sàng cho một số thay đổi khá lớn sẽ xảy ra 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, đưa ra thông tin và bắt đầu triển khai cho kỷ nguyên tiếp theo của thiết kế thích ứng.
Những bản 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 nội dung nghe nhìn cho các loại màn hình mới, chẳng hạn như màn hình có thể gập lại.
Thích ứng với người dùng
Các tính năng đa phương tiện theo lựa chọn ưu tiên mới của người dùng cho phép bạn điều chỉnh trải nghiệm web sao cho phù hợp với các 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.
Những tính năng nghe nhìn này bao gồm:
prefers-reduced-motionprefers-contrastprefers-reduced-transparencyprefers-color-schemeinverted-colors- Và các dữ liệu khác
Các tính năng ưu tiên dựa trên các lựa chọn ưu tiên mà người dùng đã đặt trong hệ điều hành, đồng thời giúp xây dựng trải nghiệm web mạnh mẽ và được cá nhân hoá, đặc biệt là đối với những người có nhu cầu hỗ trợ tiếp cận.
prefers-reduced-motion
Người dùng đã đặt tuỳ chọn hệ điều hành cho chuyển động giảm đ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 sặc sỡ khác khi sử dụng web.
Với prefers-reduced-motion, bạn có thể thiết kế các trang của mình với tư duy giảm chuyển động và tạo trải nghiệm nâng cao về chuyển động cho những người chưa đặ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ơ sở là sự phân bố mờ để hiển thị thông tin đó, còn trải nghiệm nâng cao hiệu ứng chuyển động là dạng lật thẻ.
Ưu tiên chuyển động được giảm bớt không nên có nghĩa là "không có chuyển động", vì chuyển động rất quan trọng trong việc truyền tải thông tin trực tuyến. Thay vào đó, hãy cung cấp trải nghiệm cơ sở vững chắc để hướng dẫn người dùng mà không cần di chuyển không cần thiết, đồng thời nâng cao dần trải nghiệm đó cho người dùng mà không cần đến các lựa chọn ưu tiên hay nhu cầu hỗ trợ tiếp cận đó.
prefers-color-scheme
Một tính năng đa phương tiện ưu tiên khác 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 ưu tiên. Trong hệ điều hành, cho dù là trên máy tính hay thiết bị di động, người dùng đều có thể thiết lập lựa chọn ưu tiên về giao diện sáng, tối hoặc tự động. Các 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 cách sử dụng thuộc tính tuỳ chỉnh CSS, việc hoán đổi các 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ị giao diện màu, chẳng hạn như backgroundColor và textOnPrimary để tự động điều chỉnh theo giao diện mới trong truy vấn nội dung nghe nhìn.
Để dễ dàng kiểm thử một số truy vấn lựa chọn ưu tiên trong số này, bạn có thể sử dụng DevTools để mô phỏng thay vì mở các 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ế giao diện tối, không chỉ có việc đảo ngược màu nền và màu văn bản hay thanh cuộn tối. Có một vài điểm bạn có thể không nhận ra. 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à vẽ một phần tử về phía trước, bạn nên sử dụng ánh sáng trong màu nền của phần tử để vẽ phần tử đó về phía trước. Đ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 tuỳ chỉnh hơn cho người dùng mà còn có thể cải thiện đáng kể thời lượng pin của màn hình AMOLED. Đó là những màn hình mà chúng ta thấy trên các điện thoại cao cấp mới hơn và 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 pin lên tới 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 từ việc so sánh màn hình phát trên YouTube với một video tạm dừng ở độ sáng màn hình 100% bằng giao diện tối cho giao diện người dùng của ứng dụng so với 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ó để có thể mô tả đúng hơn những lợi ích mà việc chuyển đổi từ thiết kế thích ứng dựa trên trang sang thiết kế thích ứng dựa trên vùng chứa sẽ phát triển hệ sinh thái thiết kế.
Dưới đây là ví dụ về những tính năng mạnh mẽ mà truy vấn vùng chứa mang lại. Bạn có thể chỉnh sửa 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, kích thước phông chữ và bố cục tổng thể dựa trên vùng chứa mẹ của phần tử đó:
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 một bố cục được tạo bằng Lưới CSS. Mỗi thành phần phù hợp với sự phân bổ không gian duy nhất và tự tạo kiểu cho phù hợp.
Mức độ linh hoạt này là điều không thể nếu chỉ truy vấn nội dung đ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ế thích ứng. Điều này có nghĩa là nếu bạn đặt thành phần thẻ này vào một 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ì thành phần đó cũng sở hữu thông tin và kích thước thích ứng theo vùng chứa, chứ không phải khung nhìn
Điều này đòi hỏi phải có quy tắc @container. Điều này hoạt động theo cách tương tự như truy vấn nội dung đa phương tiện với @media, nhưng thay vào đó, @container truy vấn vùng chứa mẹ để lấy thông tin thay vì truy vấn 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 đó, 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 phần tử đó, bằng cách sử dụng min-width hoặc max-width.
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 kích thước phông chữ thời gian khi vùng chứa nhỏ hơn 850px.
Thẻ truy vấn vùng chứa
Trên trang web minh hoạ này, mỗi thẻ sản phẩm, bao gồm cả thẻ trong thẻ chính, thanh bên của các mục đã xem gần đây và lưới sản phẩm, đều là thành phần giống hệt nhau, có cùng mã đánh dấu.
Không có truy vấn phương tiện nào 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ử di chuyển vào không gian của chúng và bố trí lại lưới khi không gian đó quá nén (có nghĩa là lưới đạ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 được đặt thành display: flex, hướng này có hướng linh hoạt mặc định là "hàng".
Khi có ít không gian hơn, ngăn xếp thẻ sản phẩm. Mỗi thẻ sản phẩm sẽ tự tạo kiểu, điều mà không thể nếu chỉ riêng với các kiểu toàn cầu.
Kết hợp truy vấn vùng chứa với truy vấn phương tiện
Có rất nhiều trường hợp sử dụng truy vấn vùng chứa, một trường hợp là thành phần lịch. Bạn có thể sử dụng các truy vấn vùng chứa để sắp xếp 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 có sẵn của thành phần mẹ.
Vùng chứa minh hoạ này truy vấn để thay đổi bố cục và kiểu của ngày và ngày trong tuần của lịch, cũng như điều chỉnh lề và kích thước phông chữ cho các sự kiện đã lên lịch để giúp chúng phù hợp hơn với không gian.
Sau đó, hãy sử dụng truy vấn nội dung nghe nhìn để chuyển đổi 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 combine các truy vấn nội dung nghe nhìn (điều chỉnh kiểu chung hoặc macro) với các 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ĩ về bố cục Vĩ mô và Vi mô trong cùng một thành phần giao diện người dùng để cho phép thực hiện một số quyết định thiết kế chi tiết.
Sử dụng truy vấn vùng chứa ngay hôm nay
Bạn hiện có thể phát các bản minh hoạ này phía sau cờ trong Chrome Canary. Chuyển đến about://flags trong Canary rồi bật cờ #enable-container-queries.
Việc này sẽ hỗ trợ các giá trị @container, inline-size và block-size cho thuộc tính contain và phương thức triển khai Lưới LayoutNG.
Cờ cũng bật các tính năng Công cụ của Chrome cho nhà phát triển tương ứng. Tìm hiểu cách kiểm tra và gỡ lỗi các 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 các truy vấn vùng chứa, nhóm làm việc CSS cũng đang tích cực thảo luận về các kiểu theo phạm vi để giúp lập không gian tên phù hợp và tránh xung đột cho các thành phần.
Kiểu có giới hạn cho phép định kiểu cho từng thành phần và truyền qua để tránh xung đột khi đặ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 khung. Giờ đây, quy cách này cho phép chúng ta viết kiểu đóng gói nguyên gốc cho các thành phần bằng 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 */ }
}
Việc xác định phạm vi sẽ cho phép chúng ta tạo các bộ chọn "có hình bánh vòng", trong đó chúng ta có thể chỉ định vị trí đóng gói kiểu và nơi thoát khỏi kiểu trong phạm vi đó để tham chiếu lại kiểu chung hơn.
Ví dụ: bảng điều khiển thẻ, trong đó chúng ta muốn các thẻ có kiểu theo phạm vi và bảng điều khiển bên trong các thẻ có kiểu mẹ.
Thích ứng với hệ số hình dạng
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ế thích ứng là sự thay đổi về hệ số hình dạng cùng khả năng ngày càng tăng về 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 có thể gập hoặc linh hoạt và việc thiết kế cho màn hình trải rộng là một ví dụ về trường hợp chúng ta có thể thấy sự thay đổi về hệ số hình dạng hiện nay. Và trải 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 nhu cầu và hệ số hình dạng mới này.
Truy vấn
nội dung nghe nhìn
thử nghiệm cho trải nghiệm kéo dài màn hình có thể giúp ích cho chúng ta tại đây. Mã này hiện có hành vi như sau: @media
(spanning: <type of fold>). Bản minh hoạ thiết lập một bố cục lưới với 2 cột: một cột có chiều rộng là --sidebar-width, tức là 5 rem theo mặc định và cột còn lại là 1fr. Khi bố cục được xem trên một màn hình kép có một đường gập dọc duy nhất, giá trị của --sidebar-width sẽ được cập nhật với giá trị môi trường của đường 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;
}
Thao tác này sẽ bật bố cục mà trong đó thanh bên (trong trường hợp này là thành phần điều hướng) sẽ lấp đầy không gian của một trong các màn hình đầu tiên, nơi giao diện người dùng ứng dụng lấp đầy màn hình còn lại. Điều này giúp tránh "nếp" trong giao diện người dùng.
Bạn có thể kiểm thử màn hình có thể gập lại trong trình mô phỏng Công cụ của Chrome cho nhà phát triển để giúp gỡ lỗi và màn hình nguyên mẫu mở rộng trực tiếp trong trình duyệt.
Kết luận
Việc 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 các truy vấn vùng chứa và kiểu theo phạm vi lại quan trọng đến vậy. Chúng cung cấp cho bạn cơ hội tách biệt các kiểu thành phần từ bố cục trang và kiểu chung, cũng như kiểu người dùng, cho phép thiết kế đáp ứng linh hoạt hơn. Điều này có nghĩa là bạn hiện có thể thiết kế bố cục macro bằng cách sử dụng các truy vấn nội dung nghe nhìn dựa trên trang, bao gồm cả sắc thái trải dài màn hình. Đồng thời, sử dụng các bố cục vi mô với các truy vấn vùng chứa trên các thành phần, đồng thời thêm các truy vấn nội dung nghe nhì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 các lựa chọn ưu tiên và nhu cầu riêng của họ.
Đây là quảng cáo thích ứng mới.
Nó kết hợp bố cục macro với bố cục vi mô, và trên hết là tính đến khả năng tuỳ chỉnh của người dùng và hệ số hình dạng.
Chỉ riêng bất kỳ thay đổi nào nêu trên cũng sẽ tạo thành một sự thay đổi đáng kể trong cách chúng tôi thiết kế cho web. Tuy nhiên, khi kết hợp lại, hai định dạng này biểu thị một sự thay đổi thực sự lớn trong cách chúng ta Khái niệm thiết kế thích ứng. Đã đến lúc suy 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ế thích ứng đã đến và bạn đã có thể bắt đầu tự mình khám phá.
web.dev/learnCSS
Còn bây giờ, nếu bạn muốn nâng cấp trò chơi CSS và có thể xem lại một số kiến thức cơ bản, nhóm của tôi sắp ra mắt một khoá học CSS hoàn toàn mới, hoàn toàn miễn phí và tài liệu tham khảo trên web.dev. Bạn có thể truy cập vào web.dev/learnCSS.
Tôi hy vọng bạn thích phần tổng quan này trong kỷ nguyên tiếp theo của thiết kế thích ứng, cũng như một số thông tin nguyên gốc sẽ đi kèm với nó. Tôi cũng hy vọng bạn cũng hào hứng như tôi về ý nghĩa của điều này đối với tương lai của thiết kế web.
Việc này mở ra một cơ hội rất lớn cho cộng đồng giao diện người dùng của chúng tôi để sử dụng các kiểu dựa trên thành phần, kiểu dáng mới và tạo trải nghiệm thích ứng cho người dùng.