7 заметок с тегом

верстка

5 августа 2014, 13:15

input type=search и placeholder в Chrome

С появлением новых типов инпутов в HTML 5, появились и новые проблемы с их отображением в некоторых браузерах.

Так, например, Chrome последних версий выводит поисковое поле

<input type="search" />

следующим образом:

Проблема возникает, если вы пытаетесь указать полю placeholder или даже просто ввести в поле текст, потому что эту стандартную подсказку Chrome не убирает ни в том, ни в другом случае:

Для решения проблемы необходимо указать следующий CSS-стиль полю:

input[type=search] {
    -webkit-appearance: textfield; // ещё можно указать none
}

С помощью <meta>-тега viewport можно сделать так, чтобы адресная строка браузера в Сафари, а также нижняя панель с кнопками была по-умолчанию скрыта:

Для этого в значение тега через запятую допишите minimal-ui, вот так:

<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui" />

Дополнено: при нажатии на заголовок все элементы управления (адресная строка и нижняя панель) вернутся на экран.

В случае, когда у вас Flash-баннера на сайте в хроме загружаются «через раз» (хотя всё, вроде бы, корректно), вам поможет следующий код:

if (navigator.userAgent.match(/chrome/i)) {
	var objects = document.querySelectorAll("object");
	for (var i in objects)
		if (objects[i].parentNode)
			objects[i].parentNode.innerHTML = objects[i].parentNode.innerHTML;
}

Запускать по domready.

15 мая 2013, 16:37

Всплывающие слои

На сайтах всплывающие слои с полезной информацией должны быть доступны по прямому URL с хэшем.
Вот, например: http://bigudibar.ru/#events

Такими адресами можно и хочется делиться.

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

7 апреля 2013, 10:32

Поле поиска в Эгее

На мой взгляд, поле поиска, которое сделал Илья Бирман в Эгее слишком перегружено:

Два значка там, где можно было обойтись одним, скругление, которое плохо выглядит в Windows.

Чтобы упростить его до того вида, который есть в моём блоге, нужно в CSS e2 дописать следующий код:

.form-search input.text { border-radius: 0px }
.form-search ::-ms-clear { display: none }
.form-search label { position: relative }
.form-search .i-loupe { background-color: #fff; position: absolute; right: 5px; top: 0px }
.form-search button { position: absolute; right: 5px; top: -3px }
.form-search .i-enter, .form-search button:hover .i-enter { background: none }

По-умолчанию IE начиная с десятой версии в <input> (type=text, email, url, number, tel, search) при фокусе показывает крестик для очистки содержимого поля.

Управлять им можно в CSS через конструкцию

::-ms-clear {
	...
}

Например, убрать его, вписав display: none.