Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Responsive Web Design

Element Queries: Tương lai của Thiết kế Web có Tính đáp ứng cao

by
Difficulty:IntermediateLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Media Queries là một phần quan trọng của thiết kế web hiện đại, nhưng chúng không phải lúc nào cũng hoàn hảo. Trong bài viết này chúng ta sẽ tìm hiểu ý tưởng của "element queries"; những gì mà nhiều người cho là tương lai của thiết kế web có tính đáp ứng cao (responsive).

Những ngày đầu

Bài viết của Ethan trong Thiết kế Web có Tính đáp ứng đã thay đổi cách mà chúng ta xây dựng các trang web mãi mãi. Bài viết của anh ấy tạo cảm hứng và nhanh chóng được áp dụng bởi các nhà thiết kế web và các nhà phát triển. Các cách tiếp cận chẳng hạn như "Mobile First", "Desktop First", và "Device Agnostic" đã nổi lên, các mẫu thiết kế đã được phát triển kể từ đó, các chuẩn mới chẳng hạn như phần tử <picture> đã được giới thiệu, và bây giờ chúng ta có vô số các  tuỳ chọn framework khác nhau làm cho việc phát triển một trang web có tính đáp ứng cao trở nên dễ dàng hơn.

Chúng ta không còn xây dựng các trang web cho một kích thước màn hình, trình duyệt hay thiết bị cụ thể nào nữa. Thay vào đó chúng ta xây dựng chúng để cho chúng hiển thị tốt trên bất kỳ thiết bị, và tại bất kỳ kích thước màn hình nào. Chúng ta làm điều đó bằng cách sử dụng "media queries" - đừng quên thẻ meta viewport.

Media Queries

Media Queries được thiết kế để cho phép chúng ta đóng khuôn các luật phong cách đối với một môi trường cụ thể. Một trong những việc sử dụng phổ biến nhất của Media Queries là để thay đổi phong cách trong một phạm vi nhất định của chiều rộng viewport. Ví dụ, đoạn mã sau đây ẩn thanh sidebar khi trang web được truy cập thông qua một khung nhìn rộng đến 720px.

Media Queries phát triển, cùng với các thiết bị này, với một số tính năng bổ sung chẳng hạn như orientation và resolution. Ví dụ sau cho thấy cách chúng ta có thể sử dụng một trong những tính năng này để phục vụ một tấm hình lớn hơn trên một màn hình độ phân giải cao.

Media queries đã trở thành một thành phần chủ yếu khi cung cấp một trải nghiệm có tính đáp ứng (responsive). Nâng cao kỹ năng của mình bằng cách đọc các bài báo, hướng dẫn và lời khuyên trong việc khai thác Media queries trong các bài viết trước đây của chúng tôi tại Tuts+ cũng như khắp nơi trên Internet.

Tuy nhiên

Media Queries không phải là giải pháp cho mọi vấn đề trong thiết kế web có tính đáp ứng, thực tế, nó chưa bao giờ có ý nghĩa đó.

Ngày nay, có một loạt các thiết bị tuyệt vời trên thị trường với các kích cỡ và các đặc điểm khác nhau, làm mờ đi ranh giới giữa "di động" và "desktop" (tôi đang nhìn vào bạn "máy tính xách tay lai"). Vì lý do này, duy trì một trang web có tính thẩm mỹ, có một trải nghiệm người dùng tuyệt vời, và hiệu năng tốt đã trở nên khó khăn hơn bao giờ hết.

Tại Google IO 2015, Google cho phép các nhà phát triển kiểm tra trang web của họ trên hơn 100 các thiết bị khác nhau.

Và một khi bạn thêm những thứ như quảng cáo, bảng biểu, và nội dung cũ vào hỗn hợp, thì vấn đề thậm chí có thể tệ hơn. Vừa đủ để bạn thấy được các khía cạnh "không quá tốt" của media queries.

Media Queries: “Không quá tốt”

Cân nhắc ví dụ sau. Chúng ta có một thành phần Giao diện Người dùng để hiển thị hồ sơ thành viên của nhóm chúng ta. Chúng ta muốn sử dụng chính xác thành phần này trong một vài nơi khác nhau trên trang web của chúng ta. Ví dụ này cho thấy cách giao diện người dùng được sắp xếp tại chiều rộng 780px của viewport.

