Фишки CSS

Чиним «прыгающие блоки» в IE6 простейшим способом

Заметки - Фишки CSS

Те, кто верстают под IE6, наверняка сталкивались с проблемой «прыгающих блоков», то есть с ситуацией, когда блоки с заданным float и шириной в процентах, при ресайзе браузера начинают то «сваливаться» друг под друга, то вставать на прежнее место. Классическая головная боль для тех, кто проектирует модульную сетку в процентах.

Проблема достаточна хорошо освещена в интернете. Например, в Техногрете студии Лебедва ее решению посвящены целых две статьи и один скринкаст. Не знаю кому как, а мне эти решения не по душе: некоторые из-за дополнительной разметки, некоторые — из-за хитровымученных стилей

Один шаблон формы для всего проекта

Заметки - Фишки CSS

Часто в одном проекте встречаются различные по структуре формы, где-то label элемента и сам элемент формы находятся на одной строке, где-то друг под другом, в одном случае нужна форма занимающая всю предоставленную ей ширину (например написание/редактирование статьи), в другом лишь определенную, заданную ширину (например форма регистрации/авторизации), да и внешнее оформление бывает разным.

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

Далее, я расскажу о том, как это делаю я. Метод не претендует ни на уникальность, ни на новизну. Просто в момент когда я дошел до этого (перестал верстать каждую форму отдельно), верстка форм стала занимать намного меньше времени и решил поделиться этим, возможно кому-нибудь поможет

Punypng

Заметки - Фишки CSS

Хоть и зарекался я не рекомендовать инструменты для пакетной оптимизации графики, но тут все-таки придется.

Встречайте нового игрока — punypng. Новый сервис, очень похожий (но пока не такой удобный) на известный smush.it.

После публикации на SM первой части статьи про оптимизацию PNG со мной связались ребята из проекта Ask

Прилипающий футер с не фиксированной высотой Css+Javascript

Заметки - Фишки CSS

В ответ на комментарий из поста про прилипающий футер.

… большой недостаток — фиксированная высота…

Привожу пример исправления этого недостатка.

Как использовать стили операционной системы в CSS

Заметки - Фишки CSS

В CSS 2.1 появилась одна интересная фича, о которой не все знают — это возможность задавать на веб-странице шрифты и цвета, которые используются в текущей системной теме операционной системы.
Это может быть полезно в ситуациях, когда вы хотите приблизить интерфейс вашей страницы к пользовательскому интерфейсу операционной системы. Например, вы хотите написать Adobe AIR приложение, или сделать справочный интерфейс, наподобие нативной chm-справки (вот как здесь: manual.pohape