CSS đã giải quyết vấn đề gì?

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

Kết xuất và tương tác đã trở nên nhất quán hơn rất nhiều trên các trình duyệt trong những năm gần đây. Tuy nhiên, nó vẫn chưa hoàn toàn đồng nhất và rất nhiều vấn đề nhỏ có thể khiến bạn gặp khó khăn. Thêm vào những vấn đề này là các biến số về kích thước màn hình khác nhau, tùy chọn ngôn ngữ và lỗi đơn giản của con người, và chúng tôi nhận thấy rất nhiều điều nhỏ nhặt có thể cản trở nhà phát triển

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

(Xem trước lớn)

Đặ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 CodePen

Thê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

Bên trái. Chrome trên macOS. Phải. Chrome trên Windows. (Xem trước lớ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 CodePen

3. 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

Bên trái. Một thanh cuộn ngang được hiển thị và các mục không được bao bọc. Phải. Các mặt hàng được bọc vào hai hàng. (Xem trước lớn)

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 CodePen

4. 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

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?

Trình bao bọc có tám mục. (Xem trước lớn)Trình bao bọc có bảy mục. (Xem trước lớn)

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 CodePen

Trong 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 ra

Xem trước lớn_______18_______(Xem trước lớn)

Xem 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

Đứng đầu. Chrome 70. Đáy. Safari 12. (Xem trước lớn)

.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

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));
}

(Xem trước lớn)

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ày

8. 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;
}

5

Bản xem trước lớn

Xem 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 CodePen

9. Cài đặt .wrapper { display: flex; flex-wrap: wrap; } 6 cho hình ảnh

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;
}

0

10. 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

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;
}

1

(Xem trước lớn)

Xem 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 CodePen

11. Thêm .article-content p { word-break: break-all; } 5 vào một SVG

Đô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;
}   

9

Lấ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;
}

3

12. 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

  .section-hero {
    background: linear-gradient(transparent, #d7e0ef), #527ee0;
    /*Other styles*/
  }
  

  0,
• đặt

  .section-hero {
    background: linear-gradient(transparent, #d7e0ef), #527ee0;
    /*Other styles*/
  }
  

  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ó

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 đợi

Bản xem trước lớn

13. Không gian kỳ lạ khi sử dụng .section-hero { background: linear-gradient(transparent, #d7e0ef), #527ee0; /*Other styles*/ } 5

Đặ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;
}

4(Xem trước lớn)

Mộ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;
}

5

(Xem trước lớn)

Xem 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 CodePen

14. 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

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;
}

6Xem trước kích thước lớn

15. 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;
}

7

16. 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;
}

8

(Xem trước lớn)

17. 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;
}

9(Xem trước lớn)

Sử 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 pixel

18. Thêm Đúng .wrapper { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } 4 Cho

3

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

(Xem trước lớn)

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

1(Xem trước lớn)

Phầ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

Mục đích của CSS là gì?

Ưu điểm của CSS là gì?

Các vấn đề phổ biến trong CSS là gì?

Tóm lại CSS là gì và những ưu điểm của nó?