Hướng dẫn thiết kế blogspot căn bản - Sử dụng css cho hover, focus, active và visited

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 <a> liên kết, <button> mục nhấp, <input> (với thuộc tính type loại nhập), <select> mục chọn, <textarea> mục nhập. Ngoài ra có thể thêm thuộc tính tabindex="0" vào phần tử khác không phải những elements ở trên đề lấy focus
• visited: Sử dụng cho element có link (liên kết)

Trên đây là những căn bản nhất các bạn cần nắm vì khi đã hiểu được vấn đề bạn mới biết design giao diện cho các element cần có hover, focus, active và visited.

Tham khảo thêm:

• Chỉ rõ các mục có thể truy cập được bằng thuộc tính tabindex
• Cách sử dụng thuộc tính role và tabindex thay thế cho button

Những thuộc tính css liên quan đến hover, focus, active và visited bao gồm: outline, color, background, border, box-shaxdow. Cụ thể các thuộc tính này sẽ làm nổi bật ví trí đó lên khi tác động hoặc đã tác động vào nó. Vậy cho nên tùy vào từng trường hợp, tùy vào mỗi element mà sử dụng kết hợp cà hover, focus, active và visited hoặc chỉ sử dụng riêng lẻ.

Một ví dụ css cho button

<b:tag name='style'>/* <![CDATA[ */

.nav-icon button {

  background: transparent;

  padding: 0;

  border: none;

  border-radius: 50%;

  height: 40px;

  width:40px

}

.nav-icon button:hover {

  background: rgba(60,64,67,0.08);

}

.nav-icon button:focus {

  background: rgba(95,99,104,0.24);

  outline: none;

}

.nav-icon button:active {

  background: rgba(95,99,104,0.24);

}

/* ]]> */</b:tag>

Ngoài ra tùy theo máy tính hay thiết bị cảm ứng nếu như trên máy tính có thể sử dụng hết hover, focus, active và visited nhưng trên thiết bị cảm ứng không cần phải sử dụng focus cho thẻ liên kết văn bản <a> chẳng hạn.

Lấy một ví dụ thường thấy nhất cho thẻ liên kết văn bản <a>, vì anh này sử dụng hết hover, focus, active và visited. Nếu mình sử dụng chung cho toàn trang, mình viết css như sau:

<b:tag name='style'>/* <![CDATA[ */

/* text link */

a {

  color: black;

}



/* hover link */

a:hover {

  color: blue;

  text-decoration: underline;

}



/* focus link */

a:focus {

  outline: 1px dotted green;

}



/* selected link */

a:active {

  color: yellow;

}



/* visited link */

a:visited {

  color: blue;

}

/* ]]> */</b:tag>

Giả sử mình muốn chỉ định các liên kết văn bản trong bài viết có element là class post-body

<b:tag name='style'>/* <![CDATA[ */

/* text link */

.post-body a {

  color: #1a73e8;

}



/* hover link */

.post-body a:hover {

  color: #174ea6;

  text-decoration: none;

}



/* focus link */

.post-body a:focus {

  outline: none;

  border: 1px dotted green;

}

/* ]]> */</b:tag>

css active và visited mình không đề cập đến có nghĩa mình không sử dụng.

Mấu chốt vấn đề bạn căn cứ vào đâu để viết css cho hover, focus, active và visited? Sử dụng reponsive với @media chăng? Cũng hợp lý đấy nhưng chỉ đúng một phần. Hay sử dụng điều kiện không phải mobile trong blogspot <b:if cond='!data:blog.isMobileRequest'> cũng không tồi nhưng cũng chỉ đúng một phần. Mình phân tích vì sao nó lại chỉ đúng một phần nhé.

Giả sử mình viết css bằng reponsive sử dụng @media

<b:tag name='style'>/* <![CDATA[ */

@media(max-width:860px){

    a {

      outline: none;

      cursor: default;

    }

}

/* ]]> */</b:tag>

Đọc thêm: Cách sử dụng thẻ b:tag trong blogspot

Như vậy nó chỉ đúng khi màn hình thiết bị có kích thước 860px trở xuống vì mình dự đoán các thiết bị này sẽ là thiết bị màn hình cảm ứng. Vậy với thiết bị khác như iPad Pro, Surface laptop, laptop chạy Android,.v.v., sử dụng màn hình cảm ứng nhưng có màn hình lớn hơn 860px do đó nó lại sai phải không các bạn.

Mình lại sử dụng điều kiện không phải mobile trong blogspot

<b:if cond='data:blog.isMobileRequest'>

<b:tag name='style'>/* <![CDATA[ */

a {

  outline: none;

  cursor: default;

}

/* ]]> */</b:tag>

</b:if>

Sử dụng điều kiện không phải mobile này nó chỉ đúng trên điện thoại di động còn trên tablet nó lại càng sai. Do đó cả hai trường hợp nó chỉ tương đối chính xác là bởi nguyên nhân vậy.

Có một cách chính xác cao hơn đó là sử dụng JavaScript nhận dạng trình duyệt thiết bị sử dụng điều kiện thêm thuộc tính và từ thuộc tính đó viết css. Già sử mình sẽ thêm thuộc tính data-view-type vào thẻ <html> đầu trang bằng đoạn script dưới đây

<script>//<![CDATA[

  window.addEventListener("load",function(){

    if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|Windows Phone|webOS)/i) === null

    || window.navigator.pointerEnabled && navigator.maxTouchPoints > 1) {

      document.documentElement.setAttribute("data-view-type","desktop")

    } else {

      document.documentElement.setAttribute("data-view-type","mobile")

    }

  })

//]]></script>

Cụ thể khi trình duyệt load với điều kiện nếu là thiết bị cảm ứng sẽ thêm thuộc tính data-view-type="mobile" vào thẻ <html> còn không thêm thuộc tính data-view-type="desktop"

Từ thuộc tính này mình sẽ dễ dàng viết css, ví dụ

<b:tag name='style'>/* <![CDATA[ */

[data-view-type=mobile] a {

  cursor: default;

  outline: none;

}

/* ]]> */</b:tag>

Trên đây là những chia sẻ của mình cách sử dụng css cho hover, focus, active và visited. Qua bài này các bạn rút ra kết luận như sau:

1. Sử dụng css cho hover, focus, active và visited để làm nổi bật khi tác động lên vị trí nào
2. Chỉ sử dụng css cho tất cả hover, focus, active và visited trên máy tính để bàn sử dụng bàn phím chuột.
3. Tùy vào mỗi element mà kết hợp sử dụng css cho tất cả hover, focus, active
4. Sử dụng các thuộc tính css làm nổi bật cho hover, focus, active và visited
5. Sử dụng JavaScript thêm thuộc tính và viết css cho thuộc tính mang lại độ chính xác cao