Gastarbayteroff.NET

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

[Далее]

В этом посте я постарался собрать все известные мне хаки для css. Многие могут усомниться в их надобности для нормальных современных браузеров, потому как большинство хаков всегда применялись только для IE, но этот пост скорее для любознательных :), в верстке хаки вообще лучше не использовать. Но так или иначе, раз они есть, грех о них не знать.

В отличие от многих хаков для той же Opera, которые также будут обработаны и Safari, я немного изменил код и Opera 9.2, Opera 9.5 и Safari 3 увидят каждый свой css.

[Далее]

Шрифты в Em/% хороши всем — возможностью пользователей IE увеличивать шрифт, заботой о пользователях, что предпочитают увеличивать размер шрифта браузера по-умолчанию, чтоб лучше видеть текст, да и просто являются нормой для профессиональных верстальщиков.

Минусы: … их вроде как нет, но!
А что если у пользователя разрешение экрана выставлено не в стандартное 96 dpi, а в 120?
Сайт с увеличенными шрифтами смотрится уже не так красиво, как нарисовал дизайнер — ведь масштабируются только шрифты, а не весь сайт! А разрешение 120dpi становится всё популярней, особенно на ноутбуках! Что же делать? Возвращаться к px?

Нет!

[Далее]

Добрый день всем.



Как известно, Internet Explorer вплоть до 7 версии не поддерживает дочерние селекторы вида E>F. Рискуя получить множество минусов от более просвещенной аудитории Хабра, хочу поделиться небольшой хитростью, которая позволяет эмулировать функциональность дочерних селекторов для IE версии 6 и ниже.

[Далее]

Предлагаю вашему вниманию таблицу значений отступов от букв до верха и низа строки, для стандартного значения line-height.

Эта таблица нужна для точного определения padding или margin обрамляющего или близлежащих элементов.



Вот картинка-легенда, чтобы было ясно о чем речь:

[Далее]

Сотрудник Mozilla, Джон Даггет подготовил сборку Firefox’а с поддержкой @font-face из спецификации CSS3 (часть «web font»). На данный момент она доступна только для Windows и Mac — для Linux пока нет. Есть нюансы которые описаны в комментарие на баг 70132, один из которых состоит в том, что по умолчанию скачиваются лишь те шрифты, что располагаются на просматриваемом сайте (домене), что бы исправить это необходимо оключить опцию gfx.downloadable_fonts.same-site-origin.enabled на странице about: config.



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

[Далее]

Настоящие CSS- джедаи жаждут трудности. Правила хорошего тона заставляют их разносить в пух и прах очередную версию броузера Internet Explorer на форумах, но в жизни они жаждут IE. Ибо укрощение этого монстра тем и отличает мудрого джедая от падавана.



Когда по работе затишье, баги все поправлены, а новые ещё не обнаружены, возникает проблема чем бы занять себя. В такие минуты хорошо вспомнить о каком нить своём хобби, на которое вы согласны тратить кучу времени, не получая материального вознаграждения за это. У меня такое хобби — HTML/CSS верстка.



Как то раз я придумал себе изначально сложное задание, на которое не жалко было бы потраченного времени даже если ничего не получится. Само задание звучит просто: „Сделать верстку для своего блога используя внутри HTML только один DIV в который будет заключён основной текст страницы“. Что из этого получилось можно увидеть посмотрев на мой блог, а разные CSS хитрости узнать дочитав статью до конца.

[Далее]

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

Спецификация CSS 2.1 подразумевает, что наша страничка может выводится на следующие типы носителей:

all — стили будут работать для любого типа устройства по мере его способностей

braille — для вывода на устройства, выводящие информацию азбукой Брайля для слепых

embossed — то же что и braille, но не для устройств, а для физических страниц

handheld — говорит за себя — для устройств, ограниченных в разрешении и пропускной способности сети

print — тоже очевидно — для вывода на устройство печати постраничного материала (он же будет отображен в предпросмотре печати большинством современных броузеров)

projection — для презентаций, тоже постраничных

screen — для вывода на экран компьютера, где мы чаще всего сейчас и видим HTML-документы

speech — для вывода на «читалки»-синтезаторы (в CSS2 назывался «aural»)

tty — для любителей Lynx, проще говоря — для терминального вывода с ограничениями по форматированию

tv — для вывода на телевизор (низкое разрешение, проблемы с промоткой)

Мы остановимся на print и screen

[Далее]

Давно мы о таблицах не говорили. Да и что о них говорить? Их оформлять надо. Табличное представление информации является одним из важных инструментов донесения данных до пользователя и несомненно должно быть удобным и легким для восприятия.



Существуют различные методы визуального разграничения информации в таблицах для большего удобства восприятия. Такие как разделение строк таблицы различным цветом. Этот способ известен под названием «Полосатые таблицы».



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

[Далее]

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

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

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

[Далее]