<rmcreative>

RSS

Все заметки с тегами «JavaScript, CSS»

Можно уточнить:

    (1)
  1. (1)
    (1)
    (1)
  1. (1)
  2. (1)
    (1)
    (1)
  1. (8)
  2. (1)
    (1)
    (1)
  1. (7)
    (1)
    (1)
  1. (1)
    (1)
    (1)
  1. Плавная анимация в браузере

    20 февраля 2015

    Добиться плавной анимации при наличии тучи DOM-элементов, да ещё и когда в анимируемом контейнере грузятся картинки и какой-нибудь Google Maps, оказалось не просто. Путь был довольно долг и тернист. Приведу только рецепт:

    1. Не используйте jQuery.animate(). Он тормоз.
    2. Вместо него используйте Velocity.js.
    3. Если возможно, анимируйте только transform: translate, transform: scale, transform: rotate, opacity.
    4. Включайте аппаратное ускорение для анимируемого слоя. Делайте это сразу в CSS, приправьте чёрной магией.

    Если и после этого не помогло:

    1. Попробуйте уменьшить количество DOM-элементов в анимируемом контейнере.
    2. Не стартуйте несколько анимаций единовременно.
    3. Если контент в контейнер подгружается динамически, рисуйте во время анимации эмуляцию контента, как это делает, например, Facebook. Заменяйте на реальный контент как только анимация закончена.
    Комментировать
  2. Правильные модальные окна

    5 июля 2012

    Обычно модальные окна и диалоги делаются при помощи плагинов jQuery. Например, SimpleModal или jqModal. К сожалению, все они, в варианте по умолчанию, работают неправильно.

    Если окно модальное, то пользователю нельзя позволять прокручивать страницу под ним. При этом, если содержимого в модальном окне очень много, нужно позволить это содержимое прокручивать.

    По этому принципу работает просмотр фото в Facebook и Вконтакте.

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

    Рассматриваем пример

    Немного прокомментирую:

    /* Данный класс навешивается на контейнер при открытии модального окна. Для нормальных браузеров это body, для стырах IE — html */
    .lock {
        /* Скрываем скроллбары */
        overflow: hidden;
    }
     
    .modal {
        /* По умолчанию не показываем содержимое модальных окон */
        display: none;
    }
     
    .lock .modal {
        /* Показываем подложку (полупрозрачное затенение) при открытии модального окна */
        display: block;
     
        /* Саму подложку фиксируем и растягиваем на всё пространство */
        position: fixed;
        bottom: 0; left: 0; top: 0; right: 0;
     
        /* Если содержимое модального окна в подложку не влезает — показываем скроллбары */
        overflow: auto;
    }

    UPD: оформил в плагин jQuery

    29 комментариев
  3. Можно ли использовать в браузере X штуку Y

    29 мая 2012

    На подобные вопросы отлично отвечает ресурс caniuse.com.

    Есть данные о:

    • CSS (@font-face, Media Queries, …).
    • HTML5 (Canvas, WebGL, …).
    • JS API (CORS, Web Sockets, …).
    • SVG.
    • И другом (Data URLs, XMLHttpRequest 2, …)

    Информация предствлена в виде удобных таблиц.

    Пользуемся

    Комментировать
  4. Twitter Bootstrap 2.0

    3 февраля 2012

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

    В комплекте сетка, базовый CSS для текста, таблиц, форм и кнопок, набор значков, отдельные элементы интерфейса и даже JavaScript-плагины. Всё это кроссбраузерно и кроссдевайсово. Можно использовать LESS, так что работать с набором довольно удобно.

    Пробуем

    11 комментариев
  5. IE9 preview 2

    5 мая 2010

    Вышла вторая превью-версия IE9.

    Из свежего:

    4 комментария
  6. IE9 preview

    16 марта 2010

    Вот нам и показали IE9. От финала он, конечно, далёк, но посмотреть есть на что.

    • Более быстрый, чем в IE8, JavaScript-движок.

    • Поддержка некоторых фич CSS3: border-radius, RGBA, opacity, селекторы. К релизу обещают доделать ещё.

    • Поддержка HTML5: новые элементы, перехлёст тэгов, изменено поведение script и style (теперь можно получить их текст через DOM), API для выделения текста.

    • DOM L2 и немного DOM L3 (Events).

    • Поддержка SVG.

    • DirectX для рендеринга страниц.

    • Улучшена производительность отладчика, добавлен профайлер HTTP.

    Для того, чтобы зарабоали приятные дополнения, надо перевести IE в новый document mode — IE9, например, при помощи:

    <meta http-equiv="X-UA-Compatible" content="IE=IE9" />

    или

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    Полный список изменений

    Пробуем

    На работу установленного в системе IE никоим образом не влияет. Устанавливать можно не опасаясь повреждения системы.

    11 комментариев
  7. IE7.js 2.1 (beta3)

    8 марта 2010

    Обновился проект Дина Эдвардса, обучающий IE понимать стандарты.

    • IE 5.0 больше не поддерживается.

    • В quirks mode не применяются фиксы для layout (кроме IE5.5).

    • IE9.js для улучшения IE8.

    • Поддержка opacity теперь в IE9.js.

    • Новые селекторы (IE9.js):

      • :first-of-type.

      • :last-of-type.

      • :only-of-type.

      • :nth-of-type().

      • :nth-last-of-type().

      • убран :contains() (другие браузеры его не поддерживают).

    • Изменена поддержка PNG.

    • Куча багфиксов, в том числе и некликабельные ссылки.

    • Новый, более быстрый, селекторный движок (тот же, что будет в новом base2).

    Смотрим демо и Пробуем

    2 комментария
  8. Steve Souders об особенностях клиентской оптимизации

    15 февраля 2010

    Steve Souders поделился сразу несколькими занятными фактами об особенностях современных и не очень браузеров.

    IE и независимые от протокола URI

    Internet Explorer 7 и 8 при использовании URI вида "//rmcreative.ru/css/main.css" будут загружать файл два раза. При явном указании http, https или использовании относительных URI этого не происходит.

    document.write и FireFox

    При загрузке скриптов через document.write в FF (в том числе и в 3.6) блокируются остальные загрузки.

    IE грузит стили с media="print"

    Причём делает это даже когда мы ничего не печатаем. При этом до полной загрузке блокируется рендеринг страницы.

    Подключаем стили через JavaScript

    Можно избежать блокировки, используя JavaScript:

    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = '/main.css';
    document.getElementsByTagName('head')[0].appendChild(link);

    Chrome, Safari и загрузка фоновых изображений

    Перечисленные браузеры начинают загружать фоновые изображения до подгрузки CSS. Таким образом, изображения будут загружены даже если в CSS они переопределены.

    Источники:

    4 комментария
  9. cssmin.js

    24 сентября 2009

    Один из моих любимых технических писателей Stoyan Stefanov, автор Object-Oriented JavaScript, портировал обжиматель CSS из YUICompressor на JavaScript.

    Демо

    Код

    Кстати, за основу сжатия CSS в YUICompressor был взят cssmin, написанный на PHP.

    3 комментария
  10. Сергей Чикуёнок ответил на вопросы

    1 сентября 2009

    В рамках онлайн-конференции Сергей Чикуёнок ответил на множество различных вопросов.

    Вопросы и особенно ответы получились на удивление полезными, так что советую прочитать и обдумать.

    Читаем

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

    Комментировать