Category Archives: HTML and CSS

MIHTool, the iOS web debugger

Основные возможности: Встроенный Web Inspector (работает непосредственно на устройстве с iOS!) Удаленный Web Inspector (weinre) Web editor для правки стилей «наживую» Полноценное удаленное управление через HTTP-сервер Полноэкранная и iPhone-size эмуляция WebKit Debug Borders (layers) (!) Webkit Repaint Counter(Paint Rects) Переключение UserAgent Букмарклеты (Firebug, YSlow, JS Console, WhatFont…) Отключение и очистка кэша Ставится через AppStore. Подробнее — http://paulbakaus.com/tutorials/performance/mihtool-the-ios-web-debugger/.

Liquidapsive (Liqui-dap-sive)

http://liquidapsive.com/ Чем отличается adaptive design от responsive design

Тестирование сайтов в ie

Удобное собрание всех средств — http://modern.ie/. Вот описание — http://blogs.windows.com/ie/b/ie/archive/2013/01/31/introducing-modern-ie-testing-sites-for-internet-explorer-made-easier.aspx?utm_source=twitterfeed&utm_medium=twitter&utm_campaign=ie Очень понравился набор виртуальных машин для VirtualBox (под MacOs, Linux и Windows) — http://www.modern.ie/virtualization-tools

Иконки через кастомные шрифты

Здесь очень подробно описано, как это сделать: http://blog.fogcreek.com/trello-uses-an-icon-font-and-so-can-you/ Также перечислены плюсы и минусы. Плюсов много — не надо заморачиваться, как в спрайтах, с разными размерами, с ретинами, цветами и прочим. Размер меньше. Минусы тоже есть — если картинка отрисовывается всегда примерно одинаково, то отрисовка шрифтов зависит от браузера и операционной системы. Еще один минус — …

Спрайт с флагами всех стран мира

Если нужно на сайте показывать кучу флагов, и неохота возиться с составлением спрайта, а потом и стиля для каждого флага, то вот есть решение: http://svn.dojotoolkit.org/src/demos/trunk/i18n/ (нужны flags.css и flags.png). Картинка у меня почему-то не открывается, поэтому вот ссылка на гугл http://www.google.ru/imgres?hl=ru&newwindow=1&sa=X&tbo=d&biw=1919&bih=1128&tbm=isch&tbnid=9_VoNrarzfXlnM:&imgrefurl=http://svn.dojotoolkit.org/src/demos/trunk/i18n/&docid=q9H1aTT_zs2liM&imgurl=http://svn.dojotoolkit.org/src/demos/trunk/i18n/flags.png&w=474&h=290&ei=d40GUdHAA8iL4gTc94GgBg&zoom=1&iact=hc&vpx=207&vpy=132&dur=2017&hovh=175&hovw=287&tx=134&ty=87&sig=110498399682400951447&page=1&tbnh=131&tbnw=215&start=0&ndsp=76&ved=1t:429,r:2,s:0,i:88. На всякий случай ссылка на css: http://svn.dojotoolkit.org/src/demos/trunk/i18n/flags.css Вот еще одно, альтернативное, решение: http://coder-zone.blogspot.ru/2009/05/css-sprites-and-arcane-winged-demons.html Ещё …

Почему не надо делать кастомные кнопки

http://www.nczonline.net/blog/2013/01/29/you-cant-create-a-button/ Кратко — дурить браузер можно долго, но в итоге навигация клавиатурой все равно отвалится.

Google Chrome DevTools Grab bag (Breakpoint Episode 5)

В этом видео рассказывается о новых возможностях консоли Chrome: Тестирование мобильной версии сайта с помощью подмены User Agent, метрик устройства, эмуляции touch-событий и ориентации устройства. Подмена media type, чтобы посмотреть как выглядит версия сайта, к примеру, при выводе на печать. (09:16) CSS Regions (патч от Adobe) (11:11) Подсветка селектора (14:53) Возможность проинспектировать локальную область видимости …

Особенности отрисовки z-index

Вот тут подробно объясняются нетривиальные вещи — http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ ( What No One Told You About Z-Index — Philip Walton) Самое интересное — заданием opacity=.99 можно фактически сбросить z-index у всех вложенных элементов. И еще один интересней факт, которого в статье нет: вложенный элемент не может иметь z-index больше родительского. UP: вот на русском — http://habrahabr.ru/post/166435/

CSS3 для реализации табов, аккордеона и тогглера без javascript

Табы JS Bin Методика — скрытые инпуты и следующий css:

.tab-switcher input[type=radio]:checked ~ .tab-content {
  z-index: 10;
  opacity: 1;
  background: #888;
  color: white;
}

.tab-switcher input[type=radio]:checked ~ label {
  background: #888;
  color: white;
}

.tab-switcher input[type=radio]:checked ~ .tab-content {

z-index: 10;

opacity: 1;

background: #888;

color: white;

}

.tab-switcher input[type=radio]:checked ~ label {

background: #888;

color: white;

}

~ позволяет обращаться к элементам-«братьям».

Автоматическая компиляция спрайтов средствами Compass

http://www.codechewing.com/library/automatically-generate-css-sprites-with-sass/