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;
	}
	menuItem:hover {
		padding-top: 4px;
		padding-bottom: 4px;
	}
	menuItem:pressed {
		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.

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	Explanation	Example
`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)`

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;
		}
	}
}

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

Username:
Password: