Ahmad Shadeed là một nhà thiết kế UX và nhà phát triển front-end đến từ Palestine. Anh ấy thích làm việc với các dự án thiết kế và phát triển front-end đầy thách thức. Anh ấy đã viết một … Thông tin thêm về Ahmad ↬
Bản tin email
Email [đập vỡ] của bạn
Mẹo hàng tuần về front-end & UX
Được hơn 200.000 người tin cậy
- Các mẫu thiết kế giao diện Đào tạo UX
- Quảng cáo trên tạp chí Smashing
- Nguyên tắc chung về kiểu chữ với Elliot Jay Stocks
- Chuẩn bị cho các vai trò giao tiếp ngày nay Thạc sĩ Thiết kế Thông tin của Northwestern
- Giao diện người dùng SmashingConf 2023
Khi triển khai giao diện người dùng trong trình duyệt, bạn nên giảm thiểu những khác biệt và sự cố đó bất cứ khi nào có thể để giao diện người dùng có thể dự đoán được. Rất khó để theo dõi tất cả những khác biệt đó, vì vậy tôi đã tập hợp một danh sách các vấn đề phổ biến, cùng với các giải pháp của chúng, như một hướng dẫn tham khảo hữu ích khi bạn đang thực hiện một dự án mới
Hãy bắt đầu nào
1. Đặt Lại Hình Nền Của Phần Tử
2 Và
3
Khi thêm một nút, hãy đặt lại nền của nó, nếu không, nó sẽ trông khác trên các trình duyệt. Trong ví dụ bên dưới, cùng một nút được hiển thị trong Chrome và Safari. Cái sau thêm nền màu xám mặc định
Đặt lại nền sẽ giải quyết vấn đề này
button {
appearance: none;
background: transparent;
/* Other styles */
}
Xem Nút bút và đầu vào của Ahmad Shadeed [@shadeed] trên CodePen
Xem Nút bút và đầu vào của Ahmad Shadeed [@shadeed] trên CodePenThêm sau khi nhảy. Tiếp tục đọc bên dưới ↓
Gặp gỡ các Hội thảo Smashing về giao diện người dùng & UX, với các bài học thực tế, phiên trực tiếp, bản ghi video và phần Hỏi & Đáp thân thiện. Trên các hệ thống thiết kế, UX, hiệu suất web và CSS/JS. Với Brad Frost, Christine Vallaure và rất nhiều người khác
Chuyển đến hội thảo ↬2. Tràn ra.
4 so với.
5
Để giới hạn chiều cao của một phần tử và cho phép người dùng cuộn trong phần tử đó, hãy thêm
6. Điều này sẽ có vẻ tốt trong Chrome trên macOS. Tuy nhiên, trên Chrome Windows, thanh cuộn luôn ở đó [ngay cả khi nội dung ngắn]. Điều này là do
7 sẽ hiển thị thanh cuộn bất kể nội dung là gì, trong khi
8 sẽ chỉ hiển thị thanh cuộn khi cần.element {
height: 300px;
overflow-y: auto;
}
Xem Pen tràn-y của Ahmad Shadeed [@shadeed] trên CodePen
Xem Pen tràn-y của Ahmad Shadeed [@shadeed] trên CodePen3. Thêm
9
Làm cho một phần tử hoạt động như một thùng chứa linh hoạt chỉ bằng cách thêm
.wrapper {
display: flex;
}
.item {
flex: 0 0 120px;
height: 100px;
}
0. Tuy nhiên, khi kích thước màn hình thu nhỏ lại, trình duyệt sẽ hiển thị thanh cuộn ngang trong trường hợp không thêm
9
.wrapper {
display: flex;
}
.item {
flex: 0 0 120px;
height: 100px;
}
Ví dụ trên sẽ hoạt động tốt trên màn hình lớn. Trên di động, trình duyệt sẽ hiển thị thanh cuộn ngang
Giải pháp khá dễ dàng. Trình bao bọc nên biết rằng khi không có chỗ trống, nó sẽ bao bọc các mục
.wrapper {
display: flex;
flex-wrap: wrap;
}
Xem Pen flex-wrap của Ahmad Shadeed [@shadeed] trên CodePen
Xem Pen flex-wrap của Ahmad Shadeed [@shadeed] trên CodePen4. Không sử dụng .wrapper {
display: flex;
}
.item {
flex: 0 0 120px;
height: 100px;
}
2 khi số lượng mặt hàng linh hoạt là động
.wrapper {
display: flex;
}
.item {
flex: 0 0 120px;
height: 100px;
}
Khi
.wrapper {
display: flex;
}
.item {
flex: 0 0 120px;
height: 100px;
}
2 được áp dụng cho một hộp chứa linh hoạt, nó sẽ phân phối các phần tử và để lại một khoảng cách bằng nhau giữa chúng. Ví dụ của chúng tôi có tám mục thẻ và chúng trông đẹp mắt. Điều gì sẽ xảy ra nếu vì một lý do nào đó, số lượng mục là bảy? Xem nội dung biện minh cho Bút của Ahmad Shadeed [@shadeed] trên CodePen
Xem nội dung biện minh cho Bút của Ahmad Shadeed [@shadeed] trên CodePenTrong trường hợp này, sử dụng lưới CSS sẽ phù hợp hơn
5. Từ dài và liên kết
Khi một bài viết đang được xem trên màn hình di động, một từ dài hoặc liên kết nội tuyến có thể khiến thanh cuộn ngang xuất hiện. Sử dụng CSS'
.wrapper {
display: flex;
}
.item {
flex: 0 0 120px;
height: 100px;
}
4 sẽ ngăn điều đó xảy raXem Thủ thuật CSS để biết chi tiết
6. Độ dốc trong suốt
Khi thêm độ dốc với điểm bắt đầu và điểm kết thúc trong suốt, nó sẽ có màu đen trong Safari. Đó là vì Safari không nhận ra từ khóa
.wrapper {
display: flex;
}
.item {
flex: 0 0 120px;
height: 100px;
}
5. Bằng cách thay thế nó bằng .wrapper {
display: flex;
}
.item {
flex: 0 0 120px;
height: 100px;
}
6, nó sẽ hoạt động như mong đợi. Lưu ý ảnh chụp màn hình bên dưới.section-hero {
background: linear-gradient[transparent, #d7e0ef], #527ee0;
/*Other styles*/
}
Thay vào đó, điều này nên được
.section-hero {
background: linear-gradient[rgba[0, 0, 0,0], #d7e0ef], #527ee0;
/*Other styles*/
}
7. Quan niệm sai lầm về sự khác biệt giữa .wrapper {
display: flex;
}
.item {
flex: 0 0 120px;
height: 100px;
}
7 và .wrapper {
display: flex;
}
.item {
flex: 0 0 120px;
height: 100px;
}
8 trong lưới CSS
.wrapper {
display: flex;
}
.item {
flex: 0 0 120px;
height: 100px;
}
.wrapper {
display: flex;
}
.item {
flex: 0 0 120px;
height: 100px;
}
Trong lưới CSS, hàm
.wrapper {
display: flex;
}
.item {
flex: 0 0 120px;
height: 100px;
}
9 có thể tạo bố cục cột đáp ứng mà không yêu cầu sử dụng truy vấn phương tiện. Để đạt được điều đó, hãy sử dụng .wrapper {
display: flex;
}
.item {
flex: 0 0 120px;
height: 100px;
}
8 hoặc .wrapper {
display: flex;
}
.item {
flex: 0 0 120px;
height: 100px;
}
7.wrapper {
grid-template-columns: repeat[auto-fill, minmax[100px, 1fr]];
}
Tóm lại,
.wrapper {
display: flex;
}
.item {
flex: 0 0 120px;
height: 100px;
}
8 sẽ sắp xếp các cột mà không mở rộng chiều rộng của chúng, trong khi đó, .wrapper {
display: flex;
}
.item {
flex: 0 0 120px;
height: 100px;
}
7 sẽ thu gọn chúng về chiều rộng bằng 0 nhưng chỉ khi bạn có các cột trống. Sara Soueidan đã viết một bài báo xuất sắc về chủ đề này8. Cố định các phần tử lên trên cùng của màn hình khi khung nhìn không đủ cao
Nếu bạn cố định một phần tử lên trên cùng của màn hình, điều gì sẽ xảy ra nếu khung nhìn không đủ cao? . Nó sẽ chiếm không gian màn hình và do đó, khu vực dọc có sẵn để người dùng duyệt trang web sẽ nhỏ và không thoải mái, điều này sẽ làm giảm trải nghiệm
@media [min-height: 500px] {
.site-header {
position: sticky;
top: 0;
/*other styles*/
}
}
Trong đoạn mã trên, chúng tôi yêu cầu trình duyệt chỉ sửa tiêu đề ở trên cùng nếu chiều cao của chế độ xem bằng hoặc lớn hơn 500 pixel
Cũng rất quan trọng. Khi bạn sử dụng
.wrapper {
display: flex;
flex-wrap: wrap;
}
4, nó sẽ không hoạt động trừ khi bạn chỉ định thuộc tính .wrapper {
display: flex;
flex-wrap: wrap;
}
5Xem Truy vấn phương tiện dọc bút. Đã sửa tiêu đề bởi Ahmad Shadeed [@shadeed] trên CodePen
Xem Truy vấn phương tiện dọc bút. Đã sửa tiêu đề bởi Ahmad Shadeed [@shadeed] trên CodePen9. Cài đặt .wrapper {
display: flex;
flex-wrap: wrap;
}
6 cho hình ảnh
.wrapper {
display: flex;
flex-wrap: wrap;
}
Khi thêm hình ảnh, hãy xác định
.wrapper {
display: flex;
flex-wrap: wrap;
}
7 để hình ảnh thay đổi kích thước khi màn hình nhỏ. Nếu không, trình duyệt sẽ hiển thị thanh cuộn ngang.element {
height: 300px;
overflow-y: auto;
}
010. Sử dụng lưới CSS để xác định các yếu tố .wrapper {
display: flex;
flex-wrap: wrap;
}
8 và .wrapper {
display: flex;
flex-wrap: wrap;
}
9
.wrapper {
display: flex;
flex-wrap: wrap;
}
.wrapper {
display: flex;
flex-wrap: wrap;
}
Lưới CSS có thể được sử dụng để xác định các phần
.wrapper {
display: flex;
flex-wrap: wrap;
}
8 và .wrapper {
display: flex;
flex-wrap: wrap;
}
9 của bố cục, đây là một cách sử dụng hoàn hảo cho lưới. Do đó, chiều cao của phần .wrapper {
display: flex;
flex-wrap: wrap;
}
9 sẽ bằng chiều cao của phần tử .wrapper {
display: flex;
flex-wrap: wrap;
}
8, ngay cả khi nó trốngĐể khắc phục điều này, hãy căn chỉnh phần tử
.wrapper {
display: flex;
flex-wrap: wrap;
}
9 về phía đầu của phần tử gốc để chiều cao của phần tử đó không bị giãn ra.element {
height: 300px;
overflow-y: auto;
}
1Xem Bút chính và phụ của Ahmad Shadeed [@shadeed] trên CodePen
Xem Bút chính và phụ của Ahmad Shadeed [@shadeed] trên CodePen11. Thêm .article-content p {
word-break: break-all;
}
5 vào một SVG
.article-content p {
word-break: break-all;
}
Đôi khi, khi làm việc với các SVG,
.article-content p {
word-break: break-all;
}
5 sẽ không hoạt động như mong đợi nếu thuộc tính .article-content p {
word-break: break-all;
}
5 đã được thêm nội tuyến vào SVG. Để giải quyết vấn đề này, hãy xóa thuộc tính .article-content p {
word-break: break-all;
}
5 khỏi chính SVG hoặc ghi đè lên .article-content p {
word-break: break-all;
}
9Lấy ví dụ này
.element {
height: 300px;
overflow-y: auto;
}
2Điều này sẽ không hoạt động nếu SVG có phần điền nội tuyến. Nó nên là cái này thay vào đó
.element {
height: 300px;
overflow-y: auto;
}
312. Làm việc với các phần tử giả
Tôi thích sử dụng các phần tử giả bất cứ khi nào tôi có thể. Chúng cung cấp cho chúng tôi cách tạo các phần tử giả, chủ yếu cho mục đích trang trí mà không cần thêm chúng vào HTML
Khi làm việc với họ, tác giả có thể quên thực hiện một trong các thao tác sau
- thêm thuộc tính
0,.section-hero { background: linear-gradient[transparent, #d7e0ef], #527ee0; /*Other styles*/ }
- đặt
1 và.section-hero { background: linear-gradient[transparent, #d7e0ef], #527ee0; /*Other styles*/ }
2 mà không xác định thuộc tính.section-hero { background: linear-gradient[transparent, #d7e0ef], #527ee0; /*Other styles*/ }
3 cho nó.section-hero { background: linear-gradient[transparent, #d7e0ef], #527ee0; /*Other styles*/ }
Trong ví dụ bên dưới, chúng tôi có tiêu đề với huy hiệu là phần tử giả. Thuộc tính
.section-hero {
background: linear-gradient[transparent, #d7e0ef], #527ee0;
/*Other styles*/
}
0 nên được thêm vào. Ngoài ra, phần tử phải có ____21_______5 được đặt để ____21_______1 và ____21_______2 hoạt động như mong đợi13. Không gian kỳ lạ khi sử dụng .section-hero {
background: linear-gradient[transparent, #d7e0ef], #527ee0;
/*Other styles*/
}
5
.section-hero {
background: linear-gradient[transparent, #d7e0ef], #527ee0;
/*Other styles*/
}
Đặt hai hoặc nhiều phần tử thành
.section-hero {
background: linear-gradient[transparent, #d7e0ef], #527ee0;
/*Other styles*/
}
5 hoặc .section-hero {
background: linear-gradient[rgba[0, 0, 0,0], #d7e0ef], #527ee0;
/*Other styles*/
}
0 sẽ tạo ra một khoảng trống nhỏ giữa mỗi phần tử. Khoảng trắng được thêm vào vì trình duyệt đang diễn giải các phần tử dưới dạng từ và do đó, nó sẽ thêm một khoảng cách ký tự giữa mỗi phần tửTrong ví dụ bên dưới, mỗi mục có khoảng cách là
.section-hero {
background: linear-gradient[rgba[0, 0, 0,0], #d7e0ef], #527ee0;
/*Other styles*/
}
1 ở bên phải, nhưng khoảng trống nhỏ do sử dụng .section-hero {
background: linear-gradient[transparent, #d7e0ef], #527ee0;
/*Other styles*/
}
5 đang khiến nó trở thành .section-hero {
background: linear-gradient[rgba[0, 0, 0,0], #d7e0ef], #527ee0;
/*Other styles*/
}
3, đây không phải là kết quả mong muốn.element {
height: 300px;
overflow-y: auto;
}
4Một cách khắc phục đơn giản cho vấn đề này là đặt
.section-hero {
background: linear-gradient[rgba[0, 0, 0,0], #d7e0ef], #527ee0;
/*Other styles*/
}
4 trên phần tử cha.element {
height: 300px;
overflow-y: auto;
}
5Xem Khoảng cách khối trong dòng bút của Ahmad Shadeed [@shadeed] trên CodePen
Xem Khoảng cách khối trong dòng bút của Ahmad Shadeed [@shadeed] trên CodePen14. Thêm .section-hero {
background: linear-gradient[rgba[0, 0, 0,0], #d7e0ef], #527ee0;
/*Other styles*/
}
5 Khi Gán Thành phần Nhãn cho Đầu vào
.section-hero {
background: linear-gradient[rgba[0, 0, 0,0], #d7e0ef], #527ee0;
/*Other styles*/
}
Khi làm việc với các phần tử biểu mẫu, hãy đảm bảo rằng tất cả các phần tử
.section-hero {
background: linear-gradient[rgba[0, 0, 0,0], #d7e0ef], #527ee0;
/*Other styles*/
}
6 đều được gán ID cho chúng. Điều này sẽ làm cho chúng dễ truy cập hơn và khi chúng được nhấp vào, đầu vào được liên kết sẽ được lấy tiêu điểm.element {
height: 300px;
overflow-y: auto;
}
615. Phông chữ không hoạt động với các phần tử HTML tương tác
Khi gán phông chữ cho toàn bộ tài liệu, chúng sẽ không được áp dụng cho các thành phần như
3,
2, .section-hero {
background: linear-gradient[rgba[0, 0, 0,0], #d7e0ef], #527ee0;
/*Other styles*/
}
9 và .wrapper {
grid-template-columns: repeat[auto-fill, minmax[100px, 1fr]];
}
0. Chúng không kế thừa theo mặc định vì trình duyệt áp dụng phông chữ hệ thống mặc định cho chúngĐể khắc phục điều này, hãy gán thuộc tính phông chữ theo cách thủ công
.element {
height: 300px;
overflow-y: auto;
}
716. Thanh cuộn ngang
Một số phần tử sẽ làm xuất hiện thanh cuộn ngang do chiều rộng của các phần tử đó
Cách dễ nhất để tìm ra nguyên nhân của vấn đề này là sử dụng CSS outline. Addy Osmani đã chia sẻ một tập lệnh rất tiện dụng có thể được thêm vào bảng điều khiển trình duyệt để phác thảo mọi thành phần trên trang
.element {
height: 300px;
overflow-y: auto;
}
817. Hình ảnh nén hoặc kéo dài
Khi bạn thay đổi kích thước hình ảnh trong CSS, nó có thể bị nén hoặc kéo dài nếu tỷ lệ khung hình không phù hợp với chiều rộng và chiều cao của hình ảnh
Giải pháp rất đơn giản. Sử dụng CSS'
.wrapper {
grid-template-columns: repeat[auto-fill, minmax[100px, 1fr]];
}
1. Chức năng của nó tương tự như chức năng của .wrapper {
grid-template-columns: repeat[auto-fill, minmax[100px, 1fr]];
}
2 đối với ảnh nền.element {
height: 300px;
overflow-y: auto;
}
9Sử dụng
.wrapper {
grid-template-columns: repeat[auto-fill, minmax[100px, 1fr]];
}
1 sẽ không phải là giải pháp hoàn hảo trong mọi trường hợp. Một số hình ảnh cần xuất hiện mà không cần cắt hoặc thay đổi kích thước và một số nền tảng buộc người dùng tải lên hoặc cắt hình ảnh ở một kích thước xác định. Ví dụ: Dribbble chấp nhận tải lên hình thu nhỏ ở 800 x 600 pixel18. Thêm Đúng .wrapper {
grid-template-columns: repeat[auto-fill, minmax[100px, 1fr]];
}
4 Cho
3
.wrapper {
grid-template-columns: repeat[auto-fill, minmax[100px, 1fr]];
}
Sử dụng đúng
.wrapper {
grid-template-columns: repeat[auto-fill, minmax[100px, 1fr]];
}
4 cho trường
3. Điều này sẽ nâng cao trải nghiệm người dùng trong trình duyệt di động và giúp người dùng dễ tiếp cận hơnĐây là một số HTML
0Đây là giao diện của từng đầu vào sau khi được tập trung
19. Số điện thoại trong bố cục RTL
Khi thêm một số điện thoại như
.wrapper {
grid-template-columns: repeat[auto-fill, minmax[100px, 1fr]];
}
8 theo bố cục từ phải sang trái, biểu tượng dấu cộng sẽ được đặt ở cuối số. Để khắc phục điều đó, hãy chỉ định lại hướng của số điện thoại
1Phần kết luận
Tất cả các vấn đề được đề cập ở đây là một trong những vấn đề phổ biến nhất mà tôi gặp phải trong công việc phát triển giao diện người dùng của mình. Mục tiêu của tôi là giữ một danh sách để kiểm tra thường xuyên khi làm việc trên một dự án web