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

Một số phương thức khác nhau của CSS cho việc thay đổi thứ tự hiển thị

by
Difficulty:BeginnerLength:MediumLanguages:

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ẽ tìm hiểu một vài phương pháp CSS khác nhau để sắp xếp thứ tự các phần tử HTML.

Mục tiêu

Bố cục mà chúng ta muốn xây dựng là rất đơn giản. Cụ thể, trên các màn hình nhỏ (dưới 600px), nó sẽ trông giống thế này:

Trên các màn hình lớn hơn (lớn hơn hoặc bằng 600px), chúng ta muốn nó xuất hiện như sau:

Thử thách lớn nhất của chúng ta là tìm một cách để đảo ngược thứ tự của các nút bấm.

Mã đánh dấu

Mã đánh dấu mà chúng ta sẽ sử dụng là rất đơn giản; chỉ có một phần tử div chứa bốn cái nút bấm:

Các phong cách cơ bản

Trên các màn hình nhỏ, tất cả các nút bấm cùng chia sẻ các phong cách giống nhau:

Trên các màn hình lớn, chúng ta chỉ thiết lập width: 25% cho các nút. Các phong cách còn lại sẽ được xác định bởi bất cứ phương thức CSS nào mà chúng ta sử dụng để đảo ngược thứ tự các nút.

Cúng cùng, chúng ta thêm một số phong cách cho trạng thái focus của bốn nút:

Do đó, nếu chúng ta sử dụng bàn phím (phím "Tab") để duyệt qua các nút bấm, thì mỗi trạng thái focus của các nút sẽ có một màu đỏ đậm.

Các phương thức Sắp xếp thứ tự cột

Lúc này chúng ta đã sẵn sàng khảo sát các cách làm khác nhau của CSS để đảo ngược thứ tự khi viewport đạt 599px.

Phương thức #1: Float

Một giải pháp nhanh là float các nút về bên phải. Đây là phần CSS thêm vào:

Dưới đây là bản demo được nhúng từ Codepen:

Phương thức #2: Định vị trí

Một giải pháp khác là định vị trí các phần tử, hoặc là tương đối hoặc là tuyệt đối.

Dựa theo tuỳ chọn đầu tiên, chúng ta float các nút về bên trái, cho chúng position: relative, và sau đó sử dụng thuộc tính left để thiết lập vị trí của chúng.

Mã CSS cần thiết trông giống như dưới đây:

Bản demo được nhúng từ Codepen:

Dựa vào tuỳ chọn thứ hai, chúng ta cũng có thể cho các nút của chúng ta position: absolute và sau đó sử dụng thuộc tính left để thiết lập vị trí của chúng chính xác hơn.

Các luật CSS tương ứng:

Bản demo từ Codepen:

Phương thức #3: Thuộc tính direction

Một cách làm ít được biết đến là sử dụng thuộc tính direction; một thứ thường được sử dụng để đảo ngược cho hướng đọc của văn bản. Trong trường hợp của chúng ta, thiết lập direction: rtl (phải sang trái) cho phần tử bao quanh, ngay lập tức đảo ngược bố cục.

Lưu ý: đối với ví dụ này chúng ta làm cho các phần tử của chúng ta vận hành như là các phần tử table để đạt được bố cục nằm ngang.

Bạn có thể thấy các phong cách CSS cần thiết dưới đây:

Cần lưu ý rằng nếu (vì một số lý do) chúng ta muốn thay đổi hướng của các nút, chúng ta có thể thêm "bi-directional override" vào trong stylesheet của chúng ta:

Bản demo từ Codepen:

Phương thức #4: Transform

Một giải pháp đơn giản là float các nút về bên trái và sau đó áp dụng transform: scaleX(-1) vào chúng và phần tử cha của chúng. Bằng cách thiết lập các giá trị âm, các phần tử được transform không bị thay đổi kích thước. Trong thực tế, chúng đang lộn mèo theo trục ngang.

Dưới đây là CSS cần thiết:

Bản demo được nhúng từ Codepen:

Chúng ta còn có thể sử dụng hàm rotate của transform để đạt được thứ tự mong muốn. Tất cả những gì chúng ta phải làm là thêm transform: rotateY(180deg) vào các nút và phần tử cha của chúng.

Dưới đây là CSS cần thiết cho giải pháp này:

Và bản demo từ Codepen:

Phương pháp #5: Flexbox

Flexbox là một cách khác để thay đổi thứ tự cột. Trong ví dụ của chúng ta, có thể sử dụng hai thuộc tính flexbox khác nhau để tạo bố cục mong muốn.

Cách đầu tiên là thiết lập phần tử cha của các nút như là một container flex và sau đó thêm thuộc tính flex-direction: row-reverse vào nó.

Dưới đây là các phong cách tương ứng:

Bản demo được nhúng từ Codepen:

