Пример верстки поисковой формы для сайта на 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://dimox.name/wp-content/uploads/2023/10/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.
Ссылку надо было добавить свою, чтобы другие тоже посмотрели — 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.