CSS *

Работы этого человека обошли весь интернет, в том числе публиковались на Хабре. Самые известные, пожалуй, изображения Гомера Симпсона и Буша, реализованные с помощью CSS. Роман пошел еще дальше и еще в мае 2008 года выпустил программное обеспечение для получения 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 позволяет разработчику задавать на сайте тот шрифт, который ему нужен

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

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

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

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

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

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

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

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

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

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

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

Хочу представить на суд общественности свой вариант реализации полупрозрачного блока со скругленными углами. Кроссбраузерно, полностью резиново. На все про все 3 div'а. Интригует?

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

Что будет если объединить две проблемы, связанные с версткой?
Все мы в глубине души надеемся, что проблемы, возникающие при решении этих проблем сложатся. Однако, практика показывает, что они перемножаются.
Если Вам интересно, как используя только дивы и валидные CSSки сделать страницу, которая «отбрасывает тень» (слева и справа) и при этом занимает не меньше экрана по высоте, добро пожаловать под кат!

Что будет если объединить две проблемы, связанные с версткой?
Все мы в глубине души надеемся, что проблемы, возникающие при решении этих проблем сложатся. Однако, практика показывает, что они перемножаются.
Если Вам интересно, как используя только дивы и валидные CSSки сделать страницу, которая «отбрасывает тень» (слева и справа) и при этом занимает не меньше экрана по высоте, добро пожаловать под кат!

В 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

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

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