GODRICH
#css-animation#button#loader#transition#scroll#ui#xu-huong-thiet-ke

9 CSS Toast Notification — không cần JS

· Godrich · 9 kiểu · Đọc trong 13 phút

Chuyển cảnhSCSSChỉ CSSClickDashboard

CSS toast notification là thẻ thông báo nhỏ tự nổi lên một góc màn hình rồi tự đóng, dựng bằng CSS thuần, không cần JS.

Trượt vào từ bên phải01 toast-notification-slide-in-right Toast Popover API02 toast-notification-popover-toast Xếp chồng 3 lớp03 toast-notification-stack-3 Thanh thời gian còn lại04 toast-notification-progress-close Toast hoàn tác05 toast-notification-undo-toast Vuốt để đóng06 toast-notification-swipe-dismiss Icon thành công07 toast-notification-success-icon Toast đáy màn hình di động08 toast-notification-bottom-mobile Huy hiệu thông báo09 toast-notification-bell-badge

Tự chạy · bấm ô để tới mục đó · cả 9 trong một zip

Chín kiểu không xếp theo độ nổi tiếng mà theo đúng vòng đời của một toast trên màn hình: cách xuất hiện gây chú ý (01–03), cách tự dọn mình (04–06), rồi cách dùng màu và hình để nói trạng thái (07–09). Ở lưới phía trên, mỗi ô lặp lại bằng class .is-demo theo chu kỳ hai giây bên trong một iframe cố định không nhận sự kiện chuột thật, nên bạn xem chuyển động lặp chứ chưa bấm nút nào cả — file vanilla riêng trong zip mới phản hồi đúng thao tác thật của bạn.

01Trượt vào từ bên phải

Bạn thấy gì

Card trượt vào từ ngoài mép phải màn hình bằng translateX, dừng lại một nhịp rồi thoát ra đúng hướng cũ.

Trượt vào từ bên phải
Mở trong tab mới

01 · Trượt vào từ bên phải — Diện tích đo được 19.466% · khung hình chuyển động 9/23Nguyên tác GODRICH · SCSS và React nằm trong tệp zip · Xem mật khẩu

translateX0.6초코너 고정

Dùng ở đâu

Đây là cách cơ bản nhất cho thông báo lưu hay tải lên hoàn tất, đặt ở góc một web app desktop.

.toast {
  position: relative;
  transform: translateX(140%);
  opacity: 0;
}
.toast.is-demo { animation: slide-loop $dur-loop $easing infinite; }
@keyframes slide-loop {
  0%   { transform: translateX(140%); opacity: 0; }
  18%  { transform: translateX(0); opacity: 1; }
  78%  { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(140%); opacity: 0; }
}

02Toast Popover API

Chuyện gì diễn ra trên màn hình

Chỉ cần thuộc tính popover và nút popovertarget là toast mở đóng được, đứng sẵn ở top-layer và được đóng bằng Esc hay click ra ngoài mà không cần dòng JS nào cho việc đóng.

Toast Popover API
Mở trong tab mới

02 · Toast Popover API — Diện tích đo được 23.62% · khung hình chuyển động 9/23Nguyên tác GODRICH · SCSS và React nằm trong tệp zip · Xem mật khẩu

popoverpopovertargetshowPopover()

Chỗ dùng

Style mặc định lại canh giữa màn hình, nên muốn đặt ở góc thì phải tự ghi đè.

<div id="ptoast" class="toast" popover role="status" aria-live="polite">
  <span class="toast__dot" aria-hidden="true"></span>
  <p class="toast__title">Đã kết nối</p>
  <button popovertarget="ptoast" popovertargetaction="hide" aria-label="Đóng thông báo">
    <svg viewBox="0 0 24 24" width="14" height="14"><line x1="5" y1="5" x2="19" y2="19"/><line x1="19" y1="5" x2="5" y2="19"/></svg>
  </button>
</div>
<script>document.getElementById('ptoast').showPopover();</script>

03Xếp chồng 3 lớp

Chuyển động thế nào

Ba thẻ thông báo nằm chồng khẽ lệch nhau nhờ biến CSS --i gán riêng từng thẻ, hover hoặc focus vào cả cụm thì chúng bung ra theo hình quạt để đọc được từng thẻ.

Xếp chồng 3 lớp
Mở trong tab mới

03 · Xếp chồng 3 lớp — Diện tích đo được 9.192% · khung hình chuyển động 16/23Nguyên tác GODRICH · SCSS và React nằm trong tệp zip · Xem mật khẩu

CSS 변수 --ihover·focus-within덱 펼치기

Dùng khi nào

Hợp với hộp thông báo dashboard khi nhiều sự kiện đến gần như cùng lúc.

.stack__item {
  position: absolute; inset: 0;
  transform: translateY(calc(var(--i) * -6px))
             scale(calc(1 - var(--i) * .05));
  opacity: calc(1 - var(--i) * .22);
}
.stack:hover .stack__item,
.stack:focus-within .stack__item {
  transform: translateY(calc(var(--i) * -22px)) scale(1);
  opacity: 1;
  transition: transform $duration $easing, opacity $duration $easing;
}

04Thanh thời gian còn lại

Bạn thấy gì

Thanh tiến trình ở đáy co lại đều bằng scaleX theo thời gian tuyến tính, và đúng lúc thanh co hết thì toast biến mất theo cùng nhịp.

Thanh thời gian còn lại
Mở trong tab mới

04 · Thanh thời gian còn lại — Diện tích đo được 23.668% · khung hình chuyển động 23/23Nguyên tác GODRICH · SCSS và React nằm trong tệp zip · Xem mật khẩu

scaleXlinearanimationend

Dùng ở đâu

Dùng cho thông báo phải tự đóng sau một mốc thời gian cố định, kiểu xác nhận tải lên.

.toast__bar {
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 4px;
  background: $color;
  transform-origin: left;
}
.toast.is-demo .toast__bar { animation: bar-shrink $dur-loop linear infinite; }
@keyframes bar-shrink {
  0%   { transform: scaleX(1); }
  82%  { transform: scaleX(0); }
  100% { transform: scaleX(0); }
}

05Toast hoàn tác

Chuyện gì diễn ra trên màn hình

Bấm nút hoàn tác cạnh dòng chữ xoá thì JS huỷ bộ đếm giờ và đổi chữ báo đã huỷ; không bấm thì sau 4 giây toast tự cuộn lại từ trên xuống bằng scaleY.

Toast hoàn tác
Mở trong tab mới

05 · Toast hoàn tác — Diện tích đo được 14.713% · khung hình chuyển động 11/23Nguyên tác GODRICH · SCSS và React nằm trong tệp zip · Xem mật khẩu

scaleYclearTimeout4초

Chỗ dùng

Dùng thay cho hộp xác nhận khi xoá một dòng trong danh sách.

document.querySelectorAll('.toast').forEach(function (t) {
  var btn = t.querySelector('.toast__undo'), msg = t.querySelector('.toast__text');
  var timer = setTimeout(function () { t.classList.add('is-gone'); }, 4000);
  btn.addEventListener('click', function () {
    clearTimeout(timer);
    msg.textContent = 'Đã huỷ';
    t.classList.add('is-cancelled');
  });
});

06Vuốt để đóng

Chuyển động thế nào

Giữ và kéo ngang thì thẻ bám theo ngón tay qua biến --dx, buông tay sau khi kéo quá 80px thì thẻ trượt hẳn ra theo hướng đó để đóng.

Vuốt để đóng
Mở trong tab mới

06 · Vuốt để đóng — Diện tích đo được 20.664% · khung hình chuyển động 9/23Nguyên tác GODRICH · SCSS và React nằm trong tệp zip · Xem mật khẩu

pointermovetranslateX(var(--dx))80px 문턱

Dùng khi nào

Hợp với hộp thông báo chat, messenger trên di động, nơi thao tác chạm là chính.

el.addEventListener('pointerdown', function (e) {
  x0 = e.clientX; dragging = true; el.setPointerCapture(e.pointerId);
});
el.addEventListener('pointermove', function (e) {
  if (!dragging) return;
  dx = e.clientX - x0; el.style.setProperty('--dx', dx + 'px');
});
el.addEventListener('pointerup', function () {
  dragging = false;
  if (Math.abs(dx) > 80) el.classList.add(dx > 0 ? 'is-swiped-right' : 'is-swiped-left');
  else el.style.setProperty('--dx', '0px');
});

07Icon thành công

Bạn thấy gì

