Css thanh địa chỉ safari ios 15

Apple mới đây đã công bố phiên bản Safari mới nhất trên iOS 15 với thiết kế hoàn toàn mới với thanh tab nổi phía dưới. Điều này có ý nghĩa gì đối với các nhà phát triển và thiết kế web?

Safari trên iOS đã gặp sự cố trong một thời gian dài khi xây dựng các trang web và ứng dụng web với điều hướng được căn chỉnh dưới cùng do chiều cao động của thanh công cụ trình duyệt. Khi bạn cuộn, thanh công cụ sẽ biến mất, làm cho bất kỳ thành phần nào được cố định ở cuối màn hình trông tuyệt vời, nhưng ngay sau khi bạn cố gắng nhấn vào bất kỳ liên kết nào bên trong, thanh công cụ của trình duyệt lại xuất hiện

Xin lỗi, trình duyệt của bạn không hỗ trợ nhúng video

Điều này tạo ra một UX thực sự kém, vì vậy các nhà thiết kế và nhà phát triển chủ yếu sử dụng các menu "bánh mì kẹp thịt" của người dùng để thay thế. Đây là một điều đáng tiếc vì các thanh tab dưới cùng tăng khả năng khám phá bằng cách không ẩn các liên kết sau một lần nhấn và cũng dễ dàng tiếp cận hơn bằng một tay trên các thiết bị di động lớn hiện nay

Cập nhật với Safari 15

Cập nhật ngày 23 tháng 9 năm 2021. Apple đã hoàn nguyên một số thay đổi này trong bản phát hành iOS 15 cuối cùng. Giờ đây, người dùng có thể chọn giữa giao diện người dùng cũ (thanh trên cùng) hoặc giao diện người dùng mới. Nếu họ chọn giao diện người dùng thanh dưới cùng mới, nó sẽ không nổi nhiều như cải thiện đáng kể các vấn đề chồng chéo. Mặc dù bạn có thể không cần các khu vực an toàn nữa nếu bạn may mắn, nhưng tôi vẫn khuyên bạn nên triển khai nó vì dù sao thì nó cũng gây ra sự cố.

Safari 15 mới hiện có thanh tab nổi ở cuối màn hình. Lúc đầu, có vẻ như điều này khiến việc tạo điều hướng trên thanh tab trở nên khó khăn hơn và bằng cách duyệt web bằng iOS 15, bạn có thể dễ dàng phát hiện ra các sự cố như thế này

Xin lỗi, trình duyệt của bạn không hỗ trợ nhúng video

Sửa thanh tab chồng chéo với vùng an toàn

Rất may, việc giải quyết vấn đề này rất dễ dàng bằng cách sử dụng hàm CSS env() cùng với safe-area-inset-bottom. API này đã được cung cấp cùng với iOS 11 để có thể tùy chỉnh cách các trang web hiển thị khi sử dụng các thiết bị có tai thỏ. Bằng cách kiểm tra mã pinterest, chúng ta có thể thấy rằng thanh tab của họ có một vị trí cố định được neo ở dưới cùng, các phần có liên quan trông giống như thế này

.tabbar {
	position: fixed;
	bottom: 0;
}

Để tôn trọng khu vực an toàn và đảm bảo rằng không có gì từ giao diện người dùng của trình duyệt trùng lặp, hãy thêm thuộc tính dưới cùng khác với giá trị env(safe-area-inset-bottom). Hàm này hoạt động giống như một biến CSS, trả về số lượng phần nhỏ tối thiểu cần thiết để giữ cho giao diện người dùng của bạn không trùng lặp với giao diện người dùng của trình duyệt. Chúng tôi giữ quy tắc kiểu cũ làm trình duyệt dự phòng không hỗ trợ nó

.tabbar {
  position: fixed;
  bottom: 0;
  bottom: env(safe-area-inset-bottom);
}

Bây giờ khi cuộn không có gì chồng lên nhau

Xin lỗi, trình duyệt của bạn không hỗ trợ nhúng video

Đảm bảo sử dụng env() mỗi khi nội dung nào đó được neo ở cuối màn hình hoặc có khả năng xuất hiện chồng chéo. env() cũng có thể được kết hợp với css

.tabbar {
  position: fixed;
  bottom: 0;
  bottom: env(safe-area-inset-bottom);
}

.tabbar {
  position: fixed;
  bottom: 0;
  bottom: env(safe-area-inset-bottom);
}

.tabbar {
  position: fixed;
  bottom: 0;
  bottom: env(safe-area-inset-bottom);
}

.tabbar {
  position: fixed;
  bottom: 0;
  bottom: calc(1rem + env(safe-area-inset-bottom));
}

Bạn có thể tìm hiểu thêm về cách tôn trọng vùng an toàn trong bài viết xuất sắc này được xuất bản trên blog webkit hoặc phiên WWDC của Apple có tên là Design for Safari 15 (Phần liên quan bắt đầu sau khoảng 13 phút nữa)

Cách tốt nhất để xem bạn có làm đúng hay không là sử dụng một thiết bị vật lý chạy iOS 15. Tuy nhiên, nếu không có quyền truy cập vào một thiết bị, bạn có thể tải xuống Xcode 13 beta từ cổng thông tin dành cho nhà phát triển của Apple và sử dụng trình giả lập iOS 15 bằng cách truy cập

Tab Bar UX trong iOS 15

Bạn có nhớ sự cố trong các phiên bản trước của Safari khi bạn phải nhấp hai lần khi sử dụng các thanh tab dưới cùng không? . Safari 15 hiện tôn trọng và theo dõi các liên kết hoặc nút, đây là một cải tiến lớn. Kiểm tra thanh tab của Twitter hoạt động tốt hơn như thế nào khi chuyển tab trên Safari 15

Xin lỗi, trình duyệt của bạn không hỗ trợ nhúng video

Ngay cả khi các thanh tab giờ đây hoạt động tốt hơn về mặt kỹ thuật so với trước đây, chúng tôi vẫn phải xem xét thiết kế và trải nghiệm người dùng để tạo ra thứ gì đó mà mọi người hiểu và có vẻ tốt. Giao diện người dùng trình duyệt hiện rất nặng nề và việc đặt thêm các hành động bên cạnh nó có thể gây cảm giác lộn xộn. Bạn nghĩ sao?

Tôi rất vui khi thấy mọi người thích ứng với giao diện người dùng mới như thế nào và liệu chúng ta có thấy thanh tab trở lại trên web hay không

Bạn có thể thay đổi thanh tìm kiếm Safari trên ios 15 không?

Bạn có thể di chuyển thanh địa chỉ trên ios 15 không?