Hướng dẫn css active vs focus

Web develop hay đặc biệt là Font End dễ hiểu là làm giao diện website nhưng khi bạn làm website thì chắc hẳn bạn không thể kiểm soát được các lỗi cũng như hiệu ứng. Chính vì vậy các bạn cần phải tìm ra cách khắc phục để có thể debug được từng đoạn code sao cho việc kiểm soát từng dòng code tốt nhất cũng như thay đổi các hiệu ứng trên website ngay trên trình duyệt.

Thịnh thì cũng từng gặp trường hợp như vậy do là khi viết ra thì những hiệu ứng như active, hover, focus, visited lại không hiện trong phần Elements của Google Chrome. Vì điều đó mà hôm nay Thịnh chia sẻ với các bạn cách làm sao để hiển thị được các class hiệu ứng trong phần styles của trình duyệt Google Chrome.

Lưu ý là mình chỉ nói Google Chrome, còn đối với các trình duyệt nhân từ Chrome như Opera, Coccoc thì nó có biểu tượng hơi khác chút mình không hướng dẫn nhưng nó cũng tương tự như Google Chrome.

Sau đây là cách hiển thị các hiệu ứng để bạn kiểm soát dòng code cũng như muốn test các mã lệnh css.

Đầu tiên việc làm cần thiết đó là bạn nhấn F12 trang web mà bạn đang test để mở phần Elements và các thành phần lên quan dành cho Develop.
Tiếp theo bạn xem ở phần Styles và nhấn vào biểu tượng :hover như hình sau.
Sau khi bạn nhấn vào thì nó hiển thị ra danh sách: active, focus, hover, visited và mặc định là nó chưa được tích chọn. Lúc này bạn cần tích chọn để nó hiển thị các đoạn mã lệnh css của các chức năng đó như hình sau.
Như vậy là xong, bây giờ bạn có thể thêm bớt các mã lệnh để làm hiệu ứng website. Lưu ý khi bạn tích nhiều nó đẩy xuống dưới và bạn kéo thanh scrollbar xuống để xem các hiệu ứng hover, active, focus, visited còn lại.

Cách làm khá đơn giản bạn hoàn toàn có thể kiểm soát được. Chúc các bạn thành công

Từ khóa active,Elements,focus,Font End,giao diện website,Google Chrome,hover,thẻ css,trình duyệt Google Chrome,visited,Web develop

Khi nhắc đến hover, focus, active và visited thì đại đa số mọi người sẽ nghĩ ngay ôi ba cái đơn giản như này ai mà chả biết. Thế nhưng nó có thật sự đơn giản không bài hôm nay mình và các bạn cùng nhau làm rõ nhé.

Thật ra cái mà chúng ta nhắc đến nó chỉ liên quan đến thẩm mĩ thôi css mà chứ không ảnh hưởng đến tốc độ tải trang hay SEO gì cả. Trước hết mình sẽ phân tích ngắn gọn một chút về hover, focus, active và visited

hover, focus, active chỉ xảy ra khi có tác động lên phần tử element, mình phân tích vào hai trường hợp một

Trên máy tính sử dụng bàn phím, chuột: Khi bạn rê con trỏ chuột vào vị trí nào và giữ nguyên tại vị trí đấy thì lúc đấy bạn đang hover, khi bạn click chuột phải vào vị trí lúc đấy bạn đang focus, còn khi bạn click chuột trái vào vị trí chọn element lúc này bạn đang active.
Trên thiết bị di động màn hình cảm ứng: Khi bạn rê ngón tay, bút cảm ứng vào vị trí nào và giữ nguyên tại vị trí đấy thì lúc đấy bạn đang hover, khi bạn đè mạnh ngón tay, bút cảm ứng vào vị trí nhưng không nhấp lúc đấy bạn đang focus, còn khi bạn nhấp ngón tay, bút cảm ứng vào vị trí chọn element lúc này bạn đang active và cả focus luôn vì hai hành động này xảy ra cùng lúc và quá nhanh nên bạn không phân biệt được thôi.

Thiết bị ngày nay rất đa dạng vì máy tính bàn, laptop đang dần sử dụng màn hình cảm ứng cho bút cảm ứng hay như một chiếc điện thoại phổ thông kết nối với màn hình lớn nhưng lại sử dụng bàn phím chuột. Về bản chất các thiết bị này đều phải sử dụng trình duyệt trên desktop và mobile cho máy tính bàn, laptop màn hình cảm ứng cũng phải sử dụng trình duyệt desktop hay điện thoại phổ thông nếu kết nối cáp với màn hình lớn cũng phải sử dụng trình duyệt mobile.

Đến đây bạn dần thấy phức tạp rồi đó, còn khi nhắc đến visited nó lại liên quan đến cookie trình duyệt mà bạn cài đặt có cho phép hay không. Nếu bạn không cho phép thì visited không còn tác dụng gì cả, visited chỉ xảy ra khi bạn đã tác động vào element và trình duyệt load lại có lưu cookie.

hover, focus, active và visited sử dụng cho những elements nào?

hover: tất cả các thẻ elements nào cũng có
focus, active: những elements mặc định liên kết,