Принимаю эстафету от Акеллы. Полный список тех кому нечего делать советчиков.

Tags: tip, web

(60 комментариев | Оставить комментарий)

Вот такое простое правило wbr { display: inline-block } заставляет Opera и Safari 2/3 понимать wbr. Пример. Не знаю почему.

Широко рекомендуемое решение wbr { content: "\200B" } или wbr:after { content: "\200B" } не работает во втором Сафари.

Tags: tip, web

(3 комментария | Оставить комментарий)

Чтобы перекрыть SELECT в MSIE-5.5+ при показе скрытого слоя используется IFRAME, который подкладывается под показываемый слой. При этом IFRAME в MSIE имеет белый фон. Чтобы сделать фон у IFRAME прозрачным используется атрибут allowtransparency и генерация контента IFRAME скриптом. Пример.

Музыка: Alex Gunia and Peace - Jazz Is Dead Since 69 - Hipsters Delight
Tags: tip, web

(6 комментариев | Оставить комментарий)

Задача: есть контейнер в котором лежит абсолютно позиционированная картинка. Надо чтобы ширина этого контейнера была не больше ширины картинки (меньше может быть при уменьшении размера окна). Quirks mode, потомучтобагфиксинг.

Решение в лоб (width: expression(this.offsetWidth > 620 ? '620px' : 'auto')) не работает, MSIE6 тупо подвисает пытаясь выполнить. В итоге потратил два часа на пыхтение и придумал такое решение (width: expression(this.nextSibling.offsetWidth > 620 ? '620px' : 'auto')).

Т.е. берём offsetWidth не у того элемента, которому задаём ширину, а у следующего, который для нас является линейкой.

Tags: tip, web

(5 комментариев | Оставить комментарий)

Сегодня задумался, зачем я указываю у элемента link атрибут type (<link rel="stylesheet" type="text/css" href="style.css"/>, <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>).

Не знаю ни одного браузера, который использует style sheets и не понимает CSS. И не знаю ни одного браузера, который показывает shortcut icon, но не понимает ICO.

К тому же, думаю, что браузеры вообще не смотрят на type, а всё равно делают запрос для определения типа листа стилей/иконки.

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

Tags: tip, web

(11 комментариев | Оставить комментарий)

Задача: сделать так, чтобы шапка и подвал были прибиты к верху/низу окна, а содержимое страницы прокручивалось между ними (эмуляция фреймов).

Вариант её решения.

MSIE6- не понимает position: fixed и для него используется альтернативное решение, работающее только в Quirks mode.

Может ли кто-то из сторонников перевода MSIE6 в Standard mode указать, что нужно дописать в CSS, чтобы это решение в нём заработало?

Tags: ?, tip, web

(9 комментариев | Оставить комментарий)

Есть такая штука, как «макетная сетка», направляющие линиии в дизайне сайта, к которым привязывается расположение элементов и их размеры. В тех работах, что я делаю сейчас макетная сетка есть всегда, но при этом у меня в вёрстке она виртуальная, не задаётся явно таблицами. Чтобы видеть, выровнены ли элементы по сетке я написал скрипт, который, будучи подключеным на страницу, рисует сетку:

function _columns(a)
{
    document.write('<style type="text/css"> .column_ { position: fixed; ' +
            'z-index: 999; top: 0; display: block; height: 100%;' +
            'border-right: 1px dashed #4affff; }' +
            '* html .column_ {position: absolute; } </style>');

    for (var i = 0, l = a.length; i < l; i++)
        document.write('<span class="column_" style="left: ' + a[i] + '%"></span>');
}

_columns([2, 10, 18, 26, 34, 42, 50, 58, 66, 74, 82, 90, 98]);

При вызове скрипта в массиве задаются проценты, где рисовать линию сетки (2%, 10%, etc).

Вот пример.

Есть только одна проблема: в MSIE6-, который не понимает position: fixed, сетка рисуется до конца окна, а не до конца документа, если документ больше, чем окно, то низ не покрывается сеткой. В стандартных браузерах благодаря position: fixed всё нормально.

Буду призателен, если кто-то предложит решение для MSIE6-.

Музыка: Soft Machine - Slightly All The Time
Tags: tip, web

(15 комментариев | Оставить комментарий)

На новом сайте для разработчиков Dev.Opera появилась статья с большим количеством советов про то, как заставить JavaScript выполняться быстрее.

via Ilya Birman

Узнал новое из этой статьи. Надо выписать тезисы и повесить на стенку.

Tags: link, tip, web

(8 комментариев | Оставить комментарий)

Мне удалось улучшить «#js-метод»

Вместо:

<script type="text/javascript">document.body.id = "js"</script>

используется:

<script type="text/javascript">document.documentElement.id = "js"</script>

Т.е. присваиваем id = "js" не <body>, а <html>.

Какие выгоды это даёт:

• Не надо вставлять <script> в самое начало <body>, можно вынести эту строчку во внешний файл, который подключается в <head>.

• Поскольку присваиваем id для <html>, а не для <body>, то нет вероятности, что перекроется id заданый уже для <body>. При этом по DTD для <html> нельзя задать id, т.ч. нет вероятности, что перетрётся id заданый в html (мы ведь пишем валидный код, правда?).

• Работает даже при Content-Type application/xml+xhtml.

Минусы пока не найдёны.

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

Tags: +1, tip, web

(8 комментариев | Оставить комментарий)

The most reliable way to target Internet Explorer or specific versions thereof is to use IE conditional comments. If you absolutely need in-CSS hacks, the new *:first-child+html {} hack will select IE7 and possibly future versions if the bug isn't fixed. It relies on the fact that IE seems to treat doctypes and comments as elements in the CSS selectors.

Взято из комментариев в блоге

Tags: tip, web

(3 комментария | Оставить комментарий)

MSIE6- полупрозрачные PNG не поддерживает, это всем известно. Как обойти это с помощью AlphaImageLoader тоже всем известно. Но обычно описывается или решение в лоб, когда для каждого PNG-24 указывается в стиле AlphaImageLoader с конкретным URL к картинке, или громоздкое решение со скриптом.

Tags: tip, web

(87 комментариев | Оставить комментарий)

Нашёл (и сейчас активно использую) элегантное решение написания страниц на которых используется JavaScript, чтобы они хорошо работали при отключеном скрипте (например, скрыть элементы, которые работают только со скриптами, или собрать страницу из нескольких параграфов в страницу с табами). Для этого в самое начало страницы после body добавляем такой скрипт:

<script type="text/javascript">document.body.id="js"</script>

После этого можно спокойно использовать селекторы с #js в начале.

Вот простенький пример. При отключеных скриптах (например, в Опере F12 -> j, F5) и в MSIE6- (буду я ещё напрягаться, чтобы пример в нём работал, ага :) вид страницы один, а при включеных скриптах в современном браузере вид другой.

Несомненным плюсом такого подхода является отсутствие прыжков при отображении страницы, ибо если сначала загрузить безскриптовую версию, а потом делать табы и скрывать их контент (например), то сначала отобразится вся страница, а потом соберётся всё вместе. При загруженой машине/медленом канале/тормозном сервере/большой странице (нужное подчеркнуть) это будет видно. При использовании #js всё соберётся при рендеринге незаметно для пользователя.

Tags: tip, web

(26 комментариев | Оставить комментарий)

Как увеличить/уменьшить в Опере только текст, не прибегая к полному масштабированию страницы.

Preferences - Advanced - Shortcuts - Keyboard setup - Edit.

В разделе Application создать хоткей "= ctrl". Присвоить ему действие (все в одну строку!):

Go to page, "javascript:(function(){var shoustfoo = document.getElementsByTagName('*'); for( var i = shoustfoo.length-1, j; j = shoustfoo[i]; i-- ) { var shoustFontSizeA = parseInt(window.getComputedStyle(j,null).fontSize); var shoustFontSizeB = 2; void(j.style.fontSize = parseInt(shoustFontSizeA+shoustFontSizeB)+'px')}})()" ,1

В разделе Application редактировать хоткей "- ctrl" (можно воспользоваться поиском и написать "- ctrl" в поле поиска). Присвоить ему действие (все в одну строку!):

Go to page, "javascript:(function(){var shoustfoo = document.getElementsByTagName('*'); for( var i = shoustfoo.length-1, j; j = shoustfoo[i]; i-- ) { var shoustFontSizeA = parseInt(window.getComputedStyle(j,null).fontSize); var shoustFontSizeB = -2; void(j.style.fontSize = parseInt(shoustFontSizeA+shoustFontSizeB)+'px')}})()" ,1

Баловство, конечно, и до функциональности FF не дотягивает, но всё же.

Вычитал на LOR'е. Плодотворное обсуждение получилось, не так, как обычно. Смею порекомендовать к прочтению.

Tags: software, tip, web

(Оставить комментарий)

Скрипт, который позволяет перекрывать select div'ом в IE

http://www.aplus.co.yu/wch/intro/

Полезная штука.

Tags: link, tip, web

(1 комментарий | Оставить комментарий)

Дописал предыдущий вариант, чтобы вместо image-N в альт попадало имя файла.

replace-empty-alt-with-file-name.js

window.addEventListener("load", replaceEmptyAltWithFileName, true);

function replaceEmptyAltWithFileName()
{
    var images=document.getElementsByTagName("img");

    for (var i=0, l=images.length; i<l; i++)
    {
        var img=images[i];
        if (img.alt=="")
            img.alt=img.src.substring(img.src.lastIndexOf('/')+1);
    }
}

А ведь действительно удобно, вот страница для тестирования:
http://www.livejournal.com/users/cynovg/12351.html

Tags: software, tip, web

(16 комментариев | Оставить комментарий)

Есть такие редиски люди, что при помещении картинки на сайт (в LJ в частности) прописывают пустой alt. Если ходить с отключеными картинками, то очень неудобно пытаться загрузить эту картинку on demand. svetkina в очередной раз пожаловалась на то, что не может просто загрузить картинку и приходится смотреть её адрес в html. И тут я вспомнил, что недавно игрался с user javascript в опере.

Быстро написал скриптик который пустой alt у картинок заменяет на image-N:

replace-empty-alt-with-image-number.js

window.addEventListener("load", replaceEmptyAltWithImageNumber, true);

function replaceEmptyAltWithImageNumber()
{
	var images=document.getElementsByTagName("img");

	for (var i=0, l=images.length; i<l; i++)
		if (images[i].alt=="")
			images[i].alt="image-"+i;
}

Установка: создать пустую директорию, создать в ней этот файл и в Preferences -> Advanced -> Content -> JavaScript options... -> My JavaScript files указать эту директорию.

Музыка: Сейчас Bouree буду разучивать
Tags: software, tip, web

(12 комментариев | Оставить комментарий)

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

CSS разделён на две части: позиционирование и оформление. Вертикальные полоски сделаны бордюрами.

http://vitaly.harisov.name/example/simple-tree/

Музыка: Woodstock - Jefferson Airplane - White Rabbit
Tags: tip, web

(4 комментария | Оставить комментарий)

Реализовано на xhtml, CSS2, объектный javascript. Масштабируемо, не зависит от размера шрифта.

CSS разделён на две части: позиционирование и оформление. В примере два вида оформления: idea и swing. При создании объекта дерева указывается его skin, если соответствующий ему stylesheet ещё не был загружен, то он загружается. Деревьев на странице может быть сколько угодно.

Начал делать динамическую загрузку всего дерева или его части с сервера (не ajax, с сервера отдавались вызовы методов дерева), но не дописал и из примера этот код убрал.

http://vitaly.harisov.name/example/tree/

Музыка: Woodstock - Janis Joplin - Ball & Chain
Tags: tip, web

(3 комментария | Оставить комментарий)

Музыка: Bonfire / Bonfire Goes Bananas /The Sage Of The Running Nose
Tags: tip, web

(Оставить комментарий)

Музыка: Nils Petter Molvaer - Live from Technics-Jazzport Festival
Tags: tip, web

(1 комментарий | Оставить комментарий)