Як блакаваць вэб-старонкі з друку з дапамогай CSS

Вэб - старонкі прызначаныя для прагляду на экране . Хоць існуе вялікая разнастайнасць магчымых прылад , якія могуць быць выкарыстаны для прагляду сайта (настольныя кампутары, ноўтбукі, таблеткі, тэлефоны, носныя, тэлевізары і г.д.), усе яны ўключаюць у сябе экран якой - то. Існуе яшчэ адзін спосаб хтосьці можа праглядаць вэб-сайт, шлях, які не ўключае ў сябе экран. Мы маем на ўвазе фізічную друк з вашых вэб-старонак.

Некалькі гадоў таму, вы б выявілі, што людзі, друк вэб-сайты былі даволі распаўсюджаным сцэнарам. Мы памятаем сустрэчы з вялікай колькасцю кліентаў, якія з'яўляюцца новымі ў Інтэрнэт і адчувалі сябе больш камфортна агляд друкаваных старонак сайта. Затым яны далі нам зваротную сувязь і змены на гэтых паперках замест таго, каб глядзець на экран, каб абмеркаваць сайт. Паколькі людзі сталі больш зручнымі з экранамі ў сваім жыцці, і, як гэтыя экраны шмат разоў памножаныя над, мы бачылі ўсё менш і менш людзей, якія спрабуюць друкаваць вэб-старонку на паперу, але яна ўсё яшчэ можа здарыцца. Вы можаце разгледзець гэта з'ява, калі вы плануеце свой вэб-сайт. Вы хочаце, каб людзі друкаваць вэб-старонкі? Можа быць, вы не ведаеце. Калі гэта так, то ў вас ёсць некалькі варыянтаў.

Як блакаваць вэб-старонкі з друку з дапамогай CSS

Гэта простае ў выкарыстанні CSS , каб людзі з друку вашых вэб - старонак. Вам проста трэба стварыць 1 радок табліцы стыляў з імем «print.css», які ўключае ў сябе наступны радок CSS.

Цела {дысплей: не; }

Гэта адзін стыль ператворыць элемент "цела" вашых старонак, каб быць не адлюстроўваецца - і так усё на вашых старонках з'яўляецца даччыным элементам цела, гэта азначае, што ўся старонка / сайт будзе не адлюстроўваецца.

Калі ў вас ёсць «print.css» табліцы стыляў, вы б загрузіць яго ў HTML, як друк табліцы стыляў. Вось як бы вы зрабіць гэта - проста дадайце наступны радок у элемент «галава» ў вашай HTML-старонках.

<Спасылка отн = тып "табліца стыляў" = "тэкст / CSS" HREF = "print.css" СМІ = "друк" />

Важнай часткай лініі вышэй, вызначаны тлустым шрыфтам - што гэта друк табліцы стыляў. Гэтая інфармацыя паказвае браўзэру, што калі гэтая вэб-старонка знаходзіцца ў друку, каб выкарыстоўваць гэтую табліцу стыляў замест любой па змаўчанні табліцы стыляў старонкі выкарыстоўваюць для адлюстравання на экране. Паколькі старонкі перайсці на гэты «print.css" аркуш, стыль, які робіць усю старонку не адлюстроўваецца будзе ўдар і ўсё, што будзе друкаваць будзе пустая старонка.

Адзін блок пастаронкава

Калі вам не трэба блакаваць шмат старонак на вашым сайце, вы можаце блакаваць друк на аснове пастаронкава старонкі з наступнымі стылямі устаўленых у галава вашага HTML.

<Тып стыль = "тэкст / CSS"> @media друк {цела {дысплей: не}}

Гэта ўбудавальнае стыль будзе мець больш высокую спецыфічнасць, чым любыя стылі ўнутры вашых знешніх табліц стыляў, што азначае, што старонка не будзе друкаваць на ўсіх, у той час як іншыя старонкі без гэтай лініі ўсё яшчэ друкаваць нармальна.

Атрымаць наварочаны з заблакаванымі старонкамі

Што рабіць, калі вы хочаце, каб блакаваць друк, але не хочаце, каб вашыя кліенты расчароўваюцца? Калі яны бачаць пустую друк старонкі, яны могуць знервавацца і думаюць, што іх прынтэр або кампутар зламаны, і не разумеюць, што ў вас ёсць па сутнасці адключыла друк!

Каб пазбегнуць расчараванняў наведвальнікаў, вы можаце атрымаць крыху фантазёра і змясціць ў паведамленні, якое будзе адлюстроўвацца толькі тады, калі вашы чытачы друку старонкі - замена іншага кантэнту. Каб зрабіць гэта, пабудаваць свой стандартны вэб-старонкі, і ў верхняй частцы старонкі, адразу пасля тэга цела, кажучы:

І зачыніць гэты тэг ўсё ж такі ваша ўтрыманне напісана ў самым нізе старонкі:

Затым, пасля таго, як вы закрылі «NOPRINT» DIV, адкрыць іншы DIV з паведамленнем, якое вы хочаце адлюстраваць пры друку дакумента:

Гэтая старонка прызначана для прагляду ў Інтэрнэце і могуць быць надрукаваныя. Калі ласка, праглядзіце гэтую старонку ў http://webdesign.about.com/od/advancedcss/qt/block_print.htm

Уключыце спасылку на адбітку CSS дакумент з імем print.css:

<Спасылка отн = тып "табліца стыляў" = "тэкст / CSS" HREF = "print.css" СМІ = "друк" />

І ў гэтым дакуменце, ўключаюць у сябе наступныя стылі:

#noprint {дысплей: не; } #print {дысплей: блок; }

Нарэшце, у вашай стандартнай табліцы стыляў (ці ў ўнутраны стыль ў вашым дакуменце галавы), напісаць:

#print {дысплей: не; } #noprint {дысплей: блок; }

Гэта будзе гарантаваць, што паведамленне друку з'яўляецца толькі на друкаванай старонцы, у той час як вэб-старонка адлюстроўваецца толькі на інтэрнэт-старонцы.

Разгледзім вопыт карыстальніка

Друк вэб-старонак, як правіла, дрэнны вопыт з сённяшнім сайты часта не вельмі добра перакладаць на друкаванай старонцы. Калі вы не хочаце, каб стварыць зусім асобны ліст стыляў дыктаваць стылі друку, вы можаце разгледзець пытанне аб выкарыстанні крокаў з гэтага артыкула, каб «выключыць» друк на адной старонцы. Майце на ўвазе, які ўплыў гэта можа аказаць на карыстальнікаў, якія належаць на паліграфічных сайтаў (магчыма, таму, што яны маюць дрэнны зрок і змагаюцца чытанне тэксту на экране) і прымаць рашэнні, якія будуць працаваць для аўдыторыі вашага сайта.

Арыгінал артыкула Джэніфер Krynin. Пад рэдакцыяй Джэрэмі Girard.