Заметки программиста

Каждый будний день, ровно в 9, я пишу о себе, о своей работе и о технологиях web программирования123

Posts Tagged ‘ css ’

Начну с обыденного, вот так, валидным образом мы обманываем браузеры (не советую оставлять комментарии на русском при копировании):

/* Правило для всех */
#MyDiv {
margin : 10px 10px 10px 10px;
}

/* Только IE6 */
* html #MyDiv {
margin : 5px 5px 5px 5px;
}

/* Только IE7 */
*:first-child+html #MyDiv {
margin : 2px 2px 2px 2px;
}

А теперь те кто не фанат валидации CSS пристегнитесь, мы отправляемся:

#MyDiv {
margin : 10px 10px 10px 10px;
*margin : 2px 2px 2px 2px;
_margin : 5px 5px 5px 5px;
}

* — работает только в IE7
_ — работает только в IE6

Последовательность имеет значение.

Перевод статьи Create a Scrolling Menu with CSS and jQuery.

Существует множество прокручивающихся меню и галерей изображений, созданных на Flash, вот яркие тому примеры 1, 2. Но автор захотел создать аналог на CSS и jQuery, конечно без эффектов смазывания картинки при перемещении, но все же. Это решение хорошо работает в большинстве популярных браузеров и при этом сохраняет доступность элементов при отключенном JavaScript.

Посмотреть результат

[More]

Прежде чем CSS3 будет поддерживаться всеми браузерами в полной мере пройдут годы, а хочется уже сейчас. Ведь CSS3 позволяет создать блок со скругленными углами, внешним свечением и каким нибудь не стандартным шрифтом. Все это можно применять и сейчас, многие браузеры поддерживают некоторые свойства невышедшего стандарта CSS3, но к этим браузерам никоим образом не относится Internet Explorer, что ж тем хуже для него. Если ваш проект не коммерческий и позволяет разного рода вольности дизайна, не будьте консервативными, используйте новые возможности браузеров в полной мере! А я подготовил небольшой тест:
[More]

Очень удобный иструмент Code beautifier форматирует CSS так что его размер значительно уменьшается, достигается это за счет удаления повторящихся пробелов и лишних табов, так же документ становится удобным для чтения и не пакуется в одну строку. Рекомендую на продакшн!

cellpadding и cellspacing это свойства таблицы отвечающие за отступы между ячейками и внутри них, эти свойства не рекомендованы w3 в HTML 4.01, а в XHTML 1.1 кажется вовсе не валидны. Навсегда отключить и забыть об их существовании можно так:

table {
  border-collapse: collapse;
}

Разработал плагин для jQuery, он пожалуй тоже относится к клонам lightbox. Теперь я понял почему их так много, изменить любой из существующих гораздо сложнее чем написать свой! Смотрим, оцениваем: ImageBox.

Чтоб ваши рассылки небыли унылыми их нужно красиво оформлять! Оформление не таит в себе чего-то более сложного чем обыкновенный HTML, но есть ряд ограничений (вот эти парни написали подробно). К примеру, когда рассылка новостей в почтовой программе по дизайну соответствует сайту где пользователь подписался на эту рассылку, это очень круто. Итак, как это работает:

  1. CSS стили используются только inline, никаких подключаемых CSS файлов, их мало кто понимает
  2. Картинки только тегом img. Свойство background не всегда работает, чаще не работает
  3. В верстке лучше использовать таблицы, т.к. float и clear тоже не всегда работают

Да, все просто, но так же не надо забывать и главые правила рассылок: обязательная ссылка отписаться, не очень много графики и не шлите письма тем кто не согласился их получать!

А теперь ссылка для терпеливых, кто читает до конца — самые лучшие html шаблоны писем.

Примеры дизайна таблиц, сегодня совершенно бесплатно и со всеми исходниками. Ну и для начала о дизайне таблиц:

  1. Таблицам нужно пространство. Если вы не знаете наилучшую ширину для таблиы, нужно поставить 100%. Гораздо лучше если таблица будет широкой нежели суженной по всем столбцам.
  2. Ячейкам нужны отступы. Ячейки таблицы идут одна за другой, но нет необходимости располагать их близко друг к другу. Пусть будут отступы.
  3. Относитесь к таблицам так же как и к тексту. Таблицы воспринимаются так же как и обычный текст, но читаются немного сложнее и дольше. И нужно быть осторожным и не создавать сильного контраста цветов, лучше использовать мягкую цветовую гамму.

Примеры таблиц, созданных R. Christie на smashingmagazine

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

Традиционно сложилось что «Версия для печати» доступна либо по соответствующей ссылке, либо через CSS media=»print» который отвечает за стили страницы при ее печати. Первый способ позволяет легко выводить данные как угодно, в то время как второй ограничен средствами CSS, т.е. на печать отправляется та же страница, но с другим CSS файлом. Я рассмотрю первый способ, так как он наиболее гибкий и позволяет выводить данные как угодно.
[More]

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

Делюсь волшебной вещью, очень удобными шпаргалками, разбираем кому что ближе, распечатываем и на стенку