Урд талын хөгжүүлэгч Мануэль Матузовичаас.

Жиргээ

Дуртай зүйлс рүү нэмнэ үү

Дуртай хэсэгт

Мануэль Матузович

Майкрософт компанийн менежер асан Аарон Густафсон 2016 оны аравдугаар сард бичсэн Twitter дээр Indiegogo-д хандсан бөгөөд захиалгын мэдээлэл бүхий хуудсыг хэвлэх боломжгүйд компанийн анхаарлыг хандуулсан.

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

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

Принтер 10 минут тутамд эвдэрдэг тул би гэртээ ашиглахаа больсон. Гэхдээ хүн бүр над шиг байдаггүй.

Гэйдон Пикеринг

Хамгаалагдсан дизайны загварууд

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

1. Хэвлэх хэв маягийг оруулах

Хамгийн сайн аргахэвлэх хэв маягийг оруулах - CSS дээрээ @media удирдамжийг тайлбарлана уу.

Та мөн хэвлэх хэв маягийг HTML-д оруулж болно, гэхдээ энэ нь нэмэлт хүсэлт шаарддаг.

2. Туршилт

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

Firefox дээр хэвлэх хэв маягийг тохируулахын тулд Хөгжүүлэгчийн самбарыг (Shift + F2 эсвэл Develop → Вэб хөгжүүлэлт → Хөгжүүлэгчийн самбар) нээгээд хөтчийн цонхны доод талд байгаа оруулах мөрөнд media emulate print гэж бичээд Enter дарна уу. Идэвхтэй таб нь хуудсыг хаах эсвэл дахин сэргээх хүртэл зөөвөрлөгчийн төрөл хэвлэгдсэн мэт ажиллах болно.

Firefox бичих хэв маягийн эмуляц

Chrome хөтчөөс Хөгжүүлэгчийн хэрэгслийг (CMD + Opt + I (macOS-ийн хувьд) эсвэл Ctrl + Shift + I (Windows-д зориулсан) эсвэл Харах → Хөгжүүлэгч → Хөгжүүлэгчийн хэрэгсэл), толин тусгалын консолын шургуулга (Esc) нээгээд, Rendering самбарыг нээгээд шалгана уу. "Emulate CSS Media" хайрцгийг сонгоод "Хэвлэх" гэснийг сонгоно уу.

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

3. Үнэмлэхүй нэгж

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

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

4. Хуудасны хувьд тусдаа дүрэм

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

@media хэвлэх ( @хуудас ( захын зай: 1см; ))

Хэвлэх боломжтой хуудас хийх хоёр арга бий:

1. Цэсгүй, шаардлагагүй дизайнгүй хуудсыг харуулахын тулд тусгайлан тусдаа скрипт ашиглана уу.

2. Сайтыг үзэхдээ бидний үзэж буй ижил хуудсыг харуулах боловч шаардлагагүй элементүүдийг нуусан өөр өөр дэмжигдсэн хэв маягтай.

Би хэвлэх баримт бичгийг (нэхэмжлэх, нэхэмжлэх гэх мэт) үүсгэх боломжтой болсон. Тиймээс би эхний хувилбараар явсан. Гэхдээ энэ нь миний хувьд энгийн зүйл юм. Хоёр дахь хувилбар нь надад илүү уян хатан юм шиг санагдаж байна.

Энд миний туршлага байна, тэмдэглэл:

1. Гол дүрэм бол илүү энгийн байх бөгөөд энд хүмүүс таныг татах болно. 🙂 Товчхондоо, олон төрлийн загвар бүү ашигла. Хүн зүгээр л хэвлэсэн текстийг унших хэрэгтэй, шаардлагагүй дизайнаар дарамтлах шаардлагагүй. Тийм ээ, мөн хэвлэгч доторх бэх хаягдал.

2. Бид ямар ч байсан хэвлэх үед дэвсгэр зургийг ашиглахгүй; Эсвэл тэд хийх болно, гэхдээ бүх хөтөч дээр биш. By ядажҮүнтэй төстэй тармуур надад тохиолдсон.

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

4. Хэрэв танд дараах контентыг дараагийн хуудсанд хэвлэх шаардлагатай бол энэ текстийн өмнө pagebreak ангитай div блок оруулна уу. Бид ангийг хэв маягаар дүрсэлсэн:

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

Энэ блокийн ард байгаа текст шинэ хуудсан дээр хэвлэгдэх болно. Орчин үеийн бүх хөтөч дээр ажилладаг. Мөн орчин үеийнх нь биш. 7 хүртэлх хувилбарыг багтаасан нэг IE амжилтгүй боллоо. Гэхдээ та түүнд гоол оруулах хэрэгтэй!

5. Тиймээс хэвлэ. Хэрэглэгч өөрөө хэвлэлтийг сонгох боломжтой. Та бооцоо тавьж болно

window.onload = функц () ( window.print(); )

мөн товчлуур өөрөө:

Битүүмжлэх

Хуудсыг үзэх үед энэ товчлуур гарч ирэх боловч хэвлэхгүй, учир нь бид display: none; in style for media="хэвлэх", өөрөөр хэлбэл хэвлэх төхөөрөмжийн хэв маягаар. Товчлуур дээр дарахад хэвлэх цонх гарч ирнэ.

Жишээлбэл, бид хуудас нээгээд хэвлэгч тэр даруй хуудсыг хэвлэж эхлэхийн тулд хэвлэх үйл явцыг супер автоматжуулахыг хүсч буй хүмүүсийн хувьд таны хүсэл тэмүүлэл эсвэл танаас үүнийг хийхийг хүссэн нэгнийг тайвшруулаарай. Би энэ аргыг олсонгүй. Тийм ээ, тэр байхгүй. Учир нь энэ нь логик юм. Та вэб сайт руу ороход JavaScript-ээр программчлагдсан бөгөөд зуу зуун хуудас хэвлэнэ гэж төсөөлөөд үз дээ. Мөн хэвлэгч ухаангүй болж, таны мэдэлгүйгээр энэ олон хуудсыг хэвлэж эхэлдэг. Логикгүй юу? Логикгүй!

Нэг удаа төслийн менежер надаас ийм зүйл хийхийг чин сэтгэлээсээ хүссэн. Үүнийг хийх боломжгүй, шаардлагагүй гэдгийг ойлгохын тулд би түүнд энэ бүхнийг тайлбарлаж, жишээ татах ёстой байсан.
6. Хэрвээ хэн нэгэн хуудасны хаяг, гарчиг болон хөлийн доод хэсэгт байгаа бусад новшнууд хэвлэгдсэн байна гэж гомдоллох юм бол түүнд хөтөчөө тохируулахыг зөвлөж байна. Үүнийг сайтын талаас тохируулах боломжгүй. Ядаж яаж гэдгийг нь мэдэхгүй. Жишээлбэл, Firefox-д үүнийг "Хэвлэх" - "Хуудасны тохиргоо" - "Хөөвөр ба хөл" хэсэгт тохируулсан болно.

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

8. Том үсгийн хэмжээг ашиглах (мэдээж шалтгааны улмаас). Хамгийн гол нь хэвлэх үед бүх зүйл уншигдах боломжтой.

10. Бид төхөөрөмжөөс хамааралгүй хэмжээсүүдийг ашиглах хэрэгтэй гэж би бодож байна - үнэмлэхүй хэмжээс. Жишээлбэл, см, мм, pt, pc.

11. Энд http://www.webdevout.net/browser-support-css#css2propsprint хэрэгтэй холбоос байна. Загварын тайлбарыг http://htmlbook.ru вэбсайтаас олж болно
Ерөнхийдөө би танд туршлагатай хөгжүүлэгч байсан ч CSS шинж чанаруудын жагсаалтыг бүхэлд нь үзэхийг зөвлөж байна. Танихгүй CSS шинж чанаруудыг олж мэдээд, зарим CSS шинж чанаруудыг айдасгүйгээр ашиглах боломжтой болсонд би гайхсан.

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

CSS: Хэвлэх!

CSS. Хэвлэх гэж байна

ТА ТЭДНИЙГ ХАРСАН БАЙСАН: "хэвлэх хувилбар" эсвэл үүнтэй төстэй зүйл гэсэн холбоосууд. Та эдгээр холбоос дээр дарах бүртээ ижил мэдээллийг агуулсан тусгай баримт бичиг авах болно, гэхдээ элементүүдийн өөр зохицуулалт, магадгүй өөр тэмдэглэгээтэй.

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

Шийдэл - Хэв маягийн хуудас хэвлэх

CSS-ийн гайхалтай шинж чанаруудын нэг нь төрөл бүрийн гаралтын төхөөрөмжүүдэд чиглэгдсэн загварын хуудас үүсгэх чадвар юм. Бид хуудаснуудыг дэлгэцэн дээр харуулах загварын хуудас үүсгэж дассан ч бусад дэлгэцийн мэдээллийн хэрэгслийн талаар бодож хараахан дасаагүй байна. Мөн "хэвлэх хувилбар"-ын лавлагаа баталснаар бид баримт бичгийг хэвлэх нь зөвхөн баримт бичгийг өөр хэлбэрээр үзүүлэх гэж боддог.

Гэхдээ одоо бидэнд айх зүйл байхгүй, одоо баримт бичгийн хэвлэх боломжтой хувилбарыг бий болгоход зөвхөн сайн бүтэцтэй баримт бичиг, хэвлэх загварын хуудас л хэрэгтэй байна!

Өнөөдөр та ямар ч (X)HTML баримт бичгийг авч, тэмдэглэгээнд хүрэлгүйгээр загварын хуудас ашиглан хэвлэхэд бэлтгэх боломжтой. Одоо баримт бичгийн хоёр хувилбарыг үүсгэх, синхрончлохтой холбоотой асуудлууд - нэг нь дэлгэц, нөгөө нь хэвлэх - өнгөрсөн үеийн зүйл болж байна. Мөн хамгийн сайн хэсэг нь: үүнийг хийхэд хялбар байж чадахгүй. (Илүү дэлгэрэнгүй мэдээлэлМедиа төвтэй загварын хуудас үүсгэх үндсэн зарчмуудыг meyerweb.com дээрх "Өөр хэвлэх" нийтлэлээс үзнэ үү.)

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

Бид хөвөгч элементүүдтэй алдааг тойрон ажилладаг

A List Apart эсвэл Bugzilla-н №104040 оруулга дээрх Мэдэгдэж буй асуудлууд хуудаснаас уншиж болно, Netscape 6.x эсвэл Mozilla зэрэг Gecko хөтчүүдэд урт хөвөгч элементүүдийг хэвлэхэд асуудал гардаг). Хэрэв хөвөгч элемент нь хэвлэсэн хуудаснаас хэтэрсэн бол үлдсэн хэсэг нь дараагийн хуудсанд хэзээ ч харагдахгүй, бүрмөсөн алга болно.

Хэрэв таны сайт "A List Apart" шиг бол i.e. түүн дэх нийтлэлүүд нь нэг том хөвөгч блокт агуулагддаг бөгөөд энэ нь хэвлэх үед уншигчид зөвхөн нийтлэлийн эхний хуудсыг хүлээн авах болно гэсэн үг юм.

Энэ шийдэл нь таны бодож байгаачлан хэвлэхийн өмнө текст блокийг буулгах явдал юм. Товчхондоо, "float: none" загварын дүрмийг бүх хөвөгч элементүүдэд тохируулсан. Үүнийг хийснээр та бүх хөвөгч элементүүдийг буцаана хэвийн харагдах байдал, мөн баримт бичиг нь зориулалтын дагуу хэвлэгдэх болно - хуудасны дараа хуудасны төгсгөл хүртэл.

Тиймээс би үүнийг Зельдманд ALA-д хийхийг санал болгосон бөгөөд тэр үүнийг хийсэн даруйд хэвлэх асуудал арилсан. Gecko гэр бүлийн хөтчийн хувьд энэ алдаа засаагүй хэвээр байгаа (бичих үед), гэхдээ дээр дурдсан аргыг ашиглан үүнийг амархан тойрч болно.

Зам дээр

"A List Apart" нь хөвөгч элементүүдийг хэвлэх асуудлыг шийдвэрлэхэд ашигладаг "хэвлэх боломжтой" загварын хуудсыг доор харуулав.

#цэс (
дэлгэц: байхгүй;
}

#боодол, #контент (
өргөн: автомат;
хил: 0;
маржин: 0 5%;
дэвсгэр: 0;
хөвөх: байхгүй ! чухал;
}

Сайн эхлэл. Загварын хуудас нь хэвлэхгүйн тулд баруун гар талын цэсийг бүрмөсөн устгаж, нийтлэлийн агуулгын хүрээ, дэвсгэрийг тохируулж, аль ч хуудсан дээрх текстийг хэвлэх боломжтой хэсгийн нэг ирмэгээс нөгөө ирмэг хүртэл жигд байрлуулна.

Асуудал нь, миний харж байгаагаар дэлгэцэнд зориулж бүтээсэн хэтэрхий олон хэв маяг нь хэвлэх явцад дуусч байсан явдал юм.

Хэрэв та шошгоны агуулгыг харвал ALA вэбсайт дээрх шинэ нийтлэлүүдийг бид (бөглөх зузаан хэсэгт) дараах мөрүүдийг олох болно.

type = "текст/css"
media="print" href="print.css" />

Бидэнд загварын хуудасны файл байгаа print.css, "хэвлэх" төхөөрөмжүүдийн хэрэглээг "медиа" атрибутын утгаар тодорхойлсон. Navigator 4.x-ээс нуухын тулд @import бүтцийг ашиглан импортолсон загварын хуудасны файл nucss2.css нь хуудсыг дурын гаралтын төхөөрөмж (media="all" атрибут) дээр харуулах үед ашиглагдана. Энэ нь дэлгэц, принтер, проектор, ярианы синтезатор гэх мэт байж болно. Өөр өнгийг авч үзвэл бид хэвлэх загварын хуудсанд хуудасны дэвсгэр өнгөний удирдамжийг бичиж, фонтыг пикселээр зааж өгч болно.

Энэ их гамшиг болох уу? Үгүй, гэхдээ ихэнх хөтчүүд хуудасны дэвсгэрийг анхдагчаар хэвлэдэггүй бөгөөд дэлгэцийн дэлгэцэнд тохирох пикселийн фонтын хэмжээ нь хэвлэх үед тийм ч ашигтай биш юм.

Тиймээс хэвлэх загварын хүснэгтээ бага зэрэг сайжруулж, өөр хэд хэдэн байршлын асуудлыг шийдье.

Цайруулах дэвсгэр

Баруун талын цэсийн зүйлүүд нь янз бүрийн өнгө хэрэглэдэг. Гэхдээ бид хэвлэхдээ цэсийг нуусан тул юу ч өөрчлөх шаардлагагүй болно. Энэ нь биднийг толгой өвдөхөөс нэн даруй авардаг.

Принтерүүд цагаанаар хэвлэдэггүй тул бид хуудасны арын дэвсгэрийг цагаан болгоно. Та мөн хуудсыг дэлгэцэн дээр харуулах үед ашигласан бүх дэвсгэр зургийг арилгах хэрэгтэй.

Хэрэв бид арын өмчийг туслахыг уриалбал бид хоёр асуудлыг нэг дор шийддэг. Шийдлийг илүү уян хатан болгохын тулд "бие" элементийг цагаан дэвсгэр болгож, "боодол" болон "агуулгын" элементүүдийг тунгалаг дэвсгэртэй болгоё. цагаан"бие"):

бие (
дэвсгэр:цагаан;
}

#цэс (
дэлгэц: байхгүй;
}

#боодол, #контент (
өргөн: автомат;
маржин: 0 5%;
дэвсгэр: 0;
хил: 0;
хөвөх: үгүй ​​! чухал;
өнгө: хар;
дэвсгэр: ил тод;
}

Урд талын өнгө (фонтын өнгө) тохируулах нь тийм ч чухал биш байсан ч үүнийг санаж байх нь дээр. Тэгэхээр одоо бид хоёр хөвөгч бус элементтэй (#wrapper, #content) байна ил тод дэвсгэр, хуудас нь цагаан дэвсгэртэй.

Та Navigator 4.x нь "ил тод" утгыг хэрхэн зохицуулдаг талаар санаа зовж магадгүй, гэхдээ энд нэг зүйл байна: NN4.x нь зөвхөн "дэлгэц" гэж тохируулсан "медиа" шинж чанар бүхий загварын хүснэгтэд анхаарлаа хандуулдаг. @import зааврын нэгэн адил манай хэвлэх загварын хуудаснууд нь Navigator 4-ийн сохор нүднээс үргэлж далд байдаг. Тиймээс энд санаа зовох зүйл байхгүй.

Хэвлэх үсгийн хэмжээ

Ерөнхий загварын хүснэгт нь үсгийн хэмжээг 11 пиксел болгож тохируулсан. Маш муу сонголтхэвлэх үед. Фонтын гэр бүл өөрөө буюу эхлээд Georgia, дараа нь serif нь хэвлэхэд тохиромжтой, учир нь сериф фонтууд цаасан дээр илүү сайн харагддаг. Та зөвхөн үсгийн хэмжээг өөрчлөх хэрэгтэй. Үүнтэй адил:

бие (
дэвсгэр:цагаан;
үсгийн хэмжээ: 12pt;
}

"Хүлээгээрэй!" Гэж та магадгүй хашгирах болно. - "Эрт үзэлтэн! Хэлэлцүүлэг нь хорон муу гэдгийг бүгд мэднэ! Тодд Фарнер ингэж хэлсэн!"

За, тийм ээ, энэ бол түүний хэлсэн зүйл бөгөөд түүний зөв байсан - та дэлгэцийн цэгүүдэд үсгийн хэмжээг тохируулах боломжгүй. Хэвлэх үед оноо ашиглах нь олон арван жилийн өмнөхтэй ижил утгатай. Бид хэвлэх загварын хуудсыг бэлтгэж байгаа тул "бие"-ийн үсгийн хэмжээг 12 цэгээр тохируулах нь зөв бөгөөд байгалийн юм.

Мэдээжийн хэрэг та хүссэн хэмжээгээрээ тохируулж болно, гэхдээ 12 цэгийн фонт нь хамгийн түгээмэл байдаг. Загварын ерөнхий хуудсанд хуудасны бусад бүх элементүүдийн хэмжээг "бие" элементийн хэмжээтэй харьцуулж өгсөн тул бидний ажил дууслаа.

Маржиналиа

Одоо байгаа загварын дүрмүүд нь боодол болон агуулгын элементүүдийн зүүн ба баруун захын зайг 5% болгож тохируулсан. Энэ нь нийтлэлийн хоёр талд байх болно гэсэн үг юм " хоосон зай", мөн ийм "хоосон зай" бүр нь хэвлэх талбайн өргөний 10% байх болно. Энэ нь "агуулга" өгүүллийн текст бүхий блок нь "боодол" хүрээний блок дотор орсны үр дагавар юм. тус бүр нь зүүн болон баруун талд 5%-ийн зөрүүтэй

Анхны нийтлэг загварын хуудас нь "агуулгын" блокийн баруун талын 15% дэвсгэрийг зааж өгдөг. Хил хязгаар нь бидэнд аль хэдийн 10% өгсөн тул бид дахиад 5% нэмэх хэрэгтэй. Үүнийг хийхэд хангалттай хялбар:

div#контент (
зүүн талын зах: 10%;
}

Өөр нэг шийдэл бол захын зайг орхиж, зүүн дэвсгэр дээр 5% нэмэх явдал юм.

"Агуулга" блок нь харагдах дэвсгэргүй тул бид ижил үр дүнд хүрэх болно.

Харамсалтай нь зарим хөтчүүд дүүргэлттэй ажиллахад асуудалтай тул хуудасны ирмэгийг ашиглан элементүүдийг зөөх нь дээр.

Нэг төвөгтэй асуулт байсан - гипер холбоосоор юу хийх вэ? Мэдээжийн хэрэг, тэдгээр нь монитор дээрх шиг хэвлэмэл хэлбэрээр ашиг тустай биш байж болох ч эх хувилбарт юу гэж хэлж байсан талаар ойлголт өгөх нь ихэвчлэн чухал байдаг. Тиймээс би юу бодож олов:
a:холбоос, а:зочилсон (
дэвсгэр: ил тод;
өнгө: #520;
үсгийн жин: тод;
}

Энэ нь холбоосыг хар цагаанаар хэвлэх үед хар өнгөтэй ойрхон байхаар хангалттай бараан өнгөтэй, харин өнгөтөөр хэвлэх үед хар улаан хэвээр үлддэг. Тод фонт ба доогуур зураас нь хэвлэсэн текстэн дээрх холбоосыг ялгаж харагдуулна.

CSS2-ийн тодорхойлолтыг бүрэн дэмждэг хөтөч дээр бид холбоосуудын URL-уудыг араас нь харуулах боломжтой бөгөөд ингэснээр хэвлэх хуудас болон хөтөчтэй хүмүүст тустай. Доорх нь зөвхөн "контент" блокт хамаарах дүрэм бөгөөд ингэснээр бусад холбоосын URL-ууд хэвлэгдэхгүй.

#контент a:холбоос:дараа, #контент a:зочилсон:дараа (
агуулга: " (" attr(href) ") ";
үсгийн хэмжээ: 90%;
}

Үүнийг Gecko - Mozilla эсвэл Netscape 6.x дээр суурилсан хөтчүүдэд ашиглаж үзээрэй. Хэвлэмэл дээр, холбоос бүрийн дараа та хаалтанд холбогдох URL-г харах болно.

Энэхүү хэв маягийн дүрмийг ойлгодоггүй хөтчүүдэд хүсээгүй нөлөө үзүүлэхгүй - холбоосууд нь хар улаан, доогуур зураастай, тод өнгөтэй хэвээр байх болно. Зүгээр л холбоосын текстийн дараа тэдгээртэй холбоотой URL харагдахгүй, тэгээд л болоо.

Хаалтны өмнөх болон дараах хоосон зай нь хэв маягийн конвенцийн нэг хэсэг гэдгийг анхаарна уу - тэдгээрийг баримт бичигт оруулах ёстой тул хоосон зайг бүү мартаарай.

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

A List Apart сайтын аль ч хуудасны кодыг харвал "/асуудлыг/144" маягтын "харьцангуй холбоосууд" олон байгааг бид хурдан анзаарах болно. Тэдгээрийг баримт бичигт байгаагаар нь оруулах болно, гэхдээ би тэдгээрийг бүрэн URL байхыг хүсч байна.

IN ижил төстэй тохиолдлууд CSS3 нь бидэнд тусалж чадна. ^= операторыг ашигладаг аливаа атрибут сонгогч нь атрибутын утгуудын эхлэл дээр үндэслэн элементүүдийг сонгодог. Ингэснээр бид налуу зураасаар эхэлсэн ямар ч href атрибутыг сонгож, тэнд байгаа атрибутын утгыг орлуулах текст оруулах боломжтой.

#контент a:дараа (
агуулга: " (http://www.alistapart.com" attr(href) ") ";
}

Энэ дүрэм нь "/issues/144/" гэх мэт бүх утгыг "http://www.alistapart.com/issues/144/" болгон хөрвүүлнэ. Энэ дүрэм нь ташуу зураасаар эхлээгүй харьцангуй URL-д тус болохгүй, гэхдээ аз болоход ALA энэ төрлийн холбоосыг ашигладаггүй.

АНХААР! ЧУХАЛ!Өмнө дурьдсанчлан, ^= шиг сонгогч нь CSS3 тодорхойлолт сонгогч юм. W3 CSS баталгаажуулагч нь зөвхөн CSS1 болон CSS2 техникийн үзүүлэлтүүдийг шалгах боломжтой. CSS3-т зориулсан сонгогчийг ойлгохгүйгээр шалгагч нь техникийн үзүүлэлтийн удирдамжийг зөрчөөгүй байсан ч алдааны талаар мэдээлэх болно.

Хуудасны дээд хэсгийг чимэглэх

Би эцсийн загварын хуудсыг дахин харж байхдаа хуудасны толгой хэсэгт үнэхээр дургүй байгааг олж мэдсэн.

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

div#контент (
зүүн талын зах: 10%;
Эхний алхам нь агуулгын блокийн дээд хүрээг зурган дээрх доогуур зураастай ижил хэв маягаар үүсгэх явдал байв: нэг пикселийн зузаантай хар улаан шугам. Би харагдахуйц дээд хүрээ хийх гэж байгаа тул хүрээ болон бичвэрийн хооронд бага зэрэг дэвсгэр оруулах нь сайхан байх болно.
дэвсгэр-дээд: 1em;
}

хилийн дээд: 1px хатуу #930;

Хөлийн хэсэг эсвэл шошго гэх мэт бусад элементүүд байдаг

 
Энэ төрлийн ажлын үр шимийг хүртэх боломжтой бөгөөд A List Apart сайтын загварын хуудасны ирээдүйн хувилбаруудад гарч ирж магадгүй юм.

 
Эцсийн үр дүн
 
бие ( 
дэвсгэр:цагаан; 
үсгийн хэмжээ: 12pt; 
} 
#цэс ( 
дэлгэц: байхгүй; 
} 
Бүх өөрчлөлтийг хийсний дараа хэвлэх хувилбарын эцсийн загварын хуудас энд байна: 
өргөн: автомат; 
маржин: 0 5%; 
дэвсгэр: 0; 
хил: 0; 
хөвөх: үгүй ​​! чухал; 
#боодол, #контент ( 
өнгө: хар; 
} 
div#контент ( 
зүүн талын зах: 10%; 
Эхний алхам нь агуулгын блокийн дээд хүрээг зурган дээрх доогуур зураастай ижил хэв маягаар үүсгэх явдал байв: нэг пикселийн зузаантай хар улаан шугам.  Би харагдахуйц дээд хүрээ хийх гэж байгаа тул хүрээ болон бичвэрийн хооронд бага зэрэг дэвсгэр оруулах нь сайхан байх болно. 
дэвсгэр-дээд: 1em; 
} 
элемент, тиймээс бид хуудасны бусад элементүүдийг татахын тулд энэ элементийн доод хүрээг ашиглана. 
дэвсгэр: ил тод байхгүй; 
} 
захын доод: -8px; 
div#mast img ( 
} 
босоо зэрэгцүүлэх: доод; 
a:холбоос, а:зочилсон ( 
дэвсгэр: ил тод; 
өнгө: #520; 
үсгийн жин: тод; 
} 
өнгө: #520; 
#контент a:холбоос:дараа, #контент a:зочилсон:дараа ( 
агуулга: " (" attr(href) ") "; 
} 
үсгийн хэмжээ: 90%; 
#контент a:дараа ( 
} 

 
агуулга: " (http://www.alistapart.com" attr(href) ") ";
Энэхүү загварын хуудасны энгийн бөгөөд (зарим тохиолдолд) бүдүүлэг байдлыг үл харгалзан, дэлгэцэн дээр гарч буй ижил хуудастай хэвлэсэн хуудсыг харьцуулж үзсэн хэн бүхэнд түүний хэрэглээний үр нөлөө нь ойлгомжтой байх ёстой.  Эдгээр хэрэгцээтэй, нөлөө бүхий өөрчлөлтүүд нь энгийн загвараас эхлээд гайхалтай хүртэл бараг бүх загварт боломжтой бөгөөд эдгээр медиа төвтэй хэв маяг нь зохиогчид баримт бичгийн хэвлэсэн хувилбарт зориулж тусдаа хуудас үүсгэх шаардлагагүй болно.
"Хуудас хэвлэх" товчийг хэрхэн хийх, мөн вэб сайт дээр "Хэвлэх хувилбар"-ыг хэрхэн үүсгэх/засах, тэр дундаа wordpress залгаасуудыг ашиглах талаар харцгаая.
Та доорх нийтлэлийн эх сурвалжийг татаж авах боломжтой
"Хуудас хэвлэх" товчийг хэрхэн хийх вэ:
Та дараах кодыг ашиглаж болно.
Хэвлэх
WordPress сайтуудын хувьд энэ товчлуурыг үүсгэхийн тулд та "Нийтлэл/Хуудасны засварлагч" руу очих хэрэгтэй - "Текст" табыг нээж, дээрх кодыг зөв газартаа оруулна уу.
Загварын файл - style.css-д дараах загваруудыг энэ холбоос дээр нэмнэ үү:
Үүний үр дүнд та энэ сайхан товчлуурыг авах болно:
Вэбсайтад "Хэвлэх хувилбар"-ыг хэрхэн үүсгэх/засах вэ:
Ихэнх WordPress сэдвүүдэд "Хэвлэх хувилбар" нь "@media print" дүрмийг ашиглан үүсгэгддэг. "Сайтын хэвлэх хувилбар" -ыг засварлахын тулд та wordpress-ийн хяналтын самбар руу орж "-г сонгох хэрэгтэй." ба түүний дэд зүйл "Засварлагч" болон загварын файл нээгдэнэ - одоогийн сайтын сэдвийн style.css.
Хэрэв бид стандарт Хорин арван тавны сэдвийг авбал (та өөр ямар ч сэдвийг авч болно: Хорин арван дөрөв, хорин арван гурав, хорин арван хоёр - та бүгдийг нь "wordpress.org/themes/search/twenty/"-ээс үнэгүй татаж авах боломжтой), дараа нь " @media print” дүрэм нь загварын хуудасны кодын төгсгөлд байрлах ба дараах байдлаар эхэлнэ.
@media print ( бие ( дэвсгэр: байхгүй ! чухал; /* Хэрэглэгчийн агентууд бүгд өөр өөрөөр хэвлэдэг тул харгис хүч. */ үсгийн хэмжээ: 11.25pt; ) .secondary-toggle, .navigation, .page-links, .edit-link , #reply-title, .comment-form, .comment-edit-link, .comment-edit-link, .comment-list .reply a, button, input, textarea, select, .widecolumn form, .widecolumn .mu_register form (дэлгэц: none; ). ..
Энд хэсэг нь "байхгүй" гэсэн утгатай "дэлгэц" шинж чанарыг ашигладаг бөгөөд энэ нь хэвлэх шаардлагагүй элементүүдийг нуух боломжийг олгодог.
Мөн хэвлэхийн тулд сайтын арын дэвсгэрийг арилгадаг - дэвсгэр: байхгүй, фонтууд ихэвчлэн өөрчлөгддөг.
Өөр арга- "Сайтын хэвлэх хувилбар" үүсгэх нь нэмэлт загварын файл үүсгэх гэсэн үг юм - жишээ нь - print.css.
Сайт нь print.css файл руу нэвтрэхийн тулд мета шошгонд дараах кодыг бичих шаардлагатай.
 /print.css" type="text/css" media="хэвлэх" />
Мета шошго нь сайтын зочдод зориулагдаагүй HTML болон XMTL хэлний нэмэлт шошго юм.  Эдгээр нь вэб хуудасны талаарх үйлчилгээний мэдээлэл, түүний хөтчүүд болон хайлтын системд зориулсан тайлбарыг бүтэцтэй хэлбэрээр агуулдаг.  Мета шошгуудыг “HEAD”/HEAD” таг (хуудасны гарчиг) дотор байрлуулна.
WordPress дахь мета шошгуудыг ихэвчлэн header.php файлд байрлуулдаг - үүнийг нээхийн тулд та админ самбар руу орж, зүүн цэсний "Гадаад төрх" хэсгийг, түүний "Засварлагч" дэд хэсгийг сонгож, файлын толгой хэсгийг сонгох хэрэгтэй. php баруун талд байгаа загваруудын жагсаалтад.
"Хэвлэх товч" үүсгэх WordPress залгаасууд болон 
"Сайтын хэвлэсэн хувилбар":
1.WP-Хэвлэх
WP-Print залгаасын дэлгэрэнгүй: 
Сүүлийн шинэчлэлт: 2015-04-21 
Идэвхтэй татан авалтын тоо: 40,000+ 
Plugin вэбсайт: "wordpress.org/plugins/wp-print/screenshots/"
2. Хэвлэх ээлтэй, PDF товчлуур
Хэвлэх ээлтэй болон PDF товчлуурын залгаасын дэлгэрэнгүй: 
Сүүлийн шинэчлэлт: 2015-06-09 
Идэвхтэй татан авалтын тоо: 60,000+ 
Plugin вэбсайт: "wordpress.org/plugins/printfriendly/"

Та бас сонирхож магадгүй:

Камео ба түүний Дорнод дахь Жеммагийн түүх

Жемма бол өнгөт чулуу, эрдэнийн чулуугаар хийсэн бяцхан сийлбэрийн жишээ юм - глиптик. Энэ үзэмж...

Унасан гогцоотой пуловер

98/104 (110/116) 122/128 Танд утас (100% хөвөн; 125 м / 50 гр) хэрэгтэй болно - 250 (250) 300...

Хувцасны өнгөний хослол: онол ба жишээ

Янз бүрийн өнгө, сүүдэрт зориулсан нийтлэлийн цуглуулгаа үе үе дүүргэдэг...

Ороолт уях загварлаг аргууд

Хүзүүндээ зөв зүүсэн ороолт нь гадаад дүр төрхөд нөлөөлж, дотоод...

Өргөтгөлийн гель сонгох шалгуур

251 2019-03-26 6 мин.