Архив автора: Максим Усачев

Стартует группа разработки независимых пользовательских интерфейсов

W3C запустил новую Группу Разработки Независимых Пользовательских Интерфейсов (Indie UI Working Group), которая совместно с Группой Разработки Событий (Web Events WG) займется совершенствованием взаимодействия пользователя с web-приложением. Ее разработки послужат промежуточным звеном между модальными событиями и событиями устройств, и функциональностью, необходимой для web-приложения, такой как, прокрутка видимой области, получение объектом фокуса и т.п. Новая группа определит, как действия пользователя (прокрутка на сенсорном экране, с помощью голоса или колеса мыщи) будут преобразованы в простые события, дабы разработчики web-приложений могли оперировать ими на различных устройствах не задумываясь о том, каким из способов пользователь совершил то или иное действие. Узнать больше можно из рассылки и по этой ссылке.

Новые CSS4-медиавыражения для точности указателя и возможности наведения

В то время, как модуль медиавыражений 3-го уровня (CSS3 Media Queries) достиг предпоследней стадии зрелости (Proposed Recommendation), полным ходом идет разработка нового черновика — CSS4 Media Queries. Недавно в него была добавлена возможность проверки доступности скриптов (ключевое слово "script" с двумя возможными значениями 0 и 1), а сегодняшний редакторский черновик дополнился еще двумя возможностями: проверки точности указателя (ключевое слово "pointer") и возможности наведения ("hover"). 

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

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

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

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

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

Сегодня, в мой день рождения (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

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

 

 

 

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

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

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

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

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

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

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

Правила:

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Элемент <header>

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

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

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

<div id="header">

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

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

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

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