Кроссбраузерный поиск в select list

Ниже я хочу рассказать о своём методе поиска по списку.
Для этого требуется поле ввода текста и собственно сам список.

<input class="type-search" type="text" />
<select size="10" id="list">
	<option value="val">Text</option>
	...
	<option value="val*n">Text</option>
</select>

Добавим к этому немного css:

input, select {
	width: 300px;
	margin: 10px auto;
	display: block;
}

При этом всё, что не совпадает со строкой поиска — будем скрывать, оставляя в списке только нужные результаты.
(далее…)

Мысли об универсальном селекторе

Интересные мысли постигли меня касаемо универсального селектора (он же селектор «звёздочка»).

Большинство верстальщиков свято верят, что использование оного селектора в разы затормаживает скорость отображения страницы. А, например, в Internet Explorer страница вообще не сможет загрузится, намертво «подвесив» браузер.

Однако же будем хладнокровны и обратимся к фактам.

(далее…)

Метод html-верстки кнопок с применением псевдоэлементов

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

Выглядело это примерно так:

html

    <div class="large_button">
      <span class="buttons submit_v2-button clickable">
        <i class="left left2"></i>
        <i class="body">
          <b>В архив</b>
          <i class="end">
            <i></i>
          </i>
        </i>
      </span>
    </div>

Видно, что запутаться в таком коде проще простого, тем паче, что вариантов кнопок на проекте накопилось не менее 30. Попытка создать такую кнопку на серверной стороне вызывала негодование у коллег «пехапистов».

Поэтому моей негласной задачей стало максимальное упрощение кода.
(далее…)

Резиновый блок со скруглёнными углами, градиентом и тенью

Блок со скруглёнными углами, градиентом и тенью

Ещё не так давно это была настоящая головная боль верстальщика. Теперь это решаемо одним тегом:

HTML

<div class="gray-block">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
</div>

CSS

.gray-block{
	border: 1px solid #CBD3DB;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background-image: -webkit-gradient(linear,left top, left bottom,from(#EEF2F5),to(#CBD3DB));
	background-image: -webkit-linear-gradient(top,#EEF2F5,#CBD3DB);
	background-image: -moz-linear-gradient(top,#EEF2F5,#CBD3DB);
	background-image: -o-linear-gradient(top,#EEF2F5,#CBD3DB);
	background-image: linear-gradient(top,#EEF2F5,#CBD3DB);
	-moz-box-shadow: 4px 4px 10px #838383;
	-webkit-box-shadow: 4px 4px 10px #838383;
	box-shadow: 4px 4px 10px #838383;
}

Как видно из приведённого кода, всё это будет замечательно работать везде, кроме Internet Explorer. Шестую версию этого браузера поддерживает только убогий, а для последующих версий есть совершенно замечательная библиотека на JavaScript — PIE.js

(далее…)