Не так давно я публиковал скрипт, который мог обрабатывать focus и blur для input, для автоматической замены текста. Но тот формат, в котором был опубликован скрипт, был недостаточно удобен для использования, т.к. имел значительные ограничения, заложенные в архитектуре. Поэтому я оформил его в виде плагина для jQuery, устранив старые проблемы и добавив новый функционал.

Работая над большим проектом всегда получаешь огромную прибавку опыта, так как практически в каждом интерфейсе сайта присутствуют элементы, вёрстка которых предполагает решение нестандартных задач, и использование своих навыков на полную. Думаю, не лишним будет описать некоторые моменты, ведь они смогут пригодиться ни один раз, и позволят немного пересмотреть свои взгляды на html-разметку некоторых элементов.

Данная версия скрипта устарела. Новая версия опубликована здесь.

Не секрет, что большинство современных сайтов имеют на своих страницах формы для ввода логина и пароля, поиска и другие. Часто в ТЗ на вёрстку вы можете увидеть требование, чтобы текст в input был подсказкой, а при клике (фокусе) пропадал, давая пользователю ввести свои данные. Способов реализации такой задачи в вёрстке огромное множество. Но я опишу один, который, на мой взгляд, является самым удобным и функциональным.

Просматривая вёрстку различных сайтов я часто убеждаюсь в том, что практически каждый верстальщик использует свой определённый подход к оформлению кода. Одни варианты довольно удобны, а другие — просто ужасны и непонятны. Казалось бы, проблема надуманная, ведь структура на кроссбраузерность не влияет. Но любую вёрстку будет кто-либо поддерживать в дальнейшем (не факт, что именно вы), и чем лучше будет оформлен ваш код, тем больше людей скажут вам своё «Спасибо». Здесь я постараюсь освятить все наиболее известные методики структурирования кода, а также выявить их особенности, достоинства и недостатки.

С появлением CSS3 у верстальщиков появилось больше свободы для реализации самых смелых дизайнерских решений. То, на что раньше нужно было потратить 3-4 лишние обёртки блока и определённое время, теперь можно сделать за несколько секунд прописав всего пару свойств. Тем не менее, несмотря на кажущуюся простоту, на данный момент CSS3 поддерживается браузерами не в полной мере, да и до финальной версии стандарта ещё далеко. В этой заметке я опишу особенности применения новых для CSS3 свойств для большинства браузеров.

Обычно мало кто задумывается о мелочах: мы стараемся сделать свою работу как можно быстрее, строго по ТЗ (а иногда и ТЗ выполняем не полностью, что уж тут таить). Тем не менее, мелочи важны. Даже если задание на вёрстку отсутствует и вам предоставлен лишь макет (или в случае если ТЗ имеет очень скудное содержание) вы всегда должны держать в голове определённые принципы и неукоснительно их соблюдать.

В каждой профессии существуют определённые хитрости и штучки, позволяющие сделать работу быстрее и удобнее. Вёрстка — не исключение. В этой заметке я опишу несколько веб-сервисов и программ, которые, на мой взгляд, сильно облегчают жизнь верстальщику.

Когда речь заходит о вёрстке, практически всем, даже самым неосведомлённым людям, на ум приходит слово «валидность». Кто-то подробно знает что это такое, кто-то читал мельком в паре статей и усвоил для себя лишь то, что валидность нужна, но не усвоил зачем. В любом случае, большинство сходятся на том, что сайт должен быть валиден. Но часто они заблуждаются.

В вёрстке часто приходится работать с картинками. Не в контексте создания с их помощью оформления, а именно картинками как картинками. И дизайнеры иногда очень любят придумывать различные способы оформления подписей к картинкам, вёрстка которых может вызвать затруднения у начинающих. В этой заметке я постараюсь раскрыть один из способов вёрстки подписей для изображений.

Казалось бы, простая вещь — изменить цвет рамки (border) элемента select. Но и тут возникают проблемы. Все браузеры нормально реагируют на свойство border, если не считать изменение размера элемента на один пиксель в меньшую сторону, что не так существенно.

В этой заметке я опишу несколько коротких приёмов, сильно облегчающих и ускоряющих процесс вёрстки. Без особых объяснений: только код, чётко по делу. Итак, поехали…

Некоторые макеты требуют вёрстки футера, прижатого к нижней границе окна браузера независимо от наполнения главной (контентной) части. Я опишу наиболее простой, кроссбраузерный и валидный способ реализации такой задачи.

При вёрстке текста с использованием не пиксельных величин (px), а относительных (em), часто возникает проблема определения line-height. Если задать размер шрифта в em, а интерлиньяж в пикселях, при увеличении текста строки будут наползать друг на друга. Для решения этой проблемы интерлиньяж также нужно указывать в em. Но каждый раз рассчитывать его вручную — слишком долгое занятие.

Не так часто приходится сталкиваться с нестандартными шрифтами в макетах, но когда это происходит — сразу возникает много проблем с кроссбраузерностью.

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