CSS *

Задача прибивания футера к низу страницы обмусолена с ног до головы. Она неплохо решается для футера фиксированной высоты. А вот для случая, когда высота футера зависит от его содержимого, методов не так много. Либо это очевидное решение на javascript. Либо подгонка для этого элементов, изначально для того не предназначенных. Я, конечно, о таблицах. Хочу предложить способ, который тоже имеет свои недостатки (обо всем ниже), но недостатки эти другие, и, следовательно, может подойти тем, кому первые два не подходят.

Стили и соответствующие им картинки группируются в однин модуль. Для каждого модуля — отдельная директория. Ссылки к картинкам задаются относительно родительской директории. Например, для модуля «pager» создаётся одноимённая директория, в которую кладётся один или несколько css с произвольным названием (например, с тем же — «pager.css»), рядом с ним картинка «pager-current_bg.png», ссылка к которой выглядит так "../page/pager-current_bg.png". Картинка из примера задаёт фон для элемента содержащего номер текущей страницы в пэйджере. Имена картинок складываются из имени элемента (pager-current, pager-next, pager-prev..), расположения картинки (bg, top, left, top-left, icon..) и модификаторов (hover, active, selected..), разделённых между собой подчёркиванием. Сложный пример: pager-next_icon_hover.png

Группировка в модуль происходит по родству. Например, в модуле «text» могут содержаться стили для стандартных элементов гипертекста (em, strong, q..), в «form» — стили для элементов форм, в «table» — всё, что касается таблиц. Разметка выполняется как описано в статье про независимые элементы.

Бонусом от этих шаманств является высокая степень независимости визуальных модулей друг от друга, что позволяет легко переносить их между проектами и пакетами не заботясь о порядке их подключения. Некоторые модули требуют подключения вначале (например, css-reset) — их можно именовать добавляя в начале цифру (например, «0_reset»).

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

Последнее время я практически не занимался версткой, и пропустил выход Sass3, в котором реализовано расширение SCSS (Sassy CSS). Это именно расширение для CSS без «искажения» синтаксиса — то есть любой валидный CSS документ является и полностью валидным SCSS документом. В посте я проведу сравнение с уже существующими препроцессорами такими как Sass и Less. О которых уже писалось на хабре: Sass, Less. Но та информация немного устарела: в частности изменился синтаксис Sass.

Развивая идею вёрстки независимыми блоками мы постепенно придём к вёрстке независимыми модулями, а пока остановимся подробней на сабже…

Но сперва небольшое терминологическое отступление.

Вёрстка страницы — процесс расположения элементов на странице в соответствии с дизайном.

Вёрстка бывает:

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

Разметка текста — обогащение текста специальными машиночитаемыми условными обозначениями.

Alex Girón сочинил демонстрацию и к ней поясняющую блогозапись (с элементами исходного кода), посвящённые начертанию движущейся Солнечной системы при помощи border-radius, CSS-анимации и аффинных CSS-преобразований (а именно, анимированных поворотов от 0° до 360°).

В Firefox эта демонстрация выглядит как неподвижная иллюстрация:



В вебкитных браузерах (Chrome, Safari) планеты к тому же вращаются на своих орбитах.

В Эксплорере вся система приобретает необычайный вид:

Здравствуйте, дорогие читатели. Сегодня хочу с вами поделиться чрезвычайно простым способом кроссбраузерной реализации css-свойства box-shadow. Способ настолько простой и очевидный, что я был чрезвычайно удивлен тем, что не смог найти на просторах интернета аналогичного решения (хотя я более чем уверен, что не являюсь первооткрывателем).

Для FF используется -moz-linear-gradient, для Safari/Chrome — -webkit-gradient, для IE — DXImageTransform.Microsoft.gradient.

Вот только Opera 10 ещё не поддерживает CSS3 Gradient :(

Задача заверстать аппликатуру весьма не тривиальна и от того довольно интересна. Я тоже не устоял перед искушением решить её так как считаю правильным.

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

Am
O - - -
O F - -
O - R -
O - M -
O - - -
X - - -

O — открытая струна, X — приглушённая, остальные буквы обозначают пальцы.

Во блоге Ajaxian сообщают, что Šime Vidas свёл в единое оглавление (причём прячущееся по желанию читателя) все модули CSS3, сколько ни есть их на сайте W3C:



Как же красивы простые полезные вещи. А эта штука ещё и познавательна: я и понятия не имел, что в рамках CSS3 столько набросали набросков.

Вдохновленный сайтом http://chordfind.com, а также примером r3code, решил довести до ума собственную версию табулатур.

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

Представьте, что вы пишете блогохостинг и хотите позволить авторам блогов менять свой дизайн. Картиночки там вставлять, цвета менять, пропорции регулировать… Представили? Если хорошо представили, то уже поняли, что без констант и формул в CSS тут не обойтись.

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

Итого, нам нужно грузить в дополнение к данным страницы: скин с константами и стили с формулами. Только две клиентские технологии позволяют сделать это: JS и XSLT. Однако первую очень любят отключать, а вторую отключать просто нет смысла. Поэтому вынесем CSS в XSLT контейнер, а заодно и не забудем про технологию XHTML-инклудов.

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

Первый вопрос, который возникает: что вообще можно верстать на миллиметрах? Второй — какие с этим могут быть проблемы?

С первым вопросом все просто. На миллиметрах можно сверстать визитку формата 90х50, которую, в свою очередь, можно было бы распечатать на принтере. Сказано — сделано. Шутки ради использовал в качестве блочных элементов теги заголовков (<H*>). Как раз шесть штук насчиталось.

Проблемы при реализации всплыло три:

1. Опера несколько по-своему пересчитывает миллиметровые величины в пиксели. Чтобы добиться в ней отображения однопиксельной рамочки, пришлось поподбирать величины. Сошлись мы на ширине 0.3mm.

2. Размеры изображениям проще все-таки задавать в пикселях (хотя, как и в случае с Оперой, можно подобрать адекватные величины в миллиметрах).

3. При распечатке не отображаются изображения, заданные через css-свойство background. Поэтому пришлось все картинки вставлять в абсолютно спозиционированные блоки, а их уже размещать в требуемых местах.

Печатать пробовал из-под Макоси и Винды. Браузеры: ИЕ (6+), Огнелис, Опера, Сафари, Хром. Вроде нигде не глючило ни отображение, ни печать. Разве что в шестом ИЕ немного подтормаживал рендеринг. Все исходники можно посмотреть по ссылке на визитку.

На новизну идеи нисколько не претендую.

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

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

Примеси! Я же знаю, вы так устали без наследования. Приходится внедрять лишние классы в элементы или даже, переходить на тёмную сторону силы — копипастить по чёрному.

Отныне! Ваша душа будет чиста как у младенца. Руки в золоте как у царевичей. Дети послушными и приветливыми.

В случае, когда текст не влезает в ширину блока, есть несколько вариантов его визуализации:

1. Разрешить ему вылезать за пределы блока. В большинстве случаев смотрится весьма косячно.
2. Обрезать текст по границе блока. То же смотрится некузяво.
3. Обрезать и нарисовать скроллинг. Это вообще жуть какая-то.
4. Обрезать и сделать плавное затухание к краю так чтобы места обрезания букв не было видно. Сложно применять в случае неоднородного фона. Приходится вручную прятать затухание, когда текст имеет ширину меньше или равную ширине блока.
5. Укорачивать текст, вставляя вконце многоточие.

О реализации последней стратегии и пойдёт далее речь...

Вступление

Привет, Хабр!
Это мой первый хабратопик. Надеюсь, его прочитает хотя бы полтора верстальщика. Если после этого хотя бы один сайт станет лучше, я буду очень рад.

Ничто не предвещало беды

Как и любой слегка красноглазый линуксойд, я люблю экспериментировать. До сборки релиз-кандидатов ядра и ковыряния в экзотических оконных менеджерах дело не дошло, но в поисках приключений я все же пересел на тестовую ветку моего дистрибутива, что привело к переезду на четвертую версию КДЕ.
Несколько месяцев до переезда я присматривался к новым кедам в виртуальной машине, игрался с плазмой и новым оформлением. В один прекрасный день решил я попробовать темную цветовую схему «Wonton Soup», да так на ней и остался, хотя всю жизнь использовал светлые схемы.

Суровая реальность

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

1. браузер использует системные стили и цвета для input'ов на страницах. Абсолютное большинство современных браузеров именно так и поступает для лучшей интеграции в окружение
2. верстальщик прописывает в CSS свой цвет текста для полей ввода, кнопок или списков, но оставляет дефолтный фон. Либо наоборот, меняет только цвет фона

В абсолютном большинстве OS и DE по умолчанию элементы интерфейса имеют светлый фон, текст же рисуется черным цветом. В этом случае ничего страшного не происходит, мы просто увидим, к примеру, input'ы с темно-серым текстом на светлом фоне, как и задумывалось в дизайне страницы.
Но в темных схемах может случится конфуз, и мы увидим темно-серый текст на темном же фоне. Т.е, ничего не увидим.

Доска позора

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

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

Я делаю шаблоны на чистом HTML/CSS уже больше восьми лет. За это время я убедился, что различные соглашения и документирование помогают в работе. Конечно, они не спасают от периодических CSS-кошмаров. Они лишь делают их менее болезненными. Мое решение — следовать определенным принципам в написании стилей. Эти принципы образуют основание, на котором будет строиться все дальнейшее написание стилей, облегчая работу над растущим проектом.

CSS-селектор :visited представляет собой известную опасность когда злоумышленный сайт с помощью вызова getComputedStyle() может узнать какие другие сайты вы уже посетили до этого, причём делать это со скоростью до 210 тысяч проверок в минуту (в Сафари значительно больше).

Серьёзно относясь к privacy, мы в Mozilla в скором времени собираем залатать эту дыру. Ещё неизвестно в какой билд Firefox будут включены нижеследующие изменения, но приглядеться к ним можно уже сейчас:

— функция getComputedStyle (и такие функции как querySelector) отныне будет говорить не совсем правду. Она будет возвращать такое значение, будто пользователь никогда не посещал заданный адрес;
— посещённые ссылки по прежнему можно будет стилизовать по своему, но только ограниченным набором CSS-свойств: color, background-color, border-*-color, outline-color, fill и stroke. В остальном, для стилизации посещённых ссылок будет использоваться стиль какой бы применялся для непосещённых. Также, для установки значений вышеприведённых CSS-свойств вы не сможете использовать функции rgba() и hsla() и использовать прозрачность с ними.

Обновился код CSS Sticky Footer (мой перевод старой версии).

Автор отказался от clearfix-хака в пользу простого overflow: auto и двух селекторов для Оперы и IE8.

По его заверениям, футер надежно прилипает более чем в 50 браузерах.

Как и раньше, решение не подходит для тех, кому футер хочется сделать резиновым.