2016-10-19 6 views
2

私は現在、CSSでメディアクエリを使用しています。以前はメディアプリントを使用していませんでした。 @media printが定義されているファイルのボタンで、すべての要素をコピーせずにすべての書式を削除する方法はありますか?簡略化のためにほとんどのスタイルルールを削除しました。media print CSS

はい、これは課題のためのものですが、私の質問はクラスの範囲を超え、私の個人的な知識を形成するだけです。すべての書式をストリップ

nav.sitenavigation { 
 
\t color: yellow; 
 
\t background-color: rgb(241,90,36); 
 
\t text-align: center; 
 
} 
 
nav.sitenavigation p{ 
 
\t display: inline-block; 
 
\t margin: .4em .6em; 
 
\t font-size: 1.6em; 
 
} 
 
nav.sitenavigation a:link{ 
 
\t text-decoration: none; 
 
\t color: yellow; 
 
\t 
 
} 
 
nav.sitenavigation a:visited { 
 
\t color: white; 
 
} 
 
nav.sitenavigation a:hover { 
 
\t color: yellow; 
 
\t text-shadow: 1px -1px 0 black; 
 
} 
 
nav.sitenavigation a:focus { 
 
\t color: yellow; 
 
\t text-shadow: 1px -1px 0 black; 
 
} 
 
nav.sitenavigation a:active { 
 
\t position: relative; 
 
\t top: 1px; 
 
\t left: 1px; 
 
} 
 

 
/* body and page container */ 
 
body { 
 
    font-family: Lato, Arial, Helvetica, sans-serif; 
 
    background-color: #faebbf; 
 
} 
 
.container { 
 
    max-width: 800px; 
 
    margin: 0 auto; 
 
    background-color: #6ac238; 
 
    position: relative; 
 
} 
 
/* Skip Nav section */ 
 
p.skipnavigation { 
 
\t position: absolute; 
 
\t left: -10000px; 
 
} 
 
p.skipnavigation a:focus { 
 
\t color: black; 
 
\t background-color: white; 
 
\t position: relative; 
 
\t top: .4em; 
 
\t left: auto; 
 
\t right: .4em; 
 
\t z-index: 2; 
 
} 
 
/* print styles */ 
 
@media print { 
 
    .container, h1, h2, header, header p, nav p, nav, div, article, p.sitenavigation, nav.sitenavigation, nav.sitenavigation a:visited , p.skipnavigation a:focus, nav.sitenavigation a:link { 
 
     color: black; 
 
     background-color: white; 
 
    } 
 
} 
 
@page { 
 
    margin: 1in; 
 
}

答えて

0

あなたが望むものはおそらくない - それを試して、かなり奇妙に見えるために起こっていることを信頼しています。まず、* { background: none transparent; color: #000; }のような特定のスタイルを取り除く方が良いかもしれません。 *セレクタはすべてをターゲットにするため、注意深く使用してください。

あなた本当に* { all: unset }または* { all: initial }があります、すべてのスタイルを削除する場合 - これらは、わずかに異なる動作を持っていますが、注意して、browser support for all isn't perfect

また、ほとんどのスタイルを削除または標準化するさまざまなCSSリセットを見ることができます。

+0

私は時間があるときこれをもっと詳しく調べなければなりません。一見これはより有用かもしれません、私はSafariとIEがこれでサポートされていないことを知りました。 – William

1

純粋なCSSではそうはいかないと思います。 SCSSを作成する他の簡単な方法がありますが、コードはより洗練されています。

別の方法では、印刷媒体に特定のファイルをアップロードします。この方法で、特定の種類の画面用にすべてのスタイリングを集中管理でき、保守性が向上します。このような

何か:もっと情報については

<link rel="stylesheet" media="print" href="http://foo.com/mystyle.css" /> 

look here

私は何らかの形で助けてくれました。

+0

私は自分の意図を特定していないと思いますが、私はそれをプリンタに送信することを検討していました。 HTMLは、印刷時には役に立たないようにフォーマットされています。 – William

関連する問題