Targeting retina display with media query

Working at a mobile project (that includes jQuery mobile), I’ve encountered the following problem: I wanted to rewrite the default image for the checkboxes, that jQuery mobile provides. Just adding the new background like bellow wasn’t enough.

.ui-icon-checkbox-off,
.ui-icon-checkbox-on {
  background: url(/images/mobile/checkbox-off.png) no-repeat;
  -webkit-background-size: 56px 58px;
  -moz-background-size: 56px 58px;
  background-size: 56px 58px;
  width: 56px;
  height: 58px;
}
.ui-icon-checkbox-on {
  background: url(/images/mobile/checkbox-on.png) no-repeat;
}

The code above works only on normal devices, but on retina displays the css from jQuery mobile wasn’t rewritten. For that, I’ve created an image twice as big as the previous one, and used the following code:

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2) {
         .ui-icon-checkbox-off {
           background: url(/images/mobile/checkbox-off2x.png) no-repeat;
         }
         .ui-icon-checkbox-on {
           background: url(/images/mobile/checkbox-on2x.png) no-repeat;
         }
}

jQuery PowerTip

PowerTip is a jQuery plugin created by Steven Benner, that creates hover tooltips that are easy to customize, has APIs for developers, supports adding complex data.

This plugin has some unique features: checks for hover intent (the tooltip doesn’t open the moment your mouse happens to cross an element with a tooltip), tooltip queuing (when the user moves their cursor to another element with a tooltip, the last tooltip will close gracefully before the next one opens).

Features

  • simple configuration;
  • supports static tooltips as well as tooltips that follow the mouse;
  • ability to let users mouse on to the tooltip and interact with their content;
  • easy customization;
  • works with keyboard navigation;
  • smooth fade-ins and fade-outs.

Usage

This plugin requires jQuery 1.7 or later.

To run the plugin you simply use the following code:

$('.tooltip').powerTip(options);
//where options is an object with the various settings you want to override

The content of the tooltip can be set from the HTML title attribute, a HTML5 data attribute, a jQuery object or an element from the DOM.

If you want to change the default options for all tooltips, you can do that using $.fn.powerTip.defaults before you call powerTip(). Here is an example:

$.fn.powerTip.defaults.placement = 'nw'
// change the default tooltip placement to north-west
$('.tooltip').powerTip();

Demo, Documentation & Download

Backstretch – add full-sized background image


This plugin allows you to add big images as background for a page, it resize it to fit the page and will automatically resize as the window size changes. To avoid the waiting for the background to load and then to use the site, this plugin fetches the background image after the page is loaded.

How to use:

This plugin doesn’t require some specific markup. You just include the jquery.min.js file and the jquery.backstretch.min.js one, and then fire the plugin with the following line:

<script type="text/javascript">
  $.backstretch("april-cherry.jpg");
</script>

Other uses:

  • you can attach Backstretch to a click event: change the background image when some element is clicked
  • use Backstreched in a slideshow: add several images and create a slideshow as background

Demo Download

How to prevent CSS and JS files from being cached

By default, external files such as javascript and css are cached by the browser. If you need to change this and you don’t want the browser to cache you files, use the following tip:

<link href="css/style.css?<?php echo time(); ?>" rel="stylesheet" type="text/css" />
<!-- The result will look like this -->
<link href="/stylesheet.css?1234567890" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/site-script.js?<?php echo time(); ?>"></script>
 <-- The result will look like this-->
<script type="text/javascript" src="js/site-script.js?1234567890"></script>

It’s a very simple technique and doesn’t affect your CSS or JavaScript code in any way.