Cách thực hiện CSS breakpoints đúng 100%

Trong những phút tới đây, tôi muốn các bạn quên CSS đi. Quên phát triển web đi. Quên giao diện người dùng (UI) đi.

Khi bạn đã quên hết những thứ trên, tôi muốn bạn mở rộng trí óc ra, để nói lang thang thẩn thơ. Lang thang quay về quá khứ. Quay về những ngày đầu cắp sách đến trường.

Hồi ấy mọi thứ thật đơn giản, những ngày mà tất cả mọi thứ bạn cần lo lắng là… vẽ hình vẽ dáng, và… kìm nén sự nổi loạn của mình.

Hãy nhìn vào những chấm tròn bên trên. Bạn có thấy một số chấm thì dính vào nhau, và một số thì lại tản ra chứ? Điều tôi muốn bạn làm là tách chúng thành năm nhóm giúp tôi, tách kiểu nào cũng được.

Làm thử đi. Sau khi đảm bảo chả có ai đang dòm ngó, bạn hãy vẽ một vòng trong quanh mỗi nhóm với ngón tay “trẻ thơ” của bạn.

Bạn chắc là đã chia nhóm giống như dưới đây phải không?

Hiển nhiên, hai chấm bên tay phải có thể có đủ kiểu chia nhóm. Nếu bạn nhóm chúng với nhau, chắc cũng không sai. Họ nói nằng không có câu trả lời nào là sai cả, nhưng tôi chưa từng sai, nên tôi chưa từng cảm giác được câu nói tẻ nhạt ấy.

Trước khi tiếp tục, bạn có vẽ nhóm như dưới chứ?

Chắc là không chứ gì?

Nhưng đó cơ bản chính là việc bạn phải làm nếu bạn đặt breakpoint tại các vị trí khớp với độ rộng chính xác của các thiết bị phổ biến (320px, 768px, 1024px).

Bạn đã từng nghe hay nói về những câu máng máng dưới đây hay chưa?

“breakpoint trung bình là lên đến 768px à, hay gồm cả 768? Hiểu rồi… và đó là độ rộng của iPad, hay là ‘lớn’? Oh, lớn là 768px và trở lên. Hiểu rồi. Và nhỏ là 320px? Phạm vi từ 0 đến 319px này là gì đây? Breakpont cho kiến à?”

Tôi có thể tiếp tục cho bạn thấy breakpoint đúng và kết thúc bài viết ngay tại đây. Nhưng tôi lại rất tò mò vì phương thức (“nhóm ngớ ngẩn”) ở trên lại lan rộng đến vậy.

Tôi cho rằng, lời giải cho vấn đề này, giống các vấn đề khác, là từ việc dùng sai thuật ngữ.

Tôi nghĩ ta đã nhầm lẫn “ranh giới” với “phạm vi” trong phần thảo luận và áp dụng breakpoint rồi.

Giả sử, nếu bạn thực hiện breakpoint trong Sass, bạn có biến tên là $large với 768px hay không?

Đó có phải là ranh giới dưới của phạm vi bạn muốn làm ‘lớn’, hay ranh giới trên? Nếu là ranh giới dưới, thị bạn sẽ không có $small vì như vậy sẽ là o đúng không?

Và nếu là ranh giới trên thì làm sao bạn xác định một breakpoint $large-and-up? Đó phải là media query với một min-width của $medium, đúng không?

Và nếu bạn đang chỉ nói đến một ranh giới khi bạn nói ‘lớn’, thì chúng ta sẽ khá dễ nhần lẫn ở phần sau vì một media query luôn luôn là phạm vi (range).

Đây là một tình huống rối tung mù và chúng ta đang phí thời gian suy nghĩ về nó. Vậy nên tôi có 3 gợi ý như sau:

  1. Làm breakpoint cho đúng
  2. Đặt tên phạm vi cho hợp lý
  3. Khai báo rõ ràng

Tip #1: Làm breakpoint cho đúng

Vậy breakpoint như thế nào là đúng?

Tâm hồn mẫu giáo của các bạn đã vẽ vòng tròn rồi. Giờ tôi chỉ việc biến chúng thành hình chữ nhật cho các bnaj mà thôi.

600px, 900px, 1200px, và 1800px nếu bạn định dành tặng món quà đặc biệt cho những ai sở hữu chiếc màn hình khổng lồ.

Những dấu chấm mà bạn vừa chơi đùa bằng tâm hồn bé thơ thực ra thể hiện 14 kích thước màn hình thường thấy nhất:

Để các bạn tiện hơn trong giao tiếp, chúng ta có thể đi theo chuẩn tên gọi màn hình chung dưới đây:

Tip #2: đặt tên phạm vi cho hợp lý

Hiển nhiên, bạn có thể đặt tên breakpoint của mình là papa-bear and baby-bear nếu muốn. Nhưng nếu tôi ngồi xuống với designer và thao luận về hình dáng của site trên nhiều thiết bị khác nhau, tôi muốn cuộc nói chuyện phải xong càng nhanh càng tốt. Nếu đặt tên cho kích thước poirtait tablet (máy tính bảng dọc) như vậy mà được, tồi tôi cũng làm rồi đấy. Bạn có gọi nó là “iPad portrait” thì tôi cũng hoàn toàn tha thứ.

