Printing partial window with CSS Media types

Its quite often that we need print sceen feature on our web site. And most of the times only cotentt part is printed leaving header, footer and menu. People often tend to use javascript by hiding the divs (or what ever the control is) then printing the screen using window.print() and then again showing the hidden controls.

Here is a sample of the page, with a header, footer, menu and content with thier div ids.


This works good for IE with some some issues like
  • fluctuations,
  • printer settings,
  • blank space where controls are hidden etc.
But in the recent project which I have been working for it had the requirement to make print feature work cross browser. And my javascript code was not working for browsers like chrome and firefox, so I explored some other options. Eventually I found that this can be achieved using CSS with just few one line of code:

@media print
{
.noprint
{
display: none;
}
}

and putting a class=noprint for all the non required divs during print, as seen below


And this worked perfectly for all the browsers without even any minor issues stated above.

And would you believe this is just the tip of the iceberg as far as @media is concerned. There is almost no limit to what can be done with alternate-media stylesheets. Using them appropriately is the key to creating pages which can be styled for regular screen output, printing, legible display on handheld devices, special styles for the blind, and much more. As browsers add support for more media, and more ways to set up media-specific styles, we'll return to this subject for more. Until then, try out some print-media stylesheets on your pages, and see how you can make your site better and more accessible than ever.

There are currently ten defined media types:
  1. all
  2. aural
  3. braille
  4. embossed
  5. handheld
  6. print
  7. projection
  8. screen
  9. tty
  10. tv
Go explore them and harness the power of CSS!

5 comments:

Surjit Dadhwal said...

good post.... looking for this printing option most of times

Fire Dragon said...

Bạn cần sử dụng dịch vụ giao hàng thu tiền hộ. Bạn cần giao hàng nhanh đến tay khách hàng. Nếu vậy bạn có thể tham khảo bảng giá giao hàng nhanh của chúng tôi. Khi bạn cần vận chuyển hàng đi đà nẵng hay giao hàng hà nội. Thì hãy nhớ đến chúng tôi, đảm các dịch vụ của chúng tôi sẽ khiến bạn hài lòng. Điển hình như dịch vụ chuyen hang di da nang đang được sự ủng hộ đông đảo của người dùng.

Unknown said...
This comment has been removed by the author.
Unknown said...

Giờ tôi mới biết vấn đề này, cảm ơn bạn đã cho tôi biết chuyện này.

Tôi xin giới thiệu tôi làm bên công ty vận chuyển hàng hoá chuyên cung cấp các dv vận chuyển hàng hoá Quốc tế như vận chuyển hàng đi Campuchia, vận chuyển hàng sang Viêng Chăn, van chuyen hang di Trung Quoc.

Ngoài ra bên tui cũng cung cấp dv vận chuyển nội địa như van chuyen hang vao Sai Gon, vận chuyển hàng ra Hà Nội, van chuyen hang ve Bac Ninh, vận chuyển hàng đến Nha Trang.

Unknown said...

NSƯT Hoài Linh cũng viết lên trang cá nhân: “Tên của em (Mỹ Tâm - PV) đã kể lên điều ấy. Mùa đông ko lạnh. Cám ơn em nhé gái ơi”.

"Xem clip này, tôi đã khóc. Tôi khóc vì cô đấy là một ngôi sao lớn nhưng lại cực kỳ nhỏ bé, giản dị đứng trước mọi người. Tôi khóc vì Mỹ Tâm không khoe khoang tôi là một ca sĩ, ngôi sao. Chỉ đơn giản chị đấy giới thiệu về tên mình và khích lệ các người khuyết tật và kêu gọi sự giúp đỡ và tài trợ giàn phơi thông minh. bao lăm đó thôi cũng đủ khiến cho chúng ta ấm lòng giữa đêm đông”.