Kiểm soát bố cục vĩ mô và vi mô trong kỷ nguyên mới của thiết kế web thích ứng.
Thiết kế đáp ứng hiện nay
Ngày nay, khi sử dụng thuật ngữ "thiết kế thích ứng", rất có thể bạn đang nghĩ đến việc sử dụng các truy vấn phương tiện để thay đổi bố cục khi thay đổi kích thước thiết kế từ kích thước dành cho thiết bị di động, đến kích thước dành cho máy tính bảng, cho đến kích thước dành cho máy tính.
Nhưng chẳng bao lâu nữa, quan điểm này về thiết kế thích ứng có thể được coi là lỗi thời như 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 hiển thị cung cấp cho bạn một số công cụ mạnh mẽ, nhưng lại thiếu nhiều sự tinh tế. Chúng không có khả năng đáp ứng nhu cầu của người dùng và khả năng chèn các kiểu phản hồi vào chính các thành phần.
Bạn có thể sử dụng thông tin về khung hiển thị 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 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à thay đổi khá nhanh. CSS đang phát triển và một kỷ nguyên mới của thiết kế thích ứng đang đến rất gần.
Chúng ta 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ới 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, một lần nữa, 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 mẫu, chỉ định 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.
Phản hồi người dùng
Các tính năng mới về nội dung nghe nhìn theo lựa chọn ưu tiên của người dùng cho phép bạn tạo kiểu cho trải nghiệm trên 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 về lựa chọ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 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 về lựa chọn ưu tiên sẽ ghi nhận những 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 tạo ra trải nghiệm web phù hợp và mạnh mẽ hơn, đặc biệt là đối với những người có nhu cầu hỗ trợ tiếp cận.
prefers-reduced-motion
Những người dùng đã đặt lựa chọn ưu tiên về hệ điều hành cho chế độ giảm chuyển động thường yêu cầu ít ảnh động hơn khi sử dụng máy tính. Do đó, có thể họ sẽ không thích màn hình giới thiệu bắt mắt, ảnh động lật thẻ, trình tải phức tạp hoặc các ảnh động bắt mắt khác khi sử dụng web.
Với prefers-reduced-motion, bạn có thể thiết kế các trang có chuyển động giảm, đồng thời tạo trải nghiệm có chuyển động nâng cao 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 chuyển động giảm cơ bản là hiệu ứng làm mờ để hiển thị thông tin đó, trong khi trải nghiệm chuyển động nâng cao là hiệu ứng lật thẻ.
Prefers-reduced-motion không có nghĩa là "không có chuyển động", vì chuyển động rất quan trọng đối với 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ơ 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 nâng cao dần trải nghiệm đó cho người dùng không có nhu cầu hoặc lựa chọn ưu tiên về khả năng tiếp cận.
prefers-color-scheme
Một tính năng khác về nội dung nghe nhìn theo 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 chủ đề mà người dùng của bạn muốn. Trong hệ điều hành của mình (trên máy tính hoặc thiết bị di động), người dùng có thể đặt lựa chọn ưu tiên cho giao diện sáng, tối hoặc tự động thay đổi tuỳ theo thời gian trong ngày.
Nếu bạn thiết lập trang bằng các thuộc tính tuỳ chỉnh CSS, thì 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 để điều chỉnh linh hoạt 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 về lựa chọn ưu tiên này, bạn có thể sử dụng DevTools để mô phỏng thay vì mở phần lựa chọn ưu tiên của 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ỉ đả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ể không nhận ra. Ví dụ: bạn có thể cần giảm độ rực màu trên nền tối để giảm hiện tượng rung hình.
Thay vì dùng bóng để tạo độ sâu và vẽ một phần tử về phía trước, bạn có thể muốn dùng ánh sáng trong background-color 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 đến trải nghiệm người dùng phù hợp 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 mà chúng ta thấy trên các điện thoại cao cấp đời mới 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 năm 2018 về Android cho thấy giao diện tối giúp 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% là kết quả của việc so sánh màn hình phát của YouTube với một video đang tạm dừng ở độ sáng màn hình 100% khi sử dụ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ể.
Điều chỉnh theo 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òn thường được gọi là truy vấn phần tử. Thật khó để đánh giá thấp tác động của việc chuyển 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 đối với sự phát triển của hệ sinh thái thiết kế.
Sau đây là ví dụ về những khả năng mạnh mẽ mà truy vấn vùng chứa mang lại. Bạn có thể thao tác với 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 thẻ:
Ví dụ này cho thấy 2 thành phần giống hệt nhau với 2 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 đều phù hợp với không gian phân bổ riêng và tự điều chỉnh kiểu dáng cho phù hợp.
Chỉ riêng các truy vấn về phương tiện không thể mang lại mức độ linh hoạt này.
Truy vấn vùng chứa mang đến 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 trong một thanh bên hoặc phần chính hoặc trong một lưới bên trong nội dung chính của trang, thì bản thân thành phần đó sẽ sở hữu thông tin và kích thước thích ứng theo vùng chứa chứ không phải theo khung hiển thị
Điều này yêu cầu quy tắc @ @container. Quy tắc này hoạt động tương tự như một truy vấn nội dung nghe nhì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ì khung hiển thị 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 chế độ hạn chế 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 phần tử đó, 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ữ 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ề nhà máy này, mỗi thẻ sản phẩm, bao gồm cả thẻ trong thành phần 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 về nội dung nghe nhìn nào được dùng để tạo toàn bộ bố cục này, chỉ có truy vấn về 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ử chuyển vào không gian của chúng và bố trí lại lưới khi không gian đó bị nén quá mứ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 đặt thành display: flex, có flex-direction mặc định là "row".
Khi không gian bị thu hẹp, các thẻ sản phẩm sẽ xếp chồng lên nhau. Mỗi thẻ sản phẩm tự tạo kiểu, điều mà chỉ kiểu chung không thể làm được.
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, trong đó có một trường hợp 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 có sẵn 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à kích thước phông chữ trên 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 dùng một truy vấn nội dung nghe nhì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 các truy vấn nội dung nghe nhìn (điều chỉnh các kiểu chung hoặc kiểu macro) với các truy vấn vùng chứa (điều chỉnh các thành phần con của vùng chứa và các kiểu vi mô của chúng).
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 những bản minh hoạ này khi bật 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 chế độ hỗ trợ cho các giá trị @container, inline-size và block-size cho thuộc tính contain và 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 các truy vấn vùng chứa trong Công cụ cho nhà phát triển.
Kiểu có phạm vi
Để tạo các truy vấn vùng chứa, hãy sử dụng các kiểu có phạm vi với @scope để giới hạn phạm vi tiếp cận của bộ chọn.
Các kiểu có phạm vi cho phép tạo kiểu dành riêng cho thành phần để tránh xung đột tên. Đây là đ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 có phạm vi cho phép bạn viết các kiểu được đóng gói một cách tự nhiê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. Các bộ chọn có trong quy tắc @scope sẽ được so khớp trong phạm vi giới hạn đó.
Ví dụ: bảng điều khiển thẻ, nơi bạn muốn các thẻ nhận được kiểu có 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 có phạm vi đó.
Điều chỉnh theo 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ế thích ứng là sự thay đổi về hệ số hình dạng và những khả năng ngày càng tăng mà chúng ta sẽ cần thiết kế cho cộng đồng web (chẳng hạn như màn hình có thể thay đổi hình dạng hoặc thực tế ảo).
Màn hình có thể gập lại 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ề nơi chúng ta có thể thấy sự thay đổi về hệ số hình dạng hiện nay. Và tính năng trải rộng màn hình là một thông số kỹ thuật khác đang được phát triển để đáp ứng những nhu cầu và hệ số hình dạng mới này.
Một truy vấn nội dung nghe nhìn thử nghiệm để trải rộng màn hình có thể giúp chúng ta ở đây. Hiện tại, hành vi của tính năng này như sau: @media
(spanning: <type of fold>). Bản minh hoạ thiết lập bố cục lưới có 2 cột: một cột có chiều rộng là --sidebar-width (theo mặc định là 5 rem) 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 nếp gấp dọc duy nhất, 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 mà thanh bên (trong trường hợp này là thành phần điều hướng) lấp đầy không gian của một trong các nếp gấp, trong đó 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 có thể gập lại trong trình mô phỏng Chrome DevTools để gỡ lỗi và tạo mẫu trải rộng màn hình 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 các truy vấn vùng chứa và kiểu có phạm vi lại quan trọng đến vậy. Chúng mang đến cho bạn cơ hội tách biệt các kiểu thành phần khỏi bố cục trang và các kiểu chung, cũng như kiểu người dùng, giúp thiết kế thích ứ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 các 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 rộng trên màn hình. Đồng thời, hãy sử dụng bố cục siêu nhỏ với các truy vấn vùng chứa trên các thành phần và thêm các truy vấn về 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à mẫu quảng cáo thích ứng mới.
Đây là sự kết hợp giữa bố cục vĩ mô và bố cục vi mô, đồng thời, nó còn tính đến chế độ tuỳ chỉnh của người dùng và kiểu dáng thiết bị.
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 thậm chí còn khái niệm hoá thiết kế thích ứng. Đã đến lúc bạn cần suy nghĩ về thiết kế thích ứng ngoài kích thước khung hiển thị và bắt đầu xem xét tất cả các trục mới này để có trải nghiệm dựa trên thành phần và tuỳ chỉnh 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
Hiện tại, nếu muốn nâng cao kỹ năng CSS và có thể xem lại một số kiến thức cơ bản, bạn có thể truy cập vào khoá học và tài liệu tham khảo hoàn toàn mới và miễn phí về CSS mà nhóm của tôi sắp ra mắt trên web.dev. Bạn có thể truy cập vào khoá học và tài liệu tham khảo này thông qua web.dev/learnCSS.
Tôi hy vọng bạn đã có được thông tin tổng quan hữu ích về kỷ nguyên tiếp theo của thiết kế thích ứng và một số thành phần cơ bản 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 một 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, các hệ số hình dạng mới và tạo ra trải nghiệm phản hồi người dùng.