Для каждого программиста предоставление пользователям интерфейса Unified Style является неизменным требованием. Тем не менее, особенно сложно достичь объединения этого стиля на веб -страницах, потому что существуют различия в том, как различные операционные системы и браузеры выражают контент веб -страницы, и это различие почти нерегулярно. Эта проблема особенно заметна в процессе обработки элементов формы. Что делает многих людей беспомощными, так это проблема унифицированных стандартов производительности кнопок отправки.
Например, входной тег с Type = Attribute либо выглядит очень уродливо в разных браузерах (в Firefox), либо имеет один вид недостатки (в Internet Explorer), либо даже действует очень жестко (в Safari). Решение этой проблемы обычно заключается в том, чтобы установить свойство ввода на изображение, а затем самостоятельно разработать изображение кнопки. Но мы должны добавлять много дополнительной раздражающей работы каждый раз, когда нам нужно использовать кнопки. Поэтому нам нужно лучшее решение, более гибкий и значимый подход для дизайнеров. К счастью, этот метод уже существует в реальности, и нам нужно сделать немного больше работы. Друзья, пожалуйста, позвольте нам представить вам нашего милого маленького друга, одноклассника <Tood>!
Кнопка ввода против
Вот метка кнопки подачи, которую вы используете:
<input type = отправить значение = отправить />
Их стили производительности в разных браузерах следующие:
И когда мы используем <wnote>, чтобы создать кнопку, как указано выше:
<кнопка типа = отправить> отправить </button>
Они выражены в следующем стиле:
Эти кнопки не отличаются от кнопок, которые мы создали выше, в их запуске и поведении презентации. В дополнение к использованию их для отправки формы AS, вы также можете установить их, чтобы они были недоступны, добавить ярлыки или установить табдекс и т. Д., К счастью, в дополнение к различным стилям выражения, Safari поддерживает эти функции (по сравнению с кнопками ввода, кнопка кнопки в Safari не имеет эффекта жидкости на поверхности). Самая крутая функция тега <Tood> заключается в том, что мы можем разместить в него несколько полезных HTML -элементов, таких как добавление изображений с использованием следующего кода:
<Кнопка Типа = отправить> <img src = alt = /> отправить < /button>
Их внешний вид в браузере выглядит следующим образом:
Неплохо. На самом деле, согласно определению W3C, элемент <Tood> возникла для решения этих различий в производительности.
Кнопки, созданные с помощью функции элемента кнопки, так же, как кнопки, созданные с помощью входного элемента, но они предлагают более богатые возможности рендеринга: элемент кнопки может иметь контент. Например, элемент кнопки, который содержит функции изображения, такие как и может напоминать входной элемент, тип которого установлен на изображение, но тип элемента кнопки позволяет содержит содержимое.
Элемент кнопки - W3C
Поэтому нам нужно найти дизайнерское решение для этого, и, к счастью, Интернет с огромными данными может предоставить нам некоторую полезную помощь для решения этой проблемы. Это действительно очень удобно, но, к сожалению, дизайнеры и разработчики веб -сайтов даже не знают существования этого элемента. Прежде чем я решил заменить Wufoo на элемент кнопки (сетевой продукт этой статьи, Dudo Note), я должен быть уверен, что этот тег и CSS могут удовлетворить следующие потребности:
Требования:
1. Они должны иметь появление кнопок
2. Есть одинаковые стили выражения в разных браузерах
3. Стили, примененные в кнопке, также могут использоваться на гиперссылках (поскольку взаимодействия в Wufoo всегда используют метод подчинения формы и контакт связывания для отправки метода Ajax, они часто могут быть близки друг к другу, поэтому мне нужно, чтобы они имели один и тот же стиль выражения)
4. Тэг может быть гибким и простым в изменении при разных обстоятельствах
5. Для событий, которые происходят во время передачи информации, вы можете эффективно различать их значками и цветами.
Столкнувшись с вышеупомянутыми проблемами, я сначала написал несколько CSS, а затем решил проблему поперечного браузера. Далее посмотрим:
Окончательный результатНечего суетиться по этому поводу, это очень просто, но это очень эффективно. Причина, по которой я люблю использовать этот метод и обработать кнопки, заключается в том, что мне не нужно начинать создание Photoshop один за другим, чтобы создать 10 000 значков. Если мы внимательно посмотрим на код, вы обнаружите, что две кнопки позади на самом деле две ссылки.
<div class = кнопки>
<кнопка типа = отправить класс = положительный>
<img src =/images/icons/tick.png alt =/>
Сохранять
</button>
<a href =/пароль/сброс/
<img src =/images/icons/textfield_key.png alt =/>
Изменить пароль
</a>
<a href =# class = отрицательный>
<img src =/images/icons/cross.png alt =/>
Отмена
</a>
</div>
Цель этого состоит в том, что многие действия в веб -приложениях основаны на события (REST), поэтому отправка запросов пользователей через конкретный URL может инициализировать эти действия. Использование стилей, которые можно применять на обоих элементах, делает наш стиль объединения более гибким при поддержании взаимодействия, вызванного AJAX и стандартными кнопками отправки.
Теперь вы можете спросить, почему я оставляю атрибут ALT элемента изображения пустым? ALT является необходимым атрибутом элемента IMG. Он используется для объяснения содержания изображения, но здесь нет соответствующего описания изображения, которое действительно немного сбивает с толку. Однако, в отличие от отсутствующих атрибутов, пустое значение атрибута полностью соответствует стандарту. Он сказал браузеру, что эти изображения представляют собой некоторую совершенно незначительную информацию, которая также не позволяет браузеру неспособность найти следующую кнопку из -за окклюзии информации о быстрых условиях. Поскольку значки здесь полностью избыточны, мы бы не потратили тратить время на просмотр времени пользователей, который используется исключительно для достижения унифицированного стиля интерфейса.
CSS StyleSheetБольшая часть содержания CSS, используемого для управления этими стилями кнопок, очень интуитивно понятна. Небольшая разница в разных браузерах приведет к применению различных значений заполнения для них в коде ниже. К счастью, все это вполне возможно.
/ * Кнопки */
.buttons a, .buttons кнопка {
дисплей: блок;
Плавание: осталось;
Полевая: 0 7px 0 0;
фоновый цвет:#f5f5f5;
Граница: 1px solid #dedede;
Пограничная топ: 1PX SOLID #EEE;
РЕДУРНАЯ ЛЕРФ: 1PX SOLID #EEE;
Семейство Font: Lucida Grande, Tahoma, Arial, Verdana, Sans-Serif;
размер шрифта: 100%;
высота линии: 130%;
Текстовое декорация: нет;
шрифт-вес: жирный шрифт;
Цвет:#565656;
курсор: указатель;
Заполнение: 5px 10px 6px 7px; / * Ссылки */
}
.buttons кнопка {
Ширина: Авто;
переполнение: видимо;
Заполнение: 4px 10px 3px 7px; / * IE6 */
}
.buttons кнопка [type] {
Подкладка: 5px 10px 5px 7px; / * Firefox */
высота линии: 17px; / * Safari */
}
*: кнопка HTML первого ребенка [type] {
Заполнение: 4px 10px 3px 7px; / * IE7 */
}
.buttons кнопка img, .buttons a img {
Покрас: 0 3px -3px 0! Важно;
Заполнение: 0;
граница: нет;
Ширина: 16px;
Высота: 16px;
}
Другая проблема заключается в том, что в Internet Explorer есть некоторые ошибки при рендеринге длинных кнопок. Вы можете найти эту информацию о jehiah.cz, но в приведенном выше коде CSS мы в определенной степени изберут этой проблемы, объявив значения ширины и переполнения.
Добавьте немного цвета в кнопкуВ wufoo мы устанавливаем значение падения нейтрального действия (здесь автор называет пароль изменения и другие действия как нейтральные действия, тип подтверждения и представления в качестве положительного действия, а также тип оставления и отмены в качестве отрицательного действия), а положительное действие и отрицательные действия устанавливаются на зеленый и красный соответственно. Следующий код стиля использует разные цвета, чтобы различать добавление, сохранение и отмену и удаление типа негативных действий. Это довольно хорошо, конечно, вы также можете выбрать цвет, который вам нравится использовать.
/ * Стандарт */
кнопка: нависнуть, .buttons a: Hover {
фоновый цвет:#dff4ff;
Граница: 1PX SOLID #C2E1EF;
Цвет:#336699;
}
.buttons a: Active {
фоновый цвет:#6299C5;
Граница: 1PX SOLID #6299C5;
Цвет: #ffff;
}
/ * Положительно */
кнопка.
Цвет:#529214;
}
.buttons A.positive: Hover, Button.positive: Hover {
фоновый цвет:#e6efc2;
Граница: 1PX SOLID #C6D880;
Цвет:#529214;
}
.buttons a.positive: Active {
фоновый цвет:#529214;
Граница: 1PX SOLID #529214;
Цвет: #ffff;
}
/ * Отрицательный */
.buttons a.negative, button.negative {
Цвет:#D12F19;
}
.buttons A.negative: Hover, Button.negative: Hover {
Фон:#fbe3e4;
Граница: 1PX SOLID #FBC2C4;
Цвет:#D12F19;
}
.buttons a.negative: Active {
фоновый цвет:#D12F19;
Граница: 1PX SOLID #D12F19;
Цвет: #ffff;
}
СуммироватьНаконец, это просто решение, которое мы разработали, чтобы справиться с потребностями в Wufoo, но оно хорошо показало наши усилия. Но это не единственный способ, вы можете найти более интересные способы превращения пуговиц в округлые углы или даже более красочные. Поскольку практически любой другой элемент может быть размещен между тегами <toom>, вы также можете создать действительно красивую закругленную трехмерную кнопку, вставив тег <pan> и следуя последним методам, предоставленным Алексом Гриффиоэном. Честно говоря, я надеюсь, что это только начало для всех дизайнеров, работающих над повторным использованием интерфейса программы. В любом случае, я надеюсь, что вы сможете больше подумать об этом, прежде чем открыть кнопку ввода Photoshop и взглянуть на этот почти забытый тег <Tood>, возможно, это удивит вас.
Приложение:<Tood> Элемент в html4.0/xhmtl1.0
Определение и использованиеОпределите кнопку. Внутри элемента кнопки вы можете разместить контент, такой как текст или изображения. Это разница между этим элементом и кнопками, созданными с входным элементом.
Управление <Tood> обеспечивает более мощные функции и более богатый контент, чем <input Type = Button>. Все содержание между тегами <Tood> и </button> - это содержание кнопки, которое включает в себя любое приемлемое содержание тела, такое как текстовый или мультимедийный содержимое. Например, мы можем включить в кнопку изображение и связанный текст и использовать их для создания привлекательного изображения разметки в кнопке.
Единственный элемент, который запрещен,- это отображение изображений, потому что его чувствительные к мышью и клавишные действия могут мешать поведению кнопок формы.
Выбираемые свойства Значение атрибута Описание DTDОтключенный отключенный отключен отключен эту кнопку. Пост
namebutton_name указывает уникальное имя этой кнопки. Пост
Тип* кнопка
* Сброс определяет тип кнопки. Пост
* представлять на рассмотрение
Значение некоторой_value Определяет начальное значение кнопки. Это значение может быть изменено с помощью скрипта. Пост
Стандартные атрибуты:ID, класс, заголовок, стиль, dir, lang, xml: lang, accesskey, tabindex
Свойства события:Onfocus, Onblur, Onclick, Ondblckic, Onmousedown, Onmouseup, Onmouseover, OnmouseMove, Onmouseout, Onkeypress, Onkeydown, Onkeyup