Максим Усачев: статьи и переводы

От редакции css-live.ru: Flexbox — один из самых ожидаемых «раскладочных» модулей CSS3, но с непростой судьбой. Мы уже писали о нелегких приключениях этой спецификации. В последнее время интерес к этому механизму особенно вырос, благодаря тому, что новый синтаксис уже поддерживается в Chrome 21+ и вот-вот начнет поддерживаться в Опере. Но изменения спецификации привели к огромной путанице как в учебных материалах, так и в справочниках о браузерной поддержке, и разобраться, где о какой редакции идет речь — об актуальной или об устаревшей — очень непросто. Надеемся, что эта статья Криса Койера поможет вам сориентироваться во всей этой путанице.

Перевод статьи “Old” Flexbox and “New” Flexbox с сайта css-tricks.com, автор Крис Койер, переводчик Илья Стрельцын

7 августа 2012 г.

Просто ради того, чтобы прояснить для всех: «Flexbox» (точнее, CSS Flexible Box Layout Module — модуль «гибкой» раскладки) претерпел за последних три года много изменений. Изменений как в спецификации, так и в том, что реализовано в браузерах.

Сделать текст размытым с помощью простого CSS кода не так уж и сложно. Весь трюк заключается в свойстве text-shadow и использовании свойства transition, делающее плавную анимацию размытого текста. В этом примере используются две тени (одна из которых сдвигается вниз и вправо, а другая влево и вверх), разделяя их запятой. Кроме того, цвет текста должен быть таким же, как и цвет шрифта, чтобы текст выглядел размытым. Иначе он будет выглядеть как тень.

Эта книга, написанная создателями css-live.ru (Максимом Усачёвым aka psywalker и Ильёй Стрельцыным aka SelenIT), посвящена одной из самых важных и вместе с тем самой загадочной, неизученной, неоднозначной и полной неочевидных сюрпризов стороне действующей спецификации CSS — визуальному форматированию текста.

20 сентября 2012

Рабочая Группа по Каскадным таблицам стилей (CSS) предлагает реализовать в браузерах модуль CSS Flexible Box Layout, находящийся в статусе кандидата в рекомендации. Данная спецификация описывает боксовую модель CSS,  оптимизированную для разработки пользовательских интерфейсов. В модели flex layout потомки гибкого контейнера могут располагаться в любом направлении и могут изменять свои размеры, либо увеличиваясь, для того заполнить свободное место, либо уменьшаясь, чтобы избежать переполнения родительского контейнера. И горизонтальным, и вертикальным выравниванием дочерних элементов легко манипулировать. Вложение этих боксов друг в друга (горизонтальные внутри вертикальных или наоборот) может быть использовано для создания разметки в двух измерениях. 

Более подробно о Style Activity

Ранее в этом году меня пригласили выступить в Филадельфии на конференции «Новые технологии для предприятия». Я не думала, что смогу рассказать что-то полезное на такой конференции, не будучи практикующим веб-разработчиком, но посмотрев презентацию мероприятия, заинтересовалась; тем более, я знаю, что могу выступить хорошо. В общем, я согласилась. Люблю Филадельфию. :)

По некоторым темам конференции (например, «Как предоставить хороший баг-репорт») я бы могла соорудить несколько слайдов и вскользь упомянуть о них. Но так не годится. Я посвятила много времени подготовке, в течении нескольких недель выписывая мысли на бумагу — я «аналоговый», пишу руками.

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

11 сентября 2012

Сегодня рабочая группа CSS опубликовала три новых черновых спецификации.

• Модуль условных правил CSS 3-го уровня. Этот модуль содержит возможности CSS для условной обработки частей таблиц стилей, в зависимости от возможностей получателя того документа, к которому эти стили применяются. Он включает в себя и расширяет функциональность CSS уровня 2, основанного на CSS уровня 1. Основные расширения в сравнении со 2-м уровнем — возможность вкладывать некоторые @-правила внутрь '@media' и добавление новых правил '@supports' и '@document' для условной обработки.
• Модуль значений изображения и замещаемого содержания 4-го уровня. Этот модуль содержит возможности CSS 4-го уровня, относящиеся к типу <image> и замещаемым элементам. Он включает в себя и расширяет модуль значений изображения и замещаемого содержания 4-го уровня. Главными расширениями по сравнению с уровнем 3 являются ряд дополнений к типам ‘<image>’ и ‘<gradient>’, расширения функции ‘image()’, определения для интерполяции (генерации промежуточных состояний) нескольких типов ‘<image>’ и несколько свойств, управляющих взаимодействием замещаемых элементов и CSS-моделей раскладки.
• CSS-трансформации. CSS-трансформации позволяют элементам, стилизованным с помощью CSS, трансформироваться в двух- или трехмерном пространстве. Эта спецификация — результат слияния спецификаций двумерных CSS-трансформаций, трехмерных CSS-трансформаций и SVG-трансформаций.
   

Более подробно о Style Activity

Простые ленточки созданные на чистом CSS с помощью псевдо-элементов :before и :after и палитры цветов adnroid ice cream sandwich.

text-align и новые значения из CSS3

До этого момента мы обсуждали значения text-align, которые, во-первых, принадлежат спецификации CSS2.1, а во-вторых, уже давно существуют и работают во всех известных нам браузерах. Но прогресс не стоит на месте и на пороге уже стремительно вырастает CSS3, который дарит нам новые модули и значения для известных свойств. И здесь он не остался к нам равнодушен, предложив ещё несколько значениий для text-align, которые уже есть в CSS3, но содержатся в черновике.

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

Вышел Twitter Bootstrap 2.1.0: теперь с подменю в выпадающем списке, стилями для изображений, 120+ решённых ошибок и многое другое. 

Подробности читайте здесь.

Горизонтальное выравнивание по ширине строки

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

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

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

W3C рады сообщить об обязательствах, взятых Adobe, Google и Microsoft по финансированию, которое позволит консорциуму задействовать дополнительный персонал для поддержки деятельности всех рабочих групп HTML. Эти спонсорские средства помогут W3C достигнуть целей, анонсированных в июне, в ответ на апрельский призыв глав рабочих групп HTML к поиску редакторов. В своей апрельской рассылке главы так же обозначили параллельный объем работ по завершению стабильного стандарта HTML5 к 2014 году и взаимодействию с сообществом по поводу будущих возможностей HTML. Узнайте больше, посетив сайт рабочей группы HTML.

vertical-align + line-height

Если вы внимательно читали предыдущие статьи, то уже наверняка поняли, как по отдельности работают vertical-align и line-height. Но как эти свойства взаимодействуют между собой? Краткий ответ – практически никак: их работа напрямую не пересекается. Задача vertical-align — сдвигать базовую линию, на сколько велено, а задача line-height (благодаря half-leading'ам) — отталкивать чужие лайн-боксы от этой базовой линии сверх метрик шрифта.

Лёгкая для понимания блок-схема алгоритма выбора структурных (секционных) элементов HTML5. Она сможет помочь вам разобраться в предназначении некоторых новых элементов HTML5.

Здесь можно увидеть эту схему «в полный рост».

Источник схемы

top и bottom

Если с вышеупомянутыми значениями было всё достаточно прозрачно, то с top и bottom не всё так просто. У этих значений есть особая черта, которой нет ни у одного другого значения vertical-align. Инлайн-боксы с vertical-align и значениями top или bottom способны отвязывать себя от базовой линии.

Но всё же, давайте по порядку.