Яка різниця між: фокусом та: активним?

Яка різниця між :focusі :activeпсевдокласами?

:focusі :activeє двома різними станами.

• :focus представляє стан, коли в даний момент елемент обраний для прийому вводу і
• :active представляє стан, коли елемент в даний час активується користувачем.

Наприклад, скажімо, у нас є <button>. Не <button>буде жодної держави для початку. Він просто існує. Якщо ми використовуємо Tabдля того, щоб "зосередити увагу" на цьому <button>, він зараз переходить у його :focusстан. Якщо потім натиснути (або натиснути space), ви змусите кнопку ввести його :activeстан ( ).

На цій ноті, натискаючи на елемент, ви приділяєте йому фокус, що також культивує ілюзію, що :focusі :activeє однаковою. Вони не однакові. При натисканні кнопка знаходиться в :focus:activeстані.

Приклад:

<style type="text/css">
  button { font-weight: normal; color: black; }
  button:focus { color: red; }
  button:active { font-weight: bold; }
</style>
  
<button>
  When clicked, my text turns red AND bold!<br />
  But not when focused only,<br />
 where my text just turns red
</button>

редагувати: jsfiddle

:active       Adds a style to an element that is activated
:focus        Adds a style to an element that has keyboard input focus
:hover        Adds a style to an element when you mouse over it
:lang         Adds a style to an element with a specific lang attribute
:link         Adds a style to an unvisited link
:visited      Adds a style to a visited link

Джерело: CSS Псевдокласи

Є чотири випадки.

1. За замовчуванням активоване та фокусування вимкнено.
2. Коли ви перейдете на вкладку, щоб перейти через фокусуються елементи , вони ввійдуть:focus (без активних).
3. При натисканні на нефокусований елемент він входить :active(без фокусу).
4. При натисканні на елемент, що :active:focusфокусується, він вводиться (активний і одночасно фокусується).

Приклад:

<div>
  I cannot be focused.
</div>

<div tabindex="0">
  I am focusable.
</div>

div:focus {
  background: green;
}

div:active {
  color: orange;
}

div:focus:active {
  font-weight: bold;
}

Коли сторінка завантажується в обох випадках у випадку 1. Коли ви натискаєте на вкладку, ви сфокусуєте другий поділ і побачите його, як показано випадок 2. Коли ви клацнете на першому діві, ви побачите випадок 3. Коли ви клацнете другий розділ, ви побачите випадок 4 .

Фокусується чи ні елемент - це інше питання . Більшість не за замовчуванням. Але, з упевненістю припустити <a>, <input>, <textarea>є фокусируемое за замовчуванням.

: фокус - це коли елемент здатний прийняти введення - курсор у полі введення або посилання, на яке було вкладено вкладку.

: active - це коли елемент активується користувачем - час між тим, коли користувач натискає кнопку миші та потім відпускає її.

Активним є те, коли користувач активує цю точку (як і клацання миші; якщо ми використовуємо вкладку з поля в поле, немає ознаки активного стилю. Можливо, для натискання потрібно більше часу, просто спробуйте утримувати клацання на цій точці), фокус відбувається після точка активована. Спробуйте це :

<style type="text/css">
  input { font-weight: normal; color: black; }
  input:focus { color: green; outline: 1px solid green; }
  input:active { color: red; outline: 1px solid red; }
</style>

<input type="text"/>
<input type="text"/>

Фокус може бути наданий лише за допомогою клавіатури, але елемент може бути активований обома, мишею або клавіатурою.

Якщо використовується: фокус на посиланні, правило стилю застосовуватиметься лише при натисканні на клавіатуру ботону.

Використання "фокусу" надасть користувачам клавіатури той самий ефект, який отримують користувачі миші, коли вони наводяться курсор миші. "Активний" потрібен, щоб отримати такий же ефект в Internet Explorer.

Реальність полягає в тому, що ці стани працюють не так, як слід для всіх користувачів. Не використання всіх трьох селекторів створює проблеми доступності для багатьох користувачів клавіатури, які фізично не в змозі користуватися мишею. Я запрошую вас прийняти виклик #nomouse (nomouse dot org).