В этой статье я расскажу вам как сделать RSS иконку любого цвета, используя всего одну картинку.

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

Пару лет назад я занимался проблемой data URL в Internet Explorer, добился определённых результатов, но то, что получилось, использовать было невозможно. Data URL (иногда его ещё называют «протокол data:») — возможность вставлять ресурсы (графику, CSS, JavaScript и так далее) в HTML код.


Подробнее о data URL можно узнать из свежей статьи на «Хабре» «Картинки в теле страницы с помощью data:URL». Хотелось только её дополнить двумя замечаниями: IE8b1 поддерживает data URL длиной не более 32Кб, в современных версиях других браузеров ограничений увидеть не удалось, Safari/Opera/FF показали изображения размером около 700Кб.


Теперь амбула.


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


Результат — готовый код на PHP из двух функций. Первую функцию («bolk_data_uri_header») нужно вызвать в самом начале перед выводом любого вашего кода, вторую («bolk_data_uri») собственно для включения картинки в код.


Надеюсь на примерах всё понятно:

bolk_data_uri_header();
bolk_data_uri('myjpeg.jpg');
bolk_data_uri('ourpng.png', 'border: 2px dotted red');

Код самой библиотеки:

function bolk_data_uri_header() 
{ 
    echo "<!--\n" 
        ."Content-Type: multipart/related; boundary=\"=_NextPart_01C6A9B1.539AB070\"\n\n" 
        ."--=_NextPart_01C6A9B1.539AB070\n" 
        ."Content-Transfer-Encoding: base64\n" 
        ."Content-Type: text/html\n" 
        ."-->\n\n"; 

} 

function bolk_data_uri($file, $style = '') 
{ 
    if (!( file_exists($file) && ($data = @getimagesize($file)) )) return false; 

    $name = uniqid('', true); 

    if ($style <> '') $style = ' style="'.htmlspecialchars($style).'"'; 
    $mime = strpos($_SERVER['HTTP_USER_AGENT'], 'Gecko') ? " type='{$data['mime']}" : '';

    echo "<!--\n" 
        ."--=_NextPart_01C6A9B1.539AB070\n" 
        ."Content-Location: {$name}\n" 
        ."Content-Transfer-Encoding: base64\n" 
        ."Content-Type: {$data['mime']}; -->\n" 
        ."<object data='data:{$data['mime']};base64,\n\n"; 

    echo base64_encode(file_get_contents($file)); 

    echo "' {$data[3]}{$style}{$mime}'><img " 
        ."src='mhtml:http://{$_SERVER['HTTP_HOST']}"
        ."{$_SERVER['REQUEST_URI']}!{$name}' {$data[3]}{$style} /></object>\n\n" 
        ."<!--\n" 
        ."--=_NextPart_01C6A9B1.539AB070-->"; 

    return true; 
}

Секрет в совмещении данных, чтобы IE, обратившись к странице по протоколу mhtml нашёл нужный кусор, «спрятанный» внутри тега, а остальные браузеры увидели бы картинку через data URL.


Код тестировался под Opera 9.50b, FF 2.0.0.13, Safari 3.1 и IE6. Предложения и результаты испытаний — прошу в комментарии.


Оригинал записи опубликован в моём блоге.

Допустим у нас стоит задача — сделать меню, состоящее из текстовых заголовков и полупрозрачной картинки, становящейся непрозрачной при наведении курсора на пункт меню.
Делается это очень просто — поместим в таблицу картинку со ссылкой, и текст рядом с ней в ячейку TH:


И оживляем всё это при помощи CSS:

	Python

Всем доброго времени суток.

Перевод заметки "40 Tips for optimizing your php code". Автор — Reinhold Weber.

1. Если метод может быть статическим, объявляйте его статическим.
2. echo быстрее, чем print.
3. Передавайте в echo несколько параметров, вместо того, чтобы использовать конкатенацию строк.
4. Устанавливайте максимальное количество проходов ваших циклов for до цикла, а не во время его выполнения.
5. Удаляйте свои переменные для освобождения памяти, тем более, если это большие массивы.
6. Остерегайтесь магических методов, таких как __set, __get, __autoload.
7. require_once дорого обходится.
8. Указывайте полные пути в конструкциях include/require, меньше времени будет тратится на поиск файла.
9. Если вам необходимо определить время, когда скрипт был запущен, используйте $_SERVER[’REQUEST_TIME’] вместо time().
10. Старайтесь использовать strncasecmp, strpbrk и stripos вместо регулярных выражений.

Отчего-то всегда хотел сделать свой сервис для загрузки файлов. Всевозможные slil/zalil не устраивали своей скоростью. ifolder — обилием рекламы. Пользовался не очень популярным (от этого он ни чуть хуже не становился) сервисом up.spbland.ru. Но это как-то не правильно. И тут я решил написать свой сервис. Не буду вдаваться в подробности и рутину, только концепция.

Примечание: ниже перевод свежей презентации от Yahoo! «High Performance Web Pages» с новыми советами по оптимизации. Yahoo известна своими статьями на тему оптимизации клиентской части и является мировым лидером в этой области. Однако, с уходом Julien Lecomte (ведущего специалиста отдела оптимизации, автора YUI Compressor) в Apple ситуация может измениться. Посмотрим.

Мои комментарии далее курсивом. Я постарался, по возможности, расставить ссылки на упоминаемые в презентации инструменты и связанные статьи.

Этот медлительный веб

• Мы используем Интернет для решения наших повседневных задач
• Мы все хотим испытывать при этом комфорт
• Мы не выносим медленные страницы (хотя есть варианты)
• На 500 мс медленнее = 20% уменьшение трафика (Google)
• На 100 мс медленнее = 1% уменьшение продаж (Amazon)

Разговор на сегодня

• Как улучшить производительность веб-страниц
• Фокус на клиентской части
• 14 отличных советов для быстрых страниц
• … и еще 20!

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

Эта инструкция научит Вас, как создавать очень красивые и удобные текстовые кнопки (с эффектом нажатия), используя CSS.