CSS style Sheet Tutorial: The Role of screen media type

Css

@media

Rules are ideal for positioning HTML or XML documents as target output methods. Current

Print

The use of media is very common, compared to implementing a separate "printable version",

Print

Provides a cleaner way to create a printer-friendly page.

Screen

The media has not been fully exploited, probably because people generally think

Screen

is just "default rendering." However, in terms of layout (especially absolute layout),

Screen

Media types are important, and style sheet rules do not care about media types and therefore do not cover this point.

Recently, I encountered an intractable problem in the process of creating an Ajax Web application. Like creating most Web applications, I need to create an interface widget in a fixed location on the screen. In my program (this tip), this widget is the toolbar that spans the bottom of the information display area. For my actual application, this toolbar contains a variety of child parts that can be configured and interacted with the application, and for this technique I replace it with a static collection of information. This simplification does not create CSS problems.

Typically, you put elements into

Or

<iframe>element to solve the problem. However, the use of frameworks not only loses the simplicity of the application, but also reduces the ability of client ECMAscript to control <div> element visibility during interaction. The best approach is to use a purely CSS representation of the interface.

For this tip, I created a toy-style file-viewing application that reads URLs or local files and uses numbered rows and a similar wc summary to display read content. I want the browser to display the content shown in Figure 1.

To create this appearance, I use the following HTML Template: Web page Teaching Network

Do not care about the details of the template language (which does not exist); the intent is obvious. The CSS I tried to use was:

Div.bottom { background-color:lightblue; Position:absolute; bottom:0px; left:0px; right:0px; height:20px; } div.top { background-color:white; } li.odd { background-color: #EAEAFF; } Li.even { background-color: #FCFCFC; }

Very simply, it will produce the screenshot shown above. The problem occurs when you want to scroll down the <div class="top"> numbered row:

The way to resolve scrolling problems appears to be <div> in use fixed rather than absolute layout.

Div.bottom { background-color:lightblue; position:fixed; bottom:0px; left:0px; right:0px; height:20px; } /* ... Rest of CSS Styling * *

This slight change does fix the screen display problem for the toy application, but now there is an unpleasant artifact in the printed version of the same page. To illustrate this issue, I set an extremely short page length:

Of course, I want to display various media in a way that fits their display characteristics, but still share the visual properties that are independent of the media (some). All I have to do is @media create a slightly more complex style sheet using rules to achieve the correct screen display and print display at the same time:

li.odd { background-color: #EAEAFF; } Li.even { background-color: #FCFCFC; } @media Screen { div.bottom { background-color:lightblue; position:fixed; bottom:0px; left:0px; right:0px; height:20px; } div.top { background-color:white } } @media Print { div.bottom { position:absolute; top:0px; } div.top { position:relative; Top:20pt } }

As you can see, the color of the parity line stays the same, but top bottom <div> it adjusts to the different media for the specific location of the element. Produce an effect as shown in Figure 4:

Happily, the screen still remains in its correct display state.