min-width и max-width для IE6 одновременно

Используя выражения в CSS-файле для Internet Explorer 6, можно добиться поведения, которое все нормальные браузеры уже давно умеют, а именно min-width и max-width свойства для блока:

#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‘у.

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

Забыть о target

Гениальный в своей простоте способ заставить ссылку открыться в новом табе/окне, не используя deprecated атрибут target:

< а 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 в дизайн сайта

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

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

Переключатель видимости блока в JS

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

Фактически на любой странице сайта, при нажатии на 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’ов и прочая.

Подсветка навигации

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

Navigation highlight

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

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

swfIR – Магические картинки

swfIRВ последнее время утилиты “расширяющие возможности” HTML с помощью флэша и Javascript становятся весьма популярны. Например sIFR, о котором в Рунете уже не мало сказано и написано. sIFR “расширяет” возможности работы с текстом и делает это вполне успешно, а вот swfIR наоборот, работает с изображениями.

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

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

Антилич на картинки через .htaccess

htaccess

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

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

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

Continue reading

Выпадающее меню

Пример выпадающего менюСоздание многоуровнего выпадающего меню с помощью CSS, пары строчек Javascript, работающего корректно в Файрфоксе, Опере, Интернет Эксплорере и Сафари кажется вам непосильной задачей? Да ничего подобного!

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

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

Continue reading

Полосатые таблицы

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

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

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

Continue reading

Флэш детектор или Не бросим юзера в трудную минуту

Adobe flash detectionСтолкнулся я недавно по работе с такой темой – есть некая менюшка, сделаная на флэше, и вставленая в html-документ. Все просто, но есть один момент. Заказчик ну никак не желает терять ее функционал, вне зависимости от того, есть ли на машине клиента флэш/javascript или нет. И он в принципе прав, не смотря на то что делать меню на флэше – изначально не верный подход.

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