Статьи

Чиним решение SelenIT-а по очистке потока, или Новый lol над Opera 12.00

Приветствую, дорогие друзья!

Сегодня пишу эту статью для Вас (как всегда среди ночи), чтобы рассказать занимательную историю о маленьком браузере. О его плохом воспитании и — как следствие — плохом поведении. Действия которого, нарочно или нет, приносят массу проблем разработчикам. По совету Макса (a.k.a Psywalker) разделю сие повествование на три части:

  • Проблема
  • Решение
  • Пикантные подробности

Итак, поехали!

(далее…)

Кнопки Twitter Bootstrap

Кнопки из фреймворка от Twitter'а — Bootstrap, которые выглядят довольно таки интересно и современно. Прекрасно поддерживаются в IE7 и выше. 

Для создания кнопок используются многие вещи из CSS3, например, такие как: border-radius, linear-gradient, box-shadow, text-shadow, rgba и т.д, для достижения удивительного эффекта.

(далее…)

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

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

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

(далее…)

Как избавиться от префикса для -webkit-device-pixel-ratio

Решили некогда вебкитовцы, что было бы полезным медиавыражение для разрешения экрана. Но вместо того, чтобы использовать уже стандартизированное выражение resolution, они изобрели -webkit-device-pixel-ratio. Медиавыражение resolution принимает лишь «количество точек на дюйм» и «количество точек на сантиметр», тогда как -webkit-device-pixel-ratio принимает «количество точек на px». Но все они в своей основе — одно и то же, поскольку 1in = 96px = 2.54cm. (Справедливости ради, не всё из этого было так понятно в 2006-м, так что простим вебкитовцам их отсебятину).

(далее…)

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

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

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

(далее…)

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

 

Введение

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

(далее…)

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

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

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

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

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

(далее…)

Адаптивные изображения и веб-стандарты на распутье

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

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

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

(далее…)

Сайту требуются переводчики, корректоры и просто помощники

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

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

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

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

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

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

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

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

(далее…)

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

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

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

(далее…)

Адаптивные изображения в HTML5: конец первого раунда

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

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

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

(далее…)

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

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

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

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

(далее…)

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

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

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

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

(далее…)

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

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

Google Reader

 

(далее…)