CSS: @import

Оказывается, в CSS можно делать include. Синтаксис вот такой:

@import url("filename") [type]

Типы бывают:

• all - Все типы. Это значение используется по умолчанию.
• aural - Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
• braille - Устройства, основанные на системе Брайля, которые предназначены для слепых людей.
• handheld - Наладонные компьютеры и аналогичные им аппараты.
• print - Печатающие устройства вроде принтера.
• projection - Проектор.
• screen - Экран монитора.
• tv - Телевизор.

Часто ли вы видите CSS-вёрстку на экране телевизора? Жалко, что там их не применяют. Можно бы было вырезать рекламные паузы через ADBlock.

С мест сообщают, что мобильные браузеры не понимают @import, если путь файлу не обрамлён url. Хотя по стандарту:

Работающий вариант:

@import url("filename") [type]

И не работающий:

@import "filename" [type]

эквивалентны.

И ещё – IE 7 не поддерживает типы. Более того, если указать тип, то он перестаёт подгружать и сам файл.

IE isn’t focusing anchor link

В IE обнаружен загадочный баг.

Если ASP.Net страница:

• делает (например, по нажатию на страницу) redirect на другую через anchor (т.е. otherPage.aspx#anchor)
• в IIS настроен ISAPI_Rewrite (локально повторить не удалось)
• браузер – IE (повторяется в т.ч. в 9-ом)

То может случится так, что anchor “отбросится” и страниця загрузится как otherPage.aspx.

Выловить и перенастроить практически невозможно.

Единственный выход – вместо redirect вставлять в literal на странице “<script language=’javascript’>location.href = ‘otherPage.aspx#anchor’;</script>”. Можно дополнительно поставить проверку – делать такой redirect только если браузер ie. Название браузера искать в Request.Browser.Type.

О document.ready заботаться не стоит – redirect он и есть redirect.

Tool: Development tool

• Firefox - Firebug - F12
• Chrome - Included - F12
• Safari - Included - F12
• Internet Explorer - Included - F12
• Opera - Dragonfly (now is included) - Ctrl+Shift+I (!!!)

 I don't know why.

Script: Play mp3 at background with JavaScript

Как сделать фоновую мелодию для веб-страницы из mp3-файла?

Для начала - убедиться, что она нужна. Я, например, считаю, что единственное место во всём Вебе, где уместны фоновые мелодии - это игры. Пожалуйста, ставьте такие скрипты только в них.

Так как стандарт очень долго хранил молчание насчёт фоновых мелодий, каждый браузер реализовывал его по-своему

Путаница тут страшная. <embed>, который часто советуют, например, требует от Firefox подгружать плагин. <audio> толком не поддерживается даже в IE. Да и вообще, ещё 2 года назад разные браузеры поддерживали разные форматы и табличка выглядела приблизительно так:

Browser	Ogg	MP3	WAV
FireFox 3.6+	✓		✓
Safari 5+		✓	✓
Chrome 6	✓	✓
Opera 10.5+	✓		✓
Internet Explorer 9 (beta)		✓	✓

Так что используйте JPlayer. Но иногда и он обваливается с ошибкой, что b.test - не является функцией :(.

Мне jPlayer не помог. Пришлось родить кроссплатформенное решение:

<bgsound src="sound/plan.mp3" loop="1">
<object id="opera_player1" data="sound/plan.mp3" type="application/x-mplayer2" width="0" height="0">
 <param name="filename" value="sound/plan.mp3">
 <param name="autostart" value="1">
 <param name="autoplay" value="1">
 <param name="hidden" value="1">
 <param name="playcount" value="9999">
</object>
<audio src="sound/plan.mp3" autoplay="autoplay" loop="loop">
<object id="webkit_player" data="sound/plan.mp3" type="application/x-mplayer2" width="0" height="0">
 <param name="filename" value="sound/plan.mp3">
 <param name="autostart" value="1">
 <param name="autoplay" value="1">
 <param name="hidden" value="1">>
</object>
</audio>

В IE я это, впрочем, пока не тестировал.

Первый блок - исключительно для Opera. Во втором не забываем loop="loop" - Chrome игнорирует Playcount.

Важно помнить, что object в Firefox не понимает loop. Так что просто ставьте большой playcount. А вот webkit-браузеры понимают его слишком хорошо и будут играть мелодию, даже когда вы покините сайт. Поэтому не забудьте убрать param loop во втором блоке.

И никогда не пытайтесь сгенерировать этот код через JavaScript. Такая реализация страшно тормозит даже на локальном компьютере.

А ещё не забывайте, что браузеры - умные создания и если поместить эти object'ы в скрытый блок (не важно, через, display: none; или visibility: hidden), Firefox их проигрывать не будет.

Причём мы говорим, разумеется, о desktop-ных браузерах. Про мобильные даже вспоминать страшно.

Script: Popup по центру экрана

Как поставить кнопки Facebook/Twitter/Google со своими иконками? Берём и ставим a с соответствующими href:

Twitter:
https://twitter.com/intent/tweet?url={PageUrl}&text={PageUrl}

Показываеть Twitter как blank - не надо. Если вставить сакральную мантру:

!function(d, s, id)
< script type="text/javascript" >
{ 
  var js, fjs = d.getElementsByTagName(s)[0];
  if (!d.getElementById(id))
  {
    js = d.createElement(s);
    js.id = id;
    js.src = "//platform.twitter.com/widgets.js";
    fjs.parentNode.insertBefore(js, fjs); 
 } 
} (document, "script", "twitter-wjs");
< /script >
< script type="text/javascript" src="//platform.twitter.com/widgets.js" >< /script >

 то он сам всё найдёт и откроет. Попытаешься повесить скрипт - начнёт показывать 2 окна.

Facebook:
http://www.facebook.com/sharer.php?t={PageTitle}&u={PageUrl}

По необъяснимой причине он не видит PageTitle, если запускать с локального сервера.

Google Share (не путать с Google +1!):
https://plus.google.com/share?url={PageUrl}

Pinterest:
http://pinterest.com/pin/create/button/?url={PageUrl}&media={PageImage}&description={PageTitle}

А открывать это надо через _blank и по центру экрана:

function PopupCenter(pageURL, title, w, h) {
   var left = (screen.width / 2) - (w / 2);
   var top = (screen.height / 2) - (h / 2);
   var targetWin = window.open(pageURL, title, 'menubar=no, toolbar=no, resizable=yes, scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
} 

Функцию для открывания окна взял у Нимы.

И ещё - если во втором параметре window.open будет пробел, Internet Explorer его не откроет. Такие дела.

JavaScript: быстрые циклы

length в JavaScript - штука медленная. Это очень хорошо видно по скорости выполнения циклов. Вовремя заменив for на while, можно получить выигрыш в производительности в 7 раз.

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

var digitRegEx=/^-?\d+([,\.]\d+)?$/g;
 
function arithmeticMean() {
  var len = arguments.length, i = len, finalSum = 0;
  if (!i)
    return 0;
  while (i--)
    if (digitRegEx.test(arguments[i]))
      finalSum += parseFloat(arguments[i]);
  return (len) ? finalSum / len : 0;
}

Кстати, как народная, так и более-менее проектная реализация всяких дополнительных функций для IE грешат for по lenght и ужасающе медленным trim(). Если руки дойдут - надо бу исправить.

JavaScript: concat для getElementsByTagName

Иногда гибкость JavaScript немного обманывает. Например, все знают, что getElementsByTagName возвращает вроде бы массив. И если нам нужно получить все input и textarea, то мы посмотрим в справке, что есть фунция concat и - склеим!

Увы, нас ждёт разочарование. То, что приходит - это набор, но не совсем массив. Его надо преобразовывать в Array и уже потом склеивать.

Как склеивать? Обычно рекомендуют Array.prototype.slice.call(document.getElementsByTagName('input'), 0) или немыслимое [].slice.call(document.getElementsByTagName('input'), 0). Это работает во всех браузерах, кроме... IE. IE считает, что COM-объект HTMLCollection вовсе не обзательно будет массивом. И бросает ошибку "JScript object expected.".

Поэтому мы расширим функцию из предыдущего примера ещё одной полезной тулзой.

function toArray(obj) {
    var array = [];
    for (var i = 0; obj.length && i < obj.length; i++)
      array[i] = obj[i];
    return array;
  }

  function setReadOnly(){
    var item = document.getElementsByTagName('input');
    var el, els = toArray(document.getElementsByTagName('input')).concat(
                      toArray(document.getElementsByTagName('textarea')));
   for(el in els)
     if(els[el].readOnly && typeof(els[el].className) != "undefined")
       els[el].className += ' readonly';
   }

JavaScript: Стиль для read-only

Как изменить стиль для input'ов, для которых выставлено readonly="readonly"? По идее, в css:

input[readonly="readonly"]
{
 color:  #707070;
 cursor: default; 
}
textarea[readonly="readonly"]
{
 color:  #707070;
 cursor: default; 
}

Это работает в Firefox, Opera, Chrome и, наверное, Safari. А вот в IE - нет :(.

Поэтому напишем код, который цепляется к OnLoad и будет работать только в IE (другим браузерам window.attachEvent и className неизвестны).

function setReadOnly(){
  var el, els = document.getElementsByTagName('input');
  for (el in els)
    if (els[el].readOnly && typeof(els[el].className) != "undefined")
      els[el].className += ' readonly';
}
if (window.attachEvent) 
  window.attachEvent('onload', setReadOnly);

А потом добавим в css обработку для этого класса:

.readonly
{
 color:  #707070;
 cursor: default; 
}

Не забудьте дописать в скрипт обработку для textarea.