Bạn có thể la lớn: “Nhưng thị trường thay đổi rồi!”. “Điện thoại ngày càng nở to, máy tính bảng ngày càng teo nhỏ!”

Nhưng CSS cảu website cảu bạn có thời hạn sử dụng vào khoản ba năm (nếu không phải là Gmail). iPad đã xuất hiện với gấp đôi thời gian như vậy, mà vẫn chưa bị lật đổ. Và chúng ta đều biết rằng, Apple chả làm ra sản phẩm nào mới nữa, mà chỉ loại bỏ vài thứ từ những cái đã có (nút, lỗ,…)

Vậy nên các bạn à, 1024×768 còn lâu mới lỗi thời.

Kết: việc giao tiếp rất quan trọng, nhưng đừng chủ ý xa lánh những vốn từ dễ hiếu hữu ích.

Tham gia ngay sự kiện Machine Learning - Công nghệ của Tương lai!
Tham gia ngay sự kiện Machine Learning – Công nghệ của Tương lai!

Tip #3: Be declarative

CSS của bạn phải xác định cái gì sẽ diễn ra, chứ không phải như thế nào. Phần “như thế nào” nên được ẩn đi trong mixin nào đó.

Như đã nói trước đó, một phần lý do gây rối loạn trong breakpoint là các biến xác định giới hạn của một phạm vi và được sử dụng làm tên của phạm vi. Nhưng vậy cũng giống như nói var coordinates = 4;.

Vậy ta có thể giấu những chi tiết này trong một mixin, thay vì phơi bày chúng để dùng thẳng trong code. Hoặc chúng ta có thể làm tốt hơn nữa và không hề dùng chút biến nào luôn.

Dưới đây là một ví dụ đã được đơn giản hóa nhưng vẫn minh họa được hết các trường hợp. Để thấy rõ chúng hoạt động như thế nào, vào pen này nhá.

Lưu ý, tôi đang buộc developer xác định hậu tốt -up hoặc -only.

Sự tối nghĩa sinh ra nhầm lẫn.

Một lời phê bình rõ ràng là phương pháp này không xử lý custom media query. Ồ tin tốt đây mọi người. Nếu bạn muốn custom media query, hãy viết custom media query. (Trong thực tế, nếu tôn cần độ phức tạp cao hơn như trên tôi sẽ bỏ của nợ đó đi luôn và chạy vào vòng tay yêu thương của bộ toolkit từ Susy).

Một sai lầm nữa có thể là tôi đã quên mất 8 cái mixin ở đây. Hiển nhiên một mixin duy nhất sẽ là hành động vô cùng điên khùng, vậy thì chỉ việc pass 8 size yêu cầu, như sau:

Hiên hiên, có tác dụng. Nhựng bạn sẽ không thấy lỗi ompile-time errors nếu bạn đưa vào một tên không được hỗ trợ. Và nhập biến sass đồng nghĩa với phơi bày 8 biến chỉ để pass sang một switch trong trong một mixin.

Chưa kể đến cú pháp @include for-desktop-up {…} là những cái giỏi xinh hơn cả @include for-size(desktop-up) {…}.

Những đoạn code này đều có một thiếu sót đó là khi tôi gõ 900px hai lần, và còn 899px. Hiển nhiên I nên chỉ dùng biến và trừ đi 1 khi cần thiết.

Nếu bạn muốn thì cứ việc, nhưng tôi sẽ không, vì hai lý do sau:

  1. Những thứ này không thường xuyên thay đổi. Đây không phải là những con số được dùng ở các nơi khác trong code base. Không có vấn đề gây ra bởi sự thật chúng là biến—trừ khi bạn muốn phơi bày Sass breakpoint với một script inject JavaScript object vỡi những biến này trong page.
  2. Cú pháp rất kinh khủng khi bạn muốn biến số hành string với Sass. Dưới đây là cái giá bạn phải trả vì tinh rằng lặp lại một số hai lần là tội ác kinh khủng nhất:

Tôi cũng rất cảm thông với những cậu khù khờ đến mức làm mấy việc màu nhiệm như lưu trữ breakpoint trong một Sass list và lặp chúng để output media queries, hoặc thứ gì đó đồng dạng lố bịch đến nỗi các lập trình viên tương lai cũng khó lòng diễn giải được.

Bug thường ẩn giấu trong những nơi phức tạp.

Một số thủ thuật khác khi làm việc với breakpoint

Vâng, ngay cả flickr cũng có breakpoint tại 768 và 1400

Vâng, ngay cả flickr cũng có breakpoint tại 768 và 1400

  1. Nếu bạn cần trải nghiệm CSS breakpoint cho các kích thước màn hình lơn hơn cái bạn đang dùng, hãy dùng chế độ ‘responsive’ trong Chrome DevTools và gõ kích thước khổng lồ tùy thích.
  2. Thanh xanh dương thể hiển media querries max-width (độ rộng tối đa), thanh màu cam là min-width (độ rộng tối thiểu), và thanh màu lục thể hiện media query với cả min và max.
  3. Click vào media query sẽ đưa màn hình vầ độ rộng đó. Nếu bạn nhấp nhiều lần và media query màu lục, nó sẽ chuyển giữa độ rộng tối đa và tối thiểu.
  4. Click phải vào một media query strong thanh media query để chuyển đến định nghĩa của quy luật đó trong CSS.

ITZone via Medium

Chia sẻ bài viết ngay