CSS-live.ru

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

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

79

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

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

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

Красивое выравнивание блоков по резиновой сетке

68

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

При верстке резиновых страниц часто возникает задача выстроить однотипные блоки (например, товары в каталоге или фотографии в галерее) по сетке, наподобие таблицы, но гибкой, с заранее неизвестным количеством столбцов. Когда-то единственным способом для этого был float, и блоки приходилось прижимать к левому краю. С помощью inline-block эту задачу можно решить проще и гибче, блоки могут иметь разную высоту, и разное вертикальное выравнивание. Но почему-то такие макеты в массе всё равно прижаты к левому краю. Казалось бы, что мешает отцентрировать эту сетку, а то и вовсе растянуть ее по ширине свободного места c помощью text-align: center или justify соответственно?

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

Модули CSS Image Values and Replaced Content Module Level 3 и CSS Backgrounds and Borders Module Level 3 достигли статуса W3C Candidate Recommendation

9

Буквально на днях две спецификации CSS3CSS Image Values and Replaced Content Module Level 3 и CSS Backgrounds and Borders Module Level 3 — получили статус кандидата в рекомендации. Теперь браузерам ничто не мешает убрать так надоевшие префиксы для градиентов и других полюбившихся нам свойств. Счастье верстальщиков становится всё ближе!

 

 

 

Новые обонятельные, осязательные и вкусовые элементы приходят в HTML5

4

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

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

В ближайшее время W3C представит три новых элемента HTML5, поддерживающих интерфейсы для других органов чувств:

  • <texture> для осязания
  • <aroma> для обоняния
  • <flavor> для вкуса

Конкурс от команды css-live.ru

0

Дорогие друзья. Сейчас у Вас есть возможность не только делать отзывы о сообществе, но и показать, насколько Вы любите его. Представляем вашему вниманию КОНКУРС.

Правила:

Всё, что вам нужно сделать – это следовать нижеприведённой инструкции:

  • «Лайкнуть» нашу страницу в социальной сети Facebook (http://www.facebook.com/csslive). Для этого вам нужно иметь свой аккаунт в социальной сети Facebook.
  • Найти на стене конкурсную публикацию (она будет отмечена оранжевой ленточкой и будет включать в себя правила и картинку конкурса).*
  • Под конкурсной публикацией есть кнопочка «Поделиться». На неё нужно нажать и опубликовать у себя на стене конкурсную публикацию (можно добавить свой комментарий).

И ВСЁ! Вы стали участником конкурса. Теперь наша цель – 250 «лайков» на странице. Когда мы достигнем своей цели, мы разыграем свою фирменную футболку.

Чем больше нас — тем ближе заветный приз!

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

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

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

 

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

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

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

Elegantizr — новый HTML/CSS-фреймворк от Google

6

Создание сайтов — это искусство и наука одновременно, и каждый сайт уникален. Однако, некоторые задачи "всплывают" снова и снова, особенно когда речь идет о базовом оформлении сайта. Чтобы облегчить создание сайтов, существуют фреймворки, которые на основе заранее заданных конструкций в разметке предлагают некое начальное оформление.

Elegantizr — тоже такой фреймворк. Читайте дальше.

Преимущества Elegantizr

Сравнительный анализ возможностей Elegantizr.

  • Быстродействие: Elegantizr загружается за 1,5 миллисекунды при среднестатистическом соединении (средняя цифра по отрасли: 2,9 секунды).
  • Легкость использования: обучение Elegantizr занимает всего 21 секунду (средняя цифра по отрасли: 2.9 дней)
  • Надежность: Elegantizr создан с таким запасом прочности, что обновления для его поддержки необходимы в среднем раз в 6,5 лет (средняя цифра по отрасли: 2,1 недели).

Как использовать Elegantizr

Использование Elegantizr очень просто. Включите следующую строчку в любой из ваших проектов:

<link rel="stylesheet"  href="http://www.google.com/landing/elegantizr/elegantizr.css">

Это всё! Мы называем это “Elegantizr сказал — Elegantizr сделал.”

Ссылка на оригинал

 

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

15

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

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

14

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

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

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

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

58

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

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

Элемент <header>

1

Ричард Кларк, вторник, 16 июня 2009

В последнее время наблюдается повышенный интерес к HTML 5 и его внедрению в работу web-профессионалов. В HTML 5 спецификации мы видим, что была добавлена масса новых тегов, среди которых и элемент <header>, о котором мы поговорим в этой статье. Мы расскажем про то, когда его использовать и  когда не использовать, что он должен содержать и что не должен. Готовы? Тогда начнем.

Итак, вы привыкли видеть

<div id="header">

на большинстве посещаемых вами сайтов. Теперь, с появлением HTML 5 это больше не требуется и мы можем обогатить семантическое содержимое новым элементом <header>.

Слайдер на CSS3 (без JS*), подстраивающийся под разрешение

17

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

В общем что говорить, это нужно увидеть!

CSS Backgrounds and Borders Module Level 3 («последний звонок»)

0
Рабочая группа CSS опубликовала черновик "последнего звонка" (финальную стадию перед присвоением статуса кандидата в рекомендации) спецификации CSS Backgrounds and Borders Module Level 3 (для исправления ошибок предыдущей версии, уже имевшей статус кандидата в рекомендации — по требованиям рабочего процесса W3C, такие изменения требуют перевода документа обратно в статус черновика). Этот CSS модуль содержит свойства 3-го уровня, связанные с границами и фоном. Основные добавления к CSS уровня 2 — границы, состоящие из изображений, боксы со множественными фонами, боксы с закруглёнными углами и тени для боксов. Всем желающим рекомендуется ознакомится с changes и отправить комментарии в список рассылки www-style. Крайний срок комментариев: 6 марта 2012 года. Узнайте больше о работе над CSS.
 
 

Равномерное выравнивание блоков по ширине

113

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

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

Слухи: два из трех модулей CSS3 для раскладки, возможно, объединят в один

4

Недавно эксперт W3C и активная участница рабочей группы CSS Элика Этемад (fantasai) упомянула в своем твиттере, что они совместно с Бертом Босом работают над объединением CSS Grid Layout и CSS3 Template Layout в один модуль CSS3 Grid Template! 

Для тех, кто не особо понимает в чём суть, поясняем, что в модулях на данный момент существует как минимум три совершенно разных черновика CSS3 для будущих механизмов раскладки, со множеством спорных моментов в каждом, вдобавок конфликтующих между собой. В черновиках по этому поводу творится некая неразбериха, неопределённость, из-за которой может показаться, что разработчики сами пока ещё не знают, что хотят получить в итоге. И вот из двух таких модулей: раскладки сеткой (в котором структура макета описывается сеткой, отдаленно похожей на табличную, предложен Микрософтом) и раскладки по шаблону (синтаксис которого напоминает ASCII-арт, а автором является Берт Бос — один из двух создателей CSS вообще), возможно, получится единый модуль (хотя пока трудно сказать, на что такой "гибрид" будет похож). И есть шанс, что разработчики браузеров наконец придут к консенсусу и реализуют его.

В общем, неразбериха в лейаутных модулях, о которых так давно мечтали вебмастера, вот-вот пройдет свой максимум и начнет уменьшаться, постепенно выруливая на финишную прямую. По крайней мере, есть основания надеяться на это. Хотя нельзя и исключить, что Элика просто пошутила;)