Сброс CSS-стилей

Клавиша F5 и Refresh в браузере - это, наверное, самые затертые кнопки у всякого верстальщика. Жаль что в браузере этого не видно :)

Большая часть работы верстальщика заключается во внесении изменений в стили и проверки их отображения в браузерах. С опытом приходит понимание принципов работы HTML+CSS и количество рефрешей уменьшается. А совсем опытные видят матрицу и браузеров вообще не открывают.

Сегодня у нас обзор методов ручного и автоматического обновления CSS без полной перезагрузки страницы.

Планшет от Google «засветился» в бенчмарке

Многочисленные слухи о том, что Google намерена выпустить планшет, косвенно подтвердились благодаря базе данных тестовой утилиты Rightware Benchmark. Впервые результаты тестирования с краткой информацией об устройстве появились в Rightware Benchmark 14 марта и с тех пор регулярно обновляются.

Планшет проходит под названием Google Asus Nexus 7. Вероятно, сборкой устройства, которое войдет в линейку Nexus, занимается тайваньская компания ASUS, как и предполагалось ранее. Новинка построена на четырехъядерном процессе NVIDIA Tegra 3 с частотой 1,3 ГГц. Разрешение дисплея с диагональю 7″ составляет 1280×768 пикселей, передает phoneArena.

В качестве операционной системы планшета указана Android 4.1. В списке Rightware Benchmark устройство занимает 11-е место по производительности с 18 очками.

Приложение для Android на HTML+CSS+JS с помощью PhoneGap

Всем доброго времени суток.

Многим из нас хотелось бы написать приложение для мобильного устройства, но учить Java или Objective C хочется далеко не всем. Теперь этот вопрос решается намного проще. PhoneGap — именно так называется библиотека для превращения веб-сайта в самое настоящее приложение для мобильного устройства, будь то iOS устройство, Android, Symbian, BlackBerry OS, Palm OS или Windows Mobile. Приложение на PhoneGap может использовать функции телефона, к примеру звонить или получать снимки с камеры.

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

Использование Gravatar в форме авторизации

Граватар —  глобально распознаваемый аватар. сервис, позволяющий интернет-пользователям хранить свой аватар на специальном сервере. Пользователь регистрируется на центральном сервере и сохраняет там свой аватар и адрес электронной почты. Когда он оставляет комментарий на сайте или блоге, поддерживающим Gravatar, и указывает свой адрес электронной почты, на стороне сайта вычисляется md5 хэш от почтового адреса и отправляется на сервер Gravatar, в ответ возвращается аватар пользователя. Таким образом система Gravatar позволяет использовать аватары без регистрации на сайте или блоге.

Я разработал простое и интересно окно авторизации с помощью граватара. Инджой!

Google официально запустила семантический поисковик

Кстати, все же, после продолжительного периода тестирования компания Google официально объявила о запуске поисковика нового поколения. Теперь поисковый сервис опирается на семантическую технологию Knowledge Graph, которая позволяет учитывать взаимоотношения между фактами и объектами поиска. Пока, правда, новинка работает только в США с англоязычными запросами.

Обновленная система умеет достаточно корректно воспринимать вопрос пользователя на естественном языке и давать на него прямой ответ. Технология Knowledge Graph ищет информацию в базе данных, где содержится более 500 млн объектов и 3,5 млрд фактов и взаимосвязей между ними.

Самые простые техники адаптивной верстки

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

1. Видео

Очень простой CSS и HTML, и ваше embed-видео будет масштабироваться в соответствии с шириной страницы:

<div class="video"> 

<iframe src="http://player.vimeo.com/video/6929537"frameborder="0"></iframe>

</div>

.video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

2. Максимальная и минимальная ширина

Max-width помогает определить максимально возможную ширину объекта. В примере ниже ширина div'а — 800 пикселей при возможности, но не более 90% ширины:

.container { width: 800px; max-width: 90%; }

Так же можно масштабировать изображение:

img { max-width: 100%; height: auto; }

Такая конструкция будет работать в IE 7 и IE 9, а для IE 8 делаем такой хак:

@media \0screen { img { width: auto; /* for ie 8 */ } }

Min-width — противоположность max-width, позволяет задать минимальную ширину объекта. В примере ниже благодаря min-width масштабируется текстовое поле:

3. Относительные значения

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

Относительный margin

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

Относительный размер шрифта

При использовании относительных значений (em или %) шрифта наследуются также относительные значения межстрочного пространства и отступов:

Относительный padding

На скриншоте ниже хорошо видно преимущества относительных значений padding перед абсолютными:

4. Трюк с overflow:hidden

Можно очистить float от предыдущего элемента и оставить контент внутри контейнера, используя overflow:hidden, что бывает очень полезно в адаптивной разметке.

5. Перенос слов

При помощи CSS можно переносить непереносимые текстовые конструкции:

.break-word { word-wrap: break-word; }

Твиттер добрался до почты пользователей

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

Идея рассылки — в составлении сборника так называемых Лучших твитов (как я понял — что-то вроде «Популярное» в ленте G+). Причем вам на почту будут приходить даже твиты от людей, которых вы не читаете.


Не знаю, как у вас всех, а у меня данная функция оказалась включенной по умолчанию сразу после появления.



В общем, отписаться можно на странице настроек уведомлений.

Массовые рассылки будут запущены через пару недель. Твиттер, кстати, недавно нанял команду RestEngine (почтовые рассылки + социальный маркетинг).