CSS

Как CSS обрабатывает ошибки

CSS изначально был создан очень снисходительным к ошибкам. Когда браузер натыкается на нечто непонятное в CSS-файле, он испытывает минимальное "удивление", а затем продолжает как ни в чем ни бывало.

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

(далее…)

Изучаем матрицы трансформаций в CSS

 

Введение

Матричные функции — matrix() and matrix3d() — две самые головоломные в плане понимания штуковины в CSS3-трансформациях. В большинстве случаев, ради простоты и ясности, вы будете пользоваться функциями вроде rotate() и skewY(). Но всё же за каждой трансформацией скрывается эквивалентная матрица. Полезно хоть слегка понимать, как они работают, так что давайте взглянем.

(далее…)

Введение в инлайновый контекст форматирования (ИКФ): основные понятия (2-я публикация цикла «Тайны CSS2.1″)

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

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

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

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

(далее…)

Введение в инлайновый контекст форматирования (ИКФ): основные понятия (1-я публикация цикла «Тайны CSS2.1″)

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

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

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

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

(далее…)

«Блочных и строчных элементов» в HTML больше нет

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

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

(далее…)

Новая альтернатива clearfix-у и overflow:hidden

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

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

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

(далее…)

Работа с типографикой при адаптивном дизайне

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

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

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

(далее…)

Скроллируемые тени на чистом CSS при помощи background-attachment: local

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

Google Reader

 

(далее…)

Типографика, зависящая от размеров области просмотра

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

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

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

Гибкие многострочные списки определений при помощи двух строк CSS 2.1

Если вы когда-либо использовали списки определений (<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 соответственно?

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

(далее…)

Минимальная ширина абзаца в резиновом макете

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

 

Пример, когда плавающее изображение
оставляет несколько слов.

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

В резиновых макетах, однако, у вас нет такой гарантии. Если пользователь просматривает ваш сайт на маленьком устройстве, горизонтальное пространство, которое вы выделили для текста, может вмещать только одно-два слова на строку. Такая узкая колонка текста не просто выглядит уродливо, она еще и непрочная. Предложение, которое содержит длинное слово разорвётся, когда длинное слово перейдёт вниз под плавающую картинку. Оно оставит за ним пустое место.

(далее…)

Меню с эффектом LavaLamp на чистом CSS3

Я думаю, что вы уже видели, анимированные меню с эффектом LavaLamp (на основе плагина JQuery). Сегодня я хотел бы вам рассказать, как повторить то же поведение только на чистом CSS3 (без JavaScript). В нашем меню я буду использовать CSS3 transitions (для анимации элементов). Итак, если вы готовы, давайте начинать.

(далее…)

Кроссбраузерный <progress>-бар

Недавно по работе появилось одно интересное заданьице. Сделать прогресс-бар, который мало того, что будет стилизоваться так, как нужно, да ещё и к тому же должен быть кроссбраузерным, начиная с IE7.  

Для тех, кому не терпится посмотреть решение, выкладываю итоговый результат сразу.

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

(далее…)

Новые и старые единицы измерения (краткий обзор)

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

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

(далее…)