Очистка HTML-кода от мусора

Весьма распространенная операция — перенос на сайт форматированного текста, созданного, например, в Word’е, который вставляет тонны ненужных инлайновых стилей. Далеко не всегда с этим успешно справляются популярные WYSIWYG-редакторы типа TinyMCE, хотя, казалось бы, нет особых проблем встроить в них качественный клинер. Пока же будем пользоваться он-лайновыми сервисами, один из них — лаконичный и качественный — word2cleanhtml.

Компактный вывод блоков разной высоты в несколько колонок

Найдена и опробована в действии неплохая masonry-библиотека Salvattore, которая легко внедряется в проект, например, с использованием bootstrap. В CSS-код с нашей стороны было внесено маленькое дополнение для создания отступов у колонок:

#grid .size-1of2:nth-child(2n) {
    margin-left: 10%;
}
#grid .size-1of3:nth-child(3n+2) {
    margin-left: 5%;
    margin-right: 5%;
}

Действующий пример можно посмотреть здесь.

CSS tooltips

Обнаружен годный онлайн-генератор тултипов на чистом CSS.  Код требует некоторой последующей доводки, но в большинстве случаев все будет работать как задумывалось.

На сайте содержится большое количество других полезных CSS-фич, инструментов и примеров, а также блог. Берем на заметку.

Адаптивные таблицы

Простой и быстрый способ сделать так, чтобы таблицы подстроились под мобильные устройства — это обернуть их div’ом, используя следующий код в духе bootstrap:

div.table-responsive {
  overflow-x: auto;
  max-width: 100%;
}
.table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}