Edit online

@media Rule

The @media rule allows you to set different style rules for multiple types of media in the same stylesheet. For example, you can set the font size to be different on the screen than on paper. Oxygen XML Author Eclipse plugin supports several media types, allowing you to set the style rules for presenting a document on various media (on screen, paper, etc.)

Supported Media Types

  • screen - The styles marked with this media type are used only for rendering a document on screen.
  • print - The styles marked with this media type are used only for printing a document.
  • all - The styles marked with this media type are used for rendering a document in all supported types of media.
  • oxygen - The styles marked with this media type are used only for rendering a document in the Oxygen XML Author Eclipse plugin Author mode. For more information, see Specifying Media Types in the CSS.
  • oxygen-dark-theme - The styles marked with this media type are used only for rendering a document in the Oxygen XML Author Eclipse plugin Author mode when a dark theme is used (for example, Graphite).
  • oxygen-high-contrast-black - The styles marked with this media type are used only for rendering a document in the Oxygen XML Author Eclipse plugin Author mode on a Windows High Contrast Theme with a black background.
  • oxygen-high-contrast-white - The styles marked with this media type are used only for rendering a document in the Oxygen XML Author Eclipse plugin Author mode on a Windows High Contrast Theme with a white background.
Example: @media Rule
@media oxygen{
 b{
  text-decoration:underline;
 }
}
@media oxygen-high-contrast-white{
 b{
  font-weight:bold;
 }
}

Supported Properties

Oxygen XML Author Eclipse plugin also supports a few properties to set specific style rules that depend upon the size of the visible area in Author mode. These supported properties are as follows:
  • min-width - The styles selected in this property are applied if the visible area in Author mode is equal to or greater than the specified value.
  • max-width - The styles selected in this property are applied if the visible area in Author mode is less than or equal to the specified value.
Example: min-width and max-width Properties
@media (min-width:500px){
 p{
    content:'XXX';
 }
}
@media (max-width:700px){
 p:after{
    content:'yyy';
 }
}