Cтатьи по тегу «CSS»

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

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

vertical-align + line-height

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

top и bottom

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

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

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

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

Как известно, с начала возобновления в W3C работы над новой версией стандарта HTML (известной как HTML5) велись параллельно. WHATWG (самостоятельная рабочая группа по технологиям гипертекстовых веб-приложений, образованная представителями разработчиков браузеров и инициировавшая работу над новой версией HTML) поддерживает и развивает «живой стандарт HTML», а рабочая группа по HTML в W3C периодически выпускает «снимки» (snapshots) спецификации в соответствии с утвержденным W3C рабочим процессом (по которому спецификация постепенно «дозревает», последовательно меняя статус от черновика до окончательной рекомендации). До сих пор главным (и фактически единственным) редактором обеих спецификаций был один и тот же человек — Иэн Хиксон (известный также под ником Hixie).

Со временем между двумя версиями спецификации стали накапливаться расхождения. Сначала W3C попытался разделить спецификацию на несколько отдельных документов (в частности, от основной спецификации были отделены 2D Сanvas API, серверные события и т.п.), что в итоге привело к путанице, и WHATWG вернулись к модели единой большой спецификации. Затем стало понятно, что цели обеих групп тоже расходятся. Как поясняет в своем письме Хиксон, в WHATWG старались создавать «каноническое описание HTML и смежных технологий», исправляя ошибки спецификации по мере их обнаружения и добавляя новинки, как только они оказываются востребованными и пригодными к реализации. Для W3C на первом плане оставались формальные критерии смены статусов, предусмотренные их рабочим процессом. Поэтому руководство рабочей группы HTML в W3C и сам Хиксон решили окончательно разделить работу над спецификацией на два фронта: Хиксон сосредоточится над WHATWG-версией («живым стандартом»), а у W3C-версий (HTML5 и отделившихся от нее спецификаций) появится свой новый редактор.

Таким образом, с данного момента у нас появляются две разных, независимых спецификации HTML5.

К какой из спецификаций будут прислушиваться разработчики браузеров? В IRC-канале Хиксон утверждает, что «надеется, что это будет версия WHATWG», хотя «поживем — увидим». Но он уверяет, что в долгосрочной перспективе версия WHATWG будет отвечать состоянию дел в браузерах (т.е. учитывать состояние реализации тех или иных «фич»). Он также высказывает опасения, что задержка спецификации (отставание ее от реальности) приведет к тому, что браузеры начнут внедрять собственные новинки на свой лад.

Некоторые замечают в нынешней ситуации аналогии с 2004-м годом, когда расхождение в целях между W3C («зацикленным» тогда на XML и XHTML) и разработчиками браузеров как раз привело к возникновению WHATWG и HTML5. Пока трудно сказать, как эта новость скажется на дальнейшем развитии HTML5 и веба вообще. Так что следите за новостями!

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

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

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

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

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

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

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

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

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

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

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

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

Настоящие CSS-ниндзя не используют JavaScript, когда им необходимо соорудить дерево меню. А вместо этого они используют некоторые псевдо-классы CSS3 и кое-какие псевдо-селекторы из CSS2. 

Разметка HTML заполнена неупорядоченными списками (ul) для формирования структуры дерева, флажков для всех неконцевых нод, радио кнопки для концевых нод и элементов <label>. Как вы можете заменить, элементы <ul> размещаются справа после элементов <input> (которые в свою очередь размещаются справа после элементов <label>) и затем ul легко выбирается в CSS, используя сестренский селектор "+" вместе с CSS3 селектором :checked (чтобы помочь нам открыть различные ноды папки/деревья). CSS-код действительно мал, что просто замечательно.

Я сделал некоторые изменения в оригинальном дереве меню. Смотрите оригинальную статью и демо здесь. Кроме того проверьте этот документ для получения информации о всех CSS селекторах.

Простые CSS3 кнопки в стиле Github! Главный трюк заключается в использованием свойства border-radius наряду с линейным градиентом из CSS3.

Эти кнопки не будут отображаться в Internet Explorer 8 и ниже, т.к. в этих браузерах нет поддержки CSS3 градиентов, закругления углов и теней для текста. А в IE9 нет поддержки CSS3 градиентов, хотя в нём можно воспользоваться специальным градиентным фильтром, который работает именно в IE6-9.

Пара Милых Круглых Светящихся Кнопок сделаных на CSS3!  Для левой кнопки мы использовали плавную анимацию с помощью CSS3 свойства transition, которое создаёт плавный переход между двумя состояниями :hover и  :active. 3D эффект достигается благодаря правильному использованию таких свойств, как box-shadow, border и gradient.

С помощью свойства border-radius мы предал кнопкам круглую форму.  Анимация не будет работать в браузерах IE 6-9, т.к. в них нет её поддержки.

line-height для инлайн-элементов

Элементы с display:inline, как мы уже знаем, создают инлайновые боксы. В главном они ведут себя так же, как обычный текст, но могут иметь собственный фон, границы и т.п. Как же влияет line-height на них? Это мы прямо сейчас и выясним.

Перевод статьи "Say No to Faux Bold" из журнала A List Apart, автор — Alan Stearns, переводчик — GreatRash

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