Статьи

МаCSSаракш. Размышления о стандартах CSS

Пролог, или Невероятное происшествие в парижском бюро мер и весов

Представьте ситуацию: вы приходите в магазин и просите килограмм муки. Продавец с порога огорошивает вас новостью, что вчера в международном эталоне килограмма была обнаружена неточность, поэтому, пока эталон уточняется, с сегодняшнего дня все переходят на старинные фунты и пуды. Вы, чертыхаясь, достаете калькулятор, пересчитываете килограмм в фунты, отвешиваете эту жуткую дробь и идете домой готовить пирог. Когда пирог уже готов, выясняется, что ваш калькулятор считал в русских фунтах, а продавец использовал английские — и рецепт оказался безнадежно испорчен. Вы идете в магазин ругаться (почему вам не уточнили, в каких фунтах надо было считать) и… видите в руках у продавца новенькие гири с маркировкой «1 килограмм»! Но по виду похожие на «дореформенные» пятикилограммовые.

Бред? Конечно! Есть же какие-то базовые стандарты, которые не могут так внезапно меняться по прихоти. Да, они могут уточняться и совершенствоваться — но не так, что прежние эталоны вдруг станут полностью негодными, а потом радикально изменят своё значение. Улучшение стандартов — однонаправленный, поступательный процесс исправления мелких неточностей, а не чередование периодов относительной ясности с полосами полной неразберихи, то туда, то обратно. Так требует здравый смысл.

Почему же не менее бредовые истории оказались возможны в вебе?

ИКФ: Горизонтальное выравнивание, часть 3 (13-я публикация цикла “Тайны CSS2.1″)

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

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

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

ИКФ: Горизонтальное выравнивание, часть 2 (12-я публикация цикла “Тайны CSS2.1″)

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

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

ИКФ: Горизонтальное выравнивание, часть 1 (11-я публикация цикла “Тайны CSS2.1″)

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

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

ИКФ: Вертикальное выравнивание в строке, часть 3 (10-я публикация цикла “Тайны CSS2.1″)

vertical-align + line-height

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

Блок-схема алгоритма выбора структурных (секционных) элементов HTML5

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

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

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

ИКФ: Вертикальное выравнивание в строке, часть 2 (9-я публикация цикла “Тайны CSS2.1″)

top и bottom

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

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

Простые подсказки со стрелками на CSS

Очень простые CSS3-подсказки со стрелками. Ключём к созданию этих подсказок являются псевдо-элементы (:after и :before). Псевдо-элемент :after получает текст из атрибута "title" с помощью функции "attr()" в качестве своего контента и соответственно стилизуется так, как нам надо. Чтобы создать сами стрелки, используется псевдо-элемент :before, а треугольнички внизу подсказки делаются с помощью границ.

Подсказки становятся видимыми в тот момент, когда пользователь наводит указатель мыши на ссылку. Здесь мы используем псевдо-класс :hover. В итоге получается классный и полезный эффект.

Два мира, две спецификации HTML5: кто станет царем горы?

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

А что собственно случилось?

Иэн Хиксон (или попросту Хикси), работающий до этого момента "на два фронта" (WHATWG и W3C), решил покинуть один из них, а точнее W3C. Причиной этому явились многие расхождения, которые постепенно образовывались между двумя рабочими группами. Поначалу они старались, чтобы у них получалось одно и то же, но по факту W3C-версия всегда плелась в хвосте у WHATWG, а один раз отстала чуть ли не на год. 

Простые и успокаивающие уведомления на CSS3

Классные уведомления на CSS3. Их автором является Peter Viszt

Я сделал несколько изменений в CSS и HTML, а также добавил Предупреждающие уведомления (блок с жёлтым оттенком). Сами они создавались с помощью нескольких базовых свойств CSS3, например, таких как box-shadow для границ и внутреннего блеска и linear-gradient для фона и т.д.

ИКФ: Вертикальное выравнивание в строке, часть 1 (8-я публикация цикла “Тайны CSS2.1″)

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

В следующем цикле статей мы постараемся досконально углубиться в работу vertical-align, разобрать поведение этого свойства и способы его влияния на высоту строки.

Закруглённые стрелки «Назад» и «Вперёд» для навигации

Простые ссылки вперёд/назад для навигации с закруглеными стрелками на CSS3. В создании стрелок использовался обычный элемент div и два псевдо-элемента  :after и :before. А сами закругления сделаны с помощью border-radius для псевдо-элементов.

ИКФ: высота строки, часть 5 (7-я публикация цикла «Тайны CSS2.1»)

В комментариях (1, 2) к предыдущей публикации нашего цикла внимательные читатели указали, что не все браузеры одинаково (по спецификации) определяют базовую линию для инлайн-блоков и инлайн-таблиц. Сюрприз: две наиболее заметные ошибки — в браузерах на движке webkit, которые всегда славятся хорошей поддержкой модных CSS-новинок. Вот эти ошибки:

1. Overflow инлайн-блоков не влияет на положение их базовой линии (ссылка на баг).

2. Инлайн-таблицы выравниваются не по базовой линии первой строки, а по нижней границе всей таблицы. Этот баг уже исправлен и ближайшие релизы вот-вот начнут вести себя по спецификации.

line-height для замещаемых элементов

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

Яйца на CSS

Простые и свежие CSS3 Яйца сделаны с помощью border-radius и прямоугольного элемента div. В создании фигуры яйца использованы два значения свойства border-radius, разделённые слешем. Для примера: border-radius: 50% 40% / 50% 80%; будет создана искажённая овальная фигура (посмотрите этот пример на тестовой площадке).

ИКФ: высота строки, часть 4 (6-я публикация цикла «Тайны CSS2.1»)

line-height для инлайн-блоков и инлайн-таблиц

Несмотря на то, что инлайн-блоки (inline-block), так же как и инлайн-таблицы (inline-table) входят в инлайновое форматирование строк, они имеют свои особенности, которые отличаются от особенностей обычных инлайн-элементов или текста. Это довольно-таки интересно и нам следует о них поговорить.

Эти боксы — особенные: снаружи они ведут себя как неразрывные инлайн-боксы (наподобие отдельных слов текста), но внутри у них — свои собственные, обособленные блочные «миры», блочные контексты форматирования (о них мы расскажем в скором будущем). У инлайн-блока всё его содержимое представляет собой такой «блочный мир» (поэтому он и инлайн-блок), а у инлайн-таблицы отдельный блочный контекст создается каждой ячейкой. И в каждом из этих «маленьких блочных миров» могут находиться собственные лайн-боксы, а в них — инлайн-боксы, как обычно.