Trong trang "user profile", chúng ta đặt ảnh đại diện của người dụng ở góc trên bên trái, và tên người dùng cũng như các tiểu sử ở góc trên bên phải.

Bố cục hồ sơ người dùng trong hồ sơ "User".

Tuy nhiên trong trang "team" trên trang web của chúng ta, bố cục thay đổi; hình ảnh avatar của người dùng hiện nay được đặt ở phía trên, và tên người dùng cũng như các tiểu sử là bên dưới. Kích thước phông chữ cũng có thể nhỏ hơn một chút.

Bố cục hồ sơ người dùng trong trang "team".

Vấn đề này có thể được khắc phục với media queries. Chúng ta có thể, ví dụ, viết CSS, như sau:

Nó có thể khắc phục được, một khi chúng ta còn sử dụng một số lớp xác định .user-profile và .user-profile-card.

Tuy nhiên, nó cũng đi ngược lại với một thành phần đang được sử dụng lại trong Giao diện Người dùng của chúng ta; một Giao diện Người dùng có thể được đặt ở bất cứ nơi nào trên trang web, có thể thích ứng với những thứ xung quanh nó.

Trong ví dụ này, chúng ta muốn bố cục của các thành phần của chúng ta thích ứng khi bao quanh bằng một kho chứa nhỏ, thay vì bằng viewport của trình duyệt. Vì vậy thay vì dựa vào kích thước viewport của trình duyệt để thay đổi bố cục, tại sao chúng ta không thể làm như vậy ở cấp độ phần tử?

Element (Container) Queries

Ý tưởng của element queries nổi lên khoảng đầu năm 2012; một vài năm sau khi Thiết kế Web Có tính đáp ứng đã trở thành phương pháp chủ đạo. Thật không may, có lẽ không có nhiều lý do thuyết phục để mang lại điều này như một tiêu chuẩn web tại thời điểm đó - thế giới phải làm quen lại một lần nữa.

Cộng đồng mạng bắt đầu các sáng kiến riêng của họ. RICG (Responsive Issue Community Group), cùng một nhóm mà khởi xướng phần tử <picture>, cuối cùng thêm element queries vào danh sách phát sinh của họ trong khi các nhà phát triển đã phát triển một thư viện JavaScript, như EQCSS để mô phỏng tính năng này.

Element queries làm việc tương tự như media queries; ngoại trừ rằng chúng lắng nghe kích thước phần tử thay cho viewport của trình duyệt. Điều này cho phép chúng ta xây dựng một hệ thống mô-đun Giao diện Người dùng thật sự với việc viết code dựa trên DRY-er (Không lặp lại). Ví dụ tương tự, chúng ta có thể viết lại các phong cách của thành phần Giao diện Người dùng với EQCSS, như sau:

Ở đây chúng ta không quan tâm gì đến chiều rộng viewport. Như bạn thấy ở trên, miễn là thành phần Giao diện Người dùng kéo dài đến 480px hoặc rộng hơn, chúng ta hiển thị .avatar.bio bên cạnh nhau. Khi Giao diện Người dùng co lại dưới 480px chúng ta cho phép .avatar.bio nằm xếp chồng lên nhau và canh giữa nội dung.

Tổng kết

Hãy nhớ, tôi không nói rằng sử dụng media queries là xấu, không hề. Media queries thì tuyệt vời và chúng ta đã chứng kiến điều đó trên nhiều trang web được xây dựng ngày nay. Media queries và element queries hoàn toàn có thể tồn tại song song. Tuy nhiên, có rất nhiều kịch bản thiết kế mà sử dụng element queries sẽ làm cho nó có ý nghĩa hơn so với sử dụng media queries.

Thật không may, element queries vẫn còn một con đường rất dài để đi, trước khi chúng trở thành một tiêu chuẩn web; hy vọng của chúng ta vào những cái còn lại này cùng với những người tốt tại RICG.

Trong khi chúng ta chờ đợi, chúng ta có thể khám phá tiềm năng của element queries thông qua một thư viện JavaScript như EQCSS. Và đó chính xác là những gì chúng ta sẽ làm trong phần hướng dẫn tiếp theo. Nhớ theo dõi nhé!

Đọc thêm

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.