CSS *

Представьте, что вы пишете блогохостинг и хотите позволить авторам блогов менять свой дизайн. Картиночки там вставлять, цвета менять, пропорции регулировать… Представили? Если хорошо представили, то уже поняли, что без констант и формул в 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'ы с темно-серым текстом на светлом фоне, как и задумывалось в дизайне страницы.
Но в темных схемах может случится конфуз, и мы увидим темно-серый текст на темном же фоне. Т.е, ничего не увидим.

Доска позора

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

Я делаю шаблоны на чистом 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() и использовать прозрачность с ними.

Вдохновленный логотипом Opera, сделанный Дэвидом Дисандро (David Desandro) с помощью CSS, Шон Мартел (Sean Martell) сделал логотип Mozilla Labs Raindrop, о котором писали и на хабре, правда не очень много.

В поддержку дней CSS expressions на хабре

Думаю все, кто сталкивался с решением каких-нибудь проблем в IE<8 знает про CSS expressions и про «одноразовые» CSS expressions, которые применяются к элементу только один раз, тем самым не создавая постоянной нагрузки на процессор. Обычно это решается так:

.my-class {
    behavior: expression(someMagick(), runtimeStyle.behavior = 'none');
}

Вероятно, многие из вас используя css-expressions сталкивались с проблемой периодического появления сообщения abort. В народе поговаривают, что связано это с изменением DOM-дерева до его готовности.

Я тоже сталкивался и, не долго думая, решил написать небольшую «обертку» для expression’ов, которые я часто использую, учитывающую готовность DOM, упакованную в файл стилей.
Оную вашему вниманию и представляю.

Дэвид Дисандро разработал CSS, который рисует шрифт. Шрифт он назвал Curtis.

Уже неоднократно видел утверждение, что CSS необходимо комментировать, чтобы потом было проще сориентироваться себе или тому, кто также поддерживает или будет в дальнейшем поддерживать ваш код. Но почему-то никто не предлагает использовать какой-то универсальный формат комментариев, который был бы понятен всем, хотя в программировании такое используется повсеместно: JavaDoc, JSDoc, PHPDoc и т.п.

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

Расскажу о своих правилах, которые я использую в любом файле CSS.

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

Команда IE официально опубликовала алгоритм определения Document Mode в IE8.

Оказывается при определении Document Mode учитывается множество косвенных параметров, связанных с интранетом и клиентскими настройками.

CSS может связываться с HTML элементами используя любые из его атрибутов. Вы наверняка знаете о классах и ID. Проверим это в HTML:

<h2 id="first-title" class="magical" rel="friend">David Walsh</h2>

Этот один элемент имеет три аттрибута: ID, class и rel. Для выбора элемента в CSS вы можете использовать селектор ID (#first-title) и селектор class (.magical). Но знаете ли вы, что можно использовать для выбора атрибут rel? Это так называемый селектор атрибута:

h2[rel=friend] {
  /* woohoo! */
}

Кликабле хайрез 5,284мб

На днях мне приснилась бесполезная, но прикольная мысль, а что если попытаться создавать изображения только при помощи php и библиотеке GD2, CSS и HTML. Сказано-сделано.
Идея очень простая — берем исходное изображение, пробегаем по всем его пикселя и узнаем код цвет каждого, после этого создаем див размеров 1px на 1px и задаем ему цвет фона такойже как и у исходного пикселя в изображении. В результате получаем полный аналог графического собрата. Но правда чтобы наслождаться HTML-графикой нужен хороший процессор и современный браузер.

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

Конечно, на промышленное применение это не потянет, но как just for fun — вполне сойдет.

День, когда стандарт CSS3 будет официально утвержден, а все популярные браузеры начнут его отображать приблизит нас, верстальщиков, к нашему же «раю верстальщиков» в несколько раз. Пока же заглянем в будущее и узнаем, как можно создать псевдо-3D блок используя только css и html.

Существует много способов по верстке колоночных макетов. Уже не один нос разбит в течении холиваров, разожженных по поводу использования тех или иных методов. Казалось бы, что все должно быть предельно ясно и понятно, но все-равно возникает много трудностей. Я хочу и свою лепту вложить во всеобщее благое дело, и потому потратил относительно немного времени на эксперименты, которые привели меня к созданию еще одного метода, в котором есть следующие плюсы и минусы:

Плюсы

• Есть прижимающийся к полу футер
• Колонки меню растягиваются по 100% высоте
• Колонок может быть сколько душе угодно
• Колонки могут быть как лево- так и правосторонними, а также совмещенными, например 2 справа и 1 слева
• Ширина как резиновая, так и фиксированная
• Критический минимум хаков
• Не используется Javascript
• Не используются бекграундовые изображения для создания эффекта колонки
• Никаких таблиц
• Одинаковый результат в ie5.5, ie6, ie7, ie8, ff3.5, o10, chrome4 (Если у вас не работает в каком-то браузере — отпишитесь, пожалуйста, в комментах. Исправим и приведем к универсальному виду)

Минусы

• Есть несколько «лишних» блоков. (Я бы и сам рад от них избавиться)
• Есть несколько абсолютно-позиционируемых блоков

Opera 10.50 стала поддерживать border-radius и много других интересных вещей, в этой связи встал вопрос — как отличить Opera 10.50 от более ранних версий в CSS?

Например, у меня на сайте скруглённые уголки для «Оперы», начиная с версии 9.50 делаются при помощи SVG, 10.50 вполне могла бы нарисовать их без этого «изыска». Помучался-помучался и придумал несколько CSS-хаков, собственного изобретения.