Elfelejtettem a nyomtatási stílusok
Aaron Gustafson közelmúltban kérte a Twitter használatával Indiegogo. amelyben rámutatott, hogy azok az oldalak részletes rendjét alkalmatlan nyomtatott formában.
Kábult voltam, amikor megláttam ezt a tweetet - rájöttem, hogy ez már hosszú idő óta optimalizált stílusok nyomtatott és még csak nem is gondol az ellenőrzést.
Talán azért, mert én töltenek sok időt módosíthatja a böngésző ablak méretét, annak érdekében, hogy a helyszínek tökéletesen működik, minden méretben és formában, és talán azért, mert ritkán az oldal nyomtatása magad. Függetlenül attól, hogy az ok, én már teljesen feledésbe merült a nyomtatási stílus, és ez rossz.
Feladtam az otthoni nyomtatót hosszabb ideig, mert én mindig úgy gondoltam, hogy lebontják után 10 perc működés. De nem mindenki olyan, mint én. - Heydon Pickering (Inclusive Design Patterns)
Ha azt észleli, hogy vannak hasonló helyzetben, ez a poszt segít a gyors felfrissülést a tudás. Ha nem optimalizálták a nyomtatandó oldalak, a következő tippek segítenek az induláshoz.
1. Csatlakoztassa a nyomtatási stílusok
Másik lehetőség, hogy csatlakozni HTML stílus, de ez lesz szükség további HTTP kérést.
2. A vizsgálat
Debug stílusok nyomtatás Firefox, nyissa meg a tervezési panel (Shift + F2 vagy menü Eszközök> Webfejlesztő> Developer Toolbar), írja a beviteli mezőbe média versenyez a nyomtatott és enter. Aktív fülre újraindítás fog működni, mintha a média típusa nyomtatásban.
Emuláció stílusok nyomtatásához Firefoxban
A Chrome fejlesztői eszközök nyitott (CMD + Opt + I (MacOS), vagy a Ctrl + Shift + I (Windows) vagy a menü Nézet> Fejlesztő> Fejlesztői eszközök) és a kijelző konzol, nyissa meg a renderelés panel és Emulate CSS Media menüből válassza ki a Print.
Emuláció stílus nyomtatás Chrome
3. Abszolút egységek
Abszolút mértékegység rossz a képernyőn, de nagy a nyomtatáshoz. A stílusok nyomtatásához használatuk teljesen biztonságos, és még ajánlott egy egység, mint pl cm. mm. a. pt, vagy pc.
4. Különleges szabályok oldalak
Beállíthatjuk tulajdonságokat, amelyek a nyomtatott oldal, mint például a méret, orientáció és margók a @ Page irányelv. Ez nagyon hasznos, ha azt szeretné, hogy az összes oldalt már meghatározott különbözet.
@ Page irányelv szerepel a keresett adathordozómodul- leírás. mely olyan csodálatos dolog, mint a képesség, hogy válassza ki az első oldalt nyomtat, illetve üres oldalak, összesen elemek a sarokban az oldal, és így tovább. Meg is lehet használni könyveket nyomtatni.
5. A vezetés Oldaltörések
Mivel a nyomtatott oldal, szemben a weboldalak nem végtelenek, a tartalom kerül elosztásra az oldalak között. Jelenleg 5 tulajdonságait szabályozására, hogy ez bekövetkezik.
oldaltörés előtt az elem.
Ha azt akarjuk, az elem mindig az oldal tetején, tudjuk meg az oldaltörés kényszerítette a szabály page-break-előtt.
oldaltörés után az elem.
Szabály page-break-után lehetővé teszi számunkra, hogy gyorsítsák fel vagy tiltsa oldaltöréseit eleme után.
oldaltörés a sejten belül
Ez a funkció akkor hasznos, ha szüksége van, hogy elkerülje a oldaltörés az elem belsejében.
Özvegyek és árvák (lógó vonósok)
Néha nem kell felett oldaltörés, de a lényeg felett, hogy hány sor jelenik meg az aktuális, valamint a következő oldalon. Például, ha az utolsó sorban a bekezdés nem illik az aktuális oldalon, a következő oldalon lesz együtt mozgott az utolsó előtti. Ez azért van, mert a mindenkori özvegyek tulajdonság alapértéke 2. Mi lehet változtatni.
Ha állunk szemben a másik oldalon ezt a problémát, és rakjuk csak az első sora egy bekezdés az aktuális oldalon, akkor az egész bekezdés kezdődik a következő oldalon. Árvák felelős az ingatlan és az alapértelmezett érték 2.
Ez a kód azt jelenti, hogy minimum 3 sor kell helyezni az aktuális oldalon, hogy egy bekezdés nem kerül át a másikra.
Nem minden ilyen tulajdonságokat és értékeket működik minden böngészőben, akkor ellenőrizni kell a nyomtatási stílusok különböző böngészőkben.
6. Stílusok visszaállítása
Logikus, hogy állítsa vissza a nyomtatási egyes stílusok, mint a háttér színét. box-árnyék és szín.
Print Styles egyike azon kevés kivételek, amikor a kulcsszó! Important teljesen normális.
7. eltávolítása opcionális tartalom
Ön elvileg tudja mutatni csak a fő tartalmát, és elrejti minden mást:
Nyomtatott referenciák haszontalan, ha nem tudja, hol is vezetnek.
Természetesen lesz látható minden: relatív hivatkozások, abszolút linkeket, horgonyok és így tovább. A következő lehetőség lenne a legjobb:
Úgy néz ki, őrült, tudom. Ezek a sorok a munka, mint ez: href érték mellett megjelenik bármilyen utalás, amely azt jelenti, hogy ha azzal kezdődik, http. de nem vezet a mywebsite.com.
9. Print átiratok rövidítések
Rövidítések kell megfordulni elem jelezve dekódolás attribútum neve. Logikus, hogy kap ez nyomtatott.
10. Háttér nyomtatása
Jellemzően böngészők ne nyomtasson a háttér színe és a háttér kép, ha nem határozza meg kifejezetten azokat. Van egy szabványos funkciót print-szín-beállítani. amely lehetővé teszi, hogy felülbírálja az alapértelmezett beállításokat az egyes böngészők.
11. A médialekérdezéseket
Ha írsz médialekérdezéseket mint ebben a példában, tartsd észben, hogy a stílus a médiában lekérdezés nem használható a nyomtatáshoz.
Lehet kérdezni, hogy miért? Mivel CSS szabályok érvényesek, ha mindkét feltétel: min-szélesség 48em. média-típus - képernyőn. Ha megszabadulni a kulcsszó képernyőn. a média lekérdezés csak úgy min-width értékét.
12. Kártya nyomtatása
Jelenleg a Firefox és a Chrome képes nyomtatni a kártyákat, de a Safari nem. Egyes szolgáltatások biztosítják a statikus térképet. amely lehet nyomtatni az eredeti helyett.
13. QR-kódokat
A cikket a Smashing Magazine van néhány hasznos tipp. Egyikük létrehozása QR-kódok nyomtatott oldalakon, a felhasználóknak nem kell beírni a teljes URL az oldal eléréséhez.
Kiegészítés: tömítés nem optimalizált oldalak
Kutatásaim során találtam egy nagyszerű eszköz, hogy segítsen, nem optimalizált oldalak nyomtatásakor. A Printliminator lehet eltávolítani kívánt elemeket, egyszerűen rájuk kattintva.
2. függelék: Gutenberg
Ha keres egy olyan keret, akkor tetszik Gutenberg. így optimalizálása oldalak egy kicsit könnyebb.
3. függelék: Hartija
Ez egy másik keret létrehozására stílus nyomtatás Vladimir Carrera.