Блог верстальщика

Неработающие label на iPad

Обновляя свой сайт, просматривал его в разных браузерах на разных устройствах. Всплывали небольшие баги, вроде отсутствия поддержки какого-то CSS3 свойства.

Но одна ошибка меня очень удивила: на iPad`е клик по элементу label не заставлял привязанный к нему радио-баттон изменить свое состояние. В процессе поиска решения этой проблемы, нашлась страница блога с несколькими вариантами:

1. В самом посте была громоздкая избыточная запись, которая мне сразу не понравилась. Я попробовал ее использовать, и это дало положительный результат, но решено было искать что-то другое.
2. В комментариях предлагалось использовать label { сursor: poiner } — я надеялся, что это простое правило мне поможет, но нет, оно уже было у меня прописано раньше, а ошибка присутствовала.
3. Еще в комментариях говорили, что можно попробовать написать $('label').click(function(){}); Однако, я избавился от jQuery и ради одного багофикса его возвращаться не собирался.

В итоге, решил написать то же самое, что и в третьем пункте, только на нативном javascript, плюс кое-что взяв из первого. Получился вот такой код:

function fixForIpad(){

	if (!navigator.userAgent.match(/iPhone|iPod|iPad/i)) {
		return;
	}

	var labels = document.getElementsByTagName('label');

	for (var i = labels.length; i--;) {
		labels[i].onclick = function(){};
	}

}

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

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

Шорткат для console.log

Не могу не поделиться одним лайфхаком, ускоряющим отладку javascript.

Однажды мне надоело набирать вручную функцию console.log(), ведь она одна из самых часто используемых, и я задумался, как можно ускорить этот процесс.

Решение пришло очень быстро: если ваш редактор или IDE поддерживает, можно создать сокращение cl, которое будет разворачиваться в console.log(), к примеру, по нажатию на TAB.

Так же можно поступить с другими методами объекта console, но мне пока больше не потребовалось.

Почему не стоит задавать глобальных стилей

Во время моего доклада, видео к которому лежит в предыдущем посте, у одного из слушателей возник вопрос, почему не следует применять стилей, представленных ниже:

input {
    border: 2px solid #000;
}
p {
    margin: 10px 0;
}

Попытаюсь еще раз ответить на него.

Read More

Доклад: Верстка как связующее звено

Часы на чистом CSS3

Вот сделал небольшие часики на чистом CSS3. Без регистрации, смс и javascript :)

Работает это чудо в Firefox, Chrome и Safari.

Центрирование в блоке с неизвестными размерами

Перевод статьи Криса Койера Centering in the Unknown.

Когда в верстке дело доходит до центрирования, то чем больше у вас информации о центрируемом элементе и о его родителе, тем легче. Так как же быть, если вы ничего о них не знаете? Даже не смотря на это, задачу можно решить.

Read More

Как выбрать z-index

Часто на одной страничке появляется много разных интерактивных элементов, каждый из которых нужно расположить на конкретном уровне. Этим расположением нужно управлять и сразу помещать каждый элемент на конкретный этаж z-index.

Обычно у меня получаются следующие уровни:

• 0-9 — для случаев, когда надо, чтобы один обычный блок перекрыл другой такой же обычный. Например нижний блок должен наехать на верхний, у которого уже стоит position: relative.
• 10-99 — для дропдаунов, тултипов, автодополнений и прочих элементов, которые и должны быть выше остальных, но и выше них что-то еще может быть.
• 100 — оверлей, полупрозрачный блок, располагающийся над всем сайтом, но под попапом. Он, как правило, всего один и ему выделяем один z-index.
• 101+ — попапы, индикаторы глобальной загрузки веб-приложения.