• Анимации на GPU: делаем это правильно

    • Markdown

    Думаю, все уже знают, что современные браузеры умеют рисовать некоторые части страницы на GPU. Особенно это заметно на анимациях. Например, анимация, сделанная с помощью CSS-свойства transform выглядит гораздо приятнее и плавнее, чем анимация, сделанная через top/left. Однако на вопрос «как правильно делать анимации на GPU?» обычно отвечают что-то вроде «используй transform: translateZ(0) или will-change: transform». Эти свойства уже стали чем-то вроде zoom: 1 для IE6 (если вы понимаете, о чём я ;) для подготовки слоя для анимации на GPU или композиции (compositing), как это предпочитают называть разработчики браузеров.


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

    Читать дальше →
  • Вышел Emmet v1.0

      Рад сообщить, что после более полугода разработки в свет вышел Emmet (бывший Zen Coding) v1.0.

      Emmet — это инструмент для ускорения работы с HTML и CSS. В основе проекта лежит механизм динамических аббревиатур, которые разбираются «на лету» и из которых генерируется готовый фрагмент кода. Для написания аббревиатур используется синтаксис, похожий на CSS-селекторы, но с некоторыми дополнениями, специфическими для создания кода. Например, вот такая аббревиатура:

      section>h2+ul.nav>li.nav-item$*5>a

      простым нажатием клавиши превращается в:

      <section>
          <h2></h2>
          <ul class="nav">
              <li class="nav-item1"><a href=""></a></li>
              <li class="nav-item2"><a href=""></a></li>
              <li class="nav-item3"><a href=""></a></li>
              <li class="nav-item4"><a href=""></a></li>
              <li class="nav-item5"><a href=""></a></li>
          </ul>
      </section>
      

      Подробности