Ispravan ispis web-dokumenta pomoću CSS-a Web dizajn i optimizacija za tražilice Printable verzija html stranica

Primanje privatnih podataka ne znači uvijek hakiranje - ponekad se objavljuju u javnoj domeni. Poznavanje Googleovih postavki i malo domišljatosti omogućit će vam da pronađete puno zanimljivih stvari – od brojeva kreditnih kartica do dokumenata FBI-a.

UPOZORENJE

Sve informacije su date samo u informativne svrhe. Ni urednici ni autor nisu odgovorni za bilo kakvu moguću štetu prouzročenu materijalima ovog članka.

Danas je sve povezano s internetom, malo mareći za ograničavanje pristupa. Stoga mnogi privatni podaci postaju plijen tražilica. Spider roboti više nisu ograničeni na web stranice, već indeksiraju sav sadržaj dostupan na webu i neprestano dodaju povjerljive informacije u svoje baze podataka. Lako je naučiti te tajne - samo trebate znati kako ih pitati.

Tražim datoteke

U sposobnim rukama Google će brzo pronaći sve što je loše na webu, poput osobnih podataka i datoteka za službenu upotrebu. Često su skriveni poput ključa ispod tepiha: nema stvarnih ograničenja pristupa, podaci samo leže na stražnjoj strani stranice, gdje poveznice ne vode. Standardno Google web sučelje nudi samo osnovne napredne postavke pretraživanja, ali i ove će biti dovoljne.

Postoje dva operatora koja možete koristiti za ograničavanje Google pretraživanja na datoteke određene vrste: filetype i ext. Prvi postavlja format koji tražilica određuje zaglavljem datoteke, drugi - ekstenzijom datoteke, bez obzira na njezin unutarnji sadržaj. Kod pretraživanja u oba slučaja potrebno je navesti samo ekstenziju. U početku je operator ext bio prikladan za korištenje u slučajevima kada nije bilo specifičnih značajki formata za datoteku (na primjer, za traženje ini i cfg konfiguracijskih datoteka, koje mogu sadržavati bilo što). Sada su se Googleovi algoritmi promijenili, a vidljive razlike među operaterima nema – rezultati su u većini slučajeva isti.


Filtriranje izlaza

Prema zadanim postavkama, Google pretražuje riječi i općenito sve znakove unesene u sve datoteke na indeksiranim stranicama. Opseg pretraživanja možete ograničiti vršnom domenom, određenim mjestom ili lokacijom željenog niza u samim datotekama. Za prve dvije opcije koristi se naredba site, nakon koje slijedi naziv domene ili odabrane stranice. U trećem slučaju, čitav niz operatora omogućuje vam pretraživanje informacija u servisnim poljima i metapodacima. Na primjer, allinurl će pronaći navedeno u tijelu samih veza, allinanchor - u tekstu koji se nalazi uz oznaku , allintitle - u zaglavljima stranica, allintext - u tijelu stranica.

Za svakog operatora postoji lakša verzija s kraćim nazivom (bez prefiksa all). Razlika je u tome što će allinurl pronaći poveznice sa svim riječima, dok će inurl pronaći poveznice samo s prvom od njih. Druga i sljedeće riječi iz upita mogu se pojaviti bilo gdje na web stranicama. Operator inurl također se razlikuje od druge stranice koja ima slično značenje. Prvi također omogućuje pronalaženje bilo kojeg niza znakova u poveznici na željeni dokument (na primjer, /cgi-bin/), koji se često koristi za pronalaženje komponenti s poznatim ranjivostima.

Probajmo to u praksi. Uzimamo allintext filter i tražimo da upit vraća popis brojeva kreditnih kartica i kodova za provjeru, koji će prestati vrijediti tek nakon dvije godine (ili kada se njihovim vlasnicima smuči hraniti sve redom).

Allintext: broj kartice datum isteka /2017 cvv

Kada na vijestima pročitate da je mladi haker "upao u servere" Pentagona ili NASA-e, ukravši tajne podatke, onda se u većini slučajeva radi upravo o toj elementarnoj tehnici korištenja Googlea. Pretpostavimo da nas zanima popis zaposlenika NASA-e i njihovi kontakt podaci. Sigurno je takav popis u elektroničkom obliku. Radi praktičnosti ili zbog propusta, može ležati i na samoj web stranici organizacije. Logično je da u ovom slučaju neće biti referenci na njega, jer je namijenjen za internu upotrebu. Koje riječi mogu biti u takvoj datoteci? Najmanje - polje "adresa". Lako je testirati sve ove pretpostavke.


inurl:nasa.gov filetype:xlsx "adresa"


Koristimo se birokracijom

Takvi su nalazi ugodna sitnica. Stvarno solidan ulov dolazi iz detaljnijeg poznavanja Google Webmaster Operators, samog weba i strukture onoga što tražite. Znajući detalje, možete jednostavno filtrirati izlaz i poboljšati svojstva datoteka koje su vam potrebne kako biste u ostatku dobili stvarno vrijedne podatke. Smiješno je da tu u pomoć priskače birokracija. Proizvodi tipične formulacije koje olakšavaju traženje tajnih informacija koje su slučajno procurile na web.

Na primjer, žig izjave o distribuciji, koji je obavezan u uredu američkog ministarstva obrane, znači standardizirana ograničenja distribucije dokumenta. Slovo A označava javna priopćenja u kojima nema ničega tajnog; B - samo za internu upotrebu, C - strogo povjerljivo i tako dalje do F. Posebno je slovo X kojim se označavaju posebno vrijedni podaci koji predstavljaju državnu tajnu najviše razine. Takve dokumente neka potraže oni koji to trebaju raditi na dužnosti, a mi ćemo se ograničiti na datoteke sa slovom C. Prema DoDI 5230.24 takvo označavanje se dodjeljuje dokumentima koji sadrže opis kritičnih tehnologija koje potpadaju pod kontrolu izvoza. Takve pomno čuvane informacije možete pronaći na stranicama u domeni najviše razine .mil dodijeljenoj vojsci SAD-a.

"IZJAVA O DISTRIBUCIJI C" inurl:navy.mil

Vrlo je zgodno da se u domeni .mil prikupljaju samo stranice Ministarstva obrane SAD-a i njegovih ugovornih organizacija. Rezultati pretraživanja ograničeni na domenu iznimno su čisti, a naslovi govore sami za sebe. Praktički je beskorisno tragati za ruskim tajnama na ovaj način: kaos vlada u domenama .ru i .rf, a nazivi mnogih oružanih sustava zvuče kao botanički (PP "Kiparis", samohotke "Akacia") ili čak nevjerojatan (TOS "Pinokio").


Pažljivim pregledom bilo kojeg dokumenta s web-mjesta u domeni .mil možete vidjeti druge markere za pročišćavanje pretraživanja. Na primjer, referenca na izvozna ograničenja "Sec 2751", što je također zgodno za traženje zanimljivih tehničkih informacija. S vremena na vrijeme uklanja se sa službenih stranica, na kojima se nekada pojavljivao, pa ako ne možete pratiti zanimljivu poveznicu u rezultatima pretraživanja, koristite Google cache (cache operator) ili web stranicu Internet Archive.

Penjemo se u oblake

Uz slučajno deklasificirane dokumente vladinih odjela, poveznice na osobne datoteke iz Dropboxa i drugih servisa za pohranu podataka koji stvaraju "privatne" poveznice na javno objavljene podatke povremeno iskaču u Googleovoj predmemoriji. Još je gore s alternativnim i vlastitim uslugama. Na primjer, sljedeći upit pronalazi podatke svih Verizon klijenata koji imaju instaliran FTP poslužitelj i aktivno koriste usmjerivač na svom usmjerivaču.

Allinurl:ftp://verizon.net

Sada ima više od četrdeset tisuća takvih pametnih ljudi, au proljeće 2015. bilo ih je red veličine više. Umjesto Verizon.net možete zamijeniti ime bilo kojeg poznatog pružatelja usluga, a što je on poznatiji, ulov može biti veći. Putem ugrađenog FTP poslužitelja možete vidjeti datoteke na vanjskom disku spojenom na router. Obično je to NAS za daljinski rad, osobni oblak ili neka vrsta peer-to-peer preuzimanja datoteka. Sav sadržaj takvih medija indeksiran je od strane Googlea i drugih tražilica, tako da možete pristupiti datotekama pohranjenim na vanjskim diskovima putem izravne veze.

Pregledavanje konfiguracija

Prije masovne migracije u oblake, jednostavni FTP poslužitelji, koji također nisu imali ranjivosti, vladali su kao udaljena pohrana. Mnogi od njih aktualni su i danas. Na primjer, popularni program WS_FTP Professional pohranjuje konfiguracijske podatke, korisničke račune i lozinke u datoteku ws_ftp.ini. Lako ju je pronaći i čitati jer su svi unosi pohranjeni u običnom tekstu, a lozinke su šifrirane pomoću Triple DES algoritma nakon minimalnog zamagljivanja. U većini verzija dovoljno je jednostavno odbaciti prvi bajt.

Dešifriranje takvih lozinki jednostavno je pomoću uslužnog programa WS_FTP Password Decryptor ili besplatne web usluge.

Kada se govori o hakiranju proizvoljne stranice, obično se misli na dobivanje lozinke iz zapisa i sigurnosnih kopija konfiguracijskih datoteka CMS-a ili aplikacija za e-trgovinu. Ako znate njihovu tipičnu strukturu, lako možete naznačiti ključne riječi. Linije poput onih u ws_ftp.ini vrlo su česte. Na primjer, Drupal i PrestaShop uvijek imaju ID korisnika (UID) i odgovarajuću lozinku (pwd), a sve informacije su pohranjene u datotekama s nastavkom .inc. Možete ih tražiti ovako:

"pwd=" "UID=" ext:inc

Otkrivamo lozinke iz DBMS-a

U konfiguracijskim datotekama SQL poslužitelja korisnička imena i e-mail adrese pohranjuju se u čistom tekstu, a umjesto lozinki bilježe se njihovi MD5 hashovi. Njihovo dešifriranje, strogo govoreći, nemoguće je, ali možete pronaći podudaranje među poznatim parovima hash-lozinka.

Do sada su postojali DBMS-ovi koji uopće ne koriste hashiranje lozinki. Konfiguracijske datoteke bilo kojeg od njih mogu se jednostavno pregledati u pregledniku.

Intext:DB_PASSWORD filetype:env

Pojavom Windows poslužitelja, mjesto konfiguracijskih datoteka djelomično je preuzeo registar. Možete pretraživati ​​njegove grane na potpuno isti način, koristeći reg kao vrstu datoteke. Na primjer, ovako:

Filetype:reg HKEY_CURRENT_USER "Lozinka"=

Ne zaboravite na očito

Ponekad je moguće doći do klasificiranih podataka uz pomoć podataka koje je slučajno otvorio i uhvatio Google. Idealna opcija je pronaći popis lozinki u nekom uobičajenom formatu. Samo očajni ljudi mogu podatke o računu pohraniti u tekstualnu datoteku, Wordov dokument ili Excel tablicu, no njih uvijek ima dovoljno.

Filetype:xls inurl:password

S jedne strane, postoje mnoga sredstva za sprječavanje takvih incidenata. Potrebno je odrediti odgovarajuća prava pristupa u htaccessu, zakrpati CMS, ne koristiti lijeve skripte i zatvoriti ostale rupe. Tu je i datoteka s popisom izuzetaka robots.txt, koji zabranjuje tražilicama indeksiranje datoteka i direktorija navedenih u njoj. S druge strane, ako se struktura robots.txt na nekom poslužitelju razlikuje od standardne, tada odmah postaje jasno što se na njemu želi sakriti.

Popis direktorija i datoteka na bilo kojem mjestu prethodi standardnom indeksu natpisa. Budući da se mora pojaviti u naslovu za potrebe usluge, ima smisla ograničiti njegovo pretraživanje na operator naslova. Zanimljive stvari mogu se naći u direktorijima /admin/, /personal/, /etc/ pa čak i /secret/.

Pratite ažuriranja

Relevantnost je ovdje izuzetno važna: stare ranjivosti se vrlo sporo zatvaraju, ali Google i njegovi rezultati pretraživanja neprestano se mijenjaju. Postoji čak i razlika između filtra "posljednje sekunde" (&tbs=qdr:s na kraju url-a zahtjeva) i filtra "u stvarnom vremenu" (&tbs=qdr:1).

Vremenski interval datuma zadnjeg ažuriranja datoteke od Googlea također je implicitno naznačen. Putem grafičkog web sučelja možete odabrati jedno od tipičnih razdoblja (sat, dan, tjedan i tako dalje) ili postaviti datumski raspon, ali ova metoda nije prikladna za automatizaciju.

Po izgledu adresne trake može se samo nagađati o načinu ograničavanja izlaza rezultata korištenjem konstrukcije &tbs=qdr:. Slovo y nakon njega označava ograničenje od jedne godine (&tbs=qdr:y), m prikazuje rezultate za prošli mjesec, w za tjedan, d za prošli dan, h za zadnji sat, n za minutu, i s umjesto daj mi sekundu. Najnoviji rezultati koji su upravo poznati Googleu pronađeni su pomoću filtra &tbs=qdr:1.

Ako trebate napisati škakljivu skriptu, bit će korisno znati da je datumski raspon postavljen u Googleu u julijanskom formatu putem operatora daterange. Na primjer, ovako možete pronaći popis PDF dokumenata s riječju povjerljivo učitanih između 1. siječnja i 1. srpnja 2015.

Povjerljiva vrsta datoteke:pdf raspon datuma:2457024-2457205

Raspon je naveden u julijanskom formatu datuma bez decimala. Nezgodno ih je ručno prevoditi iz gregorijanskog kalendara. Lakše je koristiti pretvarač datuma.

Ponovno ciljanje i filtriranje

Osim navođenja dodatnih operatora u upitu za pretraživanje, oni se mogu poslati izravno u tijelu veze. Na primjer, značajka filetype:pdf odgovara konstrukciji as_filetype=pdf. Stoga je prikladno postaviti sva pojašnjenja. Recimo da je izlaz rezultata samo iz Republike Honduras postavljen dodavanjem konstrukcije cr=countryHN u URL pretraživanja, ali samo iz grada Bobruisk - gcs=Bobruisk . Pogledajte odjeljak za razvojne programere za potpuni popis .

Googleovi alati za automatizaciju osmišljeni su kako bi olakšali život, ali često dodaju gnjavažu. Na primjer, korisnikov grad je određen korisnikovim IP-om putem WHOIS-a. Na temelju tih informacija Google ne samo da uravnotežuje opterećenje između poslužitelja, već i mijenja rezultate pretraživanja. Ovisno o regiji, za isti upit na prvu stranicu stići će različiti rezultati, a neki od njih mogu ispasti potpuno skriveni. Osjećati se kao kozmopolit i tražiti informacije iz bilo koje zemlje pomoći će njen dvoslovni kod nakon direktive gl=country . Primjerice, šifra za Nizozemsku je NL, dok Vatikan i Sjeverna Koreja nemaju svoju šifru u Googleu.

Rezultati pretraživanja često su zatrpani čak i nakon korištenja nekoliko naprednih filtara. U ovom slučaju upit je lako precizirati dodavanjem nekoliko riječi iznimke (ispred svake od njih stoji znak minus). Na primjer, bankarstvo, imena i poduka često se koriste s riječju Osobno. Stoga čišći rezultati pretraživanja neće pokazati školski primjer upita, već pročišćeni:

Naslov:"Indeks /Osobnih/" -imena -tutorial -bankarstvo

Zadnji primjer

Sofisticiranog hakera ističe činjenica da sve što mu treba osigurava sam. Na primjer, VPN je zgodna stvar, ali skupa ili privremena i s ograničenjima. Preskupo je prijaviti se samo za sebe. Dobro je što postoje pretplate na grupe, a uz pomoć Googlea lako je postati dio grupe. Da biste to učinili, samo pronađite Cisco VPN konfiguracijsku datoteku, koja ima prilično nestandardnu ​​PCF ekstenziju i prepoznatljivu stazu: Program Files\Cisco Systems\VPN Client\Profiles . Jedan zahtjev i pridružit ćete se, primjerice, ljubaznom osoblju Sveučilišta u Bonnu.

Filetype:pcf vpn ILI Grupa

INFO

Google pronalazi konfiguracijske datoteke s lozinkama, ali mnoge od njih su šifrirane ili zamijenjene hashovima. Ako vidite nizove fiksne duljine, odmah potražite uslugu dešifriranja.

Lozinke su pohranjene u šifriranom obliku, ali Maurice Massard već je napisao program za njihovo dešifriranje i besplatno ga daje putem thecampusgeeks.com.

Uz pomoć Googlea izvode se stotine različitih vrsta napada i testova prodora. Postoji mnogo opcija koje utječu na popularne programe, glavne formate baza podataka, brojne PHP ranjivosti, oblake i tako dalje. Znajući točno što tražite, puno je lakše doći do informacija koje su vam potrebne (osobito onih koje niste namjeravali objaviti). Ne samo da Shodan daje zanimljive ideje, nego i svaka baza podataka indeksiranih mrežnih resursa!

Izrada, održavanje i promocija web stranica

Napravite web stranicu "za ispis".

Prilikom pregledavanja stranica na Internetu, posjetitelji često ispisuju neke stranice za daljnji rad s njima, na primjer, za prosljeđivanje prijateljima ili jednostavno za spremanje potrebnih informacija. Osobito često tiskane stranice s opisima proizvoda, cjenicima i kontakt podacima organizacija.

Naravno, nitko se ne trudi dobiti ispis originalne stranice izravno u pregledniku pomoću naredbe Pečat ili kombinacija CTRL+P međutim, to će ispisati nepotrebne elemente stranice - izbornik, zaglavlje itd., koji otežavaju percepciju potrebnih informacija. Osim toga, elementi u boji kada se ispisuju na jednobojnom pisaču obično izgledaju neprivlačno.

Radi praktičnosti korisnika, programeri web mjesta obično stvaraju zasebnu stranicu - verzija za ispis, koji ostavlja samo potreban tekst, crteže crno-bijele (nijanse sive) i kontakt podatke za komunikaciju.

Prilikom izrade takve stranice trebali biste ukloniti nepotrebne ukrasne elemente, zamijeniti hiperveze čistim tekstom, ukloniti isticanje riječi i izraza u boji, zamijeniti ih kurzivom ili podebljanim slovima. Na vrhu stranice poželjno je postaviti logo i naziv tvrtke, broj telefona i druga sredstva komunikacije. Obavezno navedite naziv stranice kako korisnik ne bi morao tražiti odakle je ispisao ovu stranicu.

Na dnu stranice poželjno je navesti pune podatke za kontakt: adresu, telefon, e-mail, ICQ, URL web stranice itd.

Za prelazak s glavne stranice na verzija za ispis Možete koristiti bilo koje prikladne slike i tekst, na primjer, ovu vrstu:

Na samoj stranici verzija za ispis smatra se dobrim oblikom ugraditi gumb Pečat, koji, kada se klikne, otvara prozor postavki pisača. Za to se koristi metoda JavaScript window.print(); koji ispisuje web stranicu u trenutnom prozoru na pisač. Također je dobra ideja postaviti poveznicu za povratak na glavnu stranicu.

Gumbi mogu biti ukrašeni jednostavnim vezama
Print (kod Print) i , ali još zanimljivije - pomoću oznake :

HTML kôd za ovu kombinaciju je:



adresa glavne stranice");" />

U oba slučaja otvorit će se standardni prozor za ispis dokumenta koji možete pogledati klikom na tipku primjeri.

Na kraju, ne zaboravite uključiti kod brojača statistike na stranicu za ispis kako biste pratili broj posjetitelja koji su spremili "tiskanu kopiju" opisa vašeg proizvoda ili usluge, iako vam se ti podaci možda neće uvijek svidjeti. Nažalost...

    Korisni članci na temu "Razvoj, održavanje i promicanje web stranica"

U kojem je istaknuo da su njihove stranice s detaljima naloga neupotrebljive u tiskanom obliku.

Bio sam zapanjen kad sam vidio ovaj tweet - shvatio sam da je prošlo dosta vremena otkako sam optimizirao stilove za ispis i nisam ni razmišljao o tome da ih provjerim.

Možda zato što provodim puno vremena mijenjajući veličinu prozora preglednika kako bih osigurao da moje web-lokacije dobro funkcioniraju u svim veličinama i oblicima, ili možda zato što rijetko ispisujem stranice za sebe. Bez obzira na razlog, potpuno sam zaboravio na stilove tiska i to je loše.

Optimizacija web stranica za ispis je važna jer ispisom stranica činimo stranicu što dostupnijom, neovisno o okruženju. Ne smijemo stvarati pretpostavke o našim korisnicima i njihovom ponašanju. Ljudi nastavljaju ispisivati ​​web stranice. Razmislite o člancima, objavama na blogovima, receptima, podacima za kontakt, web-mjestima s kartama ili popisima nekretnina. Netko će jednom sigurno pokušati ispisati jednu od vaših stranica.

Odavno sam napustio kućne printere jer sam uvijek mislio da se pokvare nakon 10 minuta rada. Ali nisu svi kao ja. - Haydon Pickering (uključivi uzorci dizajna)

Ako se nađete u sličnoj poziciji, ovaj će vam post pomoći da se brzo osvježite. Ako niste optimizirali svoje stranice za ispis, sljedeći savjeti pomoći će vam da počnete.

1. Povezivanje stilova za ispis

Najbolji način za uključivanje stilova ispisa je deklaracija direktive @media u vašem CSS-u.

Tijelo (veličina fonta: 18px; ) @media print ( /* stilovi ispisa idu ovdje */ tijelo (veličina fonta: 28px; ) )

Alternativno, možete uključiti stilove u HTML, ali to će zahtijevati dodatni HTTP zahtjev.

2. Ispitivanje

Ne morate ispisivati ​​stranicu svaki put kada napravite malu promjenu stila. Ovisno o pregledniku, možete izvesti stranicu u PDF, koristiti pretpregled ispisa ili otkloniti pogreške izravno u pregledniku.

Za otklanjanje pogrešaka u stilovima ispisa u Firefoxu, otvorite alatnu traku za razvojne programere (Shift + F2 ili Alati > Web Developer > Alatna traka za razvojne programere), upišite media emulate print u okvir za unos i pritisnite enter . Aktivna kartica ponašat će se kao da je vrsta medija ispis dok se ponovno ne učita.

Emulacija stilova ispisa u Firefoxu

U Chromeu otvorite alate za razvojne programere (CMD + Opt + I (macOS) ili Ctrl + Shift + I (Windows) ili izbornik Pogled > Razvojni programeri > Alati za razvojne programere) i otvorite konzolu, otvorite ploču za renderiranje i odaberite Ispis iz Emulate Izbornik CSS Media.

Emulacija stilova ispisa u Chromeu

3. Apsolutne mjerne jedinice

Apsolutne jedinice su loše na ekranu, ali su izvrsne za ispis. Savršeno ih je sigurno koristiti u stilovima ispisa, a čak se preporučuje korištenje jedinica kao što su cm , mm , in , pt ili pc .

Odjeljak ( margina-dno: 2cm; )

4. Posebna pravila za stranice

Možete postaviti svojstva specifična za ispisanu stranicu, kao što su veličina stranice, orijentacija i ispuna, pomoću direktive @page. Ovo je vrlo zgodno ako želite da sve stranice imaju određene uvlake.

@media print ( @stranica ( margina: 1cm; ) )

Direktiva @page dio je specifikacije Paged Media Module, koja ima izvrsne stvari poput mogućnosti odabira prve stranice za ispis ili praznih stranica, pozicioniranja elemenata u kutu stranice i više. Ovo se čak može koristiti za tiskanje knjiga.

5. Upravljajte prijelomima stranica

Budući da ispisane stranice, za razliku od web stranica, nisu beskonačne, sadržaj će se prekidati između stranica. Imamo 5 svojstava za kontrolu kako se to događa.

Prijelom stranice prije elementa.

Ako želimo da element uvijek bude na početku stranice, možemo nametnuti prijelom stranice pomoću pravila prijeloma stranice prije.

Odjeljak ( prijelom stranice prije: uvijek; )

Prijelom stranice nakon elementa.

Pravilo prijeloma stranice nakon elementa omogućuje nam prisilno ili onemogućivanje prijeloma stranica nakon elementa.

H2 ( prijelom stranice nakon: uvijek; )

Prijelom stranice unutar elementa

Ovo je svojstvo korisno ako trebate izbjeći prijelome stranica unutar elementa.

Ul ( prijelom stranice: izbjeći; )

Udovice i siročad (viseće žice)

Ponekad vam nije potrebna kontrola nad prijelomom stranice, ali je važna kontrola nad time koliko će redaka biti prikazano na trenutnoj stranici, a koliko na sljedećoj stranici. Na primjer, ako zadnji redak odlomka ne stane na trenutnu stranicu, prelamit će se na sljedeću stranicu zajedno s pretposljednjom. To je zato što je odgovarajuće widows svojstvo prema zadanim postavkama 2. Možemo ga promijeniti.

P ( udovice: 4; )

Ako naiđemo na drugu stranu ovog problema i imamo samo prvi redak odlomka na trenutnoj stranici, tada će cijeli odlomak započeti na sljedećoj stranici. Orphans svojstvo je odgovorno za ovo i njegova zadana vrijednost je 2.

P ( siročad: 3; )

Ovaj kod znači da najmanje 3 retka moraju stati na trenutnu stranicu kako se odlomak ne bi prelamao u sljedeći.

Ne rade sva ova svojstva i vrijednosti u svakom pregledniku, trebali biste provjeriti stilove ispisa u različitim preglednicima.

6. Resetirajte stilove

Ima smisla poništiti neke stilove kao što su boja pozadine, sjena okvira i boja za ispis.

*, *:prije, *:poslije, *:prvo-slovo, p:prvi-redak, div:prvi-redak, blockquote:prvi-redak, li:prvi-redak ( pozadina: prozirna !važno; boja: #000 !važno; box-shadow: ništa !važno; text-shadow: ništa !važno; )

Stilovi ispisa jedna su od rijetkih iznimaka gdje je upotreba ključne riječi !important u redu.

7. Uklanjanje izbornog sadržaja

Kako biste izbjegli rasipanje tinte, trebali biste ukloniti nepotrebne stavke kao što su tipografija, oglasi, navigacija i tako dalje. s prikazom: nema svojstva.

U osnovi možete prikazati samo glavni sadržaj i sakriti sve ostalo:

Tijelo > *:not(main) ( prikaz: ništa; )

8. Ispis adresa veza

A:nakon ( sadržaj: " (" attr(href) ")"; )

Naravno, sve će biti prikazano na ovaj način: relativne veze, apsolutne veze, sidra, i tako dalje. Sljedeća opcija će bolje funkcionirati:

A:not():after ( sadržaj: " (" attr(href) ")"; )

Izgleda ludo, znam. Način na koji ovi redovi funkcioniraju je da prikažu vrijednost atributa href pored bilo koje poveznice koja ga ima ako počinje s http, ali ne upućuje na našu web stranicu mywebsite.com.

9. Ispis prijepisa kratica

Kratice moraju biti umotane u element s opisom u atributu naslova. Ima smisla ispisati ga.

Abbr:after ( content: " (" attr(title) ")"; )

10. Ispis pozadine

Preglednici obično ne ispisuju boju pozadine i pozadinske slike osim ako im to izričito ne kažete. Postoji nestandardizirano svojstvo podešavanja boje ispisa koje vam omogućuje nadjačavanje zadanih postavki u nekim preglednicima.

Zaglavlje ( -webkit-print-color-adjust: točno; print-color-adjust: točno; )

11. Medijski upiti

Ako pišete medijske upite kao u sljedećem primjeru, imajte na umu da se stilovi u ovom medijskom upitu neće primijeniti prilikom ispisa.

@medijski zaslon i (min. širina: 48em) ( /* samo zaslon */ )

Pitat ćete zašto? Budući da se CSS pravila primjenjuju samo kada su ispunjena oba uvjeta: min-width je 48em, media-type je screen. Ako se riješimo ključne riječi screen, tada će medijski upit uzeti u obzir samo vrijednost min-width.

@media (min-width: 48em) ( /* sve vrste medija */ )

12. Ispis kartica

Trenutne verzije Firefoxa i Chromea mogu ispisivati ​​karte, ali Safari ne. Neke usluge nude statične karte koje se mogu ispisati umjesto originala.

Karta ( širina: 400px; visina: 300px; pozadinska slika: url("http://maps.googleapis.com/maps/api/staticmap?center=Wien+Floridsdorf&zoom=13&scale=false&size=400x300&maptype=roadmap&format=png&visual_refresh=true "); -webkit-print-color-adjust: točno; print-color-adjust: točno; )

13. QR kodovi

Dodatak 2: Gutenberg

Ako tražite okvir, onda bi vam se mogao svidjeti Gutenberg, koji malo olakšava optimizaciju stranice.

Addon 3: Hartija

Ovo je još jedan okvir za stil ispisa iz

Često na stranicama koje možete pronaći verzija stranice za ispis. Mnogi ljudi misle da je to nešto ugrađeno u sam preglednik ili da je to vrlo jednostavno učiniti. Zapravo, to uopće nije istina. Verzija za ispis je normalna stranica koji vam je potreban na svomečini.

Možete vidjeti verziju ovog članka za ispis. Zapravo, što bi tamo trebalo biti prikazano? Naslov članka, odjeljak, kategorija, autor, sam tekst i datum. Sve je to prikazano na ovoj stranici. Trebate li izbornik, obrazac za pretraživanje, razne blokove? Ne mislim da je to razlog zašto ne rade.

Također provjerite je li širina verzije za ispis jednaka ne prelazi 650px, inače preglednik može rezati rubove.

Dakle, to ste već shvatili verzija za ispis Morate stvoriti vlastitu, prikazujući točno ono što korisnik treba. Sada o tome kako to učiniti.

Tamo je 2 mogućnosti: izradite zasebnu stranicu i izradite zasebnu tablicu stilova. Prva opcija je, mislim, jasna. Napravite drugu stranicu s verzijom za ispis a na glavnoj stranici dajete poveznicu na ovu tiskanu verziju. Korisnik to slijedi i prolazi "Datoteka" -> "Ispis" isprintat će ga.

Druga opcija uključuje stvaranje zasebnog lista stilova u kojem sakrivate sve nepotrebne blokove (putem prikaz: nijedan;) i postavite odgovarajuće dimenzije za izlazni sadržaj. Zatim je takva stilska datoteka povezana na sljedeći način:

Sada, ako korisnik želi ispisati ovu stranicu, neće ispisati ono što vidi, već ono što je napisano print.css. Naime, korisnik stranicu vidi na jedan, a printer na sasvim drugi način.

To je put izrađuje se verzija za ispis bilo koju stranicu stranice.

Čini se da je teško stvoriti stranicu za ispis? Jednostavno kreiramo isti dokument s tekstom, ali bez ikakvog dizajna i povezujemo ga s uobičajene stranice. Ali tražilice su uvele filter za duplicirani sadržaj, a webmasteri moraju sakriti stranice za ispis od indeksiranja. Osim toga, posjetitelji web mjesta također nisu baš zgodni, jer prvo trebaju otići na kopiju stranice koja im je potrebna, na kojoj nema elemenata dizajna, a zatim kliknuti gumb "Ispis".

Tu može dobro doći CSS koji ne samo da će smanjiti količinu posla webmasterima i olakšati posjetiteljima korištenje stranice, već i izbjeći kazne tražilica za duplicirani sadržaj.

Struktura stranice

Dakle, prvo upotrijebimo HTML za stvaranje strukture našeg dokumenta. Za primjer sam odlučio upotrijebiti tablični izgled kako bih ga lakše razumio:

Naslov članka
Navigacija
Glavna stranica
Članci
Kontakti

Naslov članka

Ova se stranica može ispisati. Ispisat će se samo tekst članka.

Vaš bi oglas mogao biti ovdje

Kao što vidite, imamo tablicu s tri ćelije koje su poredane vodoravno. Sve je kao obična stranica: navigacija s lijeve strane, sadržaj u sredini, a oglasni blokovi ili vijesti s desne strane. Svakoj ćeliji je dodijeljen vlastiti ID. Za lijevu stranu to je lijevi stupac, za desnu je desni stupac, a za srednju ćeliju sadržaja to je sadržaj.

Dodavanje CSS-a

Sada, koristeći CSS, trebate reći pregledniku koje stilove treba koristiti za prikaz elemenata stranice na ekranu, a koje treba koristiti prilikom ispisa. Napravite style.css i tamo napišite sljedeće:

@media screen ( body ( background-color: #0B73BD; font-family: tahoma; color: #FFFFFF; ) table ( width: 600px; ) #leftcolumn ( width: 140px; vertical-align: top; font-size: 15px ; ) #rightcolumn ( width: 110px; vertical-align: top; font-size: 15px; ) #content ( background-color: #32AADB; padding: 5px; font-size: 15px; ) a (boja: #FFFF00; ) ) @media print ( tijelo ( boja pozadine: #FFFFFF; obitelj-fonta: tahoma; boja: #000000; ) #sadržaj ( boja-pozadine: #FFFFFF; padding: 5px; veličina fonta: 15px; boja: # 000000; širina: 600px; ) #leftcolumn ( prikaz: ništa; ) #desni stupac ( prikaz: ništa; ) )

Prvi blok CSS koda opisuje kako bi elementi stranice trebali biti prikazani u pregledniku. Blok je uzet u dodatne vitičaste zagrade prije kojih smo dodali @media screen. Ovo govori pregledniku da se ovi stilovi moraju primijeniti za prikaz:


Ovako izgleda stranica kada se gleda u pregledniku

Drugi blok opisuje prikaz istih elemenata stranice kao i prvi, ali u ovom slučaju u obliku u kojem će dokument izgledati nakon ispisa i označen je parametrom @media print. Budući da želimo da se ispisuje samo koristan sadržaj, onemogućujemo prikaz lijeve (#leftcolumn) i desne (#rightcolumn) ćelije tako da ih postavimo na display: none.


Ovako izgleda ispisana verzija stranice stranice

Odvojene stilske datoteke

Nije potrebno kombinirati sve u jednu stilsku datoteku. Umjesto toga, možete koristiti dvije stilske datoteke i, kada ih povezujete sa stranicama web-mjesta, reći pregledniku koju stilsku datoteku koristiti za ispis, a koju za prikaz na ekranu. Prvi (za izlaz na ekran) definiran je parametrom media="screen", a drugi će se koristiti za ispis i definiran je parametrom media="print":

Stilove za ispis potrebno je opisati nakon svega ostalog, inače će Opera ispisati blok sadržaja uz pozadinu u boji koja je namijenjena ispisu u preglednik, a ne bijelu boju koju smo odabrali za ispis.

Također, prilikom ispisa striktno smanjujemo širinu bloka sadržaja na 600px jer pri 100% širine printer "odsiječe" malu traku teksta na desnoj strani stranice. Obratite pozornost i na činjenicu da je kod ispisa iz Opere udubljenje duž rubova lista nešto manje nego u Internet Exploreru i da su redovi teksta na listu papira širi.

Sada više ne morate stvarati dodatne stranice za ispis. Korisnike možete obavijestiti o mogućnosti ispisa stranice, na primjer, pomoću poveznice s tekstom "ispis", kada se klikne, prikazat će se opis alata s porukom o mogućnosti izravnog ispisa trenutne stranice bez dizajna.

Kopiranje članka je zabranjeno.