Записи декабря 2008

Состоялось торжественное переименование.

Фреймворк, который ранее условно назывался Fairwork, теперь будет называться Колибри. Потому что маленький, быстрый и красивый.

Маленький — в исходном виде около 200 Кб (включая все функции, реестры, основные наборы страниц и стилей, CMS). В zip-архиве 72 Кб.

Быстрый — потому что объективно быстро работает, несмотря на большое количество используемых файлов (страницы собираются из фрагментов, и каждый раз используется не менее 12 файлов).

Красивый... Просто сайт может выглядеть как угодно. Более того, каждую страницу можно сделать индивидуальной: развитая система построения моделей.

Сайт проекта: фреймворк «Колибри».

Internet Explorer 1.0. Это велосипед. При желании можно заехать почти куда угодно, но комфорта мало.

Internet Explorer 2.0. Тот же велосипед, но с зеркальцем заднего вида.

Internet Explorer 3.0. Да, это уже автомобиль, но только ездить он способен по дорогам с очень простой разметкой. Очень, очень простой.

Internet Explorer 4.0. Гениальное решение: изобретаем собственную разметку и по ней ездим. Да, и ещё автомобиль встроен в квартиру, так что выбора особого нет, покупать его или нет.

Internet Explorer 5.0. Он всё так же встроен в квартиру, но способен ездить почти по всем дорогам, правда, иногда у него двоится в глазах, на приборной панели вместо 100 км/ч показывается 120 или 80.

Internet Explorer 5.5. Да, и ещё теперь можно раскрашивать в разные цвета дверцы.

Internet Explorer 6.0. Он с потрясающей скоростью ездит почти по всем дорогам, но достаточно небольшой ухабины, как он немедленно сворачивает на порносайт в каком-то странном направлении. Проблема в том, что другие автомобили ездят быстрее, изящнее, сразу по нескольким дорогам и умеют реагировать на действия водителя. Другая проблема в том, что Internet Explorer до сих пор встроен в квартиру.

Internet Explorer 7.0. Научился ездить одновременно по нескольким дорогам. Приборная панель выглядит так, что всем водителям приходится переучиваться. Скорость показывается правильно, но тонирование стёкол ещё не на высоте. Вывезли из квартиры и наконец-то поставили в гараж.

Internet Explorer 8.0. Все ждут окончательной сборки, кое-кто уже решается ездить. Проблема в том, что теперь в автомобиле два двигателя: для старых дорог и для новых, и теперь надо постоянно переключаться между ними.

Любое удачное технологическое решение постоянно находит применение. Если это общепринятая технология, как язык разметки или программирования, то рано или поздно в ней формируются целые наборы постоянно используемых фрагментов кода, которые нет смысла повторять от раза к разу. Наборы кода, выполняющие часто используемые задачи, собираются во фреймворки — файлы или наборы файлов, которые можно включать в свои проекты, особо не задумываясь о том, как это работает. Есть такие фреймворки и в CSS.

Например, я всегда, начиная писать CSS-код для проекта, начинаю его набором правил вроде следующих:

/* CSS Framework by Erlang, 2009 */
/* General Cleaning */

* {
	margin:0;
	padding:0;
	font-family:Verdana, Arial, Helvetica, Sans-Serif;
	}
html, body {
	height:100%;
	}
input {
	padding:2px 4px;
	}
body, p, div, table, td, th, input, option, select, button, li, a {
	font-size:9pt;
	}
body {
	background-color:#fff;
	}
table, img {
	border:0;
	}
table {
	border-collapse:collapse;
	}
table td {
	padding:0px;
	vertical-align:top;
	}
div {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	}
a, a:link, a:visited, a:active {
	color:#00f;
	}
a:hover {
	color:#f00;
	}
:focus {
	outline:none;
	}
label {
	cursor:pointer;
	}
ul, ol {
	padding:2px 0;
	}
li {
	line-height:1.5;
	margin-left:17px;
	}

/* Special Elements */

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

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

UTFize DrumBun.

Есть вероятность, что на сайте изменены цвета полос прокрутки, и вам надо вернуть их к виду по умолчанию. Делается это просто:

html, body, textarea {
  scrollbar-face-color: ThreeDFace !important;
  scrollbar-shadow-color: ThreeDDarkShadow !important;
  scrollbar-highlight-color: ThreeDHighlight !important;
  scrollbar-3dlight-color: ThreeDLightShadow !important;
  scrollbar-darkshadow-color: ThreeDDarkShadow !important;
  scrollbar-track-color: Scrollbar !important;
  scrollbar-arrow-color: ButtonText !important;
}

(решение отсюда)

Список системных цветов:

activeborder — Цвет границы активного окна.

activecaption — Цвет заголовка активного окна.

appworkspace — Цветмультидокументного фона.

background — Цвет фона рабочего стола.

buttonface — "Лицевая" сторона объемных элементов.

buttonhighlight — Насыщенная тень объемных элементов.

buttonshadow — Цвет тени объемных элементов.

buttontext — Цвет текста на кнопках.

captiontext — Цвет текста в заголовках.

graytext — Отключенный (недоступный) текст.

highlight — Выделение объекта элемента управления.

highlighttext — Выделение текста элемента управления.

inactiveborder — Цвет границы неактивного окна.

inactivecaption — Цвет заголовка неактивного окна.

inactivecaptiontext — Цвет текста в неактивном заголовке.

infobackground — Цвет фона всплывающей подсказки.

infotext — Цвет текста всплывающей подсказки.

menu — Цвет фона меню.

menutext — Цвет текста в меню.

scrollbar — Цвет полосы прокрутки.

threeddarkshadow — Темная тень объемных элементов.

threedface — "Лицевая" сторона объемных элементов.

threedhighlight — Цвет выделения объемных элементов.

threedlightshadow — Светлый цвет тени объемных элементов.

threedshadow — Насыщенная тень объемных элементов.

window — Цвет фона окна.

windowframe — Цвет рамки окна.

windowtext — Цвет текста в окне.

Список системных цветов и шрифтов с примерами тут.

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

1. Статистические данные.

2. Сравнительные данные.

3. Любые списки, если у каждого из элементов имеет типизованную структуру, и набор типов элементов этой структуры повторяется в каждой итерации списка.

4. Любые принятые в бумажной документации табличные данные.