: фокус-видљив - ЦСС-трикови

:focus-visibleПсеудо-класа (такође познат као "Фокус-назначено" псеудо-класе) је пореклом ЦСС начин да се стилским елементима који:

У фокусу су
Треба вам видљиви индикатор за показивање фокуса (више о томе касније)

:focus-visibleкористи се слично као :focus: за скретање пажње на елемент који тренутно има фокус.

.element:focus-visible ( background-color: pink; /* Something to get the user's attention */ )

:focus-visibleје део радног нацрта ЦСС4 Селецторс. Пре усвајања, Мозилла је увела :-moz-focusringпсеудо-класу како би Фирефоку донела функционалност испред формалне спецификације.

Зашто нам треба: фокус-видљив?

:focusТо већ не ради? Да, али има проблема. Најјаснија илустрација је дугме које покреће неки ЈаваСцрипт. Замислите вртешку слике са тастерима за пребацивање између слика. Рецимо да сте tabindexдугмадима додали тастер да би могли да се изаберу помоћу тастатуре, али када мишем кренете да тестирате рингишпил, видећете овај обрис око свог прелепог дугмета:

Обрис који је прегледач додао на `:focus`

Не да бисте то желели да урадите (због недоумица због приступачности), али како се тога можете решити? Постављањем :focusпсеудо-класе:

.next-image-button:focus ( outline: none; )

Сада ваше дугме изгледа сјајно када је у фокусу, али шта се дешава када корисник кликне на ваше дугме без миша, већ уместо тастатуре? Не могу да виде где су заложили! То је проблем јер сада не постоји начин да се утврди које је дугме фокусирано за радње на тастатури:

Један од њих је фокусиран, али га не можете видети!

Да ли постоји начин да се уклони плави обрис фокуса, али да се и даље покаже фокус који је више у складу са дизајном локације? Наравно, можете и ви да поједете свој колач и да га поједете, захваљујући :focus-visible!

:focus-visibleпримењује се само када заправо желите да визуелни индикатор помогне кориснику да види где је фокус. Другим речима, не може сакрити контуре као што :focusможе. (Па, могло би тако што би се то уклопило у дизајн, али шта год.) У том смислу њих двоје морају да се користе заједно. Додајмо један на наше дугме:

.next-image-button:focus ( outline: none; ) .next-image-button:focus-visible ( outline: 3px solid blanchedalmond; /* That'll show 'em */ )

Сада, када се тастатура користи за пребацивање на дугме, постојаће визуелна индикација фокуса:

Како прегледачи одређују када је нешто: фокус видљиво?

Прегледници имају мало слободног простора да одреде када овај псеудо-селектор треба применити на дати елемент користећи сопствену хеуристику. Прво, погледајмо ЦСС4 радни нацрт, а затим ћемо покушати да га разбијемо. Из спецификација:

Ако је корисник изразио жељу (на пример путем системских поставки или подешавања прегледача) да увек види видљиви индикатор фокуса, кориснички агент би то требало да испоштује тако што ће: фокус-видљиви увек одговарати активном елементу, без обзира на било који други Фактори. (Друга опција може бити да кориснички агент прикаже свој индикатор фокуса без обзира на стилове аутора.)

Било који елемент који подржава унос са тастатуре (попут елемента за унос или било који други елемент који може покренути да се виртуелна тастатура прикаже у фокусу ако физичка тастатура није присутна) увек треба да се подудара: фокус-видљив када је фокусиран.

Ако корисник комуницира са страницом путем тастатуре, тренутно фокусирани елемент треба да се подудара: фоцус-висибле (тј. Употреба тастатуре може променити да ли се ова псеудо-класа подудара чак и ако то не утиче на: фоцус).

Ако корисник комуницира са страницом преко показивачког уређаја, тако да се фокус премести на нови елемент који не подржава унос корисника, новофокусирани елемент не би требало да се подудара: фокус-видљив.

Ако се активни елемент подудара са: фоцус-висибле, а скрипта доводи до померања фокуса негде другде, новофокусирани елемент треба да се подудара са: фоцус-висибле.

Супротно томе, ако се активни елемент не подудара: фоцус-висибле, а скрипта доводи до померања фокуса негде другде, новофокусирани елемент не би требало да се подудара: фоцус-висибле.

Ако је то мало апстрактно, ево тумачења:

Ситуација	Да ли се примењује: фокус-видљиво?
Корисник каже да увек жели да фокус буде видљив кроз подешавање	да
Елементу је потребна тастатура да би функционисао (попут текста)	да
Корисник се креће помоћу тастатуре	да
Корисник се креће помоћу показивачког уређаја (попут миша или прста на додирном екрану)	Не
Скрипта доводи до померања фокуса са `:focus-visible`елемента на други елемент	да
Скрипта доводи до померања фокуса са `:focus-visible`неелемента на други елемент	Не

Изводи се понављање: Ово су смернице и прегледачи ће моћи сами да одлуче о томе шта је изабрано :focus-visible. Можемо очекивати да ће се очигледан случај навигације на тастатури радити на предвидљив начин, али прегледачи имају могућност да сами одлуче, као и било која друга карактеристика.

Подршка прегледача

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.