Пример верстки поисковой формы для сайта на HTML5 и CSS3
После публикации вчерашней статьи по верстке поисковой формы меня раскритиковали, мол верстка отстой, есть же современные HTML5 и CSS3.
Я, конечно, понимаю, последние стандарты это круто и все такое. Но дело в том, что верстаю я, как правило, под заказ, а там в большинстве случаев важна полная идентичность в разных браузерах, что не позволяет использовать последние технологии. Поэтому я ориентируюсь в первую очередь на кроссбраузерность и поисковую форму по привычке сверстал «по-старому».
В общем, этим постом исправляю ситуацию (в угоду недовольным прошлой статьей =) и предлагаю свой вариант верстки той же самой поисковой формы, но уже с использованием технологий HTML5 и CSS3.
Пример того, что получится в результате, можно увидеть здесь.
Что мы теряем при верстке данной формы с помощью HTML5 и CSS3
- IE9 и ниже — не увидим текст по умолчанию (атрибут
placeholder). - IE8 и ниже — не увидим закругленных углов и внутренних теней.
- IE7 — для него приходится указать другую ширину формы, т.к. он не поддерживает свойство
box-sizing. - IE6 — а его вообще в расчет не берем =)
В остальных современных браузерах все замечательно. Я считаю, что вышеуказанные недостатки не критичны, поэтому для своего сайта я бы смело использовал форму, сверстанную по последним технологиям.
HTML-код формы поиска
Выглядит он вот так:
<form action="" method="post" class="search">
<input type="search" name="" placeholder="поиск" class="input" />
<input type="submit" name="" value="" class="submit" />
</form>
По сравнению с формой из предыдущей статьи здесь внесены следующее изменения в соответствии с технологией HTML5:
- Атрибут
type="text"замененtype="search". - Инлайновый скрипт заменен на
placeholder="поиск".
CSS-код
Вот все необходимые стили с комментариями:
.search {
/* устанавливаем необходимую ширину формы в зависимости от дизайна
** форма без проблем растягивается */
width: 35%;
/* кнопку отправки будем позиционировать абсолютно,
** поэтому необходимо это свойство */
position: relative;
}
.search input {
/* отключаем бордюры у инпутов */
border: none;
}
/* стили для поля ввода */
.search .input {
/* растягиваем поле ввода на всю ширину формы */
width: 100%;
/* за счет верхнего (8px) и нижнего (9px) внутренних отступов
** регулируем высоту формы
** внутренний отступ справа (37px) делаем больше левого,
** т.к. там будет размещена кнопка отправки */
padding: 8px 37px 9px 15px;
/* чтобы ширина поля ввода (100%) включала в себя внутренние отступы */
-moz-box-sizing: border-box;
box-sizing: border-box;
/* добавляем внутренние тени */
box-shadow: inset 0 0 5px rgba(0,0,0,0.1), inset 0 1px 2px rgba(0,0,0,0.3);
/* закругляем углы */
border-radius: 20px;
background: #EEE;
font: 13px Tahoma, Arial, sans-serif;
color: #555;
outline: none;
}
/* меняем оформление поля ввода при фокусе */
.search .input:focus {
box-shadow: inset 0 0 5px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0,0,0.4);
background: #E8E8E8;
color: #333;
}
/* оформляем кнопку отправки */
.search .submit {
/* позиционируем кнопку абсолютно от правого края формы */
position: absolute;
top: 0;
right: 0;
width: 37px;
/* растягиваем кнопку на всю высоту формы */
height: 100%;
cursor: pointer;
background: url(https://lh4.googleusercontent.com/-b-5aBxcxarY/UAfFW9lVyjI/AAAAAAAABUg/gQtEXuPuIds/s13/go.png) 50% no-repeat;
/* добавляем прозрачность кнопке отправки */
opacity: 0.5;
}
/* при наведении курсора меняем прозрачность кнопки отправки */
.search .submit:hover {
opacity: 0.8;
}
/* данное свойство необходимо для того, чтобы в браузерах
** Chrome и Safari можно было стилизовать инпуты */
input[type="search"] {
-webkit-appearance: none;
}
И стили для IE ниже 9-й версии:
/* задаем отдельные стили для браузеров IE ниже 9-й версии */
*+html .search {
/* для IE7 подгоняем ширину под другие браузеры и добавляем правый
** внутренний отступ, чтобы кнопка отправки встала на свое место */
width: 28%;
padding: 0 52px 0 0;
}
.search .input {
border: 1px solid #DFDFDF;
border-top: 1px solid #B3B3B3;
padding-top: 7px;
padding-bottom: 8px;
}
.search .input:focus {
border: 1px solid #CFCFCF;
border-top: 1px solid #999;
}
.search .submit {
filter: alpha(opacity=50);
}
.search .submit:hover {
filter: alpha(opacity=80);
}
P.S. Спасибо критикам за комментарии к предыдущей статье! Благодаря вам, у меня в голове отложились некоторые новые для меня моменты по верстке.
Комментарии (62)
ещё значёк лупы с помощью canvas зафигачить) только хардкор!
Это пять!
И еще один :)
Это реальная жесть! Хоть многое можно было бы сократить, сделать иначе и т.д. Но я полностью доволен вашей самоотверженностью, поэтому плюсанул.
Это в каком смысле? =)
Пример можете показать?
Ну, это я так, для контраста. А вообще многое проблем содают именно старые IE. Из оптимизации могу сказать, что opacity можно же в RGBA вставлять. А так много нового почерпнул.
Да, это традиция =)
RGBA — если указывается цвет. А тут же картинка используется.
Прикольно. А я забил на IE7, зато placeholder эмулировал для IE8-9. А иконку лупы сделал шрифтом, чтоб ее можно было легко настраивать размер, цвет, через css.
Ссылку надо было добавить свою, чтобы другие тоже посмотрели — http://alexriz.kodingen.com/css3search/
Я считаю — нерационально использовать jQuery только ради этого.
ну вообще да, не могу не согласиться с этим фактом. но как правило так и так jquery применяется в проектах, по-этому, раз оно применяется, то почему бы и не вставить эту приблуду, кушать то особо не просит.
В такой ситуации — согласен.
Дим, я не читал прошлую статью.
Верстка под заказ = всегда поиск компромиссов. Где то костыли прикрутить, а гдето в тз написано IE9+ ))
По теме же попробуй использовать вот такую вещь:
и «костыли» для IE можно писать прямо в основном файле стилей. очень удобно.
например для ie7 будет свой цвет фона
приведённый выше код — часть из html5bp, давно уже использую как основу совместно с твоим генератором.
Я знаю этот способ, но не люблю его.
почему, если не секрет?
Да просто не нравится такая конструкция. Некрасиво.
filter нужно вынести в CSS для IE.
Действительно, спасибо за подсказку!
Мне кажется это абсолютно не обязательно, и не есть неоспоримым правилом.
Мне например не нравится подключать по несколько файлов стилей, а тем более впихивать в html такой мусор как CC. ИМХО
А как же тогда «бороться» с IE?
А, что с ним бороться то? есть вагон простых приемов для применения тех или иных стилей для конкретной версии IE. Делов то.
Просветите пожалуйста. Я действительно не знаю лучшего чем СС способа применить определённые стили для разных IE.
ну например спасибо, dimox’у, за это
как правило использую * (звездочка) для отрезания IE7- (минус) от всего остального, т.к. IE6 не поддерживаю в принципе (собственно я и IE7 по стоку по скольку поддерживаю так по привычке хаки кидаю)
А для IE8 персонально в конце css храниться конструкция (да да она не очень красивая, но мне нравится больше чем мусор в html)
хак для IE9 не использую т.к. нет необходимости, он и так нормально страницы рисует, ну и пример dimox’а срабатывает так же и в IE10.
Но если проявить смекалку, то можно отрезать в некоторых частных случаях и IE9 от IE10
Для IE6 персонально есть хак с чертой -. Но я им не пользуюсь по выше указанным причинам
такие способы хороши для «сделал и забыл» или когда проектом занимаются максимум 2 верстальщика, когда же проект делает минимум 3-4 человека, да ещё и занимаются поддержкой в течении определённого времени, при этом тот же программер, которому поставили простенькую задачу по прикрутке какого-то функционала оформив его в стиль сайта, даже не вспомнит чем отличается *background: от -background: и уж 100% не станет выискивать какой-то стиль не там где он должен быть.
А вот конструкция .lt-ie8 не требует запоминания всяких префиксов и хаков, её просто донести до непрофессионала в области css (коими по сути являются бОльшая часть программистов), что гораздо ускоряет процесс получения заказчиком решения его проблемы или выполнения поставленной задачи.
В первую очередь каждый должен заниматься своим делом. Верстальщик верстать и заниматься программированием клиентской части, а программист серверный должен заниматься программированием серверной части (простите за тавтологию). Если принимаешь участие в разработке еще и клиентской части, то будь любезен разбираться в ней на должном уровне, иначе отдавай задачу специалисту в этой области.
А вот из-за таких смешанных обязанностей, когда каждому приходится влезать туда куда ему не следует, и получаются фэйлы в проектах.
Вы работали в компании, занимающейся в т.ч. сложными проектами?
Зачастую бывают случаи, когда мелкую проблему нужно решить быстро, а все верстальщики заняты…
нет я работаю сам на себя, по-этому мой опыт со сложными проектами в данном контексте неуместен.
А в крупных компаниях как правило есть соглашения по способу разработки, и все просто его придерживаются, по-этому там может программист взять и сделать задачу верстальщика, при необходимости, потому что программист осведомлен до нужного уровня.
Это не правило, а общепризнанная рекомендация, чтобы избегать странных глюков в нормальных браузерах и делать все в соответствии со спецификациями.
Это html должен быть валидным и соответствовать спеке. А с css так сложилась история, что если его довести до валидного состояния, то страница ровным счетом не будет адекватно выглядеть не в одном браузере, ну разве, что если это ну совсем примитивная страничка.
Из-за трюков в css абсолютно никаких глюков в браузерах не происходит, и ошибок не вызывает.
Да нужно стремиться придерживаться спеке, но с css так не получается в принципе, что поделать.
Установил у себя на сайте. Но при поиске ничего не выдает и страница куда должны выводится результаты не открывается. Другими словами при поиске страница по просту обновляется. Сайт на ucoz
Так естественно, это же только HTML-форма. Чтобы она работала, ее нужно интегрировать в CMS. Читайте документацию по шаблонам ucoz.
Спасибо. Я счастлив :)
ОТДЕЛЬНОЕ СПАСИБО Dimoxу
Вставьте там где хотели бы видеть. Это поиск ищет совсем не как от ucoz. Стили сами поменяете
прочитал обе статьи. однако. по поводу последнего кода — классы input и submit там точно лишние. По поводу поддержки ИЕ и прочих — давно обсуждаю с заказчиками и использую PIE + jquery для костылей IE, хотя еще недавно страсть как любил фильтры с экспрешнами. просто уже не до них, совсем.
В современных браузерах можно и обойтись. А как же старые версии IE?
PIE я тоже практикую, только если в дизайне не слишком много элементов, для которых он применяется.
ie6 ? если очень надо, на JQ вставьте класс специального для него.
IE6 не важен, хотя бы IE7. Я вижу только такой вариант:
1) вместо
.search .inputиспользовать.search input:first-child2) вместо
.search .submitиспользовать.search input + inputНо мне такое решение не нравится.
?
ie7+ отлично понимает input[type=»text»] и прочее
велосипедов не надо
IE7 понимает
input[type="text"], но не понимаетinput[type="search"], который используется в примере.верно, мой косяк. Тогда можно что стилем, что first-child`om, что навеской класса на JQ специально для IE 7. в 2012 я выбираю последнее…
что-то я вчера перемудрил :)
В данном случае все отлично! Для норм. браузеров пишем input[type=»search»], в css для IE — input[type=»text»] с теми же стилями. И все ок! а кнопку с input[type=»submit»] все понимают как надо.
А вот если полей бы было много — тогда те методы, что уже обсуждали…
Ничего себе! Интересная особенность. Проверил — действительно работает.
Только непонятно, каким образом в IE срабатывает
input[type="text"]? Ведь в коде этого параметра нет.IE magic ^_^
Возможно IE сам назначает type=»text», если не указано ничего, либо тупо воспринимает type=»search» как type=»text».
В общем очередной баг, идущий ему на пользу))))
Да, это хорошо =)
Чтот тег code у вас блочным выводится хотя в предварительном просмотре inline
Если в
ИЕуinputне указанtype— он автоматом становитсяtext, если он не понимает тип — сбрасывает его опять же наtextСпасибо за информацию.
Как-то я это не замечал (в предпросмотре). Исправил. Плагин подсветки кода этот тег делает блочным, поэтому для внутристрочного кода использую тег
<tt>.Очень симпатичная кнопка, спасибо за скрипты! Правда, не сразу всё получилось, как хотелось. Опишу подробно, может быть информация кому-нибудь пригодится.
После установки кнопки поиска на мой сайт ( движок WordPress) вместо поиска выполнялось обновление текущей страницы. Исправила name=»» на name=»s» (как в моём старом скрипте) — поиск начал выполняться, но нормально только с главной страницы. В статье и на статической странице
поиск выполнялся только на текущей странице, после чего выдавалась 404 ошибка. После исправления action=»» на action=»/» этот нюанс был положительно реализован. Можно вместо «/» задать ссылку на главную страницу сайта.
Размер кнопки был очень короткий. Исправила проценты 35% и 28% на 100% — кнопка приняла нормальный вид и размер.
Ув. Dimox, не могли бы вы описать действия по интеграции формы поиска в WordPress?
Большое Спасибо! Выручили :)
Dimox, совсем забыл добавить, что хотелось бы данный код, именно в файл «function.php» поместить. Но совсем не понимаю как правильно прописать php код, дабы работало. Прошу помощи!
А смысл? Добавьте форму в нужное место шаблона и все.
В том, что бы не грузить сайт лишними файлами. Помещать все что помещается в function.php. Плагины, хуки и прочее.
Это глупость.
как отслеживать клик на кнопку поиска?
Интересно, ничего нельзя в ие8 придумать, чтобы за кнопку запрос не уезжал, это всетаки доступность элемента, а не рюшечки http://clip2net.com/clip/m150515/1356539127-clip-6kb.png
Да это вообще во всех версиях IE, не только в 8-й. Еще один косяк ослика. Не представляю, как это можно победить.
Да, ниже девятки. Ничего не придумалось кроме как обернуть и кнопку и поле дивчиком.