Кроссбраузерное использование data: URL

    После статей картинки в теле страницы с помощью data:URL и data URL в IE мне написал один из читателей и предложил метод использования base64-кодирования в CSS-файлах под IE (как это сделать в HTML-файлах, описано в последней статье). После этого прошло пара месяцев, прежде, чем мне довелось взяться за рассмотрение этого метода более детально. Однако, после нескольких недель исследований удалось получить весьма обнадеживающую картину.

    О чем идет речь? IE (до версии 7 включительно) не поддерживает протокол data:URL, а вместе с ним base64-кодирование внешних файлов и включение их прямо в тело необходимого документа (будь то HTML или CSS/JS-файл). Однако, если рассмотреть использование протокола mhtml (который, конечно же, поддерживается только в IE), многое становится более ясным, и base64-кодирование удается использовать в полной мере.

    читать дальше на webo.in →

    Комментарии 11

      0
      Еще один выход не грузить дважды для нормальных браузеров использовать условные комментарии для ИЕ, и использовать отдельные файлы CSS.
        0
        это указано в статье :)
        с помощью либо отдельного CSS-файла для IE
          0
          Да, вижу :) Спасибо за методу :)
        +3
        Вся загвоздка теперь заключается в том, что у нас нет хаков, позволяющих не показывать часть HTML-кода только для IE

        Есть: <!--[if !IE]>-->I'm not IE<!--<![endif]>-->
          +1
          хочу немного подправить, вот так правильнее (без > после [endif])

          <!--[if !IE]>-->I'm not IE<!--<![endif]-->

          иначе условные коментарии псоле вашего варианта ИЕ интерпретирует как !IE
          т.е. в вашем случае

          <!--[if !IE]>--><link rel=«stylesheet» href=«addon.css» /><!--<![endif]>-->
          <!--[if lte IE 7]><link rel=«stylesheet» href=«addon.ie.css» /><![endif]-->

          addon.ie.css не подключится

          а так

          <!--[if !IE]>--><link rel=«stylesheet» href=«addon.css» /><!--<![endif]-->
          <!--[if lte IE 7]><link rel=«stylesheet» href=«addon.ie.css» /><![endif]-->

          будет все ок
          0
          мммм
          нечеловеческое просто спасибо (плюсик не в состоянии), что напомнили об этом способе.
          как раз думал как свои иконки вставить в скрипт. реализовал. удовлетворен :)
            0
            отлично, спасибо!
              0
              я категорически непонимаю почему к такой замечательной статье так мало комментариев и плюсов?
              почему у темы про голубых 65 голосов, про какой-то сервис и ноутбук 106(!) а у реальной темы, которую раскрывают впервые - 22(!!!) голоса.
              врот мне ноги!
              где супер-хабр?
              0
              получается что вы заставляете обладателей обоих браузеров скачивать в одном файле картинки для и тех и других браузеров? это меньшее зло против одного лишнего запроса для ie?
                0
                размер CSS-файла от этого не только не увеличивается, а даже уменьшается, как я указал в статье. При чем здесь "меньшее зло"?
                  0
                  Это был мой скептический вопрос...
                  Первый же скептический вопрос, который каждый уважающий себя оптимизатор задаст: как можно эти картинки выводить только один раз в CSS-файле (внимательный читатель уже заметил, что base64-строка появляется там дважды)?

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

              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

              Самое читаемое