Tuỳ chọn flexbox thứ hai là thiết lập phần tử cha của các nút như là một container flex và sau đó sử dụng thuộc tính order để xác định trong đó thứ tự các nút sẽ được hiển thị.

Mã CSS tương ứng:

Bản demo trên Codepen:

Phương pháp #6: CSS Grid Layout

Một giải pháp đầy hứa hẹn để sắp xếp lại các phần tử là CSS Grid Layout. Cho dù nó có một sự hạn chế về trình duyệt hỗ trợ tại thời điểm này, chúng ta hãy thử nó. Nên nhớ rằng ví dụ của chúng ta sẽ chỉ làm việc trên Chrome, mà mặc định không hỗ trợ tính năng CSS này, nhưng chúng ta có thể làm theo các bước đơn giản để kích hoạt nó.

Hãy mô tả hai cách để đạt được thứ tự mong muốn mà không cần đi quá sâu vào chi tiết.

Tuỳ chọn đầu tiên là thiết lập phần tử cha của các nút là một container grid và sau đó sử dụng thuộc tính grid-column để xác định trong đó thứ tự của các nút sẽ được hiển thị. Ngoài ra, chúng ta đảm bảo rằng tất cả các nút thuộc về cùng một hàng (đầu tiên) bằng cách thêm grid-row: 1 vào bên trong chúng.

Hãy xem các phong cách liên quan dưới đây:

Bản demo được nhúng từ Codepen:

Tuỳ chọn grid thứ hai thì tương tự vói giải pháp thứ hai của flexbox. Chúng ta thiết lập phần tử cha của các nút như là một container grid và sau đó sử dụng thuộc tính order để xác định trong đó thứ tự các nút sẽ hiển thị.

CSS cần thiết:

Bản demo trên Codepen:

Một lần nữa, bạn sẽ cần kích hoạt “Experimental Web Platform features” trong Chrome để xem kết quả.

Source Order và Visual Order

Như chúng ta đã minh hoạ, chúng ta có thể làm theo các cách khác nhau của CSS để thay đổi thứ tự của các nút. Vậy, lúc này hãy xem lại mỗi bản demo và sử dụng bàn phím (nhấp vào pen và nhấn phím "Tab") để duyệt qua các nút. Bạn sẽ nhận thấy là ngay cả nếu "Button 4" hiển thị đầu tiên, thì nút đầu tiên được focus là "Button 1" bởi vì đó là cái mà xuất hiện đầu tiên trong DOM. Điều tương tự xảy ra nếu chúng ta kiểm tra cá demo với một screen reader (tôi thực hiện các bài test trong NVDA).

Với việc không đồng bộ này giữa thứ tự trong DOM và the CSS, thì chúng ta phải rất cẩn thận với các thành phần của trang web mà chúng ta sắp xếp lại bằng CSS. Ví dụ, dù thuộc tính order của flexbox là một trong những cách linh hoạt để thay đổi thứ tự các phần tử, thì đặc tả kỹ thuật cũng nói rằng:

"Tác giả phải sử dụng order cho việc hiển thị, mà không dùng cho logic, để sắp xếp lại nội dung. Các stylesheet mà sử dụng order để thực hiện việc sắp xếp logic là bất hợp lý."

Tương tự, đây là những gì mà đặc tả kỹ thuật nói về thuộc tính order của grid:

Cũng như việc sắp xếp lại các phần tử flex, thuộc tính order phải đươc sử dụng chỉ với nhu cầu sắp xếp trực quan và là không đồng bộ với thứ tự điều hướng; nếu không thì nguồn tài liệu bên dưới nên được sắp xếp lại."

Lưu ý: Nếu bạn kiểm tra giải pháp thứ hai của flexbox (với thuộc tính order) trong Firefox, bạn sẽ thấy rằng điều hướng bằng bàn phím hoạt động tốt và nút đầu tiên được focus trong màn hình có kích thước trung bình trở lên là "Button 4". Hành vi này đã được báo cáo như là một lỗi.

Kết luận

Trong hướng dẫn này, chúng ta khảo sát các phương pháp CSS khác nhau để sắp xếp lại các phần tử HTML. Tất nhiên, không phải tất cả những phương pháp này đều phù hợp trong mọi trường hợp. Trước khi quyết định phương pháp được sử dụng, bạn nên tính toán một vài điều:

  • Các trình duyệt bạn muốn hỗ trợ. Ví dụ, một số phương pháp đã nói ở trên không làm việc trong các phiên bản trước của Internet Explorer (ví dụ như < 10).
  • Độ phức tạp của sự sắp xếp mà bạn thực hiện. Nó có phải là một cái gì đó đơn giản như là một trong những cái mà chúng ta đã thấy trong ví dụ của chúng ta, hay một cái gì đó phức tạp?

Nếu bạn có thể nghĩ ra bất kỳ các phương pháp khác để đảo ngược thứ tự các nút, hãy nhớ chia sẻ với chúng tôi trong phần bình luận dưới đây.

Đọc thêm

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.