Виталий Харисов
Руководитель службы HTML-вёрстки
Я.Субботник, Киев, 25 апреля 2009 года
Поле ввода с процентной шириной.
Должно быть:
В Standards Mode при 100% ширине поля
оно выходит за пределы родителя:
Должно быть:
Поле ввода разносит таблицу:
<div class="b-input">
<input />
</div>
.b-input input
{
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.b-input {
/* default: 2px border + 1px padding */
margin-right: 6px;
}
.quirks .b-input {
margin-right: 0;
}
.b-input input
{
float: left;
}
.b-input input
{
font: 100% Arial, sans-serif;
}
Подсказка в поле ввода, исчезающая по клику на поле ввода или если в нём есть контент.
Поле ввода может быть type="password"
<div class="b-input-hint">
<label for="input">
подсказка
</label>
<input id="input"/>
</div>
<input id="input"
onfocus="скрыть label"
onblur="показать label, если поле пусто"
onchange="скрыть, если поле не пусто"
onmouseover="тоже что и onchange"/>
<script type="text/javascript">
вызвать onchange у input
</script>
#nojs .b-input-hint input {
display: block;
margin-top: 0.2em;
}
#js .b-input-hint label {
position: relative;
float: left;
margin: 0.25em 0 -2em 0.2em;
cursor: text;
color: #999;
}
.b-input-hint input
{
font: 100% Arial, sans-serif;
margin: 0;
}
Форма для поиска 100% ширины.
Собираем из уже имеющихся компонент.
|
|
<form action=""><table class="b-search">
<tr>
<td class="input">
<div class="b-input"><input /></div>
</td>
<td class="button">
<input type="submit" value="Найти"/>
</td>
</tr>
</table></form>
<td class="input">
<div class="b-input-hint">
<label for="input"/>
<div class="b-input">
<input id="input"/>
</div>
</div>
</td>
.b-search
{
width: 100%;
}
.b-search .input
{
width: 100%;
vertical-align: middle;
}
.b-search .button
{
padding-left: 0.3em;
vertical-align: middle;
}
.b-search,
.b-search .input,
.b-search .button
{
padding: 0;
border-collapse: collapse;
}
Реализовать вертикальный список
с произвольным маркером.
Например, длинным тире:
<ul class="b-vlist b-vlist_mdash">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
</ul>
.b-vlist,
.b-vlist li
{
margin: 0 0 0.3em;
padding: 0;
list-style: none;
}
.b-vlist li:before
{
position: absolute;
margin-left: -1.3em;
}
.b-vlist_mdash li:before
{
content: "\2014\a0";
}
.b-vlist li
{
zoom: expression(
runtimeStyle.zoom = 0,
insertBefore(
createElement("m"), firstChild)
);
}
.b-vlist m
{
position: absolute;
margin-left: -1.3em;
}
.b-vlist_mdash m
{
zoom: expression(
runtimeStyle.zoom = 0,
innerText = "\2014"
);
}
Реализовать горизонтальный список
с произвольным разделителем.
Пробелов между </ul> и <ul> быть не должно!
<ul class="b-hlist b-hlist_comma">
<li>Ваня</li
><li>Петя</li
><li>Вася</li>
</ul>
.b-hlist, .b-hlist li
{
display: inline;
margin: 0;
padding: 0;
}
.b-hlist li:first-child:before
{
content: "";
}
.b-hlist li
{
zoom: expression(
runtimeStyle.zoom = 0,
previousSibling &&
insertBefore(
createElement("m"), firstChild)
);
}
.b-hlist_comma li:before
{
content: ",\20";
}
.b-hlist_comma m
{
zoom: expression(
runtimeStyle.zoom = 0,
innerText = ",\20"
);
}
.b-hlist_middot li:before
{
content: "\a0\b7\20";
}
.b-hlist_middot m
{
zoom: expression(
runtimeStyle.zoom = 0,
innerText = "\a0\b7\20"
);
}
.b-hlist_arrow li:before
{
font-family: "Times New Roman",
sans-serif;
content: "\a0\2192\20";
}
.b-hlist_arrow m
{
font-family: "Times New Roman",
sans-serif;
zoom: expression(
runtimeStyle.zoom = 0,
innerText = "\a0\2192\20"
);
}
При использовании спрайтов в PNG-24
невозможно использовать background-position
в MSIE для сдвига фильтра.
Отказываемся от использования background-position и используем позиционирование.
<i class="b-icon"><i></i></i>
.b-icon_links2 i
{
left: -16px;
}
.b-icon
{
position: absolute;
overflow: hidden;
width: 16px;
height: 16px;
margin-left: -19px;
}
.b-icon i
{
/* position: absolute; */
position: relative;
display: block;
}
.b-icon i
{
width: 48px;
height: 16px;
background: url(path-to-image);
}
.b-icon_links1 i
{
left: -16px;
}
.b-icon_links2 i
{
left: -32px;
}
Если спрайт в PNG-24 задаём фильтр
* html .b-icon i
{
-background: none;
-filter: progid:DXImageTransform:…;
}
* html*.b-icon i
{
zoom: expression(
runtimeStyle.zoom = 1,
/* Добавляем элемент <png>, перекрывающий
фильтр (для кликабельности ссылки) */
parentNode.appendChild(
createElement("png"))
);
}
* html .b-icon png {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: red;
filter: alpha(opacity=0);
}
* html a .b-icon
{
cursor: hand;
}
<ul class="b-links">
<li class="link1">
<i class="b-icon"><i></i></i>Link 1
.b-links .b-icon i {
/* width / height / background */
}
.b-links .link2 .b-icon i {
left: -16px;
}
<i class="b-icon b-icon_alert"><i></i></i>
.b-icon i {
/* width / height / background */
}
.b-icon_alert i {
left: -16px
}
<i class="b-icon"><i class="alert"></i></i>
.b-icon i {
/* width / height / background */
}
.b-icon .alert {
left: -16px
}
<i class="b-icon b-icon_32x32"
><i class="main"></i></i>
.b-icon_32x32 {
/* width / height / background */
}
.b-icon_32x32 .alert {
left: -16px
}
Слишком большое для доклада.
Будет опубликовано в клубе на Яру
Руководитель службы HTML-вёрстки