Vòng tròn màu trung tính mờ dần biến mất đúng lúc vòng màu trạng thái cùng dấu tick vẽ bằng stroke-dashoffset hiện lên chồng lên nhau, nên chính màu sắc nói lên kết quả.

Icon thành công
Mở trong tab mới

07 · Icon thành công — Diện tích đo được 0.215% · khung hình chuyển động 14/23Nguyên tác GODRICH · SCSS và React nằm trong tệp zip · Xem mật khẩu

opacity 크로스페이드stroke-dashoffset상태색 변수

Dùng ở đâu

Đổi $color sang màu lỗi là có ngay badge báo thất bại.

.badge__neutral { opacity: .3; }
.badge__colored { opacity: 0; }
.badge__check { stroke-dasharray: 100; stroke-dashoffset: 100; }

.toast.is-demo .badge__neutral { animation: fade-out $dur-loop $easing infinite; }
.toast.is-demo .badge__colored { animation: fade-in $dur-loop $easing infinite; }
.toast.is-demo .badge__check   { animation: draw $dur-loop $easing infinite; }

08Toast đáy màn hình di động

Chuyện gì diễn ra trên màn hình

Thanh hình viên thuốc cố định ở đáy màn hình né vùng an toàn rồi nhích lên một chút trước khi hạ xuống lại.

Toast đáy màn hình di động
Mở trong tab mới

08 · Toast đáy màn hình di động — Diện tích đo được 15.832% · khung hình chuyển động 9/23Nguyên tác GODRICH · SCSS và React nằm trong tệp zip · Xem mật khẩu

safe-area-inset-bottomtranslateY$r-pill

Chỗ dùng

Khác bottom sheet có tay cầm, nó chỉ hiện một dòng và tự đóng, hợp với tin mới hay mất kết nối trên web di động.

.toast {
  position: fixed;
  left: 16px; right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  margin: 0 auto;
  max-width: 340px;
  border-radius: 999px;
  transform: translateY(140%);
  opacity: 0;
}
.toast.is-demo { animation: bottom-loop $dur-loop $easing infinite; }

09Huy hiệu thông báo

Chuyển động thế nào

Icon chuông lắc nhẹ quanh đỉnh của nó đúng lúc badge góc trên phải phồng rồi xẹp lại, tạo một khoảnh khắc rõ ràng báo có thông báo mới.

Huy hiệu thông báo
Mở trong tab mới

09 · Huy hiệu thông báo — Diện tích đo được 0.469% · khung hình chuyển động 8/23Nguyên tác GODRICH · SCSS và React nằm trong tệp zip · Xem mật khẩu

transform-box: fill-boxrotatescale

Dùng khi nào

Dùng cho icon chuông trên header hiển thị số tin chưa đọc.

.bell__body {
  transform-box: fill-box;
  transform-origin: 50% 0%;
}
.bell.is-demo .bell__body { animation: shake $dur-loop $easing infinite; }
.bell.is-demo .badge       { animation: pulse $dur-loop $easing infinite; }
@keyframes shake {
  0%, 55%, 100% { transform: rotate(0deg); }
  60% { transform: rotate(-14deg); }
  65% { transform: rotate(12deg); }
  70% { transform: rotate(-8deg); }
}

Chỗ dễ hỏng ở đâu — cái bẫy

Hai lớp chồng nhau

Cả chín toast chỉ động đến transform và opacity, vì animate width hay top bắt trình duyệt tính lại layout ở từng khung hình. Nhưng khi xếp hai lớp chồng nhau lại lộ ra một bẫy khác. 07 icon thành công đặt vòng trung tính và vòng màu trạng thái vào cùng một chỗ rồi đổi opacity qua lại — quên grid-area: 1 / 1 trên cả hai lớp thì chúng xếp dọc lên nhau, khiến badge cao gấp đôi. 03 xếp chồng 3 lớp gặp bẫy cùng gốc: gán --i cố định ngay trong style.scss thì cả ba thẻ nhận đúng một giá trị và nằm đè khít lên nhau, nên bắt buộc phải ghi style="--i:N" riêng cho từng phần tử, mỗi thẻ một giá trị khác nhau (0, 1, 2).

Bóng đổ ló ra mép phải

01 trượt vào từ bên phải dùng translateX(140%) chứ không phải 100%, vì thẻ có box-shadow: nếu chỉ đẩy đúng bằng chiều rộng thẻ thì rìa bóng đổ vẫn ló ra mép phải màn hình.

Popover API và vùng an toàn

02 toast Popover API cũng từng vấp: style mặc định của thuộc tính popover là cố định giữa màn hình, không ghi đè đầy đủ bằng position: fixed cùng top, right, margin thì toast nổi giữa màn hình chứ không nằm ở góc. Popover API chạy được từ Chrome và Edge 114 trở lên, Safari 17 trở lên, Firefox 125 trở lên theo bảng hỗ trợ trên caniuse; trình duyệt cũ hơn bỏ qua thuộc tính popover và để lại một <div> bình thường nên phải tự thêm JS bật tắt. 08 toast đáy di động dùng env(safe-area-inset-bottom, 0px) cũng theo kiểu đó — từ iOS Safari 11.2 trở lên theo tài liệu MDN về env() nó trả về đúng giá trị notch hay thanh home thật, còn trình duyệt không hỗ trợ thì calc() âm thầm dùng luôn giá trị dự phòng 0px. 06 vuốt để đóng thì nếu không gọi setPointerCapture ngay khi nhấn, ngón tay vừa vượt mép thẻ là sự kiện pointermove đứt mất và cú kéo dừng khựng giữa chừng. Sửa cả ba chỗ grid-area, --i inline, và setPointerCapture rồi đo lại render xong mới đóng vào file nén, mật khẩu mở ra là vp67sjt7, gõ đúng như nó hiện trên dòng này.

Khả năng tiếp cận

Vai trò status và aria-live

Cả chín toast đều gắn role="status" aria-live="polite", đúng mức để báo cho người dùng trình đọc màn hình mà không ngắt ngang việc họ đang làm.

<div class="toast" role="status" aria-live="polite">
  <p class="toast__text">Đã lưu</p>
</div>

Với thông báo cần phản hồi ngay, như đăng nhập thất bại, nên nâng lên aria-live="assertive" để nó chen ngang lập tức. 04 thanh thời gian còn lại tự đóng nên phải theo WCAG 2.2.1 Timing Adjustable, vốn yêu cầu luôn có cách kéo dài hoặc tắt giới hạn thời gian — bản thân demo 04 không có nút dừng, nên khi dùng thật nên ghép thêm nút hoàn tác như mục 05 để đáp ứng yêu cầu này, còn ở đây mốc thời gian được đặt tối thiểu 5 giây. prefers-reduced-motion: reduce tắt gần hết animation trượt, xoay, bung ra, riêng thanh tiến trình của 04 vẫn giữ nguyên vì đó là thông tin chức năng báo khi nào toast tự đóng chứ không phải trang trí. Cách media query này được bật và mức hỗ trợ trình duyệt nằm ở tài liệu MDN.

Xem chín kiểu CSS khác đang chờ trong chuyên mục CSS, còn lý do mỗi file nén ở đây đều có khoá nằm ở trang giới thiệu.

FAQ

role="status" hay role="alert" phù hợp hơn cho toast?

Phần lớn toast hợp với role="status" aria-live="polite". role="alert" (hoặc aria-live="assertive") ngắt ngang luôn trình đọc màn hình, nên chỉ dành cho thông báo bắt buộc phải biết ngay, như thanh toán thất bại hay phiên đăng nhập hết hạn.

Toast tự đóng thì nên đặt bao nhiêu giây?

Không có con số chuẩn, nhưng WCAG 2.2.1 buộc phải có cách kéo dài hay tắt giới hạn thời gian. Mục 04 trong bài này để mặc định 5 giây; bản thân nó không có nút hoàn tác, nên khi dùng thật nên ghép thêm nút hoàn tác như mục 05, để không ai bị mất thông báo trước khi đọc xong.

Trình duyệt chưa hỗ trợ Popover API thì xử lý sao?

Trình duyệt không hỗ trợ sẽ để popover lại thành một <div> bình thường, nên chỉ cần kiểm if ('showPopover' in document.createElement('div')) rồi tự viết thêm vài dòng JS toggle class để mở đóng khi không có sẵn hỗ trợ.

Nhập mật khẩu file nén

Mật khẩu nằm ngay trong bài viết này. Đọc tới đó bạn sẽ thấy.