Вертикальное выравнивание — универсальный метод.

Наконец-то я его нашел. И почему мне раньше это не приходило в голову? Постоянно приходилось изобретать какие-то шаманские штуки с line-height, display: table, vertical-align, top: 50%; margin-top: -XXXpx и прочая и прочая.

И вот недавно, когда мне для одного проекта понадобилось сделать модальные окна произвольной ширины/высоты, я снова озаботился. И как-то сразу мне пришел в голову transform. Не, серьезно, translateY — это именно то, что нужно. Эту штуку поддерживает 83% браузеров (с префиксами, IE — начиная с 9.0).

Продолжение «Вертикальное выравнивание — универсальный метод.»

Быстродействие: оптимизация изображений.

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

В серии «Быстродействие» вышло уже три заметки, и из четвертой вы узнаете, как оптимизировать изображения для использования их в интернете.

Продолжение «Быстродействие: оптимизация изображений.»

Быстродействие: оптимизaция CSS.

Via DailyBlogTips.

Каскадные таблицы стилей (CSS) уже сами по себе являются одним из основных способов прибавить сайту прыти. Они позволяют браузеру кэшировать всю информацию о стилях сразу, целиком из файла .css, вместо того, чтобы подгружать ее по отдельности с каждой страницы раз за разом. Оптимизация CSS заключается в обьединении одинаковых элементов, удалении ненужных и так далее, что в конечном счете приводит к меньшему размеру файла стилей.

Продолжение «Быстродействие: оптимизaция CSS.»

Быстродействие: тэги height и width.

Via DailyBlogTips.

Если вы используете на своем сайте таблицы или изображения, вы всегда должны применять атрибуты height (высота) и width (ширина). Если браузер их не обнаруживает, ему приходится сначала загружать это изображение или содержимое этой таблицы и только после этого самому устанавливать их высоту и ширину. Вот пример кода, в котором используются эти атрибуты:

Продолжение «Быстродействие: тэги height и width.»

Быстродействие: слэш в конце ссылок.

Via DailyBlogTips.

Когда сервер пытается открыть ссылку вида “http://www.domain.com/about”, ему необходимо экспериментальным путем обнаружить, что он там собирается найти. Страницу, изображение, что-то еще. Характер того, что он ищет, в подобной ссылке не указан совершенно. И это значит, что серверу придется потратить некоторое время практически впустую. Но если использовать в конце ссылки на страницу символ слэша (”/”), чтобы получилось что-то такое — “http://www.domain.com/about/” — то сервер будет знать, что от него требуют отдельной папки, и это сократит время его ответа.

Поставить слэш в конце ссылки — не сложно. Но при большой посещаемости вашего сайта, поверьте, это даст ощутимый прирост скорости загрузки страниц.

Из той же серии: