CSS *

В этом посте я постарался собрать все известные мне хаки для 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 позволяет разработчику задавать на сайте тот шрифт, который ему нужен

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

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

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

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

Этот топик не имеет смысла.

Он про философию, не про технологии (хотя и про них тоже). Прекратите его читать, если текст более двух абзацев для Вас слишком длинный. Если Вы уже используете правильные технологии — iMac, Linux, PostgreSQL, MVC-фреймворки и забыли как пишется TABLE — не читайте — Вы уже готовы к жизни, поздравляю!

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

Около 10 лет назад, когда я начал создавать сайты, я стал впервые сталкиваться с тем, что то, что я делаю, работало, но оказывалось часто на взгляд многих неправильно работающим. В то время еще существовал список рассылки «banners», где можно было кому угодно, даже простым школьникам, коим я тогда и был, поспорить напрямую с Артемием Лебедевым, Антоном Воскресенским (владельцем LinkExchange.ru) и другими передовиками РуНета.

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

В W3Cast #3 Денис ( CurlyBrace) затронул тему использования styleguides, а у меня как раз уже была статья по этой теме. Поэтому я решил поделиться ей, чтобы показать наглядные примеры, демонстрирующих возможности «стилевых гидов».
«Стилевые гиды» — это свод правил и соглашений, предоставляющих разработчикам информацию о структуре кода и принятых правилах оформления. Чаще всего используется группой разработчиков, при совместном участии в проекте или же для самодисциплины при разработке кода.
Если проект большой, то он обрастает многочисленными файлами CSS с различными цветовыми схемами, типографикой и другими стилевыми установками. Чтобы избежать путаницы в структуре кода и не забыть что да как, нужно разрабатывать структурированный код, который впоследствии будет проще использовать, править и частично использовать в других проектах.

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



Особенно обратите внимание на прелестные артефакты прозрачности по углам.

Какие есть выходы из этой ситуации?

Несколько дней назад Daniel Glazman опубликовал на своем блоге новость о том, что он вместе с David Hyatt успешно реализовали идею о CSS-константах (статья в моем блоге). Уже сегодня каждый может увидеть CSS-константы в действии. Для этого нужно установить свежую версию WebKit Nightly Builds.

Собственно, вот мой маленький тест: стили блока div я задала константами.

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

И так, моя пятерка советов верстальщику:

1. Никогда не слушай ничьих советов по верстке, только если ты не сам спросил.

2. Будь внимательным к мелочам, ведь они в конечном счете составляют впечатление о твоей работе.

3. Будь дисциплинированым. Пиши код без ошибок, по самым строгим стандартам. Это не дешевые понты, а основной способ избежать ошибок и не “потеряться” в коде.

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

5. Инспектируй время от времени свои старые работы. Если при рассмотрении одной из них окажется что ты совсем ничего не хотел бы в ней изменить — пора подумать о смене профессии ;)

Upd: Все советы на сегодняшний день

* Александр RMcreative Макаров
* Виталий Харисов
* Никита Селецкис
* Александр Исаков
* Алекс Iline
* Юрий Дроздов
* The Webmakers Lounge
* Марат Таналин
* Вадим Макеев
* Юрий Артюх
* Павел Корнилов
* kizu.ru

Román Cortés нарисовал Мона Лизу из фавиконок, Джорджа Буша и Гомера Симпсона на чистом CSS.

А Ned Batchelder показал чудесную анимацию этого действа в своем блоге при помощи javascript.

Blueprint — довольно интересный фреймворк для верстки сеткой, который я лично считаю удобным, потому как он позволяет довольно просто создавать весьма сложные страницы, при этом не думая об IE.

Со страницы проекта на Google Code скачиваем архив.

В архиве будет папка blueprint/ там и содержатся основные файлы фреймворка, их и подключаем к странице:

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> 
<!--[if IE]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

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

В связи с участившимися сообщениями о том, что в CSS хотят добавить переменные, анимацию, трансформацию и прочая, хотелось бы немного отстраненно порассуждать на эту тему.
CSS, которому уже 12 лет, изначально был задуман и разрабатывался как средство для описания внешнего вида документа. С тех пор утекло много воды и технология претерпела значительные изменения и дополнения. На данный момент, рабочая версия по стандарту W3C, принятая в 2006 году — Уровень 2.1. Уровень 3 находится в состоянии разработки (есть черновик), и ожидается с нетерпением многими разработчиками.
Вокруг будущего CSS ходит много слухов и предположений, коротые муссируются и множатся, выливаются в дискуссии и споры. Ведь по сути, если хотя бы половина предлагаемых изменений будет осуществлена, то CSS превратится в (полноценный?) язык программирования визуальной составляющей веб-документов.

Что-то мне кажется, что в этот раз с идеями внедерения новых правил разработчики перестарались…
Dave Hyatt, Dean Jackson и Chris Marrin (все трое работают в Apple) предложили внедрить в CSS 3 поддержку создания анимации, трансформацию объектов, их изменение с  течением времени и ввести css-переменные.

В этой статье я расскажу вам как сделать RSS иконку любого цвета, используя всего одну картинку.

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

« Открыть ссылку в новом окне» — это просто отвратительно! Я сам хочу решать когда, что и как открывать! Если мне понадобится открыть ссылку в новом табе, то я зажму Ctrl (в Опере — Shift).

Хотел что-то перевести и случайно скопировал CSS правило в переводчик Google, я на секунду даже поверил что это и есть перевод. Решил скопировать кусок побольше, вот что вышло :)

# заголовок охватывают (плавать: слева; дисплей: встроенный; текста-приведения: центр; отступы-слева: 15px)
# заголовок период сильной (размер шрифта: 130%)
# заголовок охватывают сильное (начертание шрифта: обычный; отображения: блок; размер шрифта: 60%)
# заголовок период сильной я (дисплея: нет)
# заголовок охватывают ул один (размер шрифта: 100%;)
# результатов й (бело-пространстве: nowrap; обивка: 5px; текста-приведения: левый)
# результатов td (границе-рейтинг: 1px твердых # ccd3d9; обивка: 6px)
# результатов td, # результатов td (img вертикально-присоединяются: средний)