Кнопки расстегивания | scottohara.me

Независимо от того, как можно было бы подумать об использовании CSS для маскировки элемента HTML как другого, нельзя отрицать, что это обычная, а иногда и необходимая практика в современном веб-разработке.

Часто лучше просто использовать необходимый HTML-элемент, а не изменять элемент, чтобы смотреть, действовать и передавать ту же семантику, что и другой. Однако иногда необходимый элемент HTML недостаточно податлив для задачи.

Например, давайте поговорим о стилизации элемента .

Труднее, чем вы думаете

кнопка s может быть интересным элементом, чтобы спорить, если «полный контроль над стилем» — это конечная цель. Например, если вы потратили время на то, чтобы поиграть с Normalize.css, вы могли бы заметить, что количество наборов правил в игре, чтобы получить кнопку s в сопоставимом состоянии между браузерами.

   / **
 * Примечание. Правила были объединены, чтобы сократить избыточность.
 * 1. Измените стили шрифтов во всех браузерах.
 * 2. Удалите маржу в Firefox и Safari.
 * 3. Покажите переполнение в Edge.
 * 4. Удалите наследование текстового преобразования в Firefox.
 * 5. Исправьте неспособность стилировать интерактивные типы в iOS и Safari.
 * / 
     {
     -webkit-appearance  :   button  ;   / * 5 * / 
     font-family  :   inherit  ;   / * 1 * / 
     font-size  :   100%    / * 1 * / 
     line-height  :   1.15    / * 1 * / 
     margin  :   0    / * 2 * / 
     переполнение  :   видно    / * 3 * / 
     text-transform  :   none    / * 4 * / 
  } 


   / **
   * Удалите внутреннюю границу и дополнение в Firefox.
   * / 
     :: - moz-focus-inner   {
     пограничный стиль  :   нет  ; 
     padding  :   0  
  } 

   / **
   * Восстановить стили фокуса, отмененные предыдущим правилом.
   * / 
    : - moz-focusring   {
      :   1px   пунктир   ButtonText  
  } 
 

В отношении внедрения стандартной кнопки конструкции с отмеченными нормализациями, стиль должен быть довольно прост. Обновите прокладки, границы, цвета, наведите курсор и начните фокусировать стили … идите в город.

Однако нормализация не поможет, если цель состоит в том, чтобы не визуально вести себя как типичная кнопка . В частности, если вы хотите, чтобы кнопка не выглядела как кнопка, и ее текст обрабатывался так, как если бы это был встроенный текстовый элемент (такой как диапазон или ) элемент ).

В отношении какого-то контекста, почему вы не можете просто щелкнуть дисплей : inline на кнопке и называть его днем, взять gander в разделе спецификации HTML на странице рендеринга.

Кнопка показывает:

  

Элемент как ожидается, будет отображаться как блок inline-block отображаемый как кнопка, содержимое которой является содержимым элемента.

По сути, браузеры сильно прислонились к этому разделу, и за пределами определенного значения CSS дисплея (подробнее об этом позже) кнопка будет продолжать отображаться (или, скорее, полу-рендер) в качестве встроенного блока.

Но это веб-разработка. Там, где нет пути вперед, мы взламываем и пробиваем себе путь!

tldr; вам понадобится ARIA (и немного JavaScript) для этого

Моя первоначальная реакция на подобные головоломки — попытаться найти альтернативное собственное решение для HTML (и / или CSS в этом случае). Как отметил Мэтт Мастраччи, в твиттер-потоке Мики, диапазон с соответствующей ролью и tabindex может обеспечить решение этой проблемы.

 
  <span   role =   "button"   tabindex =   "0   onClick =   "..."  > 
  ...
  
 

. Возможно, потребуется немного больше JavaScript, чтобы активировать «кнопку» с помощью клавиш Space и Enter (какая-либо нативная кнопка предоставили бы нам бесплатно). Но по сути дела Мэтт был прав. Это решение проблемы .

Так почему я все еще пишу?

Потому что мы должны исчерпать другие родные возможности, прежде чем мы перейдем к ARIA.

CSS входит в панель. Бар теперь является пустой парковкой.

Альтернативным решением, предложенным для этой проблемы, было использование CSS display: contents . И нам нужно поговорить об этом немного.

Было много фанфар о дисплее : содержимое поскольку оно было реализовано браузерами. К сожалению, сообщение Hidde de Vries. Более доступная разметка с дисплеем : содержимое вызывает тревожную проблему с браузерами. Похоже, что при реализации браузеры не соответствовали требованиям спецификации CSSWG, чтобы не изменять семантику элементов, измененных на дисплее : содержимое .

Из спецификации:

  

Помимо значения «none» ... свойство display влияет только на визуальный макет: его цель - предоставить разработчикам свободу изменять поведение макета элемента, не затрагивая семантику базового документа.

Отдельно Адриан Роселли также отметил дополнительные проблемы с доступом с использованием display: contents отметив, что его нельзя считать «сбросом CSS».

Возвращение к кнопке с

Подняв, где эти два остановились, я провел серию тестов, чтобы определить, есть ли другой способ использовать CSS, чтобы элемент вел себя как встроенный текст, проверяя при этом любые проблемы с доступностью. Что касается дисплея: содержимое ниже приведено резюме моего тестирования с отмеченными программами для чтения и просмотра экрана:

• Визуально, кнопка стилизованная с дисплеем : содержимое будет в основном напоминать и переносить текст, как текстовый текст. Тем не менее, кнопка продолжает сохранять стиль шрифта по умолчанию . Примечательно, что кнопка теряет способность фокусироваться на клавиатуре .

  

• Никакая программа для чтения с экрана не объявила элемент как кнопку .
  Считыватели экрана:
      
  • VoiceOver (Safari 12)

        

  • TalkBack 6.2 (Android 8.1.0 + Android Chrome)

        

  • VoiceOver (iOS 11.4.1 + Safari)

        

  • JAWS 2018 (последняя версия)

        

  • NVDA 2018.2.1

      

  

• Проверка дерева доступности, «нет узла доступности» или «текст», сообщалось в каждом тестируемом браузере, где следовало ожидать «кнопки»:
      
  • macOS Safari 12 (с использованием инспектора доступности)

        

  • macOS Firefox 62.0.3 (с использованием инструментов Firefox dev a11y)

        

  • macOS Chrome (последний) (с помощью инструментов Chrome dev a11y)

        

  • iOS 11.4.1 Safari (с использованием инспектора доступности)

        

  • Windows 10 Firefox 64.0a1 (с использованием aViewer)

        

  • Windows 10 Chrome (последняя версия) (с использованием aViewer)

      

  

• дисплей: содержимое не поддерживается в Internet Explorer и Edge, поэтому эти браузеры не имели визуальных или семантических изменений кнопки .

Примечание: здесь вы можете просмотреть полные результаты испытаний.

Стоит также отметить, как делает Адриан в своей статье, что даже попытка повторного применения семантики с ARIA (например, ) бесполезна. Семантика только что исчезла.

Альтернатива альтернативе все: unset;

С течением времени пользователь Twitter @Cos_Anca предложил использовать CSS все: unset; . Эта идея была интересна мне, поскольку я почти забыл об этой собственности.

Когда я дал идею, я быстро подумал, что он решил проблему Мики, а также сохранил необходимые функциональные возможности клавиатуры и семантику кнопки .

Обновлено к сожалению, мои предыдущие тесты о все: unset были испорчены, и после разговора с Илье Стрельциным было обнаружено, что кнопка ] inline-блок - нет удален при использовании все: unset .

Даже если все: unset решила проблему, у него такие же проблемы с поддержкой, как дисплей: содержимое в том что Internet Explorer 11 и Edge не поддерживают его. Таким образом, факт остается фактом: даже если он решил проблему, все не имеют полной поддержки браузера, чтобы быть жизнеспособным вариантом.

Итак, что мы на самом деле учили здесь?

В этом посте было много чего, поэтому я немного подведу итог:

• С некоторой нормализацией кнопка s не так сложна для стиля в отношении типичной кнопки (например, кнопки выглядят как кнопки, потому что они кнопки).

  

• Из-за текущих реализаций браузера кнопка будет всегда отображаться на дисплее : inline-block если вы не используете дисплей: содержимое которое также в настоящее время уничтожит их семантика.

  

• все: unset походит на ядерный вариант для стилей. Обычно вы, вероятно, не хотите его использовать, и, к сожалению, встроенный блок похож на таракана, так как он все еще пережил неуспешный взрыв.

  

• В этом посте не рассматривается, но визуально скрывая кнопку и используя ярлык (который делает встроенный) в качестве стенда, имеет свой собственный набор осложнений.

  

• Когда родные варианты невозможны, включая необходимую поддержку старого / современного браузера, ARIA может быть ответом. И в связи с этой конкретной проблемой, ARIA в настоящее время является лучшим вариантом, который у нас есть.

Просто всегда помните, что ARIA - Spackle, Not Rebar. Это может оказаться единственным инструментом в вашем распоряжении, но это не значит, что вы не должны искать правильный инструмент.

Подробнее Чтение и ресурсы

Для получения дополнительной информации по темам, обсуждаемым в этом сообщении, я рекомендую прочитать следующее:

Дополнительные кредиты

Ян Девлин и Свен Волферманн для исследования / напоминаний о кнопке элемента в разделе спецификации HTML.

Илья Стрельцин дал ценные отзывы об этой статье и мои ошибочные выводы из : unset . Содержимое, относящееся к все было пересмотрено на основе исправленных тестов. Еще раз спасибо.