J2ME Polish
J2ME Polish 2.4 Documentation
Enough Software

CSS Media Queries

CSS Media Queries allow you to adapt the design of your application during runtime. This feature is especially useful when targeting generic devices such as Generic/AnyPhone or Generic/AnyMsaPhone.
Without further ado let's have a look at a common example that increases the size of the commands for touchscreen devices:

/** default styles: **/
menuItem {
	font-color: #333;
}
menuItem:hover {
	font-color: #ddd;
	background-color: #333;
}
menuItem:pressed {
	font-color: #3d3;
	background-color: #333;
}
/** adapt styles for touchscreen devices dynamically: */
@media touchscreen {
	menuItem {
		padding-top: 4px;
		padding-bottom: 4px;
	}
}	

In the above example we add a padding of 4 pixel to the top and bottom of the menuItem style which is responsible for rendering the Option commands.

Please note that the pseudo styles (like :hover or :pressed) inherit adjustments of their base style automatically.

Syntax of CSS Media Queries

Each media query starts with @media followed by a comma separated list of queries. The queries itself can consist of the not keyword followed by a media type such as touchscreen or screen, which is then optionally followed by expressions. Each expression can use a feature and a value, for example (min-width: 320px). The presence of the keyword not at the beginning of the query negates the result. If the complete media query had been true without the not keyword it will become false, and vice versa.

Following example illustrate this definition:

  • @media touchscreen {...}
  • @media not touchscreen {...}
  • @media touchscreen and (max-width: 240px) and (max-height: 320px) {...}
  • @media (min-width: 240px) and (min-height: 320px){ ...}

Technically this is the complete syntax definition of the media query list:

media_query_list
 : S* media_query [ ',' S* media_query]*
 ;
media_query
 : [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
 | expression [ AND S* expression ]*
 ;
media_type
 : TOUCHSCREEN | SCREEN | ALL
 ;
expression
 : '(' S* media_feature S* [':' S* expr]? ')' S*
 ;
media_feature
 : IDENT
 ;

Within a media query you can adapt any existing style. You only need to write the changes for that specific style, there is no need to copy any other CSS attributes.

Supported Media Types

J2ME Polish currently supports these media types:

  • touchscreen: is true for devices that have pointer events
  • screen: is always true
  • all: is always true

In the future we will also support other media types such as 3D or svg.

Supported Media Features

Media features can be used to finetune the design further. You can, for example, use different sets of images for different resolutions. Most media features accept optional min- or max- prefixes to express greater or equal to and smaller or equal to constraints. This syntax is used to avoid < and > characters which may conflict with HTML and XML. Those media features that accept prefixes will most often be used with prefixes, but can also be used alone. J2ME Polish currently supports these media feature:

Feature  min/max  ExplanationExample
width and device-width yes The width of the screen in pixels. (min-width: 240px)
height and device-height yes The height of the screen in pixels. (max-height: 320px)
orientation no The orientation of the screen, eiter portrait or landscape. Since media queries are only resolved once, you might prefer the :landscape and :portrait pseudo styles. (orientation: landscape)
aspect-ratio and device-aspect-ratio yes The ratio of the value of the width to the value of the height media feature. The following examples all render true for devices with a resolution of 240x320:
(aspect-ratio: 240/320)
(aspect-ratio: 24/32)
(aspect-ratio: 3/4)
color yes The number of bits per color component. When no value is given it will check whether the device supports color at all. If the device is not a color device, the value is zero. (color)
(min-color: 6)
vendor no The name of the vendor of the device, e.g. Nokia, Sony-Ericsson, Samsung or LG. When the name cannot be resolved it will be unknown. (vendor: Nokia)
(vendor: unknown)

Replace specific attributes in all styles

You can exchange all attributes in one go by specifying the _allOld and _allNew styles. Any attributes that are listed in the _allOld style will be searched for in all existing styles and then replaced with the ones defined in _allNew. You can use this feature to globally decrease the font-size, for example:

@media 	(max-width: 320px) and (max-height: 480px), (max-width: 480px) and (max-height: 320px) {
	_allOld {
		font-size: large;
	}
	_allNew {
		font-size: medium;
	}
} 

Media Query Examples

Following examples can give you some ideas how to use media queries in your apps:

Use Resolution Dependent Images

/** default style: **/
.mainScreen {
	background {
		image: url( bg-default.png );
		anchor: bottom | right;
	}
}

/** adapt styles for specific resolutions: */
@media (min-device-width: 240px) and (min-device-height: 320px) {
	.mainScreen {
		background {
			image: url( bg-large.png );
			anchor: bottom | right;
		}
	}
}
@media (max-device-width: 176px) and (max-device-height: 208px) {
	.mainScreen {
		background {
			image: url( bg-small.png );
			anchor: bottom | right;
		}
	}
}
/* HVGA resolution (portrait, landscape) */
@media 	(max-width: 320px) and (max-height: 480px), (max-width: 480px) and (max-height: 320px) {
	.mainScreen {
		background {
			image: url( bg-hvga.png );
			anchor: bottom | right;
		}
	}
}

Increase Button Size for Touchscreen Devices

/** default styles: **/
menuItem {
	font-color: #333;
}
menuItem:hover {
	font-color: #ddd;
	background-color: #333;
}
menuItem:pressed {
	font-color: #3d3;
	background-color: #333;
}
/** adapt styles for touchscreen devices dynamically: */
@media touchscreen {
	menuItem {
		padding-top: 4px;
		padding-bottom: 4px;
	}
	menuItem:hover {
		padding-top: 4px;
		padding-bottom: 4px;
	}
	menuItem:pressed {
		padding-top: 4px;
		padding-bottom: 4px;
	}
}	

Optimize Media Queries

When you build application both for specific devices as well as for unknown / generic devices you add unecessary overhead for your specific builds when you use media queries. With some simple preprocessing in your polish.css file you can apply media queries only for your generic builds:

//#if polish.vendor == Generic
	@media touchscreen {
		menuItem {
			padding-top: 4px;
			padding-bottom: 4px;
		}
		menuItem:hover {
			padding-top: 4px;
			padding-bottom: 4px;
		}
		menuItem:pressed {
			padding-top: 4px;
			padding-bottom: 4px;
		}
	}
//#endif

Add Media Queries Programmatically

You can also add media queries programmatically. Please note that you need to do this before the styles are applied, which is typically done within the showNotify() method of the corresponding UI components. A good place to do that is within the startApp() method of your MIDlet, for example.

You can only add media queries, when you actually use them in your polish.css or when you manually specify the polish.css.mediaquery preprocessing variable.

To add conditional styles programmatically just call StyleSheet.addMediaQuery( String condition, Style[] styles ):

import de.enough.polish.ui.*;
...
//#if polish.css.mediaquery
	Style mainscreenStyle = new Style();
	mainscreenStyle.name="mainscreen"; // same as in your polish.css file
	mainscreenStyle.addAttribute("padding", new Dimension("10px") );
	Style[] styles = new Style[]{ mainscreenStyle };
	StyleSheet.addMediaQuery("touchscreen", styles);
//#endif

Troubleshooting Tips

When you deal with media queries some things can be unexpected, so remember these tips:

  • backgrounds and borders need to be defined fully, only changing one background CSS attributes like background-image might yield unexpected results.
  • orientation switches are not picked up by media queries, use the :landscape and :portrait pseudo styles instead.
back to top