Статьи

Поля, отступы и границы в инлайновом форматировании

В блочном контексте форматирования поля (margin), отступы (padding) и границы (border) могут оказывать влияние на любые координаты и расположение элемента, и так же могут влиять на окружающий контекст. Но что происходит в этом плане в инлайновом контексте? Давайте разберёмся.

Спецификация сообщает нам, что в инлайн-форматировании горизонтальные margin, border и padding между инлайн-боксами учитываются, а вот вертикальные не дают никакого эффекта и не могут влиять на окружающий контекст. Да, сразу стоит уточнить, что речь идет о инлайн-боксах, создаваемых обычными элементами с display:inline (читайте первую часть цикла), а не об инлайн-блоках или замещаемых элементах вроде картинок.

Некоторым может показаться, что здесь всё прозрачно, но на самом деле это не так. Поэтому я решил, что нам следует подробнее разобрать эти моменты, и начнём мы, пожалуй, с margin.

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

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

Паттерн разметки, который будет выбран в итоге, будет иметь огромное влияние на то, как разработчики будут строить сайты в будущем. И не только адаптивные сайты. Все сайты.

Добрый день, уважаемые коллеги!

Как вы уже наверное знаете, мы стремимся создать, действительно, профессиональное сообщество. Сообщество веб-разработчиков, которое разговаривает на языках HTML, CSS и JS. 
Но, к сожалению, наших физических возможностей не хватает на то, чтобы часто пополнять сайт интересным материалом, поэтому мы вынуждены попросить помощи у сообщества. Если у кого-то из вас вдруг возникнет желание быть причастным к великому делу и внести свой вклад в его развитие, то мы бы были безумно этому рады. В частности нам нужны переводчики. Люди, хорошо владеющие английским языком, желающие помогать сообществу и развиваться в этом направлении.

Все ваши предложения пишите на почту: psywalker@css-live.ru

В основе этой статьи лежит перепевка спецификации CSS 2.1 по телефону Рабиновичем SelenIT-ом. Если что-то вышло криво — я не виноват, это всё он. Конструктивная критика и предложения по улучшению материала приветствуются!

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

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

Ну, как говорится — с Богом!

Для тех, кому лень читать всю статью: в современном HTML нет «блочных» и «строчных» элементов. Это деление — историческая ошибка, условность и анахронизм времен конца 90-х. Что во что можно вкладывать, а что нет, определяется не тем, как элементы выглядят, а тем, что они делают. А «блочностью», «инлайновостью», любыми их комбинациями и др. чисто внешними чертами заведует только CSS.

Остальное — для тех, кто до сих пор не верит или просто желает разобраться до конца.

Брюс Лоусон, среда, 16 мая 2012

После Великого Апрельского Браузерно-Префиксного Тарарама пришла Великая Майская Адаптивно-Картиночная Шумиха 2012-го.

Адаптивные изображения — очередная неразгаданная загадка «отзывчивого» веб-дизайна. Вы отдаете большие картинки высокого разрешения, подходящие для экранов типа «ретины», которые устройства с меньшим разрешением показывают уменьшенными, зря расходуя трафик? Или вы отдаете картинки низкого разрешения, которые мерзко выглядят, будучи растянутыми на большом экране? Вебмастерам приходится рассчитывать на искусные хаки, чтобы отдавать различные контентные картинки (т.е. <img> в HTML, а не CSS-фоны) для разных типов устройств.

Последнее обновление: 05.10.2012 

Сегодня я проснулся с каким-то странным чувством. Мне как будто казалось, что что-то должно произойти. Я вошёл в скайп и не ошибся! Меня уже поджидал Илья Стрельцын (@SelenIT2) с неожиданным решением одной известной задачи, связанной с очисткой потока.

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

Итак, у вас есть резиновый лейаут и изображения, которые меняют размеры, но вам нужно заставить так же изменяться и текст. Один и тот же размер шрифта не подойдет ко всем возможным размерам экранов!

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

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

Несколько дней назад невероятно талантливый Роман Комаров опубликовал свой эксперимент «Скроллируемые тени» на чистом CSS. Если вы используете Google Reader вы, вероятно, знакомы с этим эффектом:

В CSS появились новые значения для изменения размеров объектов в зависимости от размера области просмотра (viewport): vw, vh и vmin. Уместно рассказать об этом сейчас, т.к. эти вещи появатся уже в Chrome 20 (в сборке canary на момент написания статьи). Пока нельзя сказать, что это работает. Использовать в продакшне их пока нельзя, но довольно скоро мы сможем ими пользоваться.

Почему это так классно?

На это есть несколько причин.

Если вы когда-либо использовали списки определений (<dl>) то вы в курсе проблемы. По дефолту, у <dt> и <dd> стоит display: block. Для того, чтобы превратить их в то, что нам надо в большинстве случаев (каждая пара термина и определения на одной строке) мы обычно используем несколько техник:

• Используем разный <dl> для каждой пары: разметка доминирует над стилями, что плохо
• Float: не гибко
• display: run-in; для <dt>: плохая поддержка браузерами (не поддерживается в Firefox)
• Добавление <br> после каждого <dd> и установка термину и определению display: inline;: невалидная разметка. Нужно ли продолжать?

Ах, если бы добавление <br> было валидным… Или, даже так: что если бы мы могли вставлять <br> при помощи CSS? На самом деле мы можем!

Сегодня, в мой день рождения (26 апреля), я хочу сделать подарок всем верстальщикам и представить вам абсолютно уникальное, новое и самое главное — полезное решение выравнивания блоков по резиновой сетке, которого так все долго ждали и которого ещё нет в сети.

При верстке резиновых страниц часто возникает задача выстроить однотипные блоки (например, товары в каталоге или фотографии в галерее) по сетке, наподобие таблицы, но гибкой, с заранее неизвестным количеством столбцов. Когда-то единственным способом для этого был float, и блоки приходилось прижимать к левому краю. С помощью inline-block эту задачу можно решить проще и гибче, блоки могут иметь разную высоту, и разное вертикальное выравнивание. Но почему-то такие макеты в массе всё равно прижаты к левому краю. Казалось бы, что мешает отцентрировать эту сетку, а то и вовсе растянуть ее по ширине свободного места c помощью text-align: center или justify соответственно?

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

HTML5 привносит столько потрясающих новинок, что люди готовы ждать от него самых невероятных чудес и легко верят в реальность содержания следующей статьи, даром что это первоапрельский прикол.

Веб — преимущественно визуальная среда, изредка в ней встречаются звуки. HTML5 поддерживает теги video и audio, но другие наши органы чувств были несправедливо обделены. До сих пор.

В ближайшее время W3C представит три новых элемента HTML5, поддерживающих интерфейсы для других органов чувств:

• <texture> для осязания
• <aroma> для обоняния
• <flavor> для вкуса

Дорогие друзья. Сейчас у Вас есть возможность не только делать отзывы о сообществе, но и показать, насколько Вы любите его. Представляем вашему вниманию КОНКУРС.

Правила:

Всё, что вам нужно сделать – это следовать нижеприведённой инструкции:

• «Лайкнуть» нашу страницу в социальной сети Facebook (http://www.facebook.com/csslive). Для этого вам нужно иметь свой аккаунт в социальной сети Facebook.
• Найти на стене конкурсную публикацию (она будет отмечена оранжевой ленточкой и будет включать в себя правила и картинку конкурса).*
• Под конкурсной публикацией есть кнопочка «Поделиться». На неё нужно нажать и опубликовать у себя на стене конкурсную публикацию (можно добавить свой комментарий).

И ВСЁ! Вы стали участником конкурса. Теперь наша цель – 250 «лайков» на странице. Когда мы достигнем своей цели, мы разыграем свою фирменную футболку.

Чем больше нас — тем ближе заветный приз!

*Публикация, отмеченная оранжевой ленточкой, будет находиться на самом верху стены в течение одной недели. Поэтому, каждый понедельник мы будем повторно публиковать новость, и у вас есть шанс поделиться публикацией несколько раз (количество публикуемых вами публикаций никак не влияет на возможность получить приз).