Java, UX, HTML, CSS, WEB-design

Проблема элементов формы CSS

Краткое описание по статье Проблема элементов формы CSS

Название: Проблема элементов формы CSS . Краткое описание: [ad_1] ⭐ Габриэл . Дата публикации: 14.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Габриэле Романато

  • 0 Комментарии

Проблема элементов формы CSS

  • 8 минут чтения

  • Кодирование, CSS, Семантика

Краткое резюме ↬

До 1998 года, года рождения CSS Level 2, элементы форм уже были широко реализованы во всех основных браузерах. Спецификация CSS 2 не решала проблему представления элементов формы пользователям.

До 1998 года, года рождения CSS Level 2, элементы форм уже были широко реализованы во всех основных браузерах. Спецификация CSS 2 не решала проблему как элементы формы должны быть представлены пользователям. Поскольку эти элементы являются частью пользовательского интерфейса каждого веб-документа, авторы спецификации предпочли оставить визуальную компоновку таких элементов в таблице стилей по умолчанию веб-браузеров.

На протяжении многих лет отсутствие деталей в спецификации CSS вынуждало веб-разработчиков производить значительное количество тестов и примеров, основная цель которых — привести элементы формы к общему визуальному знаменателю, чтобы получить кросс-браузерную визуализацию таких элементов, как в виде input, select, fieldset, legend и textarea. В этой статье мы рассмотрим некоторые шаблоны CSS, используемые веб-разработчиками, чтобы укротить визуальное расположение элементов формы.

Дальнейшее чтение на SmashingMag:

  • Ввод формы: проблема поддержки браузера, о которой вы не знали
  • Дизайн веб-форм: витрины и решения
  • Новые подходы к разработке форм входа
  • Дизайн кнопок CSS: методы и ресурсы

Тесты Роджера Йоханссона

Еще в 2004 году, а затем в 2007 году Роджер Йоханссон создал полный набор тестов для элементов формы и CSS. Эти основополагающие тесты, которые можно найти в его статье «Стилизация элементов управления форм с помощью CSS, новый взгляд», приводят к разочаровывающему выводу, который Йоханссон резюмирует следующими словами:

«Так что же показывает этот эксперимент? Как я уже говорил, это показывает, что использование CSS для стилизации элементов управления формы, чтобы они выглядели одинаково в разных браузерах и платформах, невозможно. Это также показывает, что большинство браузеров игнорируют многие свойства CSS, когда они применяются к элементам управления формы».

Еще после прыжка! Продолжить чтение ниже ↓

Несмотря на истинность этих выводов, веб-разработчики продолжали тщательно тестировать стили CSS на элементах формы, чтобы найти Святой Грааль — или, по крайней мере, разумный компромисс — между визуализацией браузера по умолчанию и авторскими стилями.

Модель по умолчанию

Спецификация CSS 2.1 указывает в своей предлагаемой таблице стилей по умолчанию для HTML4, которая формирует такие элементы, как textarea, input и select являются встроенными блочными элементами:

textarea, input, select {
   display: inline-block;
}

И наоборот, form и fieldset элементы являются элементами уровня блока:

fieldset, form {
   display: block;
}

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

  • Элементы встроенного блока могут быть оформлены с использованием встроенного контекста форматирования. Это подразумевает использование свойств CSS, таких как line-height и vertical-align для контроля высоты коробки и ее вертикального выравнивания. Отступы и поля также могут применяться для определения внешнего и внутреннего интервала затронутого поля. Кроме того, встроенные блочные элементы принимают ширину и высоту, потому что они используют блочную модель форматирования.
  • Элементы уровня блока могут быть оформлены с использованием известного контекста блочного форматирования. Однако возникают проблемы с fieldset и legend элементы, потому что legend полностью полагается на стили по умолчанию, предоставляемые веб-браузерами.

Как веб-разработчики решают эти проблемы?

Определение размеров

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

input, select {
   width: 120px;
   height: 32px;
}

Разработчики попытались решить эту проблему, превратив эти элементы в элементы блочного уровня:

input, select {
   width: 120px; block;
}

Результаты по-прежнему плохие, за исключением textarea элемент. Обычный способ решения этой проблемы состоит в том, чтобы избежать height свойство и вместо этого использовать font-size и padding характеристики.

Браузеры не используют одно и то же семейство и размер шрифта для этих элементов, поэтому первое, что нужно сделать, это нормализовать их:

input, select {
   width: 120px;
   font: 1em Arial, sans-serif;
}

Пример см. на странице «CSS: определение размеров элемента формы» на jsFiddle.

Как только используемый шрифт нормализован, вы можете добавить отступы, чтобы задать внутренний интервал для поля элемента:

input, select {
   width: 120px;
   font: 1em Arial, sans-serif;
   padding: 3px 6px;
}

То input элементы и textarea также показать границу, которая влияет на их блочную модель:

input[type="text"],
input[type="password"],
textarea {
   border: 1px solid #ccc;
}

То input элементы типов button и submit имеют дополнительные отступы, установленные веб-браузерами. Итак, обычная практика — нормализовать их:

input[type="button"],
input[type="submit"] {
   padding: 2px;
}

Проблема с этим подходом заключается в том, что Веб-браузеры также применяют свойства, зависящие от поставщика. к этим элементам, поэтому наш отступ не всегда может нормализовать это свойство. Например, в браузере на основе Webkit у вас может быть следующее:

input[type="button"], input[type="submit"],
input[type="reset"], input[type="file"]::-webkit-file-upload-button,
button {
   -webkit-box-align: center;
   text-align: center;
   cursor: default;
   color: buttontext;
   padding: 2px 6px 3px;
   border: 2px outset buttonface;
   border-image: initial;
   background-color: buttonface;
   box-sizing: border-box;
}
input[type="button"], input[type="submit"], input[type="reset"] {
   -webkit-appearance: push-button;
   white-space: pre;
}

Прокладка также используется на fieldset и legend элементы, но с разными результатами:

  • Включение отступов fieldset к 0 сбросит отступ по умолчанию legend элементы в некоторых браузерах (но не в IE).
  • Включение отступов legend к 0 приводит к уменьшению этого элемента.

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

  • font-family,
  • font-size,
  • width (на выбранных полях),
  • padding.

Применение других свойств к этой группе элементов часто приводит к несогласованным результатам в разных браузерах.

Выравнивание

Элементы формы могут быть выровнены по вертикали или горизонтали. Они могут располагаться на одной линии или в виде группы ящиков в нескольких рядах. Чтобы выровнять их на одной линии, вы можете использовать один из двух подходов:

  1. Используйте плавающие,
  2. Используйте контекст встроенного блока по умолчанию для некоторых из этих элементов.

Когда вы используете плавающие элементы, они автоматически превращаются в элементы блочного уровня. Это означает, что элементы формы теперь подчиняются девяти правилам, регулирующим плавающие элементы.

вертикальная сетка1
Элементы формы могут быть выровнены по вертикали или горизонтали.

При работе с поплавками основная проблема состоит в том, чтобы добиться хорошего вертикального выравнивания на текущей линии. В этом случае использование вертикальных полей или отступов является обычной практикой:

input, select {
   width: 120px;
   float: left;
   margin-top: 0.4em;
}

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

label {
   float: left;
   padding-top: 0.4em;
   width: 5em;
   margin-right: 1em;
}

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

input[type="submit"] {
   float: left;
   width: 90px;
   position: relative;
   top: 0.4em;
}

Этот подход с относительное позиционирование также работает с флажками и переключателями. Относительное позиционирование можно даже применить для нормализации левого отступа legend элемент внутри fieldset элемент, с той лишь разницей, что вы будете использовать left собственность вместо top.

При использовании встроенного форматирования вы можете полагаться на vertical-align свойство для вертикального выравнивания элементов:

label, input[type="text"] {
   vertical-align: middle;
   margin-right: 1em;
}

Хороших результатов можно добиться, сочетая это свойство с line-height имущество. Однако это свойство должно быть установлено для родительского элемента. Если вы установите это свойство непосредственно для элементов формы, это повлияет на их вычисляемую высоту:

.form-row {
   line-height: 1.4;
}

Использование объявленной высоты родительского элемента также эффективно в сочетании с тем же значением высоты строки:

.form-row {
   line-height: 1.8;
   height: 1.8em;
}

При встроенном форматировании вы также можете использовать text-align свойство родительского элемента для выравнивания элементов по правому краю, по левому краю или по центру.

Странный случай ввода файлов

Элемент ввода файла, то есть <input type=“file”/> — частный случай. Этот тип элемента всегда должен быть видимым и узнаваемым в пользовательском интерфейсе браузера по соображениям безопасности. Это означает, что браузеры преднамеренно игнорируют некоторые правила стиля (например, связанные с видимостью) и склонны применять алгоритмы, определенные в их таблице стилей по умолчанию.

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

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

<form action="" method="post" enctype="multipart/form-data">
   <div class="upload">
      <input type="file" name="upload"/>
   </div>
</form>

Затем они скрыли элемент ввода с помощью opacity свойство и применил определенные стили к контейнеру ввода:

.upload {
   width: 157px;
   height: 57px;
   background: url(upload.png) no-repeat;
   overflow: hidden;
}

.upload input {
   display: block !important;
   width: 157px !important;
   height: 57px !important;
   opacity: 0 !important;
   overflow: hidden !important;
}

Обратите внимание на !important утверждение. Это предпочтительный способ переопределить правила браузера по умолчанию.

Пример см. на странице «CSS: стилизация входных данных типа «файл»» на jsFiddle.

Вывод

Полностью приручить элементы формы невозможно из-за отсутствия деталей в спецификации CSS и из-за стилей, используемых веб-браузерами по умолчанию. Однако, следуя некоторым общепринятым методам, можно уменьшить (но не устранить) различия и добиться хороших визуальных результатов.

Сокрушительная редакция
(аль)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — Проблема элементов формы CSS

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»