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

Cách xây dựng một Thành phần Giao diện có tính đáp ứng sử dụng Element Queries

by
Difficulty:IntermediateLength:ShortLanguages:

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

Trong hướng dẫn này chúng ta sẽ tiếp tục cuộc thảo luận của chúng ta về element queries, xắn tay vào xây dựng một thành phần có tính đáp ứng (responsive) mà có thể được tái sử dụng.

Tóm lượt lại, element queries cho phép chúng ta nhào nặn một phần tử dựa trên các đặc tính của kho chứa nó; chiều rộng, chiều cao và vân vân. Nhưng cần phải nhớ rằng element queries vẫn còn một chặng đường dài để trở thành một tiêu chuẩn CSS, và chúng ta sẽ thật sự cần phải đợi một vài năm trước khi điều đó xảy ra.

Vì vậy, bây giờ chúng ta sẽ phải dùng đến một thư việ JavaScript để mô phỏng tính năng tương tự, chẳng hạn như EQCSS.

EQCSS

EQCSS là một thư viện JavaScript được phát triển by Tommy Hodgins. Hãy xem xét một số lý do để chọn thư viện này.

Để bắt đầu, EQCSS cung cấp cho chúng ta một cú pháp tương tự tiêu chuẩn Media Queries của CSS3 với khai báo @element. Cái này hoạt động bên trong một stylesheet hoặc được nhúng trong một phần tử style, vì vậy cảm giác rất trực quan. Ví dụ, trong đoạn mã sau, chúng ta xếp chồng các menu trong navigation để thích ứng với việc thu hẹp khoảng không của navigation (không phải của viewport).

EQCSS không chỉ cung cấp các truy vấn dựa trên chiều rộng, chiều cao. Mà nó còn cup cấp các truy vấn dựa trên việc đếm, điều này cho chúng ta sức mạnh để áp dụng các luật phong cách dựa trên nội dung; số ký tự, số dòng, và số phần tử được chứa.

Nó hỗ trợ các đơn vị CSS khác nhau bao gồm các đơn vị mới như vw, vh, vminvmax.

Và đối với những người mà vẫn yêu cầu hỗ trợ cho IE8, thì EQCSS cung cấp một polyfill.

EQCSS sẵn có thông qua Bower, NPM, CDNJS, và trực tiếp từ kho chứa trên Github. Lựa chọn lối nào phù hợp với việc triển khai dự án của bạn, và chắc chắn rằng nó phải được nạp trong trang web của bạn.

Bây giờ, hãy xây dựng một cái gì đó!

HTML

Chúng ta sẽ xây dựng một thành phần Giao diện của lịch sử người dùng, và chúng ta bắt đầu với mã đánh dấu HTML.

Thành phần của chúng ta bao gồm một hình ảnh avatar, tên người dùng, nơi ở, một tiểu sử ngắn, và nút "Follow" đến Twitter và Medium.

CSS

Trước tiên, thiết lập chiều rộng của thành phần Giao diện và chế độ hiển thị là flex. Cú pháp flexbox trong đoạn mã sau đây là không có tiền tố để cho mã được rõ ràng, do đó, nó sẽ chỉ làm việc trong các trình duyệt mới nhất. Nếu cần thiết, bạn luôn có thể dùng Autoprefixer để tạo ra cú pháp cũ hơn cũng như các tiền tố để hỗ trợ các trình duyệt cũ.

Tiếp theo, chúng ta thiết lập tỷ lệ chiều rộng giữa hình avatar và tiểu sử vắn tắt có chứa tên, địa điểm và tiểu sử ngắn.

Chúng ta cũng điều chỉnh kích thước phông chữ của tên người dùng và vị trí một chút xíu.

Đây là các luật phong cách chính để mô phỏng cách element queries hoạt động. Các luật phong cách chẳng hạn như background-color, color, và box-shadow là hoàn toàn tuỳ thuộc vào bạn. Trong trường hợp của tôi, nó hiển thị như sau.

Triển khai Element Queries

Sử dụng Element Queries với EQCSS là khá trực quan. Như đã đề cập, cú pháp gần giống với CSS media queries. Đầu tiên, như chúng ta đã chỉ ra ở trên, chúng ta chỉ rõ một element query bằng @element theo sau bằng một hoặc nhiều element selector và điều kiện truy vấn chẳng hạn như chiều rộng, chiều cao, vị trí cuộn, vân vân, của phần tử.

Bây giờ chúng ta có thể triển khai nó vào trong thành phần Giao diện của chúng ta, ví dụ, để thay đổi chiều rộng của phần tử bên trong kho chứa và chỉnh kích thước phông chữ khi chiều rộng của kho chứa bị giảm.

Hơn nữa, chúng ta muốn các thành phần giao diện người dùng có thể được tái sử dụng, và quan trọng hơn có thể trình bày trong bất kỳ phần nào của trang web bất kể chiều rộng là bao nhiêu. Ví dụ sidebar, nơi mà chiều rộng của nó thường nhỏ hơn 480px. Trong trường hợp này, vì độ rộng hẹp hơn nhiều nên chúng ta phải canh lại toàn bộ bố cục của các thành phần.

Tổng kết

Trong hướng dẫn này, chúng ta đã xây dựng một thành phần giao diện người dùng để hiển thị một hồ sơ người dùng. Nó có tính đáp ứng cao, thay đổi tuỳ thuộc vào kho chứa của nó thay vì viewport. Bạn có thể xem trang domo và xem bố cục thay đổi bất kể kích thước viewport. Đơn giản!

Đây là chỉ là một ví dụ. Hiện có một số ít các ví dụ khác mà những người khác đã chỉ ra nơi mà sử dụng element queries là hợp lý.

Hãy nhớ rằng; cú pháp trong hướng dẫn này là hoàn toàn dựa trên EQCSS - không rõ W3C Working Group sẽ áp dụng theo nó hay là tạo của riêng họ thì vẫn chưa quyết định. Tuy nhiên, tôi mong muốn ý tưởng này được phê chuẩn và cách mạng hoá cách chúng ta xây dựng trang web một lần nữa.

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.