#someblock{
width:expression(((document.documentElement.clientWidth ||?
document.body.clientWidth) < 990) ? '990px' : ?
((document.body.clientWidth > 1280) ? '1280px' : '100%'));
} 

Данная заметка является скорее чем-то вроде self-note, но вдруг будет полезна и вам.

P.S. Не забывайте выносить стили для IE в отдельные файлы с помощью Conditional Comments и будет вам счастье :)

Upd.:

После общения с uggallery в коментариях, было решено оптимизировать скрипт так, чтобы не использовать expressions, из-за которых частенько подвисает браузер. Вот что из этого получилось:

Так как скрипт нужен нам только для IE6, выделяем его с помощью Conditional Comments. Скрипт срабатывает на двух событиях – onload и onresize, что не обязательно:

 <!--[if lte IE 6]>
<script type="text/javascript">
window.attachEvent(‘onload’, mmwidth);
window.attachEvent(‘onresize’, mmwidth);
function mmwidth(){
document.getElementById(‘wrap’).style.width = ?
((document.documentElement.clientWidth || ?
document.body.clientWidth) < 990) ? ‘190px’ :?
((document.body.clientWidth > 1280) ? ‘1000px’ : ‘1000px’);
};
</script>
<![endif]--> 

Все что нужно сделать – это подставить id нужного вам элемента, ну и конечно значения максимальной и минимальной ширины. document.body.clientWidth соответственно тоже меняйте по вкусу.

Скрипт на оригинальность не претендует, да по большому счету от expression и не отличается, просто вынесен из CSS. Знаете как сделать лучше? Нашли ошибку? Коментируйте.

За идею спасибо uggallery, за консультацию copyhold‘у.

Рабочий пример.

< а onclick="return !window.open(this.href)" hrеf="http://www.google.com">

Преимущества этого способа перед обычным open.window(url) в том, что если javascript отключен, то ссылка все равно сработает. Кроме того, ссылка будет проиндексирована поисковиками.

Проверено в FF2, IE6/7, Opera 9.20, Safari/Win.

Поведение браузеров при нажатии Ctrl+Click / Shift+Click:
В IE6 – в обоих случаях новое окно.
В IE7 – в обоих случаях новый таб (подозреваю что зависит от настроек браузера)
В FF2 – неадекват. ctrl+click открывает две вкладки, shift+click вкладку и окно
Opera – в обоих случаях новый таб
Safari/Win – в обоих случаях новое окно

При нажатии колесиком мышки ссылка срабатывает как обычно везде, кроме IE6, естественно.

In general, не стоит принуждать посетителей к чему-либо, предпочтительнее дать посетителю знать какого рода сама ссылка (файл [включая тип], внешняя/окно) с помощью иконок, которые можно легко прикрутить с помощью CSS, на пример вот так, тем самым давая ему возможность выбрать самому, где ее открыть.

PNG корректно поддерживается всеми современными браузерами, кроме до сих пор доминирующего (здесь я всплакнул) Internet Explorer 6. То есть IE6, конечно поддерживает (читай воспроизводит) PNG, но не поддерживает полупрозрачность. А это, на равне с поддержкой 16-ти миллионов цветов, основное преимущество PNG над GIF.

Справедливости ради, стоит заметить что отказаться от GIF
в пользу PNG не получится, так как PNG не поддерживает анимацию,
да и вес иногда оставляет желать лучшего.

Недавно, борясь со сложной версткой, в которой присутствовали иконки с тенями на фоне хитрого градиента я подумал, а почему бы не задействовать PNG? И полез рыть Сеть. Оказалось что есть несколько способов внедрить сей замечательный формат. Я конечно поделюсь ссылками на найденое, но здесь приведу описание самого простого на мой взгляд способа “включения” PNG в дизайн сайта.

Этот способ, в отличии от других не использует javascript, a основан на .htc скрипте, который нужен нам только для IE 6 и IE 5.5 для корректного отображения полупрозрачности. Скрипт никак не повлияет на остальные браузеры.

Все что нужно сделать для того чтобы скрипт заработал, это прописать в css-файле для IE6 вот эту строку:

img {
behavior: url(iepngfix.htc)
}

Если вы не используете отдельный файл стилей для Интернет Эксплорера с помощью Conditional Comments, рекомендую использовать Star HTML хак:

* html img {
behavior: url(iepngfix.htc)
}

Затем положить сам файл iepngfix.htc туда где вам удобно, в пределах домена (скрипт не может быть вызван с другого домена в целях безопасности), и изменить путь к нему в CSS.

Еще один момент. Для корректной работы скрипта нужен однопиксельный прозрачный blank.gif, который можно взять здесь или сделать самому.

Если однопикслельный gif лежит не в той же папке что и .htc скрипт, то необходимо открыть iepngfix.htc, в начале файла найти строку

// This must be a path to a blank image. That's all the configuration you need.
if (typeof blankImg == "undefined") var blankImg = "blank.gif";

И изменить имя файла и путь к нему. Вот и все. Никаких дополнительных настроек и кода не нужно.

Можно спокойно использовать PNG и как картинки и как фоновое изображение в дизайне ваших сайтов.

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

Сайт разработчика скрипта не изобилует обьяснениями, но они почти и не нужны ;) Пользуйтесь на здоровье.

Фактически на любой странице сайта, при нажатии на Ctrl+A, справа от лого виден смайлик. Если на этот смайлик нажать, то открывается список из десяти последних входящих ссылок на его сайт, с кратким описанием.

Симпатичная штучка, которая позволяет хоть на короткое время получить на свой сайт ссылку с сайта, у которого PR7. :) Естественно что это дело кешироваться поисковиками не успевает, так что толка чуть.

А реализовано это очень просто:

<а class="yr" hrеf="#yd" onclick="document.getElеmentById("yr").style.display = document.getElementById("yr").style.display== "none" ? "block" : "none"; return(false);">:-)</a>
<div id="yr" style="display:none;">
Some content</div>

Маахонький скриптик, который при нажатии на ссылку проверяет свойство display у заданного блока, и соответственно меняет его на противоположное. Никаких AJAX’ов, prototype’ов и прочая.

Многие вэб-разработчики уделяют этому аспекту юзабилити не достаточно внимания или совсем не уделяют, не смотря на то что существует достаточно много способов для реализации “подсветки”.

Давайте рассмотрим несколько сравнительно не сложных примеров.

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

Пример HTML кода меню:

<ul>
<li><а hrеf="#" class="home">Home</a></li>
<li><а hrеf="#" class="about">About us</a></li>
<li><а hrеf="#" class="contact">Contact us</a></li>
</ul>

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

#home .home, #about .about, #about .about, #contact .contact{
color:red;  font-weight: bold; /*Стили на ваше усмотрение*/
}

Получается что когда id страницы это “home”, то к элементу меню с классом .home применяются стили описанные выше. И так далее. Просто, правда?

Меня этот способ привлек тем, что в своей работе я использую id для тэга body очень часто и для меня реализация такой подсветки – описание одного стиля.

Второй способ, который я хотел бы показать, использует JS для того чтобы найти на странице все ссылки с заданным класом, сравнивает document.location с аттрибутом href самой ссылки и если они совпадают – добавляет к ней класс, для которого описывается стиль.

Соответственно, нужно создать .js файл в котором будет описана функция:

function highlight(){
var atags=document.getElementsByTagName("a");
for(var i=0;i
if(atags[i].className=="nav"){
if(document.location.href.indexOf(atags[i].href)!=-1){
atags[i].className="active";
}
}
}
}

Приаттачить файл к странице

<script type="text/javascript" srс="/js/highlight.js"></script>

и вызвать функцию при загрузке:

<body onload="highlight()">

В самом меню у всех ссылок должен быть один и тот же класс nav, а стиль описывается для класса .active.

<a class="nav" hrеf="/about/">О проекте</a>

У каждого способа есть преимущества и недостатки. О том как “включить” подсветку навигации в Wordpress можно почитать в давней, но не потерявшей актуальность, статье Юры Артюха “Wordpress и подсветка навигации” или в Кодексе WP по-английски.

А какое решение используете вы?

З.Ы. В попытке предвосхитить комментарии на тему того что у меня, мол, самого подсветки нет, скажу что работаю над этим :)

С помощью swfIR можно легко и быстро масштабировать изображения, вращать их , растягивать по координатам, добавлять настраиваемые тени и рамки. Про кроссбраузерность и валидность кода я даже не упоминаю – для такого рода проектов это уже стало стандартом де-факто.

Настройка и подключение swfIR субьективно проще чем у sIFR, все что нам нужно это:

1. Скачать swfIR с офф.сайта или у меня.

2. Залить на сервер файлы swfir.js и swfir.swf в одну директорию с HTML файлом где swfIR будет использован. При желании можно заливать файлы и в другую папку, просто нужно будет указать в скрипте в какую.

3. Вызвать скрипт на странице:

<head>
<script type="text/javascript" srс="swfir.js"  ></script>
</head>

4. Указать нужные стили и параметры для отображения. Делать это нужно в самом конце HTML-документа подобным образом:

<script type="text/javascript">
window.onload = function()
{
var sir = new swfir();
sir.specify("border-width", "20");
sir.specify("border-color", "fff");
sir.swap("#example img");
}
</script>

Список изменяемых параметров для swfIR:

• border-radius = Number
• border-width = Number
• border-color = CSS Styled Color (i.e. fc600)
• shadow-offset = Number
• shadow-angle = Number
• shadow-alpha = Number between 0 – 100
• shadow-blur-x = Number
• shadow-blur-y = Number
• shadow-strength = Number
• shadow-color = CSS Styled Color (i.e. fc600)
• shadow-quality = Number between 0 – 1
• shadow-inner = Boolean (true or false)
• shadow-knockout = Boolean (true or false)
• shadow-hide = Boolean (true or false)
• rotate = Number between -359 – 359
• overflow = expand-x, expand-y or fit
• link = String (i.e. http://www.swfir.com)
• src = String (path to your swf, if not standard)
• wmode = String (opaque, transparent, etc.)
• elasticity = String (true), Number (pixel-to-em ratio)

Для затравки приведу немного примеров: 1 – эластичная картинка, 2 – повернутая картинка в тексте, 3 – картинка с закругленными уголками, 4 – работа с несколькими картинками.

Не обошлось и без ложки дегтя:

1. Форсированое масштабирование в Opera убивает браузер.
2. alt не сохраняется при замене картинок через swfIR
3. Контекстное меню изображений не работает.

Разработчики клятвенно обещают все исправить, ссылаясь на то что ничто не совершенно :)
В общем и целом, на фоне несомненных достоинств, в глаза бросается некоторая недоработанность проекта, мелкие шероховатости и отсутствие толковой документации, но исходя из того что это первая версия, хочется надеяться что проект будет развиваться и дальше, и все недочеты будут исправлены.

С удовольствием послушаю о вашем опыте работы с swfIR.

Очень часто недобросовестные ведущие некоторых развлекательных сайтов да и некоторые блоггеры, в целях экономии траффика, вместо того чтобы сослаться на понравившиеся картинки или хотя бы пересохранить их у себя на сервере, просто тянут их к себе прямо с вашего сайта, или как говорится “личат”.

Обычно об этом узнают по резко возросшему траффику или по количеству обращений к файлу, которое не соответствует количеству посетителей. А так как траффик отдавать просто так обидно, да и злостных личеров стоит наказать, то проблему надо решать. Есть много способов.

• Можно просто “тупо” переименовать картинки или сменить к ним путь.
• Можно установить софт-антилич от стороннего разработчика, что не всегда просто, не всегда бесплатно и не всегда дает нужные результаты.
• Можно прописать правило в файле .htaccess. Причем это можно сделать как для конкретного сайта, так и для всех, оставив к примеру только несколько разрешенных, таких как Google Images. Сегодня мы рассмотрим как это сделать через .htaccess.

Способ первый. Перекрываем кислород всем.

RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?вашсайт\.ru/ [nc]
RewriteCond %{HTTP_REFERER} !^http://(www\.)?google\.com/ [nc] - доступ Гуглю открыт
RewriteRule .*\.(gif|jpg|png)$ http://вашсайт.ru/images/hotlinkers.jpg [nc]
RewriteRule \.(jpe?g|gif|png)$ - [F] - эту строчку можно подставить вместо последней, чтобы перенаправлять на 403 Forbidden вместо картинки.

Что собственно происходит? Когда к серверу идет запрос на файл с расширением (gif|jpg|png), и этот запрос не с вашего сайта, то запрашиватель отправляется прямиком к картинке http://вашсайт.ru/images/hotlinkers.jpg, которая может быть расположена по вашему усмотрению и на ней может быть все что угодно ;) Такой способ быстро отбивает охоту личить ваши картинки.

Способ второй. Преступление и наказание.

RewriteEngine On
RewriteCond %{HTTP_REFERER} ^http://(www\.)?zloylicher\.net/ [NC,OR]
RewriteCond %{HTTP_REFERER} ^http://(www\.)?esheodin\.com/ [NC]
RewriteRule \.(jpeg|gif|png)$ images/hotlinkers.jpg [R,L]

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

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

Способ третий. Защищаем любые файлы.

- здесь вписать нужные форматы
RewriteEngine on
RewriteCond %{HTTP_REFERER} ^http://(www\.)?zloylicher\.com/ [NC,OR]
RewriteCond %{HTTP_REFERER} ^http://(www\.)?esheodin\.com/ [NC]
RewriteCond %{REQUEST_FILENAME} !hotlinkers.jpg$
RewriteRule .*\.(gif|jpe?g|png|bmp|pdf|zip|rar|mp3|js)$ http://www.mysite.com/images/hotlinkers.jpg [R]

Естественно не забываем прописать правильные названия сайтов и пути к файлам. Вариантов может быть много. Для ленивых есть вот неплохой .htaccess генератор, который все делает сам, вам только нужно ввести домены и путь к картинке для личеров.

Давайте развеем это заблуждение.

И так, для начала нам нужен список. Ведь большинство всех меню это ни что иное как список ссылок.

<ul id="nav">
    <li>
    <а hrеf="#">Percoidei</a>
        <ul>
            <li><а hrеf="#">Remoras</a>
                <ul>
                    <li><а hrеf="#">Echeneis</a></li>
                    <li><а hrеf="#">Phtheirichthys</a></li>
                    <li><а hrеf="#">Remora</a></li>
                    <li><а hrеf="#">Remorina</a></li>
                    <li><а hrеf="#">Rhombochirus</a></li>
                </ul>
            </li>
            <li><а hrеf="#">Tilefishes</a></li>
            <li><а hrеf="#">Bluefishes</a></li>
            <li><а hrеf="#">Tigerfishes</a></li>
            </ul>
        </li>
    <li><а hrеf="#">Anabantoidei</a></li>
</ul>

Теперь у нас есть хорошо структурированый список. Добавим к нему немного стилей:

#nav, #nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

#nav a {
    display: block;
    width: 10em;
}

#nav li {
    float: left;
    width: 10em;
}

Для селектора #nav li необходимо указать ширину, чтобы это корректно отображалось в Опере. Так же не забудьте указать clear:left для блока, который последует за меню, так как мы используем float.

Теперь нам необходимо само “выпадание”. добавляем следующие стили:

#nav li ul {
    position: absolute;
    width: 10em;
    left: -999em;
}

#nav li:hover ul {
    left: auto;
}

Обратите внимание что здесь не используется display:none, для того чтобы сохранить максимальную доступность. Вместо него мы используем left: -999em. Это не обязательно и может быть легко заменено на display:none.

Вы конечно же обратили внимание на то, что у селектора li описан псевдо класс :hover, который конечно же не будет работать в Интернет Эксплорере. Для того, чтобы заставить наше выпадающее меню работать в Интернет Эксплорере мы используем этот маленький скриптик:

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Что делает этот скрипт? Он подменяет псевдо класс :hover для Интернет Эксплорера следующим способом. При событии mouseOver для элемента li скрипт добавляет ему класс sfhover для которого в свою очередь мы тоже должны прописать стиль. При событии mouseOut класс обнуляется.

#nav li.sfhover ul{
    left: auto;
}

Вот по большому счету и все. Теперь меню можно украсить и использовать.

Рабочий пример можно скачать.

По материалам HTML dog

Таблица обычно несет в себе довольно много информации, расположенной и отсортированой на довольно маленькой площади. Так почему бы не сделать чтение этой информации более приятным и легким?

Попытаемся немного освежить вывод информации в таблицах. Ниже приведены три способа, позволяющие быстро создать полосатые таблицы за счет четных и нечетных рядов в таблице. Выбор за вами.

Способ первый. Самый явный.

Так как вариантов рядов у нас всего два, то указывать отдельно каждый не имеет смысла. Мы укажем только нечетные ряды. Соответственно все остальные будут четными ;)

Смотрим простой пример здесь.

Основной недостаток в том, что нам надо явно прописывать в коде класс для рядов.

Способ второй. Динамический.

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

Пример смотрим здесь, в комментариях в коде присутствуют описания.

Чем хорош этот способ?

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

Знаете способ лучше? Пишите в комментариях.

Способ третий. XSLT.

В XSLT все на много проще. Нужно вписать в темплэйт условие, которое будет проверять tr на четность-нечетность и в зависимости от ваших нужд будет либо присваивать атрибут class или же будет выписывать стиль. На пример:

<tr>
<xsl:if test="(position() mod 2 = 1)">
<xsl:attribute name = "style">background:#f4f4f4;</xsl:attribute>
</xsl:if>
<td colspan="5"><strong>Заметки:</strong><xsl:value-of select="text()"/></td>
</tr>

Итак, что же нам нужно? Нужно создать еще одно меню, естественно XHTML/CSS, с картинками, которое будет загружаться в браузер клиента при отсутствии на его машине flash/javascript. Да хотя бы даже заменить флэшевый баннер на обычный, чтобы не терять рекламу. Я подготовил два простых решения, которые помогли мне и надеюсь, помогут вам.

Решение номер раз. SWFObject

Geoff Stearns, главный разработчик компании Schematic, создал и описал у себя на блоге скрипт, который решает эту проблему. И в принципе на этом можно было бы и остановиться, но.

В моем случае, после установки у себя этого скрипта на некоторых из машин, на которых был установлен Internet Explorer 6 и Flash Player 6, без всяких видимых причин происходил сбой и браузер благополучно умирал.

В Файрфоксе, Опере и IE7 ничего такого не происходило и все работало отлично. Но мы посетителями не разбрасываемся и поэтому я решил найти другое решение, так как в комментариях к описанию SWFObject я ничего кроме восторженных отзывов не нашел.

Это решение все таки имеет право на существование, поэтому решайте сами.

Качаем у разработчика, или у меня.

Решение номер два. Adobe Flash Detection Kit.

Как и в прошлый раз, я решил обратиться к первоисточнику, а именно к компании-разработчику Flash, Adobe. И не пожалел об этом. Детектор версии/присутствия flash player’а на машине пользователя, созданный их разработчиками полностью решает нашу проблему.

Скрипт, предоставляемый ими, разделен на три части:

- Action Script detection – SWF файл, встроеный в HTML документ, который определяет версию плеера. Естественно с исходниками.

- Client Side detection – Javascript/HTML блок, вставляющийся в любой документ в котором нужно определить версию плеера. В этом же блоке описывается альтернативный контент, который нужно вывести если не установлен флеш плеер, и контент, который будет отображаться если у посетителя нет ни флеш плеера, ни поддержки javascript’a. Единственное неудобство – если в обоих случаях вы хотите выводить XHTML/CSS меню/контент, то нужно прописывать его дважды. Или же вытаскивать через переменную.

- Express Installation – Тоже самое что и Client Side detection, но автоматически запускает экспресс-инсталяцию плагина при его отсутствии.

Посмотрим как это выглядит:

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Client Detection Example</title>
<script xsrc="AC_OETags.js" mce_src="AC_OETags.js" language="javascript"></script>
<script language="JavaScript" type="text/javascript">
<!--
// --------------------------------------------------
// Globals
// Major version of Flash required
var requiredMajorVersion = 8;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Minor version of Flash required
var requiredRevision = 0;
// --------------------------------------------------
// -->
</script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
// Version check based upon the values entered above in "Globals"
var hasReqestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
// Check to see if the version meets the requirements for playback
if (hasReqestedVersion) {
// if we've detected an acceptable version
// вывод флэша, при условии что пройдены все проверки
AC_FL_RunContent(
"src", "example",
"width", "550",
"height", "200",
"align", "middle",
"id", "detectionExample",
"quality", "high",
"bgcolor", "#FFFFFF",
"name", "detectionExample",
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
'codebase', 'http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab',
"pluginspage", "http://www.adobe.com/go/getflashplayer"
);
} else { // если версия плэера слишком старая или не определена
var alternateContent = 'Сюда вписываем контент, подгружаемый если версия плэера слишком старая или не определена <BR/>'
+ 'И сюда. '
+ '<а hrеf=http://www.adobe.com/go/getflash/>Get Flash</a>';
document.write(alternateContent); // insert non-flash content
}
// -->
</script>
<noscript>
А сюда вписываем контент, который будет выводиться при отсутствии и флеша и поддержки javascript.
This content requires the Adobe Flash Player and a browser with JavaScript enabled.
<a hrеf="http://www.adobe.com/go/getflash/" mce_href="http://www.adobe.com/go/getflash/" >Get Flash</a>
</noscript>
</body>
</html>

Скачать можно на сайте Adobe или у меня.

* Имя файла ролика в скрипте вставляется без расширения .swf.

* Скрипт сохраняет валидность кода.

Не забываем правильно указать пути к .js файлам и включать фантазию иногда.

Другие решения приветствуются, так что если у вас есть что сказать – пишите в комментарии. Надеюсь что статья вам помогла.

P.S. Этот скрипт адаптирован к настройкам безопасности в Интернет Эксплорере и выводит флэш без рамочки. Об этой проблеме я писал ранее.