Use CSS @ media rules

CSS@mediaRules are very suitable for positioning HTML or XML documents as target output methods. Currently,printMedia is widely used, compared with implementing a separate "printable version,printProvides a more clean way to create printer-friendly pages.screenThe media has not been fully utilized, probably because people generally thinkscreenIt is only the "Default rendering method ". However, in terms of layout (especially absolute layout ),screenMedia types are of great significance. style sheet rules do not care about media types, so they are not covered.

Introduction

Recently, I encountered an insurmountable problem when creating an Ajax web application. Like creating most web applications, I need to create an interface component at a fixed position on the screen. In my program (this tip), this part is a toolbar that spans the bottom of the information display area. For my actual application, this Toolbar contains various sub-parts that can be configured and interacted with the application. In this tip, I replace it with a static set of information. This simplification will not cause CSS problems.

In general, put the element<frame>Or<iframe>Element to solve the problem. However, using the framework will not only compromise the simplicity of the application, but also reduce the control of the client ecmascript during interaction.<div>Element visibility. The best way is to use pure CSS representation on the interface.

First error

For this tip, I have created a toy-Style File Viewing application that can read URLs or local files and use numbers in a line similarwc. I want the browser to display the content shown in 1.

Figure 1. Web-based "less-N"

To create this appearance, I use the following HTML template:

Basic HTML layout of File Viewer

Do not care about the details of this template language (which does not exist); its intention is very obvious. The css I tried is:

No CSS with @ media rules is used

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

It is very simple and will generate the screen shown above. When you want to scroll down<div class="top">The following error occurs:

Figure 2. Non-@ media style table screen problems

Fix CSS

The Method to Solve the rolling problem seems to be<div>OffixedInsteadabsoluteLayout.

Use the @ media rule CSS

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

This subtle change does fix the screen display problem of the toy app, but now there is an unpleasant piece of work in the print version of the same page. To demonstrate this problem, I set an extremely short page length:

Figure 3. Non-@ media style table printing

Of course, I want to display all kinds of media in a way that fits their display features, but still share the visual attributes independent of the media (some. To correctly display the screen and print the display at the same time, all I need to do is to use@mediaCreate a slightly more complex style sheet for the rule:

CSS with two @ media rules

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

We can see that the color of the odd and even rows remains unchanged,topAndbottom <div>The specific position of the element is adjusted for different media sets. 4 results:

Figure 4. Correct and print the display in the style sheet using @ media rules

Fortunately, the screen remains correctly displayed.