Вторая версия IE PNG Fix

Пятница, 29 августа 2008 15:12

Вышла вторая версия всем известного IE PNG Fix. Правда, это пока еще альфа версия, но я думаю что уже сейчас скрипт можно смело использовать в верстке.

Как известно, в первой версии PNG Fix не было возможности повторения и позиционирования полупрозрачных PNG, использующихся в качестве фона. Фон все так же устанавливался через фильтр, упростилось лишь его применение. Вторая версия свободна от этого недостатка и это ее главное преимущество! Работает в IE 5.5 и 6.

Официальная страничка IE PNG Fix: http://www.twinhelix.com.

Скачать можно по этой ссылке: http://www.twinhelix.com/test/iepngfix.zip.

Замечу, что для позиционироваия и повторения фоновых PNG надо обязательно подключить скрипт iepngfix_tilebg.js в заголовке <head> страницы. Файл скрипта находится в архиве.

Обзор
Нет комментариев
теги ,

Выделяем авторские комментарии

Четверг, 28 августа 2008 9:47

Недавно задался таким вопросом: а как же можно выделить комментарии автора в блоге, чтобы они были видны на фоне остальных комментариев, оставленных посетителями? Естественно, первым делом я полез искать плагин для WordPress, правда, вот найти такого, который бы сделал все сам, мне найти не удалось. Все-таки пришлось лезть в код.

Итак, для начала качаем плагин Author Highlight. Открываем файл из архива и находим следующий кусок кода:

$author_highlight = array
  (
    "class_name_highlight" => "highlighted",
    "class_name_else" => "",
    "email" => "you@yourdomain.com",
    "author" => "Your Name"
  );

Заменяем “you@yourdomain.com” и  “Your name” соответственно на e-mail и имя автора. “highlighted” - это класс, которым будут помечаться авторские комментарии, то есть стили нужно задавать для него.

Далее открываем файл comments.php. Нам нужно вставить в код строчку: <?php author_highlight(); ?>. Эта строчка будет выводить имя класса, то есть в нашем случае highlighted, если комментарий принадлежит автору. Допустим, у нас есть следующий код:

<li id="comment-<?php comment_ID() ?>">

После изменения наш код будет выглядеть так:

<li class="<?php author_highlight(); ?>" id="comment-<?php comment_ID() ?>">

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

WordPress
2 коммент.
теги ,

CSS спрайты

Суббота, 26 июля 2008 9:21

Я думаю многие слышали о CSS спрайтах, но возможно не все знают что это такое и как их использовать. CSS спрайты представляют собой несколько различных картинок объединенных в одно целое изображение. Это изображение устанавливается как фоновое (background) для div-блока, или любого другого элемента, с заданной высотой и шириной. С помощью параметра background-position мы позиционируем наше изображение так, чтобы оно выглядело как картинка. Чтобы стало понятнее приведу пример. Допустим у нас есть картинка-ссылка и нам нужно, чтобы при наведении указателем мыши на эту картинку она изменялась. Нет проблем.
  А вот код для того что мы сделали:

HTML

<a href="http://dimonblog.ru” class=”sprite-demo“> </a>

CSS

1
2
3
4
5
6
7

a.sprite-demo {
	display:block;
	width:100px;
	height:30px;
	background:url(http://dimonblog.ru/wp-content/img/css-sprite.png) left top;
	}
a.sprite-demo:hover {background-position:left 30px;}

Ниже представлена картинка, с помощью которой мы это сделали. Заметьте - всего одна.

CSS-спрайты

Конечно, мы могли бы добиться подобного эффекта используя две отдельные картинки. Но, используя CSS спрайты мы уменьшаем количество запросов браузера к веб-серверу, тем самым уменьшая время загрузки страницы. Одновременно снижается нагрузка на сервер, что важно при высокой посещаемости сайта. В добавок к этому мы устранили задержку перед отображением второй картинки, т.к. браузеру уже не надо загружать второе изображение после наведения указателем мыши на картинку - оно уже есть. И наконец, используя CSS-спрайты мы уменьшаем общий размер фалов с графикой. Например, размер картинки, которую я использовал - 2098 байт. Если использовать 2 отдельные картинки, то их общий размер составит 2410 байт. К тому же, я советую все мелкую графику на сайте (и скругляющие уголки сюда же) делать с помощью CSS-спрайтов. Причем по возможности все в одном файле. К примеру я делаю вот так:

Спрайты

Как правило размер такой картинки не очень большой. У меня обычно выходит в среднем 1.5 Кб. К тому же такую картинку можно встроить в сам файл стилей через data:url, благодаря чему, у пользователей нормальных браузеров будет отображаться вся мелкая графика, в том числе и закругленные уголки, даже если загрузка графики отключена в настройках браузера. А так как IE не поддерживает data:url для него можно отдельно прописать загрузку картинки с сервера. Недостатком CSS-спрайтов я считаю то, что их не очень удобно использовать и необходимо подготавливать изображения на что тратится время.

CSS
22 коммент.
теги ,

IE 6 и select

Вторник, 15 июля 2008 1:09

Сегодня столкнулся с такой проблемой. Необходимо было вывести слой поверх выпадающего списка (select). Разумеется, в нормальных браузерах все отображалось так как нужно. Но вот IE6 отличился и доказал, что у него свой взгляд на правильное отображение страницы.

Оказывается что select в IE6 не только плохо воспринимает CSS стили, но еще и ни чем не перекрывается и отображается поверх всех слоев! Не помогает даже z-index.

К счастью, решение проблемы нашлось довольно быстро. Для того чтобы скрыть select надо поверх него вывести iframe. Вот как это делается:

HTML

<select>
  <option>123</option>
</select>
<div id="layer">
  <iframe></iframe>
  <p>Слой с абсолютным позиционированием</p>
</div>

CSS

#layer {
  position:relative;
  top:10px; left:20px;
  width:150px; height:100px;
}
#layer iframe {
  position:absolute;
  width:150px; height:100px;
  border:none;
  z-index:-1;
  _filter:mask();
}
select { width:100px; }

filter:mask() позволяет скрыть iframe в IE. Такого же эффекта можно добиться с помощью filter:alpha(opacity=0). Для того чтобы iframe не перекрывал текст, ссылки и прочие элементы, мы задаем для него отрицательный z-index:-1. Можно также скрыть iframe для остальных браузеров через условные комментарии (для надежности).

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

CSS
5 коммент.
теги , ,
Новые записи »