Nije uvijek uvijek nužno učiniti element stranice vidljivim. Često samo trebate učiniti vidljivim njegov sadržaj, obično slike, tekst, tablice. CSS pravilo preljeva postavlja način prikaza sadržaja.

Postavljanjem blokovskih elemenata u jedan drugi, možete učinkovito regulirati prikaz sadržaja unutar željenog raspona, upravljati klizačima i napraviti vlastitu opciju upravljanja sadržajem.

Opća pravila primjene

U pravilu CSS overflow dopušteno je pet vrijednosti:

vidljivo;

skriveno;

svitak;

automobil;

nasljeđuju.

Kada je navedeno, sadržaj može ići dalje od stavke. U slučaju skrivenog, vanjski će biti odsječen. Korištenje scroll i auto omogućuje dodavanje klizača za pregled sadržaja koji nadilazi stavku. Veličina elementa određuje pravila širine i visine. Kada CSS pravilo prelijevanja dopušta pomicanje (scroll i auto vrijednosti), njegove su pruge smještene unutar elementa. Nije uvijek zgodan iu većini slučajeva neće odgovarati dizajnu stranice kada je programer zainteresiran za upravljanje sadržajem i ne planira koristiti klasične "klizače".

Praksa u kojoj se predmet sa sadržajem razmatra izolirano daje malo mogućnosti za postizanje željenog rezultata. Ako se element promatra kao skup više blokovskih oznaka, ugniježenih ili povezanih jedan s drugim, otvara se mnogo mogućnosti. Kada preljev CSS nije standardna verzija pravila, odgovornost zaIspravan izlaz sadržaja temelji se na javascript kodu.

Primjer: javascript + overflow bez CSS-a

Jedini "nedostatak" pravila CSS-a je ispuniti svoju misiju kako je predložena njihovom sintaksom i svrhom. U većini slučajeva to je više nego dovoljno. Idealno za korištenje prelijevanja css (auto ili scroll vrijednosti). Kada testirate, uvijek možete vidjeti da se ispisuje u jednom ili drugom bloku. U međuvremenu, dizajn web-lokacije, programerska želja da ponudi vlastitu opciju navigacije sadržajem i, što je najvažnije, opseg web-lokacije može zahtijevati definitivno drugačije rješenje od onoga što CSS može ponuditi.

U ovom primjeru blokovi ne mogu sadržavati samo sadržaj koji pretražuje iz inozemstva. Postoji potreba da se oni pomaknu jedan prema drugome. Jedan objekt je emulacija tablice razmjene elektroničkih valuta (zapravo, to su djevice - "div"), ali dvije kopije sadržaja. U jednom primjeru, jedan smjer razmjene, u drugom - drugi. Svaki blok može biti rastegnut (komprimiran) po visini i širini, smješten preko drugog bloka. Implementacija ovih značajki nije moguća sa standardnom verzijom CSS-a s preljevom. Kada mijenjate veličinu glavne jedinice, sve unutarnje djevice moraju biti obnovljene. Istodobno, veličina fonta bi se trebala srazmjerno mijenjati, budući da se mogućnost rezanja informacija u financijskim programima čini neprikladnom.

Čisti preljev CSS-a, ali bez klizača

Svitak koji je predložio HTML /CSS je nesumnjivo praktičan, ali za fazu otklanjanja pogrešaka to je samo potrebno, ali postoji jedna značajna točka. Kada je miš iznad bloka u kojemje pomicanje, sadržaj ovog bloka se pomiče, a ne cijela stranica. Ovaj trenutak u praksi nije baš praktičan: morate kontrolirati mjesto na stranici gdje možete rotirati kotač miša. Neki posjetitelji se ne sviđaju, neki jednostavno ne obraćaju pozornost.
U međuvremenu, ništa ne sprečava programera da kombinira moguće s željenim. Ako sadržaj bloka prelazi granice, moguće je zaključiti da je to samo njegova bit, zabranjujući mu pomicanje. Ali kada korisnik skrene pozornost na to, držeći pokazivač miša neko vrijeme, morate proširiti blok na željenu veličinu i prikazati sadržaj. U ovoj verziji, stranica će predstavljati koncentrirani sadržaj, koji posjetitelj može objaviti, ako je potrebno. U općem smislu, pri stvaranju blokovskih elemenata treba se krenuti od ideje da je jedan element jedan div, span ili td. Razmislite o HTML oznakama - nije vrlo zahvalna lekcija. Mnogo je praktičnije razmišljati o semantičkim elementima stranice i koliko će im biti potrebno za implementaciju HTML oznaka - druga stvar.

Pokret koji se temelji na sadržaju

Ako uzmemo za osnovu ideju "postoji blok čija veličina određuje njegov sadržaj, pravila preljeva CSS je sasvim druga opcija." Nema potrebe za oslanjanjem na standardno pomicanje ili pisanje vlastitog javascript koda.

Ako web-mjesto dizajnirate kao skup elemenata čija veličina i mjesto određuju njihov sadržaj, tada će, ovisno o aktivnostima posjetitelja, otkriti određene blokove. Moguće je da će biti objavljeni cijeloj stranici ili značajnom dijelu. Izvrstan zaprikaz kretanja posjetitelja njegov je interes za informacije. Kada dođe na mjesto, promatra svoj početni uvjet i bira ono što mu je zanimljivo. Kretanje miša na zaslonu ili prstom na automatu za pametni telefon otkriva trenutni stvarni blok, čiji izlaz vodi do njegovog zatvaranja i otvaranja sljedećeg. Trenutno, kada je stvaranje moderne stranice nije tako teško, to je postalo pitanje iznenađenja i zainteresirani za posjetitelja. Dobra ideja je prelazak s razmišljanja HTML oznaka na manipuliranje informacijskim elementima koji su relevantni za posjetitelja.