Миний мартсан CSS хэв маягийг хэвлэх. CSS3 ашиглан хэвлэх хуудасны завсарлага холбоосын URL-г хэвлэх



Том хэмжээний HTML хүснэгтийг хэвлэх үед хуудасны эвдрэлийг хэрхэн шийдвэрлэх вэ (8)

Надад олон мөр бүхий HTML хүснэгтийг хэвлэх шаардлагатай төсөл байна.

Миний асуудал бол хүснэгтийг олон хуудсан дээр хэрхэн хэвлэх явдал юм. Энэ нь заримдаа нэг мөрийг хагасаар нь багасгаж, нэг тал нь хуудасны ирмэг дээр, үлдсэн хэсэг нь дараагийн хуудасны дээд талд хэвлэгддэг тул унших боломжгүй болгодог.

Миний бодож байгаа цорын ганц боломжийн шийдэл бол хүснэгтийн оронд нарийн төвөгтэй DIV-г ашиглах, шаардлагатай бол хуудсыг таслах явдал юм... гэхдээ бүх өөрчлөлтийг хийхээсээ өмнө би эндээс асууж магадгүй гэж бодсон.

Эдгээр CSS шинж чанаруудыг ашиглана уу:

Хуудасны завсарлагааны дараа хуудасны завсарлага

Жишээлбэл:

@media хэвлэх (хүснэгт (хуудасны дараа:үргэлж)) ....

Энд байгаа хариултуудын аль нь ч Chrome дээр надад тохирохгүй байсан. GitHub дээрх AAverin үүнд хэрэгтэй Javascript-ийг үүсгэсэн бөгөөд энэ нь надад тусалсан:

Коддоо js нэмээд splitForPrint ангиллыг хүснэгтэд нэмснээр хүснэгтийг олон хуудас болгон хувааж, хуудас бүрт хүснэгтийн толгой хэсгийг нэмнэ.

Тайлбар: Хуудасны завсарлага ашиглах үед: үргэлж шошгоны хувьд энэ нь хүснэгтийн сүүлийн битийн дараа хуудасны завсарлага үүсгэж, бүр хоосон хуудас үүсгэдэг! Үүнийг засахын тулд хуудасны завсарлагааны дараа: auto болгож өөрчлөхөд л хангалттай. Энэ нь зөв эвдэрч, нэмэлт хоосон хуудас үүсгэхгүй.

@media хэвлэх (хүснэгт (хуудасны дараа:авто ) tr (хуудас задлах:зайлсхийх; хуудасны дараа:авто thead (дэлгэц:хүснэгт-толгой-бүлэг ) tfoot (дэлгэц:хүснэгт-толгой-бүлэг ) ) ....

Зөвшөөрөгдсөн хариулт нь бүх хөтчүүдэд тохирохгүй байсан ч css-ийг дагаж мөрдөх нь надад тохирсон:

Tr (дэлгэц: хүснэгт-мөр-бүлэг; хуудас-дотогшоо:зайлсхийх; хуудас-загарах-дараа:авто; )

HTML бүтэцбайсан:

...

Миний хувьд thead tr-тэй холбоотой нэмэлт асуудлууд байсан ч энэ нь хүснэгтийн мөрийг хадгалах анхны асуудлыг шийдсэн.

Толгойн асуудлаас болж би:

#theTable td * (хуудас задлах: зайлсхийх; )

Энэ нь эгнээ тасрахаас сэргийлсэнгүй; зөвхөн нүд бүрийн агуулга.

Би @vicenteherrera-н арга барилыг зарим өөрчлөлтүүдээр дуусгасан (энэ нь bootstrap 3 байж магадгүй).

Үндсэндээ; Бид tr s эсвэл td s-ийг эвдэж чадахгүй, учир нь тэдгээр нь блокийн түвшний элементүүд биш юм. Тиймээс бид тус бүрдээ div-г оруулаад div-д хуудасны завсарлага-* дүрмийг хэрэглэнэ. Хоёрдугаарт, бид эдгээр div-ийн дээд талд ямар нэгэн хэв маягийн олдворыг нөхөхийн тулд зарим дэвсгэрийг нэмнэ.

@media print ( /* tr"s-ийг хагасаар нь хасахаас зайлсхийх */ th div, td div ( margin-top:-8px; padding-top:8px; page-break-inside:avoid; ) ) $(document).ready (функц())( // tr болон td"-ын контент бүрийг div дотор боож өгнө // (хийх: логикийг нэмснээр бид үүнийг хэвлэхдээ л хийдэг) $("table tbody th, table tbody td").wrapInner(" " );)))

Нэмэлтүүдийн залруулга, залруулга хийх шаардлагатай байсан бөгөөд зарим нэг чичиргээг нөхөх шаардлагатай байсан (ачаалагчаас авсан гэж би бодож байна). Би энэ асуултын бусад хариултаас шинэ шийдлийг танилцуулж байгаа эсэхээ мэдэхгүй байна, гэхдээ магадгүй энэ нь хэн нэгэнд туслах болно.

Би саяхан энэ асуудлыг сайн шийдлээр шийдсэн.

AvoidBreak (хүрээ: 2px хатуу; хуудасны эвдрэлийн дотор: зайлсхийх; )

Функц Хэвлэх())( $(".tableToPrint td, .tableToPrint th"). тус бүр(функц())( $(энэ).css("өргөн", $(энэ).өргөн() + "px") )) ; $(".tableToPrint tr").wrap(""); window.print(); )

Дур булаам шиг ажилладаг!

Би олон шийдлийг туршиж үзсэн боловч аль нь ч сайн ажиллаагүй.

Тиймээс би жаахан заль мэхийг оролдсон бөгөөд энэ нь амжилттай болсон:

хэв маягтай tfoot: байрлал: тогтмол; доод тал: 0px; байрлал: тогтмол; доод тал: 0px; нь сүүлийн хуудасны доод талд байрлуулсан боловч хөл нь хэт өндөр байвал хүснэгтийн агуулгатай давхцаж байна.

tfoot зөвхөн: дэлгэц: table-footer-group; давхцдаггүй, гэхдээ сүүлийн хуудасны доод талд байдаггүй...

Хоёр фут тавья:

TFOOT.placer (дэлгэц: table-footer-group; өндөр: 130px; ) TFOOT.contenter (дэлгэц: хүснэгт-footer-group; байрлал: тогтмол; доод: 0px; өндөр: 130px; ) таны урт текст эсвэл өндөр зургийг эндээс авна уу

Нэг нь сүүлийн бус хуудсууд дээр, нөгөө нь таны хувийн хөл хэсэгт зай үлдээдэг.

Туршилтын хүснэгт ( page-break-inside:auto ) tr ( page-break-inside: зайлсхийх; page-break-after:auto ) thead ( display:table-header-group ) tfoot ( display:table-footer-group )

гарчиг
тэмдэглэл
x
x
x



Том хэмжээний HTML хүснэгтийг хэвлэх үед хуудасны эвдрэлийг хэрхэн шийдвэрлэх вэ (8)

Надад олон мөр бүхий HTML хүснэгтийг хэвлэх шаардлагатай төсөл байна.

Миний асуудал бол хүснэгтийг олон хуудсан дээр хэрхэн хэвлэх явдал юм. Энэ нь заримдаа нэг мөрийг хагасаар нь багасгаж, нэг тал нь хуудасны ирмэг дээр, үлдсэн хэсэг нь дараагийн хуудасны дээд талд хэвлэгддэг тул унших боломжгүй болгодог.

Миний бодож байгаа цорын ганц боломжийн шийдэл бол хүснэгтийн оронд нарийн төвөгтэй DIV-г ашиглах, шаардлагатай бол хуудсыг таслах явдал юм... гэхдээ бүх өөрчлөлтийг хийхээсээ өмнө би эндээс асууж магадгүй гэж бодсон.

Эдгээр CSS шинж чанаруудыг ашиглана уу:

Хуудасны завсарлагааны дараа хуудасны завсарлага

Жишээлбэл:

@media хэвлэх (хүснэгт (хуудасны дараа:үргэлж)) ....

Энд байгаа хариултуудын аль нь ч Chrome дээр надад тохирохгүй байсан. GitHub дээрх AAverin үүнд хэрэгтэй Javascript-ийг үүсгэсэн бөгөөд энэ нь надад тусалсан:

Коддоо js нэмээд splitForPrint ангиллыг хүснэгтэд нэмснээр хүснэгтийг олон хуудас болгон хувааж, хуудас бүрт хүснэгтийн толгой хэсгийг нэмнэ.

Тайлбар: Хуудасны завсарлага ашиглах үед: үргэлж шошгоны хувьд энэ нь хүснэгтийн сүүлийн битийн дараа хуудасны завсарлага үүсгэж, бүр хоосон хуудас үүсгэдэг! Үүнийг засахын тулд хуудасны завсарлагааны дараа: auto болгож өөрчлөхөд л хангалттай. Энэ нь зөв эвдэрч, нэмэлт хоосон хуудас үүсгэхгүй.

@media хэвлэх (хүснэгт (хуудасны дараа:авто ) tr (хуудас задлах:зайлсхийх; хуудасны дараа:авто thead (дэлгэц:хүснэгт-толгой-бүлэг ) tfoot (дэлгэц:хүснэгт-толгой-бүлэг ) ) ....

Зөвшөөрөгдсөн хариулт нь бүх хөтчүүдэд тохирохгүй байсан ч css-ийг дагаж мөрдөх нь надад тохирсон:

Tr (дэлгэц: хүснэгт-мөр-бүлэг; хуудас-дотогшоо:зайлсхийх; хуудас-загарах-дараа:авто; )

HTML бүтэц нь:

...

Миний хувьд thead tr-тэй холбоотой нэмэлт асуудлууд байсан ч энэ нь хүснэгтийн мөрийг хадгалах анхны асуудлыг шийдсэн.

Толгойн асуудлаас болж би:

#theTable td * (хуудас задлах: зайлсхийх; )

Энэ нь эгнээ тасрахаас сэргийлсэнгүй; зөвхөн нүд бүрийн агуулга.

Би @vicenteherrera-н арга барилыг зарим өөрчлөлтүүдээр дуусгасан (энэ нь bootstrap 3 байж магадгүй).

Үндсэндээ; Бид tr s эсвэл td s-ийг эвдэж чадахгүй, учир нь тэдгээр нь блокийн түвшний элементүүд биш юм. Тиймээс бид тус бүрдээ div-г оруулаад div-д хуудасны завсарлага-* дүрмийг хэрэглэнэ. Хоёрдугаарт, бид эдгээр div-ийн дээд талд ямар нэгэн хэв маягийн олдворыг нөхөхийн тулд зарим дэвсгэрийг нэмнэ.

@media print ( /* tr"s-ийг хагасаар нь хасахаас зайлсхийх */ th div, td div ( margin-top:-8px; padding-top:8px; page-break-inside:avoid; ) ) $(document).ready (функц())( // tr болон td"-ын контент бүрийг div дотор боож өгнө // (хийх: логикийг нэмснээр бид үүнийг хэвлэхдээ л хийдэг) $("table tbody th, table tbody td").wrapInner(" " );)))

Нэмэлтүүдийн залруулга, залруулга хийх шаардлагатай байсан бөгөөд зарим нэг чичиргээг нөхөх шаардлагатай байсан (ачаалагчаас авсан гэж би бодож байна). Би энэ асуултын бусад хариултаас шинэ шийдлийг танилцуулж байгаа эсэхээ мэдэхгүй байна, гэхдээ магадгүй энэ нь хэн нэгэнд туслах болно.

Би саяхан энэ асуудлыг сайн шийдлээр шийдсэн.

AvoidBreak (хүрээ: 2px хатуу; хуудасны эвдрэлийн дотор: зайлсхийх; )

Функц Хэвлэх())( $(".tableToPrint td, .tableToPrint th"). тус бүр(функц())( $(энэ).css("өргөн", $(энэ).өргөн() + "px") )) ; $(".tableToPrint tr").wrap(""); window.print(); )

Дур булаам шиг ажилладаг!

Би олон шийдлийг туршиж үзсэн боловч аль нь ч сайн ажиллаагүй.

Тиймээс би жаахан заль мэхийг оролдсон бөгөөд энэ нь амжилттай болсон:

хэв маягтай tfoot: байрлал: тогтмол; доод тал: 0px; байрлал: тогтмол; доод тал: 0px; нь сүүлийн хуудасны доод талд байрлуулсан боловч хөл нь хэт өндөр байвал хүснэгтийн агуулгатай давхцаж байна.

tfoot зөвхөн: дэлгэц: table-footer-group; давхцдаггүй, гэхдээ сүүлийн хуудасны доод талд байдаггүй...

Хоёр фут тавья:

TFOOT.placer (дэлгэц: table-footer-group; өндөр: 130px; ) TFOOT.contenter (дэлгэц: хүснэгт-footer-group; байрлал: тогтмол; доод: 0px; өндөр: 130px; ) таны урт текст эсвэл өндөр зургийг эндээс авна уу

Нэг нь сүүлийн бус хуудсууд дээр, нөгөө нь таны хувийн хөл хэсэгт зай үлдээдэг.

Туршилтын хүснэгт ( page-break-inside:auto ) tr ( page-break-inside: зайлсхийх; page-break-after:auto ) thead ( display:table-header-group ) tfoot ( display:table-footer-group )

гарчиг
тэмдэглэл
x
x
x



Энэ жиргээ намайг татсан. Хэзээ вэб хуудсуудыг хэвлэхийн тулд оновчтой болгосон, тэр ч байтугай хэвлэгч рүү хэрхэн гарсныг шалгаж байснаа санахаа больсоноо би гэнэт ойлгов.

Вэб хөгжүүлэлтийн гол чиглэл нь цахим хувилбаруудсайтууд. Хуудсуудыг олон хөтчөөр шалгаж, өөр өөр цонхны хэмжээтэй туршиж үзэх хэрэгтэй... Принтер хэнд хамаатай вэ? Эсвэл би өөрөө хуудасны цаасан хуулбарыг ховор хийдэг учраас хэвлэх хэв маягийн талаар мартсан байх. Ямар ч байсан нөхцөл байдлыг яаралтай засах шаардлагатай гэж би мэдэрсэн.

Вэб хуудасны хэвлэсэн хувилбар нь цахим хувилбартай адил байх эрхтэй. Хэрэв бид материалаа аль болох хүртээмжтэй болгохыг хичээвэл цаасан хэрэгслийг үл тоомсорлож болохгүй. Нэмж дурдахад та хэрэглэгчид болон тэдний зан байдлын талаар таамаглаж болохгүй. Хүмүүс вэб хуудсыг хэвлэгчээр хэвлэсээр байна. Нийтлэл, блог нийтлэл, жор бүхий хуудсууд, холбоо барих мэдээлэл, заавар, жагсаалт зэргийг бодоод үзээрэй. Эрт орой хэзээ нэгэн цагт хэн нэгэн таны интернетэд байршуулсан зүйлийг хэвлэхийг оролдох нь гарцаагүй.

Энэ талаар "Хүртээмжтэй дизайны загвар" номын зохиогч Хэйдон Пикеринг хэлэхдээ: "Би гэрийн принтер ашиглаагүй удаж байна. Энд гол санаа нь таныг хэвлэж эхэлснээс хойш арав орчим минутын дараа тэдгээр нь эвдэрдэг гэсэн мэдрэмж төрж байна. Гэхдээ би бүх зүйл биш."

Хэрэв та над шиг хэвлэх хэв маягт төдийлөн анхаарал хандуулаагүй гэдгээ ойлгосон бол миний өгүүллэг танд тусалж, ой санамжаа хурдан сэргээхэд тусална гэж найдаж байна. Хэрэв та хэвлэгчдэд зориулсан вэб хуудсуудыг хэзээ ч оновчтой болгож байгаагүй бол миний хэрэгтэй CSS заль мэхүүдийн цуглуулга таныг эхлүүлэх болно.

1. CSS хэвлэх хэв маягийг ашиглах Хэвлэх хэв маягийг хуудсандаа оруулах хамгийн сайн арга бол үндсэн CSS файлдаа @media дүрмийг зарлах явдал юм.

Body (фонтын хэмжээ: 18px; ) @media print ( /* хэвлэх загвар энд орно */ body (фонтын хэмжээ: 28px; ) )
Эсвэл та хэвлэх хэв маягийг тусдаа файлд оруулж, HTML-д оруулах боломжтой боловч энэ аргын тусламжтайгаар хуудсыг ачаалах үед нэмэлт хүсэлт гаргах шаардлагатай болно.

2. Туршилт Хэрхэн үнэлэх вэ Гадаад төрхвэб хуудсыг хэвлэхээр бэлтгэсэн үү? Загварын өөрчлөлт бүрийн дараа үүнийг цаасан дээр буулгах нь тийм биш гэдэг нь хэнд ч ойлгомжтой Хамгийн зөв шийдвэр. Аз болоход хөтчийн чадвар нь хуудасны хэвлэсэн хувилбарыг "цаасгүй" шалгахад хангалттай юм.

Хөтөчөөс хамааран та хуудсыг PDF формат руу экспортлох, функцийг ашиглах боломжтой урьдчилан харахэсвэл тэр ч байтугай вэб хөтөч дээр шууд хуудсыг дибаг хийх боломжтой.

Firefox дээр хэвлэх хэв маягийг дибаг хийхдээ Shift + F2 гарын товчлолыг ашиглан эсвэл Хөгжүүлэгч → Хөгжүүлэгчийн самбар цэсний командыг ашиглан Хөгжүүлэгчийн самбарыг нээнэ үү. Оруулна уу тушаалын мөрцонхны доод талд байрлах, дараах: media emulate хэвлэх , Enter дарж оруулгыг дуусгана. Идэвхтэй таб нь таныг хуудсыг хаах эсвэл дахин сэргээх хүртэл зөөвөрлөгчийн төрөл хэвлэгдсэн мэт ажиллах болно.

Firefox дээр эмуляцийг хэвлэх

Chrome нь мөн ижил төстэй функцтэй. MacOS дээр CMD + Opt + I, Windows дээр Ctrl + Shift + I товчлуурын хослолыг ашиглах эсвэл цэсийн командыг ажиллуулж болох Хөгжүүлэгчийн хэрэгслийг нээнэ үү. Нэмэлт хэрэгслүүд→ Хөгжүүлэгчийн хэрэгслүүд. Үүний дараа дүрслэх самбарыг нээнэ үү. Үүнийг хийх нэг арга бол Esc товчийг дарж Консолын самбарыг гаргаж ирээд цэсийг ашиглан Rendering самбарыг нээх явдал юм. Үзүүлэн дүрслэх самбараас CSS медиаг эмуляцийн тугийг тавиад Хэвлэхийг сонгоно уу.


Chrome дээр эмуляцийг хэвлэх

Та StackOverflow дээр вэб хуудасны хэвлэсэн хувилбаруудыг турших талаар дэлгэрэнгүй уншиж болно.

3. Үнэмлэхүй хэмжилтийн нэгж Үнэмлэхүй хэмжигдэхүүн нь хуудасны дэлгэцийн хувилбарт тийм ч тохиромжтой биш боловч хэвлэхэд яг хэрэгтэй зүйл юм. Хэвлэх хэв маягийн хувьд энэ нь бүрэн аюулгүй бөгөөд үүнээс гадна см, мм, ин, pt, эсвэл pc зэрэг үнэмлэхүй хэмжигдэхүүнийг ашиглахыг зөвлөж байна.

Хэсэг (доод талын зах: 2см; )

4. Хуудасны шинж чанарууд @page дүрмийг ашиглан хуудасны хэмжээ, чиг баримжаа, захын зай зэрэг шинж чанарыг хянах боломжтой. Бүх хэвлэсэн хуудсуудыг ижил захын зайтай байлгах шаардлагатай үед энэ нь маш тохиромжтой.

@media хэвлэх ( @хуудас ( захын зай: 1см; ) )
@page дүрэм нь Paged Media Module стандартын нэг хэсэг бөгөөд хэвлэх эхний хуудсыг сонгох, өөрчлөх гэх мэт олон сайхан зүйлсийг санал болгодог. хоосон хуудас, хуудасны буланд байрлах элементүүдийг байрлуулах ба . Бүр ном хэвлэхэд хүртэл ашиглаж болно.

5. Хуудасны эвдрэлийг удирдах Вэб хуудсуудаас ялгаатай нь хэвлэсэн хуудас нь эцэс төгсгөлгүй байдаггүй тул вэб хуудасны агуулга эрт орой хэзээ нэгэн цагт нэг хуудсан дээр тасарч, дараагийн хуудсан дээр үргэлжилдэг. Хуудасны завсарлагыг хянах таван шинж чанар байдаг: Элементийн өмнө хуудасны завсарлага Хэрэв элемент үргэлж хуудасны эхэнд гарч ирэхийг хүсвэл page-break-before шинж чанарыг ашиглан түүний өмнө хуудас таслахыг албадах боломжтой.

Хэсэг (хуудас таслахаас өмнө: үргэлж; )

▍Элементийн дараа хуудас таслах Page-break-after шинж чанар нь элементийн дараа албадан хуудас таслах боломжийг танд олгоно. Энэ өмчийг ашигласнаар та эвдрэхээс сэргийлж чадна.

H2 (хуудасны дараа: үргэлж; )

▍Элемент доторх хуудсыг хугалах Хэрэв та элементийг хоёр хуудас хооронд хуваахаас зайлсхийх хэрэгтэй бол page-break-inside шинж чанар маш хэрэгтэй.

Ul (хуудас задлах: зайлсхийх; )

▍Дээд ба доод унжсан шугам Заримдаа та хуудас таслахыг албадах шаардлагагүй, харин хуудасны хил дээр догол мөрний гаралтыг хянахыг хүсдэг.

Жишээлбэл, одоогийн хуудсан дээрх догол мөрний сүүлийн мөр тохирохгүй байвал дараагийн хуудсанд тухайн догол мөрийн сүүлийн хоёр мөр хэвлэгдэх болно. Учир нь үүнийг хянадаг өмч (бэлэвсэн эмэгтэйчүүд, өөрөөр хэлбэл "дээд өлгөөтэй мөрүүд") анхдагчаар 2-т тохируулагдсан байдаг. Үүнийг өөрчилж болно.

P (бэлэвсэн эмэгтэйчүүд: 4; )
Хэрэв өөр нөхцөл байдал үүсч, догол мөрний зөвхөн нэг мөр одоогийн хуудсанд багтах юм бол догол мөрийг бүхэлд нь дараагийн хуудсанд хэвлэнэ. Доод унжсан шугамыг (өнчин хүүхдүүд) хариуцах өмчийг мөн анхдагчаар 2 гэж тохируулсан.

P(өнчин: 3;)
Дээрх кодын гол санаа нь догол мөрийг бүхэлд нь дараагийн хуудсанд оруулахгүйн тулд одоогийн хуудсан дээр дор хаяж гурван мөр багтах ёстой.

Үүнийг илүү сайн ойлгохын тулд CodePen ашиглан бэлтгэсэн жишээг харна уу. Энд ижил жишээний дибаг хийх хувилбар байна, энэ нь тест хийхэд илүү тохиромжтой.

*, *: өмнө, *: дараа, *: эхний үсэг, p: эхний мөр, div: эхний мөр, блок ишлэл: эхний мөр, li: эхний мөр ( дэвсгэр: ил тод ! чухал; өнгө: #000 ! чухал; хайрцаг-сүүдэр: байхгүй ! чухал; текст-сүүдэр: байхгүй ! чухал; )
Дашрамд хэлэхэд, хэвлэх CSS-ийн хэв маяг нь! чухал заавар нь туйлын хэвийн байдаг цөөн тооны үл хамаарах зүйлүүдийн нэг юм ;)

7. Шаардлагагүй контентыг устгах Бэх үрэхгүй байхын тулд хуудасны хэвлэсэн хувилбараас асар том үзэсгэлэнтэй слайд, сурталчилгаа, сайтын навигацийн хэрэгсэл гэх мэт шаардлагагүй бүх зүйлийг устгах хэрэгтэй. Шаардлагагүй элементүүдийн хувьд дэлгэцийн шинж чанарыг none гэж тохируулснаар үүнийг хийж болно. Та хуудасны зөвхөн үндсэн агуулгыг харуулах, бусад бүх зүйлийг нуух нь зөв байх магадлалтай.

Үндсэн хэсэг > *:not(main) (дэлгэц: байхгүй; )

8. Холбоосын хаягийг харуулах Холбоосууд нь ихэвчлэн вэб хуудсууд дээр байдаг тул баримт бичгийн цаасан хувилбарыг уншигч хаашаа чиглүүлж байгааг мэдэхгүй л бол хэвлэсэн тохиолдолд огт ашиггүй болно.

Текстийн дүрслэлийн дараа холбоосын хаягийг харуулахын тулд дараах хэв маягийг ашиглана уу.

A:дараа (агуулга: "(" attr(href) ")"; )
Мэдээжийн хэрэг, ийм арга барилаар олон шаардлагагүй зүйлийг "тайлах" болно. Жишээлбэл, харьцангуй холбоосууд, хэвлэсэн хуудастай ижил сайт дээрх үнэмлэхүй холбоосууд, зангуу холбоосууд гэх мэт. Хэвлэсэн хуудсыг эмх замбараагүй болгохгүйн тулд иймэрхүү зүйлийг ашиглах нь дээр.

A: Not(): дараа ( агуулга: " (" attr(href) ")"; )
Энэ нь мэдээжийн хэрэг галзуу харагдаж байна. Тиймээс би утгыг нь тайлбарлах болно энэ дүрмийнэнгийн англи хэлээр: "http-ээр эхэлсэн атрибуттай боловч mywebsite.com-г агуулаагүй холбоос бүрийн хажууд href атрибутын утгыг харуулна уу."

9. Товчилсон үгийн тайлбар Текст дэх товчлолыг шошгонд байрлуулж, тэдгээрийн тайлбарыг гарчгийн шинж чанарт оруулна. Хэрэв та товчилсон үгсийг ингэж форматлавал тэдгээрийн утгыг хэвлэсэн хуудсан дээр харуулахад маш хялбар болно.

Товчлол:дараа (агуулга: "(" attr(гарчиг) ")"; )

10. Арын дэвсгэрийг албадан хэвлэх Ихэвчлэн хөтчүүд хэвлэх хуудас үүсгэхдээ дэвсгэрийн өнгийг харуулдаггүй. дэвсгэр зураг, хэрэв тэд үүнийг тодорхой заагаагүй бол. Гэсэн хэдий ч заримдаа энэ бүгдийг хэвлэх шаардлагатай болдог. Стандарт бус хэвлэх-өнгө тохируулах шинж чанар нь энд бидэнд туслах бөгөөд энэ нь зарим хөтчийн үндсэн тохиргоог хүчингүй болгох боломжийг танд олгоно.

Толгой хэсэг (-webkit-print-color-adjust: яг; хэвлэх-өнгөт-тохируулах: яг; )

11. Хэвлэл мэдээллийн асуулга Хэрэв та доорх шиг медиа асуулга бичдэг бол CSS дараах дүрмийг баримталдаг гэдгийг санаарай. ижил төстэй хүсэлтүүдхуудасны хэвлэсэн хувилбарт нөлөөлөхгүй.

@media дэлгэц ба (мин-өргөн: 48em) ( /* зөвхөн дэлгэц */ )
Яагаад ийм байна вэ? Хамгийн гол нь CSS-ийн дүрмийг зөвхөн хамгийн бага өргөний утга нь 48em, медиа төрөл нь screen бол л хэрэглэнэ. Хэрэв та энэ хэвлэл мэдээллийн асуулгаас ангижрах юм бол түлхүүр үгдэлгэц , дараа нь энэ нь зөвхөн хамгийн бага өргөний утгаар хязгаарлагдах болно.

@media (мин-өргөн: 48em) ( /* бүх медиа төрөл */ )

12. Газрын зураг хэвлэх Firefox болон Chrome-ын одоогийн хувилбарууд газрын зураг хэвлэх боломжтой ч жишээлбэл Safari үүнийг хийх боломжгүй. Карт хэвлэхдээ юу хийх вэ? Бүх нийтийн сонголтуудын нэг бол динамик биш статик газрын зургийг ашиглах явдал юм.

Газрын зураг ( өргөн: 400px; өндөр: 300px; дэвсгэр зураг: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap=revisual&visual" "); -webkit-print-color-ajust: яг; хэвлэх-өнгөт-тохируулах: яг; )

13. QR кодууд Чухал холбоос агуулсан QR кодыг хэвлэх нь вэб хуудасны цаасан хувилбарыг ашиглах боломжийг ихээхэн сайжруулдаг. The Smashing Magazine сэтгүүлээс эндээс олж болно ашигтай зөвлөмжүүдэнэ сэдвийн талаар. Үүний нэг нь хэвлэсэн хуудсан дээр хаягаа QR код хэлбэрээр оруулах явдал юм. Үүний үр дүнд хэрэглэгч хөтчөөр хэвлэсэн хуудсыг нээхийн тулд гар дээр түүний хаягийг бүтэн бичих шаардлагагүй болно.14. Оновчгүй хуудас хэвлэх тухай Вэб хуудас хэвлэх сэдвийг судалж байхдаа би олж мэдсэн гайхалтай хэрэгсэл, энэ нь танд оновчгүй хуудсыг хэвлэхэд хялбар бэлтгэх боломжийг олгодог. Printliminator ашиглах