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

Веб-сервис интернационализации (WS-I18N) разместил заметку

Internationalization Core Working Group опубликовала Заметку Группы Интернационализации веб-сервисов. Документ описывает улучшения SOAP, сообщая о предоставлении интернационализации и локализации операций использующих локальные и интернациональные настройки. Применение этих механизмов обеспечит широкий спектр моделей разработки для международного использования. Узнать больше о Деятельности по интернационализации.

К прочтению: Виджет-интерфейс — предложенные рекомендации изданы

Web Applications Working Group опубликовала предложенные рекомендации для интерфейса виджетов. Данная спецификация определяет прикладной програмный интерфейс (API) для виджетов, которые дают среди прочих возможностей функциональность для доступа к метаданным виджета и постоянному хранению данных. До 19 июня приветствуются комментарии . Узнать больше о деятельности по разработке богатых веб-клиентов.

Новый хит Брюса Лоусона

Истинная рок-звезда веб-разработки Брюс Лоусон, знакомый нам не только по проекту html5doctor.com, но и по другим музыкальным хитам (например, этому), недавно представил свой новый хит "Like A Rounded Corner" — задорную, но удивительно душевную кантри-балладу об уставшем веб-разработчике, спасающемся от творческого кризиса благодаря новым возможностям HTML5 и CSS3. В клипе впервые приняли участие восходящие звездочки — группа The Standartettes. Не пропустите это верстально-музыкальное событие уходящего мая!

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

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.  

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

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