Зачастую, создавая less-файлы (что, впрочем, касается и других препроцессоров css), мы гонимся за красотой и элегантностью less-кода, когда как частенько забываем про скомпилированный css-код. Иногда это влечет за собой критичные последствия, когда объем конечного css возрастает в раз, а код становится совершенно нечитаемым.
Читать полностью »
Рубрика «верстка» - 13
Несколько советов less-разработчику
2013-10-21 в 15:44, admin, рубрики: css, less, sass, scss, веб-верстка, веб-дизайн, Веб-разработка, верстка, идеальный код, код, Совершенный код, чистота кода, чистый кодPixel perfect верстка
2013-09-26 в 14:22, admin, рубрики: css, html, JS, pixel perfect, web-разработка, Веб-разработка, верстка, верстка сайтов, модернизация, рабочая среда, разработка сайтов, улучшение, метки: css, html, pixel perfect, web-разработка, верстка, верстка сайтов, модернизация, рабочая среда, разработка сайтов, улучшениеЯ веб-разработчик с опытом работы 2 года, работаю в firefox с firebug. Верстаю по технике Pixel-perfect. Почему?
- Быстрее создается страница, чем когда бегаешь между браузером и PSD.
- Гораздо качественнее получается результат, от чего и ваш клиент в восторге аж придраться не к чему.
- Банально удобнее видеть макет и тут же позиционировать элемент под ним.
Раньше я размещал изображение Html кодом. Но как неудобно выделять элемент в firebug-е если поверх всего лежит изображение. Приходилось каждый раз лезть в стили и прятать картинку. Pixel-perfect plugin для firefox почему-то не работал.
Тогда появилась идея создать скрипт, который будет прятать по short-cut(hotkey)-ю изображение. И пока создавал скрипт появлялись новые идеи для модернизации удобства использования. В итоге получился: Pixp
После создания я смог его протестировать только на одном живом проекте, так что возможны баги, ну и так как это мой первый публичный проект для всех, прошу строго не судить. Однако прошло уже не мало времени как я ушел в back end, а мои друзья верстальщики продолжают работать используя данный скрипт.
Лично для меня процесс верстки стал гораздо удобнее. И доказывать клиенту что этот элемент расположен правильно, теперь не составляет труда. Так как ваш клиент также может использовать скрипт, не устанавливая доп. ПО.
Читать полностью »
Особенности парсинга блочного HTML-кода программами экранного доступа
2013-08-24 в 14:52, admin, рубрики: accessibility, html, Веб-разработка, верстка, вспомогательные технологии, метки: accessibility, html, верстка, вспомогательные технологииСеть Интернет объединяет множество совершенно разных людей, в том числе и таких, о наличии которых среди пользователей своих сайтов многие разработчики даже и не подозревают или просто не задумываются. В частности речь идёт о людях с отсутствующим или значительно ослабленным зрением.
Поскольку сайт в своём стандартном представлении является подборкой графических материалов, то и разработка его, как правило, ведётся именно с учётом визуального восприятия представленных данных и зрительного контроля результатов разработки. Тем не менее, для незрячего пользователя, две совершенно идентичные с визуальной точки зрения страницы могут выглядеть по-разному, что, в значительной степени, обуславливается порядком блоков в исходном коде.
Читать полностью »
Если веб-разработчик решает выбрать Linux
2013-08-21 в 9:23, admin, рубрики: lamp, linux, Ubuntu, web-разработка, Веб-разработка, верстка, метки: lamp, linux, Ubuntu, web-разработка, версткаСегодняшнее изобилие операционных систем не могло не отразиться на, как казалось бы, очевидности выбора среды под конкретные задачи. Вокруг семейства Unix уже довольно продолжительное время не утихают разговоры о возможностях, доступности и юзабилити данных OS.
Делая выбор в пользу GNU/Linux, перво-наперво возникают вопросы касающиеся программного обеспечения и его аналогов в других OS. Случай с веб-разработкой не является исключением. В данной статье я постараюсь максимально раскрыть эту тему, и искренне надеюсь что кому-нибудь этот псевдо-обзор облегчит жизненные тяготы.
Читать полностью »
Тег — br
2013-08-08 в 12:11, admin, рубрики: css, html, браузеры, верстка, метки: css, html, браузеры, верстка Браузер firefox применяет к тегу
вертикальные отступы
Приступая к вёрстке сайта с нуля я прописываю в стилях сначала, так называемый «reset-css» и добавляю свои общие стили к тегам в соответствии с дизайнами макетов. И вот в одном моменте я допустил ошибку указав следующее:
h1, h1 * {margin-bottom: 20px; font-size: 20px; font-weight: normal; line-height: 24px;}
Читать полностью »
Продолжение перевода статьи «Проблемы CSS. Часть 1».
Когда использовать width / height равный 100%?
Height: 100%
Пожалуй начнем с того, что по проще. Когда использовать height: 100%? На самом же деле, вопрос часто звучит немного по-другому: «Как мне сделать так, что бы моя страница заняла всю высоту экрана?». Ведь правда?
Для ответа на него нужно понять, что height: 100% равен высоте родительского элемента. Это не магическое «высота всего окна». Так что, если вы захотите, что бы ваш элемент занял все 100% от высоты окна, то установить height: 100% будет недостаточно.
Почему? А потому что родителем вашего контейнера является элемент body, а у него свойство height установлено в auto по-умолчанию, это значит, что его высота равна высоте контента. Конечно, вы можете попробовать добавить height: 100% к body, но этого тоже будет недостаточно.
Почему? А все по тому же, родителем элемента body является элемент html, у которого, так же, свойство height равно auto и он так же растягивается под размер контента. А вот теперь, если добавить height: 100% и к элементу html, то все заработает.
Стало понятнее? Корневой элемент html на самом деле не самый верхней уровень на странице, самый верхний это «viewport». Для простоты, будем считать, что это окно браузера. Так вот, если установить height: 100% элементу html, то это то же самое, что сказать — стань такой же высоты, как окно браузера.
Читать полностью »
От переводчика
Статья большая решил разбить на две части.
Впервые css был представлен примерно в 1995 году, и был предназначен для стилизации простых текстовых документов. Не веб сайтов. Не приложений. А именно текстовых документов. С тех пор, css, прошел долгий путь. Возможно слишком долгий.
Для многих вещей, css, не был предназначен изначально, например для таких как: многоколоночность, отзывчивый веб дизайн и т.д. Вот почему он стал языком полным хаков и глюков, как какая-то древняя машина с кучей расширений.
В лучшем случае — работу с css можно назвать веселым занятием. И это то, благодаря чему мы имеем работу. Потому что, как я считаю, генерация эффективных и кроссбраузерных css стилей невозможна и не будет возможна в ближайшее время.
Читать полностью »
jPutty для вёрстки, плагин под jQuery
2013-07-12 в 15:25, admin, рубрики: javascript, jquery plugins, Веб-разработка, верстка, кроссбраузерность, метки: jquery plugins, верстка, кроссбраузерностьЗадача
Вот с таким дизайном мне предстояло разработать сайт, главная страница делится на две полосы – тёмную и светлую. Тонкие линии и некоторые ключевые элементы расположены строго по принципу золотого сечения. И тут меня накрыло…
Опять делать простые вещи сложным html+css кодом? Опять каждый браузер будет отображать страницу по-своему? Опять возиться с кроссбраузерностью? Писать хаки?
И почему таких проблем нет в desktop-программировании? Менять размеры элемента по формуле – пожалуйта. Пододвинуть кнопку левее на 17 пикселей – пожалуйста. Устроить принципиально разное расположение элементов в строгой зависимости от размеров окна – нет проблем! И только в html+css с этим могут возникнуть подобные трудности. Однажды я чуть не потерял заказчика, когда затянул с задачей «пододвинуть блок немножечко выше и левее»… мне пришлось основательно переделать всю вёрстку, потому что старая структура на такие перемещения блока рассчитана не была. Труд этот был не оценен, и поделом, ведь в результате я всего лишь пододвинул блок.
Читать полностью »
Справочник фронт-энд девелопера: виды горизонтальных панелей навигации
2013-05-23 в 17:01, admin, рубрики: css, html, верстка, навигация, навигация по сайту, фронт-энд, метки: css, html, верстка, навигация, навигация по сайту, фронт-энд 
Предисловие: работая верстальщиком, ваш покорный слуга заметил, что существует несколько типов меню; при этом для верстки каждого из них следует использовать свои приемы.
Подробности — под катом.
Читать полностью »
Небольшая хитрость всем известного футера
2013-04-28 в 13:51, admin, рубрики: css, html, jquery, верстка, метки: css, html, jquery, верстка Здравствуй хабр!
Рассмотрим старый, известный рецепт прижатия футера к низу страницы минусовыми отступами, это удобно, просто и главное — красиво.
Хочу предложить несколько нестандартную трактовку старого рецепта, с небольшим включением jQuery, просто еще один взгляд на привычные вещи, прошу заинтересовавшимся под кат.
Читать полностью »