Заметки за 2013 год (страница 4)

CSS свойства, которые можно анимировать

Далеко не все CSS свойства поддаются анимации. Так, например, для background-color можно использовать транзишин, а для background-image уже нет.

Актуальный список свойств можно найти на странице — https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties.

Ещё нужно учитывать тот факт, что анимация не срабатывает сразу после добавления элемента в документ или удаления свойства display: none . Это будет выглядеть так, как будто бы анимация сразу оказалась в своём конечном состоянии. Это ограничение можно преодолеть, если менять CSS свойство, участвующее в анимации, с небольшой задержкой в колбеке window.setTimeout().

Бонус: jQuery Transition Events Plugin — плагин, позволяющий отслеживать завершение CSS-анимации в скриптах.

Комментарии к заметке: 5

Межстрочное расстояние в абсолютных величинах

Межстрочное расстояние (или интерлиньяж) в вебе не только задаёт расстояние между строками текста, но и предписывает им центрироваться по вертикали. Это уникальное свойство можно использовать для выравнивания объектов по вертикали внутри контейнера заданной высоты.

Однако если вы задаёте интерлиньяж в пикселах для обычного текста, то это может привести к некоторым проблемам. В Twitter Bootstrap, например, межстрочное расстояние указано в пикселах прям у тега <body>. Это приводит к тому, что при изменении font-size приходится менять и line-height.

С другой стороны, задав один раз свойство line-height в виде отношения базового межстрочного расстояния к базовому кеглю, интерлиньяж будет автоматически пересчитываться для соответствующего размера шрифта. Там где нужно явно поменять межстрочное расстояние, указываем его явно.

Комментарии к заметке: 2

Группирование CSS-правил в Media Queries и производительность

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

Из файла test.less


@tablets: ~"(min-width: 768px) and (max-width: 979px)";
@mobile: ~"(max-width: 767px)";

.widget {
  float: left;
  width: 25%;

  @media @tablets { float: none; width: 100%; }
  @media @mobile { display: none; }

  > .title {
    font-size: 18px;

    @media @tablets { font-size: 16px; font-weight: bold; }
  }

}

получаем test.css


.widget {
  float: left;
  width: 25%;
}
@media (min-width: 768px) and (max-width: 979px) {
  .widget {
    float: none;
    width: 100%;
  }
}
@media (max-width: 767px) {
  .widget {
    display: none;
  }
}
.widget > .title {
  font-size: 18px;
}
@media (min-width: 768px) and (max-width: 979px) {
  .widget > .title {
    font-size: 16px;
    font-weight: bold;
  }
}

Главное удобство этого подхода в том, что селекторы в исходном файле располагаются в непосредственной близости. Такую запись легко читать и исправлять. Даже в конечном CSS они будут располагаться друг за другом. Это, на мой взгляд, гораздо удобнее, чем группировать все правила для медиа-запросов в одном файле и подключать его в конец стилей.

Побочным эффектом этого будет лишь то, что в результирующем CSS-файле каждый раз будет создаваться новый блок @media при каждом использовании. Но это не так уж и плохо.

  • Одинаковые последовательности символов отлично сжимаются при передаче с HTTP-сервера, если настроено сжатие файлов.
  • Отдельные блоки Media Queries почти не влияют на производительность браузера при рендеринге страницы.

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

Оставте свой комментарий

Реализация WebSocket клиента для Node.js

Для нагрузочного тестирования WebSocket сервера в проекте мы решили написать ботов, имитирующих подключения пользователей, и создать с их помощью некую активность. Ботов написал я на Node.js в виде скрипта с параметрами.

Интересным моментом в этой задаче оказался выбор модуля, реализующего WebSocket подключение. Если в браузере для этого есть специальный объект, который полностью скрывает от разработчик всю кухню подключения, рукопожатия и передачи данных, то в Node.js это нужно делать, что называется, руками. Для этих целей написаны различные модули. Для моих нужд самым подходящим оказался модуль websocket.

Работа WebSocket клиента устроена аналогично net.Socket:


// Создаётся экземпляр клиента
var WebSocketClient = require('websocket').client;
var client = new WebSocketClient();

// Вешаем на него обработчик события подключения к серверу
client.on('connect', handler);

// Подключаемся к нужному ресурсу
client.connect('ws://localhost:9000/');

В обработчик подключения в качестве аргумента передаётся объект, который может принимать и отсылать сообщения:


function handler(connection) {
  connection.on('message', function (message) {
    // делаем что-нибудь с пришедшим сообщением
    console.log(message);
  }
  // посылаем сообщение серверу
  connection.sendUTF('Hi, there!');
}
Оставте свой комментарий

Отрезать сверху

На CSS-Tricks появилась интересная статья об оформлении картинок фиксированной высоты, но плавающей ширины: Crop Top. На ряду с CSS3 свойством background-size рассматриваются варианты разметки тегом <img> и их комбинация.

В статье упоминается background-size polyfil для поддержки IE8.

Оставте свой комментарий