Начну с обыденного, вот так, валидным образом мы обманываем браузеры (не советую оставлять комментарии на русском при копировании):
/* Правило для всех */
#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, но есть ряд ограничений (вот эти парни написали подробно). К примеру, когда рассылка новостей в почтовой программе по дизайну соответствует сайту где пользователь подписался на эту рассылку, это очень круто. Итак, как это работает:
- CSS стили используются только inline, никаких подключаемых CSS файлов, их мало кто понимает
- Картинки только тегом img. Свойство background не всегда работает, чаще не работает
- В верстке лучше использовать таблицы, т.к. float и clear тоже не всегда работают
Да, все просто, но так же не надо забывать и главые правила рассылок: обязательная ссылка отписаться, не очень много графики и не шлите письма тем кто не согласился их получать!
А теперь ссылка для терпеливых, кто читает до конца — самые лучшие html шаблоны писем.
Примеры дизайна таблиц, сегодня совершенно бесплатно и со всеми исходниками. Ну и для начала о дизайне таблиц:
- Таблицам нужно пространство. Если вы не знаете наилучшую ширину для таблиы, нужно поставить 100%. Гораздо лучше если таблица будет широкой нежели суженной по всем столбцам.
- Ячейкам нужны отступы. Ячейки таблицы идут одна за другой, но нет необходимости располагать их близко друг к другу. Пусть будут отступы.
- Относитесь к таблицам так же как и к тексту. Таблицы воспринимаются так же как и обычный текст, но читаются немного сложнее и дольше. И нужно быть осторожным и не создавать сильного контраста цветов, лучше использовать мягкую цветовую гамму.
Примеры таблиц, созданных R. Christie на smashingmagazine
Версия для печати, как показывает практика, пользуется популярностью у пользователей, часто человеку проще распечатать таблицу с товарами на сайте или понравившуюся новость чтоб позже спокойно прочитать.
Традиционно сложилось что «Версия для печати» доступна либо по соответствующей ссылке, либо через CSS media=»print» который отвечает за стили страницы при ее печати. Первый способ позволяет легко выводить данные как угодно, в то время как второй ограничен средствами CSS, т.е. на печать отправляется та же страница, но с другим CSS файлом. Я рассмотрю первый способ, так как он наиболее гибкий и позволяет выводить данные как угодно.
[More]
Всех поздравляю с закончившимися праздниками, наверное хорошо страна отдохнула, мне вот кажется что абсолютно необходимо официально начинать рабочий день в 11, после таких массовых гуляний.
— — —
Делюсь волшебной вещью, очень удобными шпаргалками, разбираем кому что ближе, распечатываем и на стенку 