Tegye webhelyét nyomtathatóvá CSS-sel

Tartalom

• 01. lépés. Első lépések
• 02. lépés. Készítsen otthont a nyomtatási stílusok számára
• 03. lépés. A stílusok alkalmazása
• 04. lépés. További módosítások
• 05. lépés. Tesztelés
• Tetszett ez? Olvassa el ezeket!

• Szükséges tudás: Közbenső CSS, alapvető HTML
• Igényel: Szövegszerkesztő, webböngésző, nyomtató vagy PDF-generátor-nyomtató
• Projekt idő: 2-4 óra
• Támogatási fájl

Sok idõvel ezelõtt, a táblázatalapú weblap-elrendezés rég elfeledett idõszakában a webfejlesztõk hozzáférhettek a CSK (Cascading Style Sheets) olyan funkciójához, amely lehetõvé tette a szerzõk számára a média típusának megadását. Ez a médiatípus megmondta a böngészőnek, hogy mikor kell stílusokat alkalmazni az oldalra - akár képernyőre, kézi számítógépre, akár nyomtatásra.

Ez még 1998-ban történt: a böngészők átvették e funkciók némelyikét (például a nyomtatást), és ahogy telt az idő, az előremutató fejlesztők elkezdték nyomtathatóvá tenni asztali elrendezésüket. Néhány oldalelemet eltávolítottak a papír és a tinta megtakarítása érdekében, még az elrendezés beállításait is elvégezték, hogy jobban illeszkedjenek egy rögzített méretű papírdarabhoz.

Ma a táblázatos elrendezéseket szinte helyettesítették a div-alapú konstrukciókkal, és a HTML5 specifikációkat használók számára egyéb strukturális és szemantikai elemekkel. Ennek a megközelítésnek az egyik legfontosabb előnye, hogy a CSS-t általában a weboldalak elrendezésének meghatározására használják, ami nagyobb mozgásteret biztosít a már kódolt oldalak visszavezetésére és formázására, csak CSS-változtatásokkal.

Ez a rugalmasság az adaptív webtervezés (RWD) elterjedéséhez vezetett, ami megkönnyíti a weboldal alkalmazkodását a CSS alapján a különböző képernyőméretekhez a feltételes logika alkalmazásával. Az elmúlt három évben olyan keretrendszereket, sablonokat, oktatóanyagokat - és még paródiákat is - fejlesztettünk, amelyek azt jelentik, hogy szinte bármilyen készségszintű fejlesztők képesek olyan oldalakat létrehozni, amelyek szinte bármilyen képernyőmérethez alkalmazkodnak, amelyet egy fejlesztő támogatni akar. A tartalom visszatükröződhet; a navigáció beállíthatja; az elemek változhatnak méretben és helyzetben; a tipográfia módosítja önmagát - és így tovább.

Ez az építési módszer tökéletes arra, hogy egy fejlesztő kis többlet erőfeszítéssel támogassa a nyomtatott oldalt. Valamilyen okból kifolyólag nem lát sok ilyen forrást, beleértve a nyomtatott oldalt, vagy akár figyelembe veszi azt.

Remélhetőleg ez az oktatóanyag elegendő kényelmet nyújt Önnek a nyomtatási stílusok készítésével, hogy azokat hozzá tudja adni bármilyen projekthez, anélkül, hogy felpezsdítené költségvetését.

01. lépés. Első lépések

Először is vegyük fontolóra, hogy a webhely nyomtatott oldalai hogyan viszonyulnak a forrás weboldalukhoz:

Mindannyian tudjuk, hogy a weboldalak a végtelenségig görgethetnek, de a nyomtatott oldalt korlátozza a papír mérete és potenciálisan az, hogy a felhasználó mennyi papírt hajlandó kiadni. A kinyomtatott oldalak szintén szigorúan vizuális médiumok, míg egy weboldal tartalmazhat video-, hang- és még akadálymentességet is, amely megkönnyíti a tapintható visszajelzést. A weboldalak mind a bittérképes adatokat (fotók, grafikák), mind a vektoros adatokat (tipográfia, SVG) ábrázolhatják, de miután kinyomtatták, mindez csak bittérképes adat papíron. Egy weboldal interaktív, lehetővé téve a képernyőn megjelenő elemek megváltoztatását, míg a nyomtatott oldal nem sokat változtat a víz vagy a tűz felhasználása mellett. Hasznos mindezt szem előtt tartani, mert ezek a pontok tájékoztatják a kinyomtatott oldal tartalmával kapcsolatos döntéseit (Meg kell jelenítenem az audio vezérlőket? Hogyan lehet megszólítani a képkerékpárosokat? Túl nagy a láblécem ahhoz, hogy akár egy papírlap?).

Ehhez a bemutatóhoz a személyes webhelyemet fogom példaként használni (ez jutalmazza az egómat, és megakadályozza, hogy a társaságot neked juttassam el). Tapasztalatból tudom, hogy a webhelyemről valószínűleg a cikkeket és a biográfiát nyomtatják ki. Az egóm némileg kordában tartom, ha egy régi cikk oldalt használok a kezdéshez.

Ha megnézem az oldalt, egy dolgot tudom, hogy a felhasználó elvárja: a tartalom. Mivel ez az én webhelyem, szeretnék bizonyosodni arról, hogy fenntartom az elemeket az oldalon, amikor a felhasználó kinyomtatja:

• Márkaépítés
• Az olvasó módja, hogy megtalálja az oldalt a webhelyemen
• Szerzői jogi nyilatkozat
• Bármely keresztmárka (például a cégem tartalomkezelő rendszerén)
• A tartalmamban található linkek címe (esetleg)

Ezzel szemben vannak olyan elemek, amelyeket a legtöbb nyomtatási felhasználónak nem lesz se szüksége, se vágya látni:

• Elsődleges navigáció
• Másodlagos navigáció
• Webhelykeresés
• Közösségi média ikonok és linkek

És végül vannak olyan dolgok, amelyek, függetlenül attól, hogy a felhasználó, vagy azt akarom, hogy kinyomtassák, valószínűleg nem lesznek:

• Színek (különösen egyszínű nyomtatók esetén)
• Háttérképek (és színek)
• Időzített / interaktív elemek részei (például a képek egy ciklusban).
• Fehér képek, például logók (kinyomtatják őket, de háttérszín nélkül nem jelenhetnek meg másként, mint egy anti-aliasing glória)

Mivel a webhelyem az RWD erőfeszítéseimből fakad, ötletet kaptam arról is, hogyan lehet tartalmat visszaforgatni, elemeket halmozni, méretet állítani, biteket áthelyezni stb. Tegyen úgy, mintha weboldala fekete-fehér, rögzített szélességű képernyőn lenne, és félúton van.

02. lépés. Készítsen otthont a nyomtatási stílusok számára

Az első tennivaló a CSS beállítása a nyomtatási stílusok megtartására és meghívására. Ha bármilyen RWD kódolást végzett, akkor ennek ismerősnek kell lennie:

@media print {
/ * ide írja be a stílusdeklarációit * /
}

Ön nem korlátozódik erre a megközelítésre. A nyomtatási stíluslapot továbbra is meghívhatja a link> a dokumentumban fej>:

link rel = "stíluslap" type = "text / css" href = "/ css / print.css" media = "print">

Ez a módszer egy további HTTP kérést tartalmaz. A böngészőnek nincs szüksége a nyomtatási stílusokra az oldal megjelenítéséhez, de a legtöbb nem teszi vissza az oldalt, amíg az összes CSS-fájlt le nem húzza; Az Opera kivétel. Ezenkívül a mai böngészők egyike sem indít onload eseményeket, amíg az összes fájlt le nem töltik. Mivel a nyomtatási stíluslap ennyire kevés deklarációt tartalmazhat, gyakran nem éri meg az extra HTTP-költségeket és a renderelés vagy az eseményindítás késedelmét a nyomtatási stílusok külön fájlként történő kibontása.

03. lépés. A stílusok alkalmazása

A logóm szöveges, és bár nem fekete-fehér, fekete szövegre változtatom, hogy a színes nyomtatóval rendelkező felhasználóknak ne kelljen a vörössel fehér papíron foglalkozniuk. Ez foglalkozik a márkaépítési célommal.

Másolja a kódot

#Banner p # Title {
betűméret: 24pt;
}
#Banner p # cím a, #Banner p # cím: link, #Banner p # cím: látogatott {
szín: # 000; / * hivatkozás módosítása fekete szövegre * /
}

Tudom, hogy a böngésző tartalmazhatja az oldal címét a kinyomtatott oldalon, de néhány felhasználó felülírja, és néhány oldal címe túl hosszú ahhoz, hogy elférjen. Mivel az oldalamon navigációs navigáció van, úgy döntök, hogy ezt a helyén hagyom. Még akkor is, ha a felhasználó nem tudja elolvasni a láblécben kinyomtatható címet, a felhasználó legalább látja az elérési utat a webhelyemen. Ez arra a második célomra irányul, hogy lehetővé tegyem az olvasók számára, hogy később megtalálják ezt az oldalt a webhelyemen.

#Bread a: link, #Bread a: megtekintett {
szövegdíszítés: aláhúzás; / * hagyjon nyomot, hogy linkről van szó * /
szín: # 000;
}
#Bread {
szín: # 000;
betűméret: 6pt; / * tedd kicsivé a szöveget * /
}
#Bread> a: után {
tartalom: ""; / * tiltsa le az URL megjelenítését, ha a #Content * /
}

A szerzői jogi nyilatkozatom a láblécemben él, így ha nem teszek mást, mint hogy hagyom a láblécet kinyomtatni, akkor ez a második célomra fog szolgálni. De nem akarom, hogy a láblécben minden kinyomtatódjon, ezért gondoskodni fogok például a keresőmező letiltásáról.

#Footer {
betűméret: 6pt; / * tedd kicsivé a szöveget * /
szín: # 000;
}
#SearchForm {
kijelző: nincs;
}

A láblécben hagyom a CMS logóját. Nem kell URL-t megjelenítenem (lehet, hogy az olvasót nem érdekli), de továbbra is a helyén tartom a márkanevet. Ez foglalkozik negyedik célommal, a keresztmárkázással.

#Footer img {
úszó: jobbra; / * máshol definiálva, a teljesség kedvéért * /
}

Ötödik célom, hogy a linkek teljes URL-jét megjelenítsem, a kontextustól függ. Minden link után szoktam feltüntetni a címet; problémák merülhetnek fel azonban annak köszönhetően, hogy egyes linkcímek hihetetlenül hosszúak - túl sokáig tart ahhoz, hogy a felhasználó könnyen átírja őket.

Ha mégis a hiperhivatkozások megjelenítését választom, fontos, hogy ne felejtsem el a tartalomra korlátozni (hogy a navigációs és láblécem ne rajzoljon URL-eket az egyes elemek után), és esetleg kizárjam a képekből.

#Content a: miután {/ * kiválasztotta a linkeket csak a tartalmi területen * /
tartalom: "[" attr (href) "]";
szövegdíszítés: nincs;
kijelző: sorban;
}

Most át tudok járni és elrejthetem azokat az elemeket, amelyeket nem akarok nyomtatni. Elemek elrejtésével a kis képernyők elől, ami az RWD-ben nem nagyszerű ötlet, elrejthetjük az elemeket nyomtatásban, mert az oldal már teljes mértékben letöltött, és az elrejtett elemeknek nem kell hozzáadniuk a nyomtatott oldal értékét.

Ebben a példában eltávolítom a navigációt, a keresést, a közösségi média ikonokat és minden mást, aminek nincs értelme papíron.

#Nav, #FlyOutNav, #SubNav, .NoPrint, p.CodeAlert, #SMLinks, #SearchForm {
kijelző: nincs;
}

Ez még nem felel meg az összes igényemnek. Mielőtt eljutnánk az elrendezéshez, meg kell vizsgálnom néhány szabványos stílust, amelyet érdemes a helyén elhelyeznie. Például észrevehette, hogy pontokban méretezem a szöveget. Azért teszem ezt, mert ez ismertebb nekem. Amíg különböző böngészőkben tesztel, a nyomtatási stílusokban tetszőleges egységeket használhat.

Alapértelmezett stíluskészletem van, amelyet szinte az összes nyomtatási stíluslapra alkalmazok, hogy megbizonyosodjak arról, hogy nem felejtem-e el a fontos dolgokat. Rendszeresen módosítom webhelyenként, de itt van egy jó kiindulópont az igényeimhez:

body {
háttér: #fff;
szín: # 000;
betűméret: 8pt;
vonalmagasság: 150%;
margó: 0px;
}
hr
szín: #ccc;
háttérszín: #ccc;
}
h1, h2, h3, h4, h5, h6, kód, pre {
szín: # 000;
szöveg-átalakítás: nincs; / *, mert néha össz-sapkát állítok be * /
}
h1 {
betűméret: 11pt;
margin-top: 1em;
}
h2 {
betűméret: 10pt;
}
h3 {
betűméret: 9pt;
}
h4, h5, h6 {
betűméret: 8pt;
}
kód, pre {
betűméret: 8pt;
háttérszín: átlátszó;
/ * arra az esetre, ha a felhasználó a böngészőt háttérképek nyomtatására konfigurálta * /
}
blockquote {
háttérkép: nincs;
/ * bár nem biztos, hogy kinyomtatják, inkább biztos vagyok benne, hogy * /
}
a: link, a: meglátogatott {
szövegdíszítés: aláhúzás;
szín: # 000;
}
röviden: után, betűszó: után {/ * némi HTML4 szerelem * /
tartalom: "(" attr (cím) ")";
/ * Gyanítom, hogy azon kevesek közé tartozom, akik még mindig használják ezeket az elemeket * /
}

Ezek a stílusok számos alapvető dolgot teljesítenek:

• Törlik a szóközöket a tartalom körül (a felhasználó nyomtatási beállításai kezelik az oldal margókat az Ön számára).
• Ezenkívül visszaállítják a típusméretet pontokra, és feketére állítják a szöveget (mert lehetséges, hogy a tiszta, világosszürke szöveg nem váltja ki a böngésző saját felülírásait, hogy a fehér szöveget fekete színre konvertálja nyomtatáskor).
• Még az ön értékét is megírják röv> és betűszó> cím attribútumok az oldalra (amit bármely elem bármely attribútumával megtehetsz, például alt szöveg képeken, bár ez valószínűleg nem illik jól).

04. lépés. További módosítások

Ha webhelye már alkalmazkodik egy mobil elrendezéshez, akkor valószínűleg már rendelkezik stílusokkal, amelyek figyelembe veszik az elrendezés linearizálását. Ha nem tesz mást, akkor a mobilbarát elrendezést használhatja kiindulópontként, és csak kikapcsolhatja a navigációt és más elemeket, amelyeket nem szeretne megtartani.

Ezen a ponton el kell kezdenie mérlegelni, hogy milyen más stílusokkal rendelkezik a különböző képernyőméretű elrendezések elszámolásához. Jó példa erre a képméretek méretezésének támaszkodása a nézetablak mérete alapján.

Számos olyan webhelyet látok, amelyek egy képet 100% szélességre méretezhetnek egyes média lekérdezésekben. Ez problémát jelenthet a kinyomtatott oldal számára, mert ez akaratlanul is a papír szélességére képes méretezni a képet, néha egy egész papírlapot is magának vesz. Fontolja meg, hogy a kép kicsinyíthető-e a felhasználó papírjának és tintájának kímélése érdekében, és bizonyos esetekben fontolja meg, hogy egyáltalán szükséges-e egyáltalán nagyítani.

Gondoljon az elrendezés azon elemeire, amelyek nem is tartoznak papírra. Például van Flash, beágyazott YouTube vagy interaktív kütyü?

Érdemes lehet teljesen eltávolítani őket a nyomtatott oldalról. Ha nem, akkor a beágyazott YouTube-videód (például) még mindig sok helyet (és papírt) foglalhat el, de üresnek tűnik, vagy egyáltalán nem kínál értéket.

05. lépés. Tesztelés

Miután minden stílusa a helyén van, tesztelje. Két olyan technikát használok, amelyek nem igénylik az oldal nyomtatását. Először a böngésző nyomtatási előnézet funkcióira támaszkodom - ez egy gyors módja annak, hogy lássuk, hogyan értelmezik a stílusokat. Másodszor, amikor meg akarom nézni, hogyan dolgozzon fel egy oldalt, kinyomtatom egy PDF-be, majd átnézem.

Ezek egyikének sem felel meg annak a tapasztalatnak, hogy egy darab papírt a kezedben tartasz (és rájössz, hogy másképp kell méretezned a szöveget, vagy a képeid túl nagyok), de lehetővé teszik, hogy a tesztek nagy részét költségmentesen elvégezhesd vagy a fák.

Egy dolog, amit nem tudok eléggé hangsúlyozni, az a böngészők közötti tesztelés. Indítsa el minden böngészőjét, és vegyen át egy engedélyt. Előfordulhat, hogy a Chrome elfojtja a beágyazott betűtípusokat, a Firefox más alapértelmezett margókkal rendelkezik, mint amire számíthat, vagy az Opera csak nagyon szereti becsomagolni a logót olyan módon, amire nem számított.

Ez a cikk először a .net magazin 231. számában jelent meg - ez a világ legkeresettebb weblaptervezők és -fejlesztők magazinja.

Adrian Roselli Adrian az Algonquin Studios alapítója, partnere és vezető mérnököje, HTML, CSS, JavaScript és CMS-ekre specializálódott. adrianroselli.com

Tetszett ez? Olvassa el ezeket!

• A logók tervezésének végső útmutatója
• Kedvenc webes betűtípusaink - és ezek egy fillérbe sem kerülnek
• Fedezze fel a kibővített valóság következő lépéseit
• Ingyenes textúrák letöltése: nagy felbontású és használatra kész