Символ рубля без использования шрифтов

Небольшой трюк, как можно нарисовать символ рубля без использования юникода и внешних шрифтов, средствами одного только CSS. Кроме того, даже с отключенными стилями цена будет отображаться просто с буквой "Р", что тоже, в принципе, допустимо.Блок с ценой обернут в элемент DIV, а символ рубля находится внутри строчного элемента SPAN. Обратите внимание, что в тексте страницы символ записан обычной буквой "Р", а горизонтальная палочка выполнена в виде символа "узкое тире" и добавляется к нему в CSS при помощи псевдоэлемента ::before.Способ кроссбраузерный, работает как на стационарных, так и на мобильных платформах. При использовании разных размеров шрифтов скорее всего понадобятся корректировки смещений палочки по горизонтали и вертикали, это вы можете легко сделать самостоятельно. Готовый результат можно посмотреть на демонстрационной страничке.

Как отследить потерю фокуса вкладки в браузере

В современных браузерах есть очень полезный инструмент - Page Visibility API. Он позволяет узнать, когда вкладка с веб-страницей видна пользователю, а когда пользователь находится на другой странице. Через Page Visibility API можно установить обработчик для реагирования на изменение состояния видимости. Для чего это надо? Например, если сайт открыт на мобильных устройствах, то при переходе на другую вкладку есть смысл отключить ненужные сетевые запросы, всякие спецэффекты, динамическое обновление контента и прочие ресурсоемкие операции. В веб-приложениях, например, можно сделать автоматическое сохранение незаполненной формы при переходе на другую вкладку. На моем сайте при потере фокуса вкладки активируется опция "камуфляж".

Читать статью целиком »

Сервисы картинок-placeholder'ов для сайтов

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

Читать статью целиком »

Стилизация нумерованных списков с помощью CSS

Продолжаем тему стилизации различных HTML-элементов. Сегодня это будут нумерованные списки. Если вы захотите изменить отображение цифр перед строками в нумерованном списке, то обнаружите, что сделать это при помощи CSS невозможно. Но также невозможно объяснить заказчикам, почему дизайнер нарисовал в фотошопе красивый список, а повторить его на web-странице в таком же виде не получается. Решение этой проблемы есть, и даже не одно.

Читать статью целиком »

Placeholder для изображений на JavaScript

При разработке сайтов одна из главных задач - правильное размещение контента, в том числе и изображений. Но часто случается ситуация, когда заказчик еще не предоставил материал, а что-то показать ему уже надо. В таких случаях используют "рыбы", или, если по-английски, "placeholder". Для текстового контента это классический "Lorem ipsum..." или какие-нибудь программные генераторы. Для графического контента есть различные онлайновые сервисы, которые предоставляют картинки-placeholder'ы (про них будет отдельная статья). А я решил сделать динамический генератор картинок-пустышек на JavaScript.

Читать статью целиком »