Обновился интересный генератор HTML+CSS шаблонов CSStool.ru. Забыл о нем написать когда он появился. Обратите внимание, вдруг пригодится.

На сайте CSStool.ru, который представляет из себя генератор HTML+CSS шаблонов проведено обновление, которое включает ряд нововведений различного характера.

Список нововведений на сайте создателя сервиса. Полезный апгрейд получился, на мой взгляд.

Вот что пишет автор проекта на главной странице:

Если вас интересует экспериментальная разметка web-страниц с использованием position:absolute; позволяющая по вашему желанию, практически где угодно, в произвольном порядке, размещать фиксированные блоки и колонки, значит вы пришли туда, куда надо.

В каком-то смысле ресурс можно отнести в разряд учебного пособия, одной из глав которого, является раздел посвященный созданию web-страниц с применением фиксированных блоков и колонок в различных вариациях.

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

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

Если вас интересуют экзотические эксперименты в области CSS-вёрстки — рекомендую.

В дополнение к “5-ти советам верстальщику” (совет № 4) и обсуждению, развернувшемуся в комментах.

• Страница с примерами;
• Статья с разъяснениями.

Самое интересное в этом шаблоне для меня:

• Единый набор HTML-элементов для разных вариантов колонок. Минимум экстра-разметки.
• Резина и фикс, на выбор. Резина 100%-й ширины или с ограничениями на max-min-width.
• Среди вариантов — шаблон в три колонки: центральная — резиновая, боковые — фиксированной ширины, с правильным расположением колонок в коде (content — first).

Последнее — задача, так и не нашедшая приличного решения у западных товарищей. Мы, похоже, решили ее. Я, надеюсь, имю право говорить “мы” :) (Вы поймете почему, прочитав статью с разъяснениями.)

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

Помимо всего прочего, это означает, что с представленным кодом нужно обращаться осторожно: тестируйте тщательней.

Спасибо Gordi за проделанный немалый труд!

В комментариях возник ряд возражений и альтернативных решений. Лучшее, на мой взгляд, предложил Q-Zma:

<!--[if IE]>
<style type="text/css">
* html #root
{
    width:expression((document.compatMode && document.compatMode == 'CSS1Compat') ? (document.documentElement.clientWidth < 770 ? "770px" : (document.documentElement.clientWidth > 996 ? "996px" : "auto")) : (document.body.clientWidth < 770 ? "770px" : (document.body.clientWidth > 996 ? "996px" : "auto")));

}
</style>
<![endif]-->

Страница с примером.

Q-Zma также подробно описал принцип действия у себя в блоге.

Я на сегодня пришел к использованию следующих имен:

Классы

• wrap, lining (обертка, подкладка)
• content (как вариант: article)
• header, footer (классика жанра)
• aside, extra (для боковых, и не только боковых, блоков-колонок, которые содержат меню, новости сайта, ссылки, рубрики итдитп)
• nav (любое навигационное меню)

ID (используются главным образом как якоря)

• to-navigation
• to-content
• to-top
• to-bottom
• итдитп)

Я чаще использую классы, они могут многократно повторяться на одной странице, не вызывая ошибок валидации. ID я использую по прямому назначению — в качестве ссылок.

Главная особенность — выравнивание элементов по сетке (или “сеткам?). Используется модульная сетка с вертикальными модулями, и сетка с шагом равным межстрочному расстоянию основного текста (т. е. “интерлиньяж абзацев”). Про себя, последнюю сетку я называю “интерлиньяжной”. Не знаю как это будет правильно. Пока не нашел в литературе никакого термина.

Собственно, достаточно посмотреть на демо-сайт Blueprint-a чтобы понять основы. Сетки оставлены видимыми.

Еще из модных фишек, бросившихся в глаза, реализована “висячая” пунктуация (кавычки).

Интересный фреймворк. Достоин изучения.

В блоге, где я увидел ссылку на этот фреймворк, в комментариях народ пенял на то, что мол размеры шрифтов заданы в пикселях. Так вот по моему это не баг, а фича. При использовании “интерлиньяжной” сетки, настраивать шрифты проще в пикселях — чтобы всегда попадать в сетку. А потом пиксели можно быстренько перевести в относительные единицы.

CSS-Framework — это набор css-стилей, упрощающий создание нового сайта. Вам не придётся каждый раз придумывать и описывать то, что уже давно придумано и описано.

Фреймворки напоминают шаблоны, но только на новом витке эволюции. Шаблоны хорошо подходили для изучения приемов верстки, но применять их на практике без серьезной переработки было затруднительно. Возможно потому что шаблоны были результатом экспериментов отдельных разработчиков-энтузиастов.

Фреймворки же должны вмещать опыт практической реализации множества проектов выполненных в полевых, а не лабораторных условиях.

Чтобы гарантировать практичность затеи нужно привести различные фреймворки к единому знаменателю. Примерно так: стандарты оформления кода, стандарты именования элементов, типовые имена и структуры. Пригодится для будущей совместимости фреймворков.

В самой минимальном варианте CSS выглядит так:

h1 {
    overflow: hidden; 
    width: 300px;
    height: 30px; 
    }
h1:before {
    content: url(example.png);
    }

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

font: normal 80% sans-serif;

Opera, при отключении картинок, показывает вместо сгенерированной графики слово “Image”. Чтобы оно не мешалось, достаточно задать псевдо-классу размер шрифта поменьше и цвет, совпадающий с фоном. Никакого вреда юзабилити или другим браузерам от этого не замечено.

color: #FFF; /* for  Opera */
font-size: 1px; /* for  Opera */

В результате получаем:

h1 {
    overflow: hidden; 
    width: 300px;
    height: 30px; 
    margin: 0;
    padding: 0;
    font: normal 80% sans-serif;
    }
h1:before {
    content: url(example.png);
    color: #FFF; /* for  Opera */
    font-size: 1px; /* for  Opera */
    }

Для поддержки MSIE используем другой CSS-метод Image Replacement, например Phark Method. Без JS, без лишней HTML-разметки. Он прекрасно работает в MSIE. Главный недостаток: при отключении картинок, но с включенным CSS, вообще никакого текста не видно. В остальном, Phark Method — простой и надежный метод. Часто используется.

Дополнительный код должен подключаться с использованием Conditional Comments, чтобы его увидел только MSIE.

h1 {
    background: url(_h1.png) 0 0 no-repeat;
    text-indent: 5000px; 
    }

Благодаря тому, Firefox не видит этого кода, не проявляется, связанный с ним недостаток Phark Method-а. Теперь они просто не пересекаются.

См. рабочий пример.

Итак, без всякого вреда для пользователей IE, незаметно для них и начальства, мы легким движением руки улучшаем жизнь пользователям современных браузеров. Которых с каждым днем все больше и больше.

Вот это я и называю: сделать на все 100% для одних, и на 120 — для других.

Что еще почитать о замене текста картинкой (Image Replacement)

С такой задачей неплохо справляется Firefox с расширением Web Developer. Но это решение не подходит, если нужно увидеть блоки в нескольких браузерах сразу: Firefox, Opera, IE 5-6.

Самые простые и универсальные способы: задать блоку свойство border или background-color. Но они не всегда удобны: первый влияет на размеры блока (в разных браузерах — по разному), а второй делает блок непрозрачным, а иногда хочется увидеть, что за ним.

Border можно задавать не всем сторонам блока, а только снизу, например. В некоторых случаях, это совершенно незаменимая вещь. А залитый фоновым цветом блок можно сделать прозрачным при помощи свойства opacity, поддерживаемым последними “фаерфоксами”. Есть аналогичное свойство и для IE.

background: red; 
opacity: 0.5;
filter:alpha(opacity=50);

Получившееся сочетание подходит для тех, кто проверяет верстку только в Firefox и IE, но не в Opera.

Для Firefox и Opera, подойдет следующее:

background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAPSURBVHjaYvyvJ9cAEGAABUwBzcyE834AAAAASUVORK5CYII=);

Абракадабра, заключенная в круглые скобки CSS-правила, ни что иное как обыкновенный полупрозрачный одно-пиксельный PNG-файл… но закодированный в текстовом формате Base64.

Этот формат дает возможность встраивать (а не прилинковывать) графические файлы в HTML-, JS- и CSS-документы. Получающийся текстовой фрагмент выглядит как обычная ссылка — URI. Это даже можно вставить в адресную строку браузера, и в окне мы увидим исходную картинку. Конечно если браузер поддерживает эту технологию.

Технология называется — Data URI.

Достаточно один раз перекодировать графику в текст, а текст сохранить в файле автозаполнения любимого текстового редактора. В своем EditPlus-е я просто добавил в файл css2.ctl две строки:

#T=redfiller
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAPSURBVHjaYvyvJ9cAEGAABUwBzcyE834AAAAASUVORK5CYII=);

Теперь, чтобы добавить полупрозрачный бэкграунд к объекту, мне достаточно набрать: “redf” и нажать F2.

Скомбинировав эти приемы, получаем:

opacity: 1;
background: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAPSURBVHjaYvyvJ9cAEGAABUwBzcyE834AAAAASUVORK5CYII=) !important;
background-color: red;
filter:alpha(opacity=50);       

Страница с примером.

Эта конструкция работает в Opera, Firefox, IE 5.0, IE 5.5, IE 6.0.

Тут важен порядок, в котором свойства расположены, и наличие !important.

Страницу с примером можно сохранить “без картинок” на локальный компьютер — функциональность сохранится! Все необходимые “картинки” содержатся внутри HTML-файла.

Эта заметка появилась благодаря желанию пристроить хоть куда-нибудь технологию Data URI, которая сама по себе имеет огромный потенциал, особенно в веб-приложениях, но вот беда — она не поддерживается Internet Explorer-ом. А жаль. В рунете, кстати, по Data URI нет практически ничего. Надо понемногу заполнить пробел.

• Англоязычная статья в Wikipedia о Data URI (перевод на русский)
• Кодирование графики в Base64 при помощи Internet Explorer
• Офлайновый base64-декодер для Unix и Windows (командная строка)
• Онлайновые Data URI-base64-декодеры:
  • Data-kitchen
  • data: URI image encoder
  • Data URL Image Generator

(Все эти ссылки есть на странице в Википедии.)

Tags: data+uri, base64, css+верстка, edit+plus