О вертикальном выравнивании блока неизвестной высоты по центру или низу родителя сказано много. Есть способы, основанные на display:table-cell для хороших браузеров (без кавычек) и expression для IE, способы, основанные на относительном позиционировании (могут плохо работать при переполнении). В этой заметке будет описан способ, работающий на особенностях такого мощного отображения, как встроенный блок (display:inline-block).

Сегодня, верстая один макет, я, кажется, изобрел очередной небезынтересный способ вертикального выравнивания блока относительно родительского. Он не основан на превращении блоков в ячейки таблицы и не использует css-свойство position.

Требования

— Должна быть известна начальная высота родительского блока;
— Дочерний блок может иметь произвольный размер как по высоте, так и по ширине.

Возможности

— Работает в IE6+, O9+, FF2+, webkit;
— Тру vertical-align выравнивание со всеми допустимыми значениями;
— Одинаковое поведение во всех браузерах (незначительные отклонение при некоторых условиях в ие6 будут оговорены ниже);
— При вырастании дочернего блока выше «папочки», родительский блок расширяется;
— Ни грамма JavaScript.

Как известно некоторый браузер не поддерживает правила «>» в CSS, которое иногда бывает очень нужным, например при создании списка списков, когда первый уровень списка не имеет отступа, а второй и последующие имеют. Сегодня мне в голову пришло решение, которое я хочу представить на ваш суд:

Наконец-то мы дождались корректной работы IETester в Windows 7! После беглого тестирования нескольких сайтов остался доволен и заметил, что пропало куча ошибок по сравнению с предыдущей версией (0.3.5), зато появились неработающие кнопки, типа «параметры Internet Explorer», но это мелочи.
Скачать на сайте разработчика.

UPD: В догонку вышла новая версия 0.4.1

За время существования web 2.0 в сети появились некоторые приемы так называемого web 2.0 дизайна, один из которых это градиент.
 
Создание подобного эффекта, если не брать в расчет элементы с фиксированной высотой доставляет верстальщику не мало сложностей. Ключевым моментом реализации является оптимизация графики, но с другой стороны слишком "пережатый" файл теряет качество, что особенно заметно при использовании такого элемента с нефиксированной высотой. А что делать если эффект градиента необходимо использовать в фоне страницы ?

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

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

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

В CSS 2.1 появилась одна интересная фича, о которой не все знают — это возможность задавать на веб-странице шрифты и цвета, которые используются в текущей системной теме операционной системы.
Это может быть полезно в ситуациях, когда вы хотите приблизить интерфейс вашей страницы к пользовательскому интерфейсу операционной системы. Например, вы хотите написать Adobe AIR приложение, или сделать справочный интерфейс, наподобие нативной chm-справки (вот как здесь: manual.pohape.ru).

Задача

Итак, вам приходит макет, а в нём (о ужас!) блок картинок дизайнером старательно выровнен по обе стороны. Примерно так:

Ну в верстаем мы только резину!

Есть два варианта:
Сверстать без выравнивания, а дизайнеру сказать что по обе стороны выровнять нельзя, либо

Возникла мысль: а нельзя ли использовать CSS-спрайты для того, чтобы выводить заголовки необычными шрифтами?

Кажется, что сделать это не так и сложно.

1. Нужно подготовить CSS-спрайт — вывести все буквы в картинку и сделать CSS, в котором для каждой буквы есть свой класс, позиционирующий фон на нужное место в картинке.
2. Помечаем строку, которую нужно преобразовать, специальным классом.
3. В момент загрузки выбираем все помеченные строки и для каждой их буквы создаем span с классом, соответствующим букве из спрайта.
4. Оригинальный текст скрываем. Возможно, прозрачностью.

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

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

Кто-нибудь видел такое решение?

Update:
Благодаря хабраюзеру nuxdie нашлась готовая реализация этой идеи: fontjazz.com. Не позволяет только текст из заголовка копировать.

Update 2:
Хабраюзер Magarich предлагает свою реализацию — 5socks.net. Здесь можно и копировать. Жалко, что из-за прозрачности текста выделение тоже совсем не видно.

Вдобавок ко всем новым возможностям CSS, ранее нами упомянутым, Firefox 3.6* обретает свежайшее новое значение свойства: image-rect. Это позволит вам вырезать область фонового изображения, чтобы показать только часть от целого.

Оно использует собственническую приставку Мозиллы (то есть «-moz-» — прим. перев.) и берёт пару входных значений — URI изображения и границы вырезаемой области (в виде четырёх значений, разделённых запятыми, как во свойстве clip):

foo { background-image: -moz-image-rect(
    url(<uri>),
    <top>,<right>,<bottom>,<left>
); }

Вот пример:

.aside {
    background-image: -moz-image-rect(
    url('link.png'), 0, 32, 26, 0);
}

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

Введение

В данном списке перечислены шрифты, общие для всех актуальных на данный момент операционных систем Windows (фактически начиная с Windows 98), и их эквиваленты в Mac OS. Такие шрифты иногда называют «безопасными шрифтами для браузеров» (browser safe fonts). Это небольшой справочник, которым я пользуюсь, когда делаю Web-страницы и думаю, что он будет полезен и Вам.

Я только что заметил, что на Хабре используется довольно прогрессивное средство клиентской оптимизации: замена ссылок на изображения механизмом data:image, скорее всего ради уменьшения запросов на сервер.



Возможно, этот механизм используется на Хабре давно или даже с самого начала. В любом случае, я хотел бы напомнить этим постом о существовании data:image и его пользе. Для более подробного ознакомления с data:image можно почитать эту статью.

PS: но лучше всего начинать знакомство с data:image со статьи webo.in/articles/habrahabr/29-all-about-data-url-images за авторством перевода sunnybear (спасибо за напоминание heroOfOurTime)

Как использовать прилипающий футер

Введение

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

Решения Райана Фэйта хорошо известно и работает, но требует лишний пустой <div>. Приверженцы чистого HTML-кода могут найти это богохульство несемантичным. В нашем решении лишнего <div> нет.

Одно из наиболее ожидаемых свойств CSS3, несомненно, свойство border-radius. С помощью свойства border-radius можно создавать, такие популярные в последнее время, прямоугольники с закругленными углами, исключительно средствами CSS, не используя никаких изображений.

Болтаясь сегодня по интернету в поисках чего-нибудь интересненького, наткнулся на вот такой простой (и столь же замечательный в своей простоте) способ отыскать «неполадку» в верстке.

CSS

* { outline: 2px dotted red; }
* * { outline: 2px dotted green; }
* * * { outline: 2px dotted orange; }
* * * * { outline: 2px dotted blue; }
* * * * * { outline: 1px solid red; }
* * * * * * { outline: 1px solid green; }
* * * * * * * { outline: 1px solid orange; }
* * * * * * * * { outline: 1px solid blue; }


Цвет, тип и размер обводки каждый может выбрать по вкусу.

Поддержка браузерами:

К сожалению, в браузерах от Microsoft версий 6 и 7 (в 8-й — все окей) свойство outline не поддерживается. Для них, пожалуй, придется использовать border.

Саймон Фрейзер (Simon Fraser) объявляет о поддержке трёхмерных CSS-преобразований на Mac OSX Leopard в последних еженощных сборках Webkit.

Если у вас запущена недавняя ночная сборка Webkit (скачать можно вон там) на Mac OSX Leopard, тогда вам следует глянуть на этот наглядный пример; в противном случае скриншот ниже обеспечивает предпросмотр того, чего можно ожидать.

Webkit — демонстрация CSS-преобразований

Целиком статью вы можете прочесть во блоге Webkit.

Примечание переводчика: сама по себе трёхмерность Webkit для нас не новость, она ужé обсуждалась («3D CSS», например), однако во блоге Webkit обнаруживаются небезынтересные простые примеры и исходные коды их.

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

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

Хотя Firefox 3.0 улучшил отображение шрифтов, привнеся поддержку кернинга, лигатур, различных толщин, а также поддержку отображения сложных начертаний, всё же авторов ограничивало использование в своих дизайнах только общедоступных шрифтов. Firefox 3.5 снимает это ограничение, вводя поддержку CSS-правила @font-face — это способ прицеплять шрифты TrueType и OpenType точно так же, как нынче прицепляют код и иллюстрации. Браузер Safari поддерживал этот вид гиперсвязи со шрифтом, начиная от версии 3.1, а в Opera объявили, что планируют поддержать его в Opera 10.

Использовать @font-face для гиперсвязи со шрифтом — сравнительно несложно. Внутри стилевого файла каждое свойство @font-face задаёт используемое имя шрифтового семейства, и подгружаемый шрифтовой ресурс, и стилевые характеристики заданного начертания — скажем, полужирное ли оно, курсивное ли. Firefox 3.5 скачивает шрифты только по мере нужды, так что стилевой файл может задать полный набор шрифтов, из которых лишь выборочно несколькие станут использоваться в действительности.

/* Graublau Sans Web (www.fonts.info) */
 
@font-face {
  font-family: Graublau Sans Web;
  src: url(GraublauWeb.otf) format("opentype");
}
 
body {
  font-family: Graublau Sans Web, Lucida Grande, sans-serif; 
}

Браузеры, поддерживающие @font-face, отобразят текст при помощи Graublau Sans Web, тогда как более старые браузеры отобразят его при помощи либо Lucida Grande, либо начертания по умолчанию для sans-serif. Вот пример:

Задача

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