HTML is a text-based markup language used to format information, HTML is a language that is used to structure and present text and images within a user interface.

 

CSS is a language that is used to define how HTML-based content is displayed on the web. CSS can be used to control layout, spacing, colors, fonts, and much more, and has been an integral component of "the Web".

 

In Domino classic Web application, you can adopt HTML and CSS to format the Web data and layout. Many users are using different devices to browse Domino classic Web application. If the classic Web application can support multiscreen for different kind of devices, this will be wonderful feature.

 

CSS3 media queries allow developers to create style sheets that apply to specific screen dimensions. Using media queries, a singular HTML document can have a varied presentation on a range of screens or devices. Differing layout and presentation for tablet-based interfaces, mobile phone interfaces, and desktop interfaces can be applied to the same HTML document. We can adopt CSS3 media queries feature in Domino classic Web application to support multiscreen for different kind of devices.

 

Here is our environment : Domino v8.5.3 server, Firefox v8, Google Chrome v16, Android v2.3

 

When writing HTML code in a Domino application Form or Page, you need to add viewport tag instructs mobile devices to use the actual width of the screen (device-width) when applying media queries.

 

 

 

When creating the CSS for the application HTML Form or Page, you can use media queries with CSS @import to specify the media type. The styles in desktop.css need to apply to all browsers, the rules in device.css need to override the basic rules in desktop.css.

 

@import url("device.css") only screen and (max-width:320px);

 

 

If using an external CSS (or text) editor, create the CSS file externally to the Domino application and then import it as a Style Sheet Resource:

 

 

When this Web application launch in Domino server, we use a HTML5/CSS3 compatible device (Firefox v8, Google Chrome v16, Android v2.3) to browse it. The Web page can display correctly in those devices.

The Domino classic Web application which adopt HTML5 and CSS3 display in Google Chrome.

 

The Domino classic Web application which adopt HTML5 and CSS3 display in Firefox v8.

The Domino classic Web application which adopt HTML5 and CSS3 display in Android v2.3.

 

This sample demo you that the Domino Web classic application web page will base on device screen dimensions to change the display layout following CSS definition.

 

Conclusion

In this short article, we adopt CSS3 media queries to customize the Domino classic Web application web page display layout applied to the same HTML5 document for different device screen.

Next step, we can integrate it with existing data to be a practical Web application for supporting multiscreen.