Ars Longa, Vita Brevis » HTML

Кросс-браузерный резиновый трёхколоночный макет в высоту окна

Vladimir — Sun, 29 Jun 2008 20:49:24 +0000

Кросс-браузерное решение для резинового макета с одинаковой высотой колонок и стопроцентной высотой

Недавно понадобилось сверстать резиновый трёхколоночный макет с высотой 100% и колонками одинаковой высоты. К моему удивлению, это оказалось не очень простым делом: вместо планируемого получаса это заняло намного больше времени.

Требования к макету:

кросс-браузерность (куда без неё);
минимальная высота: 100% (полное окно, независимо от высоты контента);
минимум кода;
все три колонки должны быть одинаковой высоты;
никакого JavaScript.

Минимум кода означает минимум разметки:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Three Column Liquid Layout</title>
</head>
<body>
<div id="header">Header</div>
<div id="container">
<div id="content" class="column">
<p>Sed eleifend, sapien vel mollis euismod, sem velit semper ante...</p>
</div>

<div id="left" class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sollicitudin dolor nec nunc iaculis tincidunt...</p>
</div>

<div id="right" class="column">
<p>Phasellus sollicitudin. Fusce ut tellus. Vivamus dapibus. Cras eu elit. Vestibulum ante ipsum primis in faucibus orci luctus et...</p>
</div>
</div>
<div id="footer">Footer</div>
</body>
</html>

So far so good, как любит говорить один мой коллега. Теперь переходим к разметке.

Начнём с общих определений:

html {
background: #800000;
}

html, body {
margin: 0;
padding: 0;
border: 0;
}

body {
font: 14px/120% Verdana, Tahoma, Arial, Helvetica, sans-serif;
width: 90%;
margin: 0 auto;
}

Теперь переходим к 100% высоте. Помним, что Konqueror/KHTML имеет свою точку зрения по поводу того, кто задаёт скроллинг; также не забываем про IE6, который не понимает min-height

html {
overflow: auto;
}

html:not(:nth-child(1)) {
overflow: visible; /* KHTML сам нарисует скроллинг, не будем ему мешать */
}

html, body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
height: 100%;
}

#container {
height: auto !important;
height: 100%; /* для IE6 */
min-height: 100%;
}

* html #container { overflow: visible; }

Для IE6 мы должны задать overflow: visible, в противном случае контент будет нещадно обрезаться.

Задаем заголовок и подвал:

#header {
height: 3em;
background: red;
color: #FFF;
position: absolute;
top: 0;
width: 100%;
z-index: 1000;
left: 0;
}

.column {
padding-top: 3em !important; /* компенсация высоты заголовка */
}

#footer {
height: 3em;
color: #FFF;
background: green;
position: relative;
z-index: 1000;
margin-top: -3em;
width: 100%;
}

Заголовок позиционируем абсолютно, так как контейнер #container имеет как минимум стопроцентную высоту: задать высоту 100%-3em будет проблематично. Поэтому, считая, что высота заголовка нам известна (а так обычно всегда), мы просто помещаем заголовок "на территорию" контейнера, а высота заголовка будет компенсирована верхним отступом у колонок. Даже если нам придётся задать фоновый рисунок у #container, мы можем компенсировать высоту заголовка путём использования background-position.

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

Теперь переходим к трём колонкам:

#container {
padding-left: 220px;
padding-right: 200px;
overflow: hidden;
float: left; /* IE 5.01 */
float/**/: none;
background: lime;
position: relative;
}

#left, #right, #content {
float: left;
position: relative;
padding-bottom: 1000em !important;
margin-bottom: -997em !important; /* компенсация высоты футера */
}

#left {
width: 220px;
background: url(images/tile-2.jpg) repeat;
margin-left: -100%;
right: 220px;
}

* html #left { /* У IE6 всё не как у людей */
left: 200px;
}

#right {
width: 200px;
background: url(images/tile-3.jpg) repeat;
margin-right: -100%;
}

#content {
width: 100%;
background: url(images/tile-1.jpg) repeat;
}

Теперь идут хаки. По слухам, в IE/Mac вышеприведённая техника для создания колонок одинаковой высоты не работает. Вернее, он работает, но страницу разносит по высоте (добавляется невидимый padding). Мне-то всё равно, но так как исправить просто (в смысле, сделать колонки разной высоты), то почему бы и нет:

#left, #right, #content {
float: left;
position: relative;
padding-bottom: 3em; /* компенсация высоты футера */
}

/* Прячем от IE/Mac \*/
#left, #right, #content {
padding-bottom: 1000em !important;
margin-bottom: -997em !important;
}
/**/

Переходим к Опере. Старые версии (7.0-7.2) не обрезают колонки по высоте. На помощь приходит EasyClearing:

#container:after {
content: 'EasyClearing';
display: block;
height: 0;
clear: both;
visibility: hidden;
}

#container { display: inline-block; }
/*\*/
#container { display: block; }
/**/

Но, как это обычно бывает в жизни, исправил одну ошибку — вылезла другая: EasyClearing портит разметку в IE 5.01. По счастью, это легко лечится путём добавления float: left контейнеру #container:

#container {
float: left; /* IE 5.01 */
float/**/: none;
}

Тем не менее, мы исправили не все глюки в Опере. Для Opera 8, у которой есть свои глюки в обработке overflow: hidden, нам придётся убрать margin-bottom/padding-bottom с самих колонок и применить их элементу внутри колонок. Либо так:

@media all and (min-width: 0px) {
#left, #right, #content {
margin-bottom: 0 !important;
padding-bottom: 3em !important; /* Компенсация высоты футера */
}

#left:before, #right:before, #content:before {
content: 'EasyClearing';
display: block;
background: inherit;
padding-top: 1000em !important;
margin-bottom: -1000em !important;
height: 0;
}
}

Тестовая страница.

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

Пять звёздочек без JavaScript

Vladimir — Fri, 30 May 2008 19:26:35 +0000

Кросс-браузерный вариант реализации механизма рейтинга без использования JavaScript

Прочитал сегодня статью "Пять звёздочек" на Pepelsbey.net. Автор описывает очень интересный подход для реализации механизма рейтингов; основное преимущество описываемого подхода — минимум JavaScript за счет грамотного использования CSS.

Решение Вадима основано на использовании CSS rollovers, плавающих элементах и z-index и выглядит очень красиво. Особенно меня впечатлило то, что его решение будет работать с выключенной загрузкой изображений и отключенным CSS. Весьма приятно, ибо о usability отечественные разработчики задумываются далеко не всегда.

Среди недостатков отмечу следующие:

При использовании IE6 с выключенным JavaScript вся красота перестаёт работать (оффтопик: не могу понять, по каким причинам народ до сих пор сидит на IE6?)
Некоторое неудобство при изменении шкалы: например, если изменить код так, чтобы можно было учитывать полбалла, то помимо ширин придется менять и z-index каждого элемента a. Хотя, в принципе, это мелочь.

Полгода назад я какое-то работал над проектом myfolio.com, там тоже применялось пятизвёздочное голосование (правда, принцип несколько другой). Считая, что тот подход тоже имеет право жить , привожу его здесь.

Разметка очень проста:

Про условные комментарии вокруг элемента ul можно прочитать в статье "Кросс-браузерное одноуровневое вертикальное меню без JavaScript".

Из особенностей — нумерация идёт в обратном порядке (это связано отказом от float и z-index, ибо код в myfolio был гораздо сложнее и с z-index возникали некоторые проблемы в IE6).

Теперь самое интересное: стили:

.vote, .vote li.rated, .vote li a:hover {
background: url(stars.gif) no-repeat 0 0;
}

/* Небольшая особенность: если задавать цвет, то картинка не должна быть прозрачной.
Задание цвета используется для тех, кто выключил загрузку изображений в настройках браузера.
В этом случае пользователь увидит нечто наподобие progress bar (но это всё же лучше, чем ничего).
*/
.vote li.rated, .vote li a:hover {
background-color: red;
}

.vote {
background-position: 0 -14px;
}

.vote:hover li, .ievote:hover li {
background: none;
}

.vote {
width: 80px;
overflow: hidden;
position: relative;
}

.vote, .vote li, .vote li a {
height: 14px;
display: block;
}

.vote li {
position: absolute;
}

.vote, .vote li {
left: 0;
top: 0;
list-style: none;
margin: 0;
padding: 0;
}

.vote li a {
overflow: hidden;
text-indent: -100px;
outline: 0;
}

/* Задаем ширину каждого балла; каждый последующий балл включает в себя предыдущий*/
.vote li.one { width: 7px; }
.vote li.two { width: 16px; }
.vote li.three { width: 23px; }
.vote li.four { width: 32px; }
.vote li.five { width: 39px; }
.vote li.six { width: 48px; }
.vote li.seven { width: 55px; }
.vote li.eight { width: 64px; }
.vote li.nine { width: 71px; }
.vote li.ten { width: 80px; }

/* Для IE6 */
.ievote {
text-decoration: none !important;
}

Наконец, страница с рабочим примером.

Достоинства метода:

Метод кросс-браузерный, работает даже при отключенной загрузке изображений и выключенном CSS;
Превосходно работает даже при отключённом JavaScript (в том числе, и в IE6);
Благодаря использованию CSS rollover достаточно всего лишь одного HTTP-запроса (в отличие от реализаций, где используются списки с элементами img).

Еще одно красивое решение от site-creator.info.

Пять советов верстальщику

Vladimir — Tue, 27 May 2008 22:17:43 +0000

Мои пять копеек

Принимая эстафету, организованную Никитой Селецким, от Максима Покровского, добавляю свои пять копеек в копилку советов по вёрстке.

Изучайте стандарты W3C. Как это ни банально звучит, хороший верстальщик (да и web-разработчик) просто обязан (пусть не наизусть) знать и понимать спецификации. Недавно в книжном магазине видел книжку по верстке. Лучше бы я её не видел: вложенные таблицы, архаичные тэги и всё в том же духе. Так вот: такие книги — зло. Всё, что надо знать, есть в спецификациях Следствия из данной рекомендации: да здравствует семантическая вёрстка; Vaild XHTML/CSS forever (тем не менее, это не должно быть самоцелью).
Дизайн должен быть кросс-браузерным. Internet Explorer уже давно не единственный браузер, которым пользуются люди, но, тем не менее, существует большое количество сайтов, которые написаны исключительно под IE. Так вот, это неправильно. Дизайн (равно как и код) нужно тщательно тестировать в как можно большем количестве браузеров. Для тех, кто под Windows, вообще райская жизнь: на одной машине без проблем уживаются IE6/7, FireFox, Opera, Safari и даже Konqueror из виндового порта KDE4. Затраты времени на тест в различных браузерах окупаются: заказчики имеют тенденцию смотреть на дизайн в экзотических браузерах, и когда всё отлично смотрится с первого раза, их приятно удивляет. А приятное удивление заказчика оборачивается бонусами для исполнителя
Помните про usability и accessibility. Тестируйте сайт с выключенными картинками, JavaScript и CSS (в различных комбинациях). Страница без CSS позволяет получить представление о том, как поисковик воспринимает страницу. Контент в самом низу? Что же удивляться, что Гугол недооценивает сайт? Или поставьте себя на место человека с ограниченными способностями, использующего скринридер. Хватит ли у Вас терпения, чтобы прослушать главную страницу Вашего сайта? Или Вам это надоест, когда скринридер пойдет читать меню навигации? Отключили JavaScript и развалился дизайн/не отправляется форма? Далеко не все пользователи включают JavaScript. И если для правильного отображения сайта требуется то, что может не быть доступно всем пользователям — это минус.
Изучайте работу мастеров. Это полезно. Только ключевое слово — изучайте. Если слепо передрать код/макет/нужное подставить без понимания того, что там происходит — это нехорошо. А если разобраться с кодом, то приобретаются знания и опыт. Как говорится, знание — сила.
Упрощайте. Если код можно упростить, его нужно упростить. Во-первых, так понятнее, во-вторых — чище, в-третьих — размер страницы уменьшается. Суп из div'ов ничуть не лучше вложенных таблиц, поверьте.

Вроде всё… Эстафету передавать мне особо некому (разве что Вам, Всеволод), поэтому подхватывайте все желающие

Аккордеон на CSS без использования JavaScript

Vladimir — Mon, 14 Apr 2008 18:17:49 +0000

Простой аккордеон без использования JavaScript

В статье "парочка аккордеонов" я рассказывал, как сделать простой аккордеон с использованием JavaScript. Однако, будучи "certified CSS 2.0 designer" и "certified XHTML 1.0 designer", я не смог удержаться, чтобы не сделать аккордеон без JavaScript (только на CSS/XHTML).

IE6 потребуется несколько иная разметка, чем нормальным браузерам (об этом можно прочитать в статье "Кросс-браузерное одноуровневое вертикальное меню без JavaScript"), поэтому я сразу привожу разметку, которая подойдёт для всех браузеров (за основу взята разметка из статьи "парочка аккордеонов"):

<ul id="accordion">
<li>
<a href="#">Item 1</a>

<ul>
<li><a href="#">SubItem 1.1</a></li>
<li><a href="#">SubItem 1.2</a></li>
<li><a href="#">SubItem 1.3</a></li>
<li><a href="#">SubItem 1.4</a></li>
</ul>

</li>

<li class="active">
<a href="#">Item 2</a>

<ul>
<li><a href="#">SubItem 2.1</a></li>
<li><a href="#">SubItem 2.2</a></li>
<li><a href="#">SubItem 2.3</a></li>
<li><a href="#">SubItem 2.4</a></li>
</ul>

</li>

<li>
<a href="#">Item 3</a>

<ul>
<li><a href="#">SubItem 3.1</a></li>
<li><a href="#">SubItem 3.2</a></li>
</ul>

</li>

<li>
<a href="#">Item 4</a>

<ul>
<li><a href="#">SubItem 4.1</a></li>
<li><a href="#">SubItem 4.2</a></li>
</ul>

</li>
</ul>

Теперь CSS для нормальных браузеров:

a { text-decoration: none; color: #00F; }
a:hover { text-decoration: underline; }
#accordion a { outline: 0; }

#accordion, #accordion ul, #accordion li {
list-style: none;
margin: 0;
padding: 0;
display: block;
}

#accordion {
border: 1px solid #CCC;
width: 150px;
}

#accordion ul {
margin-left: 40px;
}

#accordion > li {
border-bottom: 1px solid #CCC;
padding: 2px 5px;
}

/* Update 11-May-2008: в IE7 эта конструкция не работает
#accordion > li:not([class="active"]) ul {
display: none;
}
/**/
/* Для максимальной совместимости с IE7 используем следующие
два правила (их теоретически можно было сделать видимыми только
для IE7, но смысла загромождать код нет :-) ). Легко заметить, что
эти два правила есть инверсия предыдущего закомментированного правила */
#accordion > li[class="active"] ul {
display: block;
}

#accordion > li ul {
display: none;
}

#accordion > li:hover ul {
display: block;
}

#accordion > li:last-child {
border-bottom: 0;
}

#accordion li.active > a {
color: red;
}

Не забудем про IE6:

* html #accordion li {
border-bottom: 1px solid #CCC;
padding: 2px 5px;
}

* html #accordion li li {
border-bottom: 0;
padding: 0;
}

* html #accordion {
border-bottom: 0;
}

/* IE7 не понимает last-child */
*:first-child+html #accordion {
border-bottom: 0;
}

* html #accordion li.active a {
color: red;
}

* html #accordion li.active ul a {
color: blue;
}

* html #accordion li table {
display: none;
}

* html #accordion li.active table {
display: block;
}

* html #accordion li a:hover {
position: static;
}

/* Спасибо Ивану Маркееву (http://markeev.labwr.ru) за замеченную опечатку */
* html #accordion li a:hover table {
display: block;
}

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

Google Adsense и XHTML

Vladimir — Wed, 02 Apr 2008 18:50:36 +0000

Как заставить Adsense работать на XHTML-страницах

Не секрет, что Adsense для вставки рекламы использует . Не секрет, что для вставки этого используется самый простой метод — document.write(). Какими же проблемами это грозит? Частично отвечая на вопрос, почему это не работает для XHTML-документов?

Сразу оговорюсь, что не работает это не для всех документов, а только для тех, которые, как и полагается XHTML-документам, выдаются с Content-Type: application/xhtml+xml.

Итак, для "настоящих XHTML-документов" возникает две проблемы:

document.write() не работает;
В XHTML 1.1/XHTML 1.0 Strict элемента нет.

Основной является первая проблема. Тем не менее, даже если заменить document.write другой конструкцией (document.createElement()/document.createElementNS() + node.appendChild() или аналогичной), то в результате получим невалидный XHTML-код (который может не отображаться в валидирующих браузерах — я слышал, что это свойственно Konqueror).

Как же с этим бороться? Как уже было сказано, в современных версиях XHTML элемента нет. Но есть другой, не менее известный элемент — . Теоретически можно сохранить скрипт Google AdSense локально, изменить его, научив использовать document.createElement()/document.createElementNS() и вместо . Вот только имеет ли это смысл?

Идём дальше. Как уже было сказано выше, источник проблем здесь — специфический Content-Type (или, если смотреть глубже, кривые руки разработчиков Google — кому какой вариант нравится больше). То есть если страница будет выдаваться как, например, text/html, то AdSense будет работать. А если это соединить с , то получим готовое решение.

Выглядеть это будет так: на странице, на которой должны быть объявления, вместо кода Google Adsense помещаем следующий код:

Сама же страница adsense.html будет выглядеть следующим образом:

<html>
<head>
<title>Google Adsense - Disable Me in Adblock :-)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body { margin: 0; padding: 0; border: 0; }
</style>
</head>
<body>
<script type="text/javascript">//
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</body>
</html>

Разумеется, следует использовать свои параметры AdSense.

Если сервер настроен выдавать статические .html-страницы с Content-Type: application/xhtml+xml (или любым другим, кроме text/html), то это, разумеется, надо поправить (как именно — зависит от сервера). Например, для Apache это может выглядеть следующим образом (предполагается, что эти строки будут добавлены в файл .htaccess, находящийся в том же каталоге, что и adsense.html):

<Files adsense.html>
ForceType text/html
Files>

Update: мне всё же интересно, будут ли объявления в этом случае контекстно-зависимыми? Ведь по большому счету, referer'ом скрипта http://pagead2.googlesyndication.com/pagead/show_ads.js будет страница adsense.html, а не та, на которой эта реклама должна отображаться… И проверить из-за проблем с аккаунтом не могу

Update: Stu Nicholls нашел еще одну скрытую ошибку: дело в том, что при нажатии на ссылку в рекламном блоке, Internet Explorer откроет её не в главном окне (как это должно быть), а внутри тэга .

Stu Nicholls предлагает следующее решение проблемы: использовать условные комментарии для того, чтобы не использовать в IE (в любом случае, IE пока не понимает application/xhtml+xml, так что использование небольшого хака для IE не будет критичным). Я немного изменил предложенный код так, чтобы IE вообще не видел тэг (нечто подобное было сделано в статье "Кросс-браузерное одноуровневое вертикальное меню без JavaScript")

Размещение блока неизвестного размера в центре страницы при помощи CSS

Vladimir — Tue, 01 Apr 2008 06:43:33 +0000

Как разместить блок неизвестного размера точно в центре страницы

Гуляя по Internet, совершенно случайно натолкнулся на статью "Стили CSS - центрируем объекты по центру веб-страницы".

Первой мыслью было, что автор начнёт рассказывать про вертикальное центрирование и всем известный margin: 0 auto. Но не тут-то было, всё гораздо интереснее

Статья, на которую я наткнулся — это перевод статьи Криса Койера (Chris Coyier) Quick CSS Trick: How To Center an Object Exactly In The Center. При этом высота и ширина центрируемого объекта в статье полагаются известными. Что ж, я ожидал чего-то большего.

Я сначала вкратце опишу идею Криса, потом расскажу, почему так не надо делать и затем покажу, что простого решения, удовлетворяющего всем требованиям, нет

Начнём. Пусть у нас имеется, например,

размерами 200×100 пикселей. Поступаем следующим образом:

.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px; /* 50% высоты */
margin-left: -100px; /* 50% ширины */
height: 100px;
width: 200px;
}

Начнём с того, что IE6 position: fixed очень плохо понимает. Для него нужно добавить небольшой хак:

* html .centered {
position: absolute;
}

Теперь о минусах:

размеры блока должны быть известны;
при уменьшении окна так, чтобы оно перекрывало отцентрированный объект, скроллер хотя и появляется, но прокрутить отцентрированный объект не сможет (из-за position: fixed);
при уменьшении ширины окна можно дойти до такого размера, когда у объекта границы станут отрицательными.

Теперь о реализации центрирования в общем виде (считаем, что высота объекта нам неизвестна; ширина же должна быть известной, так как блочный элемент, не имеющий явно заданной ширины автоматически получает width: 100%). Решение основывается на идеях, представленных в следующих статьях:

Разметка:

<body>
<div id="outer">
<div id="middle">
<div id="inner">
Ego autem quem timeam lectorem, cum ad te ne Graecis quidem cedentem in philosophia audeam scribere?
</div>
</div>
</div>
</body>

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

Стили будут почти аналогичными приведённым в той статье, но с небольшими изменениями для IE.
Начнём со стилей для нормальных браузеров:

html {
overflow: auto;
}

html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

#outer {
height: 100%; /* В этом случае нельзя использовать min-height. Для таблиц (элементов с display: table) мир устроен иначе */
display: table;
vertical-align: middle;
width: 600px; /* Если ширина не задана явно, будет 100% */
margin: 0 auto;
}

#middle {
display: table-row;
vertical-align: middle;
}

#inner {
display: table-cell;
vertical-align: middle;
}

Теперь стили для Ишака. Я бы поместил их в условный комментарий, например, так:

Вышеприведённый условный комментарий не должен работать для IE8, и это сделано специально: во-первых, IE8 поддерживает display: table, display: table-row и display: table-cell; во-вторых, будучи бетой, он не поддерживает vertical-align ни в каком виде. В общем, когда Microsoft выпустит полноценный браузер, тогда и будем думать

Стили для Internet Explorer:

* > html body { /* Выравниваем блок по центру для IE4-IE5.5 */
text-align: center;
}

#outer {
position: relative;
}

#middle {
top: 50%;
position: relative; /* Не используем абсолютное позиционирование, чтобы избежать проблем с прокруткой */
width: 100%;
}

#inner {
position: relative;
top: -50%;
}

Если посмотреть на то, что получилось, можно заметить, что это один из тех случаев, когда код работает корректно в IE6, но не в IE7 (последний будет показывать совершенно ненужный отступ снизу). Если вспомнить статью "Вертикальное выравнивание без таблиц"), то там мы ставили overflow: hidden элементу #outer, чтобы избежать подобного рода неприятностей в IE6/7. И, хотя в IE6 можно обойтись и без этого (перейдя от абсолютного позиционирования к относительному), с IE7 всё не так просто. В качестве быстрого исправления можно предложить такой вариант:

*:first-child+html #outer {
overflow-x: hidden;
}

Что характерно, будет работать хоть overflow-x, хоть overflow-y.

В результате получаем код, который работает нормально везде, кроме IE7: в IE7 при уменьшении размера окна по вертикали полоса прокрутки появляться не будет. Сделать нормальную прокрутку непосредственно для элемента #outer также представляется проблематичным — нижний отступ будет слишком большим. Поэтому остаётся одно решение — таблица. Причём можно сделать так, что таблицу будет видеть только IE7:

<div id="outer">
<div id="middle">
<div id="inner">
Ego autem quem timeam lectorem, cum ad te ne Graecis quidem cedentem in philosophia audeam scribere? quamquam a te ipso id quidem facio provocatus gratissimo mihi libro, quem ad me de virtute misisti. Sed ex eo credo quibusdam usu venire; ut abhorreant a Latinis, quod inciderint in inculta quaedam et horrida, de malis Graecis Latine scripta deterius. quibus ego assentior, dum modo de isdem rebus ne Graecos quidem legendos putent. res vero bonas verbis electis graviter ornateque dictas quis non legat? nisi qui se plane Graecum dici velit, ut a Scaevola est praetore salutatus Athenis Albucius.
</div>
</div>
</div>

По большому счёту, это извращение — ибо проще всего использовать таблицу для всех браузеров. Но проще не значит лучше, ибо очень часто встречаются ситуации, когда заказчики требуют, чтобы вёрстка была семантической (а когда видят "незапланированную таблицу", начинают громко ругаться). Правда, в этом случае для IE7 семантика теряется, но, как заметил Максим Покровский, для него [IE], вообще, много чего теряется….

Итак, для комбинированного решения у нас получаются следующие стили для IE:

* > html body {
text-align: center;
}

* html #outer {
position: relative;
}

* html #middle {
top: 50%;
position: relative;
width: 100%;
overflow: auto;
}

* html #inner {
position: relative;
top: -50%;
overflow: auto;
}

*:first-child+html table.outer {
height: 100%;
width: 600px;
margin: 0 auto;
}

*:first-child+html table.outer tbody {
vertical-align: middle;
}

Результат можно посмотреть на этой странице.

Есть еще один вариант решения, но он полагается на использование JavaScript в IE:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Centering</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

html {
display: table;
overflow: auto;
}

body {
display: table-cell;
vertical-align: middle;
}

.item {
margin: 0 auto;
width: 600px;
}
</style>

</head>
<body>
<div class="item">
Ego autem quem timeam lectorem, cum ad te ne Graecis quidem cedentem in philosophia audeam scribere? quamquam a te ipso id quidem facio provocatus gratissimo mihi libro, quem ad me de virtute misisti. Sed ex eo credo quibusdam usu venire; ut abhorreant a Latinis, quod inciderint in inculta quaedam et horrida, de malis Graecis Latine scripta deterius. quibus ego assentior, dum modo de isdem rebus ne Graecos quidem legendos putent. res vero bonas verbis electis graviter ornateque dictas quis non legat? nisi qui se plane Graecum dici velit, ut a Scaevola est praetore salutatus Athenis Albucius.
</div>
</body>
</html>

Результат можно посмотреть здесь.

Кросс-браузерное всплывающее гибридное меню на CSS без использования JavaScript

Vladimir — Sun, 23 Mar 2008 04:33:58 +0000

Реализация кросс-браузерного горизонтального меню на чистом CSS 3 без использования JavaScript

Ранее я уже говорил о причинах, побудивших меня сделать меню на чистом CSS без использования JavaScript. Борясь с IE6, у меня получилась красивая версия вертикального меню — его реализация оказалась проще. Теперь обещанное горизонтальное меню.

Требования, которые я поставил:

Нельзя использовать JavaScript;
Полученный код (CSS и XHTML) должен успешно проходить валидацию.

Разметка для тестового примера была взята из этой статьи (которая и сподвигла меня на написание своего меню). В предыдущей статье код пришлось немного переработать (а всё из-за необходимости поддерживать IE6), и именно эту переработанную версию кода мы будем использовать.

<ul id="menu">
<li>
<a href="#">Renaissance</a>

<ul>
<li><a href="#">Brunelleschi</a></li>
<li><a href="#">Alberti</a></li>
<li><a href="#">Palladio</a></li>
<li><a href="#">Michelangelo</a></li>
<li><a href="#">Bramante</a></li>
</ul>

</li>

<li>
<a href="#">Art Nouveau</a>

<ul>
<li><a href="#">Mackintosh</a></li>
<li><a href="#">Guimard</a></li>
<li><a href="#">Horta</a></li>
<li><a href="#">van de Velde</a></li>
</ul>

</li>

<li class="on">
<a href="#">Modern</a>

<ul>
<li><a href="#">Sullivan</a></li>
<li><a href="#">Le Corbusier</a></li>
<li><a href="#">Mies</a></li>
<li><a href="#">Gropius</a></li>
<li><a href="#">Yamasaki</a></li>
</ul>

</li>

<li>
<a href="#">Postmodern</a>

<ul>
<li><a href="#">Venturi</a></li>
<li><a href="#">Eisenman</a></li>
<li><a href="#">Stern</a></li>
<li><a href="#">Graves</a></li>
<li><a href="#">Gehry</a></li>
</ul>

</li>

<li>
<a href="#">Digital</a>

<ul>
<li><a href="#">Xenakis</a></li>
<li><a href="#">Lynn</a></li>
<li><a href="#">Diller+Scofidio</a></li>
<li><a href="#">Zellner</a></li>
<li><a href="#">Hadid</a></li>
</ul>

</li>
</ul>

Таблица стилей для браузеров, поддерживающих CSS 2.1:

#menu, #menu li, #menu ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu {
display: block;
width: 100%;
position: relative;
}

#menu li {
float: left;
height: 2em;
line-height: 2em;
}

#menu li a {
float: left;
border: 1px solid red;
vertical-align: middle;
padding: 0 .5em;
width: 100px;
}

#menu li ul {
display: none;
position: absolute;
top: 2em;
left: 0;
margin-top: 1px;
width: 100%;
background: #FFF;
height: auto;
}

#menu li.on ul, #menu li:hover ul {
display: block;
z-index: 10;
}

#menu li:hover ul {
z-index: 100;
}

#menu li li a {
display: block;
border: 1px solid red;
vertical-align: middle;
padding: 0 .5em;
}

Презентационные стили:

#menu > li + li {
margin-left: -1px;
}

#menu li ul li + li {
margin-left: -1px;
}

#menu li a {
outline: 0;
text-decoration: none;
}

#menu li.on {
background: yellow;
}

#menu li:hover a, #menu li a:hover, #menu li a:hover a {
background: #EEE;
}

#menu li ul li:hover, #menu li ul li a:hover {
background: #EAFBFC;
}

Более детально это всё объяснено в предыдущей статье.

Теперь будем лечить IE6. У меня этот процесс занял несколько часов, но результат стоил того — оно работает!!!

* html #menu {
overflow-x: hidden; /* Скрыть побочный эффект следующего исправления */
}

* html #menu li ul {
display: block;
z-index: 1;
margin-top: 2px;
overflow: visible;
/* Это исправляет неверное определение ширины - абсолютное значение width: 100% без этих строк было бы равно ширине родительского */
padding-right: 1000em;
margin-right: -1000em;
}

* html #menu li.on a table,
* html #menu li a:hover table
{
visibility: visible;
}

* html #menu li.on a table ul {
z-index: -1; /* Ключевое исправление - без него меню правильно работать не будет. Предназначено для исправления последствий многочисленных багов в реализации z-index. Благодаря этому исправлению, все li a:hover table, находящиеся перед li.on table, будут нормально отображаться (не будут перекрываться li.on table) */
}

* html #menu li a:hover table ul {
z-index: 100;
}

* html #menu li a:hover {
position: static;
}

/* У таблицы теперь статическая позиция. Абсолютное/относительное позиционирование вносит ужасный бедлам в и без того глючную реализацию z-index в IE6. */
* html #menu table {
border-collapse: collapse;
visibility: hidden;
}

Замечания по реализации:

Из-за плохой поддержки z-index Ишаком возможны проблемы с border-top/bottom у крайних правых элементов меню;
Из-за того, что пришлось использовать overflow-x, CSS не валидируется в рамках спецификации CSS 2.1 (но проходит валидацию CSS 3).

Тестовая страница лежит здесь.

Кросс-браузерное одноуровневое вертикальное меню без JavaScript

Vladimir — Sun, 23 Mar 2008 01:45:46 +0000

Создание вертикального кросс-браузерного меню без использования JavaScript — чистый CSS!

Так случилось, что срочно понадобилось сделать горизонтальное меню, причем для проекта, который нужно было сдавать вчера Естественно, самому писать не было времени, нужно было взять что-то готовое. Я недавно прочитал статью «Всплывающее гибридное меню на CSS», поэтому взял код именно оттуда. Но не в этом дело. У подавляющего большинства меню камнем преткновения становится IE6 — а всё из-за того, что он понимает :hover только для тэга <a>. Когда-то у меня был заказчик, требовавший, чтобы всё одинаково работало с выключенным JavaScript'ом; вспомнив его, я решил попробовать сделать меню, работающее безо всякого JavaScript. Так получилось, что попутно я нашел еще один очень интересный глюк в IE6 (о нём далее), в борьбе с которым у меня получилось вертикальное меню.

Друг заметил, что смысла уродоваться не было, ибо есть whatever:hover, который применяется многими разработчиками. Для всех, кто такого же мнения, отмечу, что whatever:hover — это HTC-компонент, суть JavaScript, вследствие чего при выключенном JavaScript работать не будет. Помимо этого, whatever:hover не будет работать при динамическом построении меню. И еще его использование негативно сказывается на отклик IE при начальном рендеринге (в смысле, когда весь DOM уже загружен, и наступило время выполнять deferred-скрипты и грузить картинки).

Приступим.
Разметку я взял все из той же статьи, она (разметка) имеет следующий вид:

<ul id="menu">
<li>
<a href="#">Renaissance</a>
<ul>
<li><a href="#">Brunelleschi</a></li>
<li><a href="#">Alberti</a></li>
<li><a href="#">Palladio</a></li>
<li><a href="#">Michelangelo</a></li>
<li><a href="#">Bramante</a></li>
</ul>
</li>

<li>
<a href="#">Art Nouveau</a>
<ul>
<li><a href="#">Mackintosh</a></li>
<li><a href="#">Guimard</a></li>
<li><a href="#">Horta</a></li>
<li><a href="#">van de Velde</a></li>
</ul>
</li>

<li>
<a href="#">Modern</a>
<ul>
<li><a href="#">Sullivan</a></li>
<li><a href="#">Le Corbusier</a></li>
<li><a href="#">Mies</a></li>
<li><a href="#">Gropius</a></li>
<li><a href="#">Yamasaki</a></li>
</ul>
</li>

<li>
<a href="#">Postmodern</a>
<ul>
<li><a href="#">Venturi</a></li>
<li><a href="#">Eisenman</a></li>
<li><a href="#">Stern</a></li>
<li><a href="#">Graves</a></li>
<li><a href="#">Gehry</a></li>
</ul>
</li>

<li>
<a href="#">Digital</a>
<ul>
<li><a href="#">Xenakis</a></li>
<li><a href="#">Lynn</a></li>
<li><a href="#">Diller+Scofidio</a></li>
<li><a href="#">Zellner</a></li>
<li><a href="#">Hadid</a></li>
</ul>
</li>
</ul>

Начнём с браузеров, поддерживающих CSS 2.1. Таблица стилей для них будет иметь следующий вид:

#menu {
height: 2em;
}

#menu, #menu ul, #menu ul li {
list-style: none;
display: block;
margin: 0;
padding: 0;
}

#menu li {
float: left;
height: 2em;
line-height: 2em;
position: relative;
}

#menu li a {
display: block;
border: 1px solid red;
vertical-align: middle;
padding: 0 .5em;
}

#menu li ul {
display: none;
position: absolute;
top: 2em;
left: 0;
margin: 1px 0 0 0;
padding: 0;
background: #FFF;
width: 100px;
}

#menu li:hover ul {
display: block;
}

#menu li ul li {
float: none;
width: 100%;
}

#menu li ul li a {
border: 1px solid red;
vertical-align: middle;
padding: 0 .5em;
}

Вся магия содержится в двух правилах:

#menu li ul {
display: none;
position: absolute;
top: 2em;
left: 0;
margin: 1px 0 0 0;
padding: 0;
background: #FFF;
width: 100px;
}

#menu li:hover ul {
display: block;
}

Первое задаёт размеры/позицию выпадающего меню; позиция вычисляется относительно родительского элемента >. Второе же правило показывает выпадающее меню при наведении курсора мыши на заголовок. Ничего сложного.

Презентационные стили:

#menu > li + li {
margin-left: -1px;
}

#menu li ul li + li {
margin-top: -1px;
}

#menu li a {
outline: 0;
text-decoration: none;
}

#menu li:hover a, #menu li a:hover a {
background: #EEE;
}

#menu li li a, #menu li:hover li a, #menu li a:hover li a {
background: #FFF;
}

#menu li ul li:hover a, #menu li ul li a:hover {
background: #EAFBFC;
}

Первые два правила позиционируют элементы списков так, чтобы border-right (border-bottom) предыдущего элемента совпадал с border-left (border-top) следующего.

Теперь переходим к IE6. В нём не работает второе магическое правило (#menu li:hover ul), так как IE6 воспринимает :hover только на элементах .

Первая мысль — закрывать для IE6 <a> не до списка, а после. Мысль хорошая, но просмотр дерева в IE Developer Toolbar показал, что IE как-то «криво» понимает код (в принципе, здесь Ишак прав: невалидный код каждый волен понимать так, как может). Следовательно, надо список «обернуть» во что-нибудь, но так, чтобы <a> нормально работал. И совершенно случайно я вспомнил один случай, когда разгребал одну ужасную табличную вёрстку (а уровень вложенности таблиц переваливал там за 16), и открытый тэг <a> превратил всю таблицу в сплошную гиперссылку. Чем чёрт не шутит, я решил попробовать.

Код стал таким:

<li>
<a href="#">Renaissance</a>

<ul>
<li><a href="#">Brunelleschi</a></li>
<li><a href="#">Alberti</a></li>
<li><a href="#">Palladio</a></li>
<li><a href="#">Michelangelo</a></li>
<li><a href="#">Bramante</a></li>
</ul>

</li>

Получилось! Ишак нормально распарсил код и сгенерировал нормальное дерево:

Теперь нужно немного поколдовать, чтобы заставить всё работать как надо.
Первое, что приходит в голову — это такие вот стили:

* html #menu li ul {
display: block;
}

* html #menu li a:hover {
position: static;
}

* html #menu li a:hover table {
display: block;
}

* html #menu table {
position: absolute;
border-collapse: collapse;
top: 0;
left: -1px;
display: none;
}

Иными словами, мы всю магию перенесли на уровень выше (так как теперь у нас <ul> обёрнут <table>). Правило position: static в * html #menu li a:hover — это вуду, без этого не работает (как вариант, можно задать background с цветом, отличным от transparent).

И тут начинаются проблемы. Я, конечно, всегда подозревал, что IE написан очень криво, но чтобы так криво… После нескольких наведений на меню получается такая картина:

То есть таблицы как бы нет (display: none), но место в потоке она занимает, и при этом хотя текста дочерних элементов не видно, но border остался. Нет таблицы, и в то же время есть. Чудеса.

От таких чудес невольно опускаются руки. Потратив пару часов на эксперименты, я чудом нашел рабочую комбинацию: вместо display: none/block нужно использовать visibility: visible/hidden. Не знаю, почему, но оно работает. Но всё же мне интересно, что курили разработчики, писавшие Ишака?

Страница с рабочим кросс-браузерным меню находится здесь. Никакого JavaScript, только CSS!

Update: еще одна версия вертикального меню.

Резиновый трехколоночный макет с правосторонними сайдбарами

Vladimir — Sat, 22 Mar 2008 01:24:37 +0000

Кросс-браузерный семантически корректный резиновый макет с тремя колонками (сайдбары справа)

Очередной раз попав не туда, куда надо из Google, я натолкнулся на статью "Трехколоночный макет на CSS с одинаковой высотой колонок". Да, трехколоночные макеты (да еще и резиновые!) очень популярны, я смотрю Но, несмотря на популярность таких макетов, многие верстальщики почему-то ~~не хотят учиться и~~ городят целый огород на div'ах.

В указанной статье приводится следующая разметка (я убрал пустые строки и изменил форматирование):

Что мы видим: пример, как верстать не надо. Может быть, сказано слишком резко, но на мой взгляд, суп из div'ов (с глубиной вложенности 6) ничем не лучше табличной вёрстки (табличная вёрстка будет даже компактнее). Кроме того, большая часть этого супа не несёт семантической нагрузки. И вообще, при верстке нужно руководствоваться принципом KISS, но это моё сугубо личное мнение.

Попробуем переделать.
Начнём с разметки:

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

Простая разметка — простые стили:

html, body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
}

html { /* Для IE6 и IE7 */
overflow: auto;
}

body {
min-width: 50em; /* #container.paddingRight + #col1.offsetWidth + #col2.offsetWidth */
}

#container {
overflow: hidden;
padding-right: 25em; /* #col1.offsetWidth + #col2.offsetWidth */
position: relative;
}

/*\*/
* html #container {
height: 1%;
}
/**/

.column {
position: relative;
float: left;
padding-bottom: 1002em !important;
margin-bottom: -1000em !important;
overflow: hidden;
}

#content {
width: 100%;
}

#col1 {
width: 10em;
margin-right: -100%;
}

#col2 {
width: 15em;
margin-right: -100%;
margin-left: 10em; /* #col1.offsetWidth */
}

#footer {
clear: both;
}

Для краткости презентационные стили (aka расцветка) опущены.

Тестовая страница доступна здесь. Кстати, разметка получилась даже проще, чем здесь

Но макет не был бы так хорош, если бы не позволял с лёгкостью добавлять отступы, границы и бордюры. В статье "IE7/8 и общий случай двухколоночной резиновой вёрстки" я показывал, как получаются формулы для вычисления значений границ и иже с ними (вспоминаем про эквивалентность преобразований), поэтому здесь приведу только конечный результат:

Элемент	Свойство	Формула
body	min-width	`(#container.offsetWidth - #container.width) + (#content.offsetWidth - #content.width) + #col1.offsetWidth + #col2.offsetWidth`
#container	padding-right	`(#content.offsetWidth - #content.width) + #col1.offsetWidth + #col2.offsetWidth`
#content	margin-left	`=#container.paddingLeft`
#col1	margin-left	`=#content.marginRight`
#col2	margin-left	`#col1.offsetWidth + #col2.желаемый_marginLeft`
#col1, #col2	margin-right	`-100%`

В #container.paddingRight входит желаемый #col2.marginRight (но у Opera есть некоторые проблемы с его отображением).

Из-за того, что все колонки имеют равную высоту, отобразить border-bottom у них не представилось возможным.

Для IE8 добавляются следующие изменения:

#col1.marginLeft устанавливается в сумму горизонтальных отступов, границ и бордюров элемента #content;
#col2.marginLeft увеличивается на величину #col1.marginLeft.

Тестовая страница для экспериментов находится здесь.

html, body {
margin: 0;
padding: 0;
border: 0;
font: 12px Verdana, Tahoma, Arial, Helvetica, sans-serif;
width: 100%;
}

html {
overflow: auto;
}

body {
min-width: 81em; /* (38.5 + 0.5 + 2*1 + 2*1) + (2*1 + 2*1 + 0.5) + (10 + 2*1 + 2*1) + (15 + 0.5 + 2*1 + 2*1) = 43 + 4.5 + 14 + 19.5 = 57 + 24 */
}

#container {
overflow: hidden;
padding-right: 38.5em; /* (2*1 + 2*1 + 0.5) + (10 + 2*1 + 2*1) + (15 + 0.5 + 2*1 + 2*1) + желаемый margin-right для #col2 (0.5em) */
position: relative;
padding-left: .5em;
padding-top: .5em;
padding-bottom: .5em;
margin: 1em;
border: 1em solid black;
}

/*\*/
* html #container {
height: 1%;
}
/**/

.column {
position: relative;
float: left;
padding-bottom: 1002em !important; /* Фактически, padding-bottom = 2em */
margin-bottom: -1000em !important;
overflow: hidden;
}

#content {
width: 100%;
border: 1em solid green;
padding: 1em;
margin-right: .5em;
}

#col1 {
width: 10em;
margin-right: -100%;
padding: 1em;
border: 1em solid red;
}

*:first-child/**/+html #col1 {
margin-left: 4.5em; /* #col1.paddingLeft + #col1.paddingRight + #col1.borderLeft + #col1.borderRight + #col2.желаемый_marginLeft */
}

#col2 {
width: 15em;
margin-right: -100%;
margin-left: 14.5em; /* #col1.paddingLeft + #col1.paddingRight + #col1.borderLeft + #col1.borderRight + #col2.желаемый_marginLeft + #col1.width */
padding: 1em;
border: 1em solid blue;
}

*:first-child/**/+html #col2 {
margin-left: 19em; /* #col2.marginLeft + #col1.marginLeft */
}

#footer {
clear: both;
}

Режимы шифрования данных, или, когда сильный шифр не спасает

Vladimir — Wed, 19 Mar 2008 01:30:37 +0000

Режимы шифрования: почему простая замена небезопасна.

Почему-то каждый третий мнит себя экспертом по безопасности, пишет "безопасные" программы для шифрования данных, но даже не подозревает, что существуют и другие режимы шифрования, кроме известного как ECB. И этим грешат не только студенты в своих дипломных работах (головы бы поотрывал их научрукам за такое), но и "серьёзные" разработчики.

Например, программист на сайте uk-swingers.com шифровал номера кредитных карточек (!), используя простой алгоритм RC4 и постоянный ключ. Ломалось очень просто. К счастью, уже исправлено Другие товарищи использовали сложение по модулю два для шифрования важных данных. Третий товарищ защитил диплом по безопасности, и шифрование секретной базы данных опять-таки выполнялось по модулю два. Четвертый шифровал AES'ом тонны информации (в режиме ECB, разумеется), при этом не потрудившись даже ее сжать. Этот печальный список можно продолжать и продолжать…

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

Начнем с теории.

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

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

Режим простой замены

Режим простой замены (Electronic Codebook, ECB) является простейшим режимом шифрования. Сообщение разбивается на блоки, каждый из которых шифруется (раздельно). Таким образом, из идентичных блоков открытого текста получаются идентичные блоки шифротекста. Данный режим шифрования не обеспечивает достаточной конфиденциальности сообщения, вследствие чего его использование в криптографических протоколах не рекомендуется.

Уравнение шифрования: C_i=E_key(P_i).
Уравнение расшифрования: P_i=D_key(E_i).
В вышеприведенных формулах (и далее): C — шифротекст; P — открытый текст; E_KEY — операция шифрования данных с ключом KEY; D_KEY — операция расшифрования данных с ключом KEY.

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

Режим гаммирования

Поточное гаммирование

В режиме гаммирования (также известном как Stream Mode, SM, поточный режим) открытый текст складывается по модулю два с гаммой шифра (вместо операции сложения по модулю два можно использовать любую обратимую операцию). Гамма шифра получается следующим образом: при помощи псевдослучайного генератора формируется начальная (предварительная) гамма, которая шифруется в режиме простой замены (таким образом получается основная гамма). Начальное значение псевдослучайного генератора (называемое инициализационным вектором (Initialization Vector, IV) или синхропосылкой) не является секретным и передается по каналу в открытом виде. Если последний блок неполный (его длина меньше стандартного для данного алгоритма размера блока), берется только необходимое количество бит гаммы.

В режиме гаммирования операции зашифрования и расшифрования являются симметричными.

Гаммирование с обратной связью

Режим гаммирования с обратной связью (Cipher Feedback, CFB) — «близкий родственник» режима сцепления блоков — превращает блочный шифр в самосинхронизирующийся поточный шифр.

Уравнение зашифрования: C_i=E_key(C_i-1)⊕P_i.
Уравнение расшифрования: P_i=E_key(C_i-1)⊕C_i.
В приведенных выше формулах C₀ — синхропосылка.

Обычно размер блока обратной связи совпадает с размером буфера (рас)шифрования; в общем случае, это может быть не так. Если размеры не совпадают, то на вход следующего цикла криптографического преобразования поступает (b-s) младших бит шифротекста (при шифровании) или открытого текста (при расшифровании), дополненные s битами полученного на предыдущем шаге шифротекста или открытого текста соответственно. При получении очередных s бит шифротекста (открытого текста), открытый текст (шифротекст) складывается по модулю два с s старшими битами результата шифрования. В приведенных выше формулах b — размер буфера (рас)шифрования, s — размер буфера обратной связи.

В режиме гаммирования с обратной связью шифрование не может выполняться параллельно, расшифрование — может (но с некоторыми ограничениями).

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

Гаммирование с обратной связью по выходу

Режим гаммирования с обратной связью по выходу (Output Feedback, OFB) преобразует блочный шифр в синхронный поточный шифр: генерируемые ключевые блоки складываются по модулю два с блоками открытого текста.

Вследствие того, что операция сложения по модулю два является симметричной, процесс шифрования и расшифрования выглядит одинаково.

Уравнение зашифрования: C_i=E_key(O_i-1)⊕P_i.
Уравнение расшифрования: P_i=E_key(O_i-1)⊕C_i.
В приведенных выше формулах O₀ — синхропосылка.

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

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

Изменение одного бита открытого текста (шифротекста) приводит к изменению соответствующего бита шифротекста (открытого текста); данное свойство позволяет использовать многие корректирующие коды даже до операции шифрования.

Режим сцепления блоков

Простое сцепление

В режиме сцепления блоков (Cipher-block Chaining, CBC) каждый блок открытого текста складывается по модулю два с предыдущим блоком шифротекста, а затем шифруется. Таким образом, каждый блок шифротекста зависит от всех обработанных блоков открытого текста. Чтобы каждое сообщение было уникальным, при обработке первого блока открытого текста должна использоваться синхропосылка. Режим сцепления блоков является наиболее часто используемым.

Уравнение шифрования: C_i=E_key(P_i⊕C_i-1).
Уравнение расшифрования: P_i=D_key(C_i)⊕C_i-1.
В приведенных выше формулах C₀ — синхропосылка.

Очевидно, что шифрование блоков не может выполняться параллельно, а для расшифрования достаточно двух соседних блоков шифротекста (вследствие чего расшифрование может выполняться параллельно).

Изменение одного бита открытого текста влияет на все последующие блоки шифротекста; изменение одного бита шифротекста ведет к повреждению соответствующего блока открытого текста и инверсии соответствующего бита следующего блока открытого текста.

Режим распространяющегося сцепления блоков

Режим распространяющегося сцепления блоков (Propagating CBC, PCBC) является модификацией предыдущего метода. Основным отличием данного режима от предыдущего является то, что изменения в шифротексте распространяются на все блоки как при расшифровании, так и при шифровании, вследствие чего (рас)шифрование блоков не может выполняться параллельно.

Уравнение шифрования: C_i=E_key(P_i⊕P_i-1⊕C_i-1).
Уравнение расшифрования: P_i=D_key(C_i)⊕P_i-1⊕C_i-1.

В приведенных выше формулах P₀⊕C₀ — синхропосылка.

Изменение одного бита открытого текста влияет на все последующие блоки шифротекста; изменение одного бита шифротекста ведет к повреждению всех последующих блоков открытого текста.

Режим счетчика

Режим счетчика (Counter, CTR) преобразует блочный шифр в поточный. Его можно рассматривать как гибрид режимов простой замены и гаммирования с обратной связью по выходу. Ключевой блок генерируется путем зашифрования последовательных значений счетчика и затем складывается по модулю два с открытым текстом или шифротекстом. Операции (рас)шифрования могут выполняться параллельно, так как для (рас)шифрования очередного блока необходимо знать только значение счетчика.

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

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

Изменение одного бита открытого текста (шифротекста) приводит к изменению соответствующего бита шифротекста (открытого текста).

Синхропосылка

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

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

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

Рекомендация NIST SP 800-38A рекомендует один из следующих подходов для генерации непредсказуемых синхропосылок:

Применение функции шифрования с тем же ключом, что и для шифрования открытого текста, к одноразовому значению;
Использование генератора случайных чисел, одобренного FIPS (Federal Information Processing Standard, федеральный стандарт обработки информации).

Эксперимент

Методика эксперимента: в качестве исходных данных брался этот файл и переводился в формат RGB. Затем на полученный файл натравливалась тестовая программа, которая выполняла шифрование в различных режимах; результат помещался в новый файл. Ключ шифрования — слово password, инициализационный вектор получался путем хеширования по ГОСТ 34.311-95. Шифрованные файлы переводились в из формата RGB в PNG и просматривались на экране Помимо всего прочего считалась энтропия полученных файлов (сим преследовалась цель убедиться, что "сильный" шифр может использоваться в качестве хорошего источника случайных чисел). Энтропия исходного файла составляет 3.37144 бит.

Результаты сведены в таблицу (внимание всем, кто будет пытаться скачать все оптом: общий размер изображений, связанных с данными, превышает 50 мегабайт).

Энтропия зашифрованного сообщения для различных шифров и режимов шифрования
	ECB	CBC	CFB	CTS	OFB	CTR	PCBC
NULL	3.37144	7.92382	7.92382	3.53878	3.37197	3.65126	3.37197
XOR	5.42685	7.93968	7.94004	2.19935	5.27889	5.66991	5.27889
TEA	6.30925	7.99976	7.99973	7.99975	7.99974	7.99971	7.99977
XTEA	6.33340	7.99974	7.99979	7.99978	7.99975	7.99975	7.99975
XXTEA	7.90143	7.99974	7.99977	7.99973	7.99972	7.99974	7.99975
Q128	6.85842	7.99977	7.99974	7.99975	7.99976	7.99978	7.99976
FROG	7.77603	7.99977	7.99977	7.99972	7.99975	7.99972	7.99975
CAST-128	6.32833	7.99979	7.99973	7.99976	7.99973	7.99978	7.99974
CAST-256	6.81389	7.99971	7.99976	7.99977	7.99975	7.99974	7.99973
IDEA	6.30512	7.99976	7.99977	7.99976	7.99976	7.99975	7.99975
Blowfish	6.28322	7.99974	7.99975	7.99978	7.99977	7.99972	7.99976
Rijndael	6.74933	7.99977	7.99978	7.99974	7.99976	7.99977	7.99977
DES	6.33022	7.99982	7.99970	7.99975	7.99977	7.99973	7.99975
GOST	6.33646	7.99974	7.99975	7.99977	7.99971	7.99976	7.99972
GOST-X	6.20684	7.99975	7.99976	7.99977	7.99977	7.99975	7.99974
TripleDES EDE	6.33022	7.99982	7.9997	7.99975	7.99977	7.99973	7.99975
TGOST	6.33556	7.99977	7.99976	7.99978	7.99976	7.99977	7.99973
TripleDES3	6.95098	7.99975	7.99980	7.99976	7.99973	7.99970	7.99974
TGOST3	7.01890	7.99977	7.99977	7.99978	7.99977	7.99977	7.99972
TGOSTX3	6.98361	7.99977	7.99968	7.99977	7.99976	7.99973	7.99976

Примечание: размерность приведённых в таблице данных — биты.

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

По результатам тестирования мы видим, что режим простой замены для шифрования данных лучше не использовать. Кстати, в стандарте шифрования ГОСТ 28147-89 отмечено, что режим простой замены может быть использован только для шифрования ключевых данных. Из таблицы видно, что каким бы ни был шифр, в режиме простой замены он не может обеспечить достаточной конфиденциальности сообщения.

Привлекательно выглядят результаты для режимов сцепления блоков шифротекста и гаммирования с обратной связью: даже при шифровании нулевым шифром на выходе получается практически случайный шум. Тем не менее, это иллюзия: этот «шум» создается благодаря использованию операции сложения по модулю два, изменяющейся синхропосылке и удачному подбору байт: для обоих методов при шифровании слабым шифром (XOR) исходное изображение все равно угадывается.

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

Кстати, если обратить внимание на значение энтропии, то видно, что для слабых шифров режим сокрытия шифротекста приводит к ухудшению качества шифрования. Хорошими вариантами является использование шифрования в режиме счетчика и сцепления блоков шифротекста. Также прослеживается зависимость качества шифрования (в плане близости вычисленного значения энтропии к максимальному) от длины ключа — чем длиннее ключ, тем выше энтропия (для одного и того же набора данных). Интересно это проверить на файлах разного размера, но содержащих одинаковое количество блоков (то есть для шифра с большей длинной ключа будет использоваться более длинный файл); однако в этом случае будет довольно трудно обеспечить честность эксперимента — равенство исходной энтропии.

На закуску еще один эксперимент. Методика испытаний аналогична предыдущему случаю, но эксперимент проводился для разных файлов:

представленное выше изображение;
файл в формате MS Word 2003;
фотография в формате JPEG;
файл из 1024 символов с кодом FF₁₆;

Результаты эксперимента представлены в таблице

	NULL	XOR	ГОСТ 28147-89
Простая замена	3.37144 4.48239 7.95642 0	5.42685 5.85078 7.98966 2.75	6.33646 7.76984 7.99839 3
Сокрытие шифротекста	3.53878 5.17479 7.99782 0	2.19935 4.71443 7.99633 0.0873988	7.99977 7.99921 7.99844 7.78699
Гаммирование с обратной связью по выходу	3.37197 4.48239 7.95641 0	5.27889 5.80711 7.98579 2.375	7.99971 7.99930 7.99845 7.80087
Гаммирование с обратной связью	7.92382 7.97188 7.99839 1	7.94004 7.95779 7.99848 2.375	7.99975 7.99917 7.99829 7.80648
Сцепление блоков шифротекста	7.92382 7.97188 7.99839 1	7.93968 7.95869 7.99827 2.375	7.99974 7.99921 7.99864 7.82002
Распространяющееся сцепление блоков шифротекста	3.37197 4.48239 7.95641 0	5.27889 5.80711 7.98579 2.375	7.99972 7.99931 7.99840 7.83605
Счетчик	3.65126 4.63377 7.95941 0.233209	5.66991 6.05639 7.98633 2.89398	7.99976 7.99930 7.99840 7.80864

Примечание: размерность данных в таблице — биты.

Делать выводы возлагаем на читателя…

//---------------------------------------------------------------------------
void AbstractCipher::encodeECB(uint8_t* d, STDNS::size_t uiSize)
{
STDNS::size_t bufsize = this->getBufSize();
for ( ; uiSize > 0; uiSize -= bufsize, d += bufsize) {
this->encode(d);
}
}
//---------------------------------------------------------------------------
void AbstractCipher::decodeECB(uint8_t* d, STDNS::size_t uiSize)
{
STDNS::size_t bufsize = this->getBufSize();
for ( ; uiSize > 0; uiSize -= bufsize, d += bufsize) {
this->decode(d);
}
}
//---------------------------------------------------------------------------
void AbstractCipher::encodeCTR(uint8_t* d, STDNS::size_t uiSize)
{
STDNS::size_t bufsize = this->getBufSize();
uint64_t* const f = REINTERPRET_CAST(uint64_t* const, this->m_pFeedback);
if (bufsize < sizeof(uint64_t)) {
throw STDNS::runtime_error(
"AbstractCipher::encodeCTR(): buffer size must be at least 8 bytes"
);
}
STDNS::memcpy(f, this->m_pVector, bufsize);
for ( ; uiSize >= bufsize; d += bufsize, uiSize -= bufsize) {
*f ^= this->m_pCounter->getAndIncrement();
this->encode(f);
xor_buffers(f, d, bufsize, d);
}
if (uiSize > 0) {
*f ^= this->m_pCounter->getAndIncrement();
this->encode(f);
xor_buffers(f + bufsize - uiSize, d, uiSize, d);
}
}
//---------------------------------------------------------------------------
void AbstractCipher::encodeCTS(const uint8_t* s, uint8_t* d, STDNS::size_t uiSize)
{
STDNS::size_t bufsize = this->getBufSize();
while (uiSize >= bufsize) {
xor_buffers(s, this->m_pFeedback, bufsize, d);
this->encode(d);
xor_buffers(d, this->m_pFeedback, bufsize, this->m_pFeedback);
s += bufsize;
d += bufsize;
uiSize -= bufsize;
}
if (uiSize > 0) {
STDNS::memcpy(this->m_pBuffer, this->m_pFeedback, bufsize);
this->encode(this->m_pBuffer);
xor_buffers(s, this->m_pBuffer, uiSize, d);
xor_buffers(this->m_pBuffer, this->m_pFeedback, bufsize, this->m_pFeedback);
}
}
//---------------------------------------------------------------------------
void AbstractCipher::encodeCTSMAC(const uint8_t* s, STDNS::size_t uiSize)
{
STDNS::size_t bufsize = this->getBufSize();
while (uiSize >= bufsize) {
xor_buffers(s, this->m_pFeedback, bufsize, this->m_pBuffer);
this->encode(this->m_pBuffer);
xor_buffers(this->m_pBuffer, this->m_pFeedback, bufsize, this->m_pFeedback);
s += bufsize;
uiSize -= bufsize;
}
if (uiSize > 0) {
STDNS::memmove(this->m_pBuffer, this->m_pFeedback, bufsize);
this->encode(this->m_pBuffer);
xor_buffers(this->m_pBuffer, this->m_pFeedback, bufsize, this->m_pFeedback);
}
}
//---------------------------------------------------------------------------
void AbstractCipher::decodeCTS(const uint8_t* s, uint8_t* d, STDNS::size_t uiSize)
{
STDNS::size_t bufsize = this->getBufSize();
const uint8_t* f = REINTERPRET_CAST(uint8_t*, this->m_pFeedback);
uint8_t* b = REINTERPRET_CAST(uint8_t*, this->m_pBuffer);
if (s != d) {
STDNS::memmove(d, s, uiSize);
}
while (uiSize >= bufsize) {
xor_buffers(d, f, bufsize, b);
this->decode(d);
xor_buffers(d, f, bufsize, d);
s = b; b = CONST_CAST(uint8_t*, f); f = s;
d += bufsize;
uiSize -= bufsize;
}
if (f != this->m_pFeedback) {
STDNS::memcpy(this->m_pFeedback, f, bufsize);
}
if (uiSize > 0) {
STDNS::memcpy(b, this->m_pFeedback, bufsize);
this->encode(b);
xor_buffers(d, b, uiSize, d);
xor_buffers(b, this->m_pFeedback, bufsize, this->m_pFeedback);
}
}
//---------------------------------------------------------------------------
void AbstractCipher::encodeCBC(const uint8_t* s, uint8_t* d, STDNS::size_t uiSize)
{
STDNS::size_t bufsize = this->getBufSize();
const uint8_t* f = this->m_pFeedback;
for ( ; uiSize > 0; s += bufsize, d += bufsize, uiSize -= bufsize) {
xor_buffers(s, f, bufsize, d); //d = P[i] xor C[i-1]
this->encode(d); //d = C[i] = E(P[i] xor C[i-1])
f = d; //f = C[i]
}
if (f != this->m_pFeedback) {
STDNS::memcpy(this->m_pFeedback, f, bufsize);
}
}
//---------------------------------------------------------------------------
void AbstractCipher::encodeCBCMAC(const uint8_t* s, STDNS::size_t uiSize)
{
STDNS::size_t bufsize = this->getBufSize();
uint8_t* const f = this->m_pFeedback;
for ( ; uiSize > 0; s += bufsize, uiSize -= bufsize) {
xor_buffers(s, f, bufsize, f);
this->encode(f);
}
}
//---------------------------------------------------------------------------
void AbstractCipher::decodeCBC(uint8_t* d, STDNS::size_t uiSize)
{
STDNS::size_t bufsize = this->getBufSize();
uint8_t* f = this->m_pFeedback;
uint8_t* b = this->m_pBuffer;
uint8_t* x;
for ( ; uiSize > 0; d += bufsize, uiSize -= bufsize) {
STDNS::memcpy(b, d, bufsize); //b = C[i]
this->decode(d); //d = D(C[i])
xor_buffers(d, f, bufsize, d); //d = d xor f = P[i] = D(C[i]) xor C[i-1]
x = f;
f = b; //f = C[i]
b = x;
}
if (f != this->m_pFeedback) {
STDNS::memcpy(this->m_pFeedback, f, bufsize);
}
}
//---------------------------------------------------------------------------
void AbstractCipher::encodePCBC(const uint8_t* s, uint8_t* d, STDNS::size_t uiSize)
{
STDNS::size_t bufsize = this->getBufSize();
uint8_t* const f = this->m_pFeedback;
uint8_t* const b = this->m_pBuffer;
for ( ; uiSize > 0; s += bufsize, d += bufsize, uiSize -= bufsize) {
STDNS::memcpy(b, s, bufsize); //b = s = P[i]
xor_buffers(s, f, bufsize, d); //d = s xor f = P[i] xor (P[i-1] xor C[i-1])
this->encode(d); //d = C[i] = Ek(P[i] xor (P[i-1] xor C[i-1]))
xor_buffers(b, d, bufsize, f); //f = P[i] xor C[i]
}
}
//---------------------------------------------------------------------------
void AbstractCipher::encodePCBCMAC(const uint8_t* s, STDNS::size_t uiSize)
{
STDNS::size_t bufsize = this->getBufSize();
uint8_t* const f = this->m_pFeedback;
uint8_t* const b = this->m_pBuffer;
for ( ; uiSize > 0; s += bufsize, uiSize -= bufsize) {
xor_buffers(s, f, bufsize, b); //b = s xor f = P[i] xor (P[i-1] xor C[i-1])
this->encode(b); //b = C[i] = Ek(P[i] xor (P[i-1] xor C[i-1]))
xor_buffers(s, b, bufsize, f); //f = s xor b = P[i] xor C[i]
}
}
//---------------------------------------------------------------------------
void AbstractCipher::decodePCBC(uint8_t* d, STDNS::size_t uiSize)
{
STDNS::size_t bufsize = this->getBufSize();
uint8_t* const f = this->m_pFeedback;
uint8_t* const b = this->m_pBuffer;
for ( ; uiSize >= bufsize; d += bufsize, uiSize -= bufsize) {
STDNS::memcpy(b, d, bufsize); //b = C[i]
this->decode(d); //d = Dk(C[i])=P[i] xor P[i-1] xor C[i-1]
xor_buffers(d, f, bufsize, d); //d = P[i]=Dk(C[i]) xor P[i-1] xor C[i-1]
xor_buffers(b, d, bufsize, f); //f = b xor d = C[i] xor P[i]
}
}
//---------------------------------------------------------------------------
/**
* @note FIPS 800-38A says that the Plaintext must be XOR'ed with the
* most significant bits of the encrypted block, hence we have to add
* (bufsize - fbsize) to b when invoking xor_buffers
* @see FIPS 800-38A, Page 11
*/
void AbstractCipher::encodeCFB(const uint8_t* s, uint8_t* d, STDNS::size_t uiSize)
{
STDNS::size_t bufsize = this->getBufSize();
STDNS::size_t fbsize = this->getFeedbackSize() >> 3;
uint8_t* const f = this->m_pFeedback;
uint8_t* const b = this->m_pBuffer;
for ( ; uiSize >= bufsize; d += fbsize, s += fbsize, uiSize -= fbsize) {
STDNS::memcpy(b, f, bufsize);
this->encode(b);
xor_buffers(s, b + bufsize - fbsize, fbsize, d);
STDNS::memmove(f, f + fbsize, bufsize - fbsize);
STDNS::memcpy(f + bufsize - fbsize, d, fbsize);
}
if (uiSize > 0) {
STDNS::memcpy(b, f, bufsize);
this->encode(b);
xor_buffers(s, b + bufsize - uiSize, uiSize, d);
STDNS::memmove(f, f + uiSize, bufsize - uiSize);
STDNS::memcpy(f + bufsize - uiSize, d, uiSize);
}
}
//---------------------------------------------------------------------------
void AbstractCipher::encodeCFBMAC(const uint8_t* s, STDNS::size_t uiSize)
{
STDNS::size_t bufsize = this->getBufSize();
STDNS::size_t fbsize = this->getFeedbackSize() >> 3;
uint8_t* const f = this->m_pFeedback;
uint8_t* const b = this->m_pBuffer;
for ( ; uiSize >= bufsize; s += bufsize, uiSize -= bufsize) {
STDNS::memcpy(b, f, bufsize);
this->encode(b);
xor_buffers(s, b + bufsize - fbsize, fbsize, b);
STDNS::memmove(f, f + fbsize, bufsize - fbsize);
STDNS::memcpy(f + bufsize - fbsize, b, fbsize);
}
if (uiSize > 0) {
STDNS::memcpy(b, f, bufsize);
this->encode(b);
xor_buffers(s, b + bufsize - uiSize, uiSize, b);
STDNS::memmove(f, f + uiSize, bufsize - uiSize);
STDNS::memcpy(f + bufsize - uiSize, b, uiSize);
}
}
//---------------------------------------------------------------------------
void AbstractCipher::decodeCFB(const uint8_t* s, uint8_t* d, STDNS::size_t uiSize)
{
STDNS::size_t bufsize = this->getBufSize();
STDNS::size_t fbsize = this->getFeedbackSize() >> 3;
uint8_t* const f = this->m_pFeedback;
uint8_t* const b = this->m_pBuffer;
for ( ; uiSize >= bufsize; d += fbsize, s += fbsize, uiSize -= fbsize) {
STDNS::memcpy(b, f, bufsize);
this->encode(b);
STDNS::memmove(f, f + fbsize, bufsize - fbsize);
STDNS::memcpy(f + bufsize - fbsize, s, fbsize);
xor_buffers(s, b + bufsize - fbsize, fbsize, d);
}
if (uiSize > 0) {
STDNS::memcpy(b, f, bufsize);
this->encode(b);
STDNS::memmove(f, f + uiSize, bufsize - uiSize);
STDNS::memcpy(f + bufsize - uiSize, s, uiSize);
xor_buffers(s, b + bufsize - uiSize, uiSize, d);
}
}
//---------------------------------------------------------------------------
/**
* @note It is assumed that Feedback size is equal Block Size
*/
void AbstractCipher::encodeCFB_fast(const uint8_t* s, uint8_t* d, STDNS::size_t uiSize)
{
STDNS::size_t bufsize = this->getBufSize();
uint8_t* const f = this->m_pFeedback;
for ( ; uiSize >= bufsize; d += bufsize, s += bufsize, uiSize -= bufsize) {
this->encode(f);
xor_buffers(s, f, bufsize, d);
STDNS::memcpy(f, d, bufsize);
}
if (uiSize > 0) {
uint8_t* const b = this->m_pBuffer;
STDNS::memcpy(b, f, bufsize);
this->encode(b);
xor_buffers(s, b + bufsize - uiSize, uiSize, d);
STDNS::memmove(f, f + uiSize, bufsize - uiSize);
STDNS::memcpy(f + bufsize - uiSize, d, uiSize);
}
}
//---------------------------------------------------------------------------
void AbstractCipher::encodeCFBMAC_fast(const uint8_t* s, STDNS::size_t uiSize)
{
STDNS::size_t bufsize = this->getBufSize();
uint8_t* const f = this->m_pFeedback;
uint8_t* const b = this->m_pBuffer;
for ( ; uiSize >= bufsize; s += bufsize, uiSize -= bufsize) {
STDNS::memcpy(b, f, bufsize);
this->encode(b);
xor_buffers(s, b, bufsize, f);
}
if (uiSize > 0) {
STDNS::memcpy(b, f, bufsize);
this->encode(b);
xor_buffers(s, b + bufsize - uiSize, uiSize, b);
STDNS::memmove(f, f + uiSize, bufsize - uiSize);
STDNS::memcpy(f + bufsize - uiSize, b, uiSize);
}
}
//---------------------------------------------------------------------------
/**
* @note It is assumed that Feedback size is equal Block Size
*/
void AbstractCipher::decodeCFB_fast(const uint8_t* s, uint8_t* d, STDNS::size_t uiSize)
{
STDNS::size_t bufsize = this->getBufSize();
uint8_t* const f = this->m_pFeedback;
uint8_t* const b = this->m_pBuffer;
for ( ; uiSize >= bufsize; d += bufsize, s += bufsize, uiSize -= bufsize) {
STDNS::memcpy(b, f, bufsize);
this->encode(b);
STDNS::memcpy(f, s, bufsize);
xor_buffers(s, b, bufsize, d);
}
if (uiSize > 0) {
STDNS::memcpy(b, f, bufsize);
this->encode(b);
STDNS::memmove(f, f + uiSize, bufsize - uiSize);
STDNS::memcpy(f + bufsize - uiSize, s, uiSize);
xor_buffers(s, b + bufsize - uiSize, uiSize, d);
}
}
//---------------------------------------------------------------------------
void AbstractCipher::encodeOFB(const uint8_t* s, uint8_t* d, STDNS::size_t uiSize)
{
STDNS::size_t bufsize = this->getBufSize();
uint8_t* const f = this->m_pFeedback;
for ( ; uiSize >= bufsize; d += bufsize, s += bufsize, uiSize -= bufsize) {
this->encode(f);
xor_buffers(s, f, bufsize, d);
}
if (uiSize > 0) {
this->encode(f);
xor_buffers(s, f + bufsize - uiSize, uiSize, d);
}
}