Little CSS print stylesheet tip

There are many different media. Web applications are on the web but sometimes there is a need to bridge across and get the information to another medium, specifically a printable medium. A great example of such cases are reports from Jira.
Some reports are interactive and best viewed on the web. Others are intended to be printed on paper. As such these reports should be laid out so they fit on an A4 or Letter sized sheet of paper. Moreover, they should include only required information. Such things as menus, navigation links unnecessarily clutter the printed page.
There was always something that bothered me on Jira reports:

Yes, that’s right! The Back to previous view link that was printed at the top of each printable view.
How did I remove it from the printable view? Well, if you go to the printable view the link is still present. It’s only when you hit the print button on your browser when the link disappears.

<style type="text/css">
.linkback
{
background-color:#fff;
width:100%;
border:0;
font-weight:bold;
}
</style>
<style type="text/css" media="print">
.linkback
{
display: none;
}
</style>

Notice the difference in media. The style applied for print media is display: none. This effectively removes the content from the page when printed.
This little improvement (JRA-13335) will be available in Jira from version 3.11.

Published

in

Related Content

More in ‘
Featured Article
Announcing social enterprise discounts: Atlassian tools for social impact teams
Featured Article
Great managers meet uncertainty with curiosity and confidence
Featured Article
Introducing Databricks Query Runner: Transforming data into insight
Featured Article
Team ’25 Europe: AI that’s changing the game for teams

More Collections

Meet Rovo everywhere: AI that connects every app, every team, every workflow

Introducing Atlassian Software Collection

Move Faster and Work Smarter with Atlassian’s AI-Powered Teamwork Collection