Заметки за 2010 год (страница 2)

Чистим информацию о ветках в Git

Если вы работаете в команде, любой член команды может создавать и загружать свои собственные ветки, которые будут получены с сервера Git во время git pull или git fetch . Если ветка будет удалена с сервера, она останется в вашем локальном репозитории навсегда. Для удаления таких веток используется команда:


git remote prune origin
Оставте свой комментарий

Определение браузера

Когда я искал материал для статьи «Обнаружение браузера Opera 9», то наткнулся на интересный тест браузеров, выполненный исключительно на CSS, — http://www.brunildo.org/test/csshacks3.html.

Этот тест успешно определяет версию IE, версию Firefox ниже 3.0 (Gecko <1.9) и 3.x (Gecko 1.9). Однако определение версий Webkit и Opera в нем нет.

Другие тесты и эксперименты.

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

Порядок элементов виджета Sortable

У виджета jQuery Sortable помимо метода serialize есть еще другой метод, который можно использовать для сохранения порядка сортировки элементов, — toArray . Его отличие заключается в том, что он возвращает массив id элементов, а не просто строку.


<ul id="search-engines">
  <li id="item-1">Яндекс</li>
  <li id="item-3">Bing </li>
  <li id="item-2">Google</li>
</ul>

Получаем массив

var engines = $("#search-engines").sortable("toArray");

В результате в переменной engines будет массив ["item-1", "item-3", "item-2"].

toArray будет полезен, скорее всего, в ситуациях, когда требуется пост-обработка данных (например, фильтрация или переименование ключей) перед сохранением.

Комментарии к заметке: 2

Обнаружение браузера Opera 9

Совсем недавно я начал применять web-шрифты в реальных проектах. Благодаря простым утилитам (например, @font-face Generator ) можно быстро сконвертировать шрифт в нужные форматы. Но статья совсем не о том. Эти web-шрифты прекрасно (если не брать во внимание проблемы со сглаживанием) отображаются во всех браузерах (даже в IE6!!!) кроме Opera версии 9 и ниже. В связи с эти фактом я и озадачился методами обнаружения Opera 9.

Очевидным способом является проверка строчки User-Agent . Этот вариант решения проблемы хорош до тех пор, пока не сталкиваешься с подменой строки.

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

Так для браузеров Opera до 10 версии будет характерным отличительным признаком отсутствие события contextmenu у DOM-элемента.


function () {
  var isPresent = null;
  if (document.createElement) {
    var el = document.createElement("p");
    if (el && el.setAttribute) {
      el.setAttribute("oncontextmenu", "");
      isPresent = typeof el.oncontextmenu != "undefined";
    }
  }
  return isPresent;
}

Обнаружение такой не очевидной особенности гораздо эффективнее, например, по сравнению с обнаружением поддержки web-шрифтов потому, что шрифту придется загрузить по сети.

Так же, наверное, можно использовать какие-то CSS-хаки, специфичные для Opera, по аналогии с тем, как я делал определение IE6.

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

Улучшаем clearfix

Пожалуй самыми популярными техниками для управления форматированием всплывающих блоков без дополнительной разметки являются clearfix и overflow: hidden . В этой статье описывается улучшение первого метода и проливается свет на истинную природу второго.

Clearfix

В статье «Everything you know about clearfix is wrong » подробно рассмотрены особенности использования этого метода в различных браузерах. Самым часто встречающимся «странным» поведением этого метода является схлапывающиеся отступы у блока. Например, в Safari или Firefox этих отступов нет, а в IE они есть.

Итак, чтобы поведение этого метода в разных браузерах было одинаковым его нужно немного улучшить с помощью дополнительного правила


.clearfix:before,
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */

Внимание! Нельзя просто заменить правила clearfix в существующих проектах, так как, возможно, вы уже исправили проблему схлапывающихся отступов с помощью других методов.

Overflow

Подводным камнем этого метода является то, что утверждение «Если поместить абсолютно спозиционированный блок внутри контейнера с overflow: hidden , то часть его часть за пределами контейнера будет отсечена» не всегда верно. Это правило всегда отсекает относительно спозиционированные элементы, но не всегда абсолютно спозиционированные. Это происходит потому, что для элемента со значением стиля position: absolute контейнером будет служить ближайший предок с установленным стилем position в одно из значений absolute, relative или fixed. Это значит, что элемент с абсолютным позиционированием будет виден до тех пор пока его контейнер имеет статичное позиционирование.

Альтернативный способ

Если вы можете явно задать ширину у элемента, внутри которого находятся всплывающие блоки, то лучше использовать:

display: inline-block;
width: <любое явное значение>;

По материалам clearfix Reloaded + overflow:hidden Demystified

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