Pravilo za overflow css

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

Stavljajući blokovske elemente jedan u drugi, možete učinkovito regulirati prikaz sadržaja unutar željenih granica, upravljati klizačima i napraviti vlastitu opciju upravljanja sadržajem.

Opća pravila primjene

CSS pravilo preljeva prihvaća pet vrijednosti:

• vidljiv;
• skrivena;
• dođite;
• auto;
• naslijediti.

Kada je vidljivo naznačeno, sadržaj se može proširiti izvan elementa. U slučaju skrivenog, dio koji izlazi će biti izrezan. Pomoću pomicanja i automatskog dodavanja možete dodati trake za pomicanje da biste pregledali sadržaj izvan elementa.

Veličina elementa određena je pravilima širine i visine. Kada CSS pravilo prelijevanja dopušta pomicanje (pomicanje i automatske vrijednosti), njegove su trake smještene unutar elementa. To nije uvijek prikladno i u 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, kada se element sa sadržajem razmatra izolirano, daje malo mogućnosti za postizanje željenog rezultata. Ako se element smatra skupom od nekoliko oznaka blokova ugniježenih ili međusobno povezanih, otvara se mnoštvo mogućnosti.

Kada CSS preljeva nije standardna verzija pravila, odgovornost za ispravan prikaz sadržaja počiva na JavaScript kodu.

Primjer: JavaScript + preljev bez CSS-a

Jedina "mana" u CSS pravilima je ispuniti svoju misiju kako je propisana njihovom sintaksom i svrhom. U većini slučajeva to je više nego dovoljno.

U idealnom slučaju koristite overflow css (auto ili scroll vrijednosti). Prilikom testiranja uvijek možete vidjeti što je prikazano u određenom bloku.

U međuvremenu, dizajn stranice, želja programera da ponudi vlastitu opciju kretanja kroz sadržaj i, najvažnije, opseg stranice može zahtijevati drugačije rješenje od onoga što CSS može ponuditi.

U ovom primjeru, blokovi ne mogu sadržavati samo sadržaj koji "seže" izvan granica. Postoji potreba da se ona pomjeri jedan prema drugome. Jedan objekt je emulacija elektroničkog tablice za razmjenu valuta (zapravo je to div), ali dva primjera sadržaja. U jednom slučaju, jedan smjer razmjene, u drugom - drugi.

Svaki blok može se rastezati (skupljati) po visini i širini, biti smješten iznad drugog bloka. Implementacija ovih značajki sa standardnim preljevnim CSS-om nije moguća. Kada promijenite veličinu glavne jedinice morate rekonstruirati sve unutarnje divove. Istodobno, veličina slova trebala bi se srazmjerno mijenjati, jer se čini da je mogućnost prekida informacija u financijskim programima slabo primjenjiva.

Čisti CSS preljev, ali bez klizača

Pomicanje koje nudi HTML / CSS je nesumnjivo praktično, a za fazu otklanjanja pogrešaka jednostavno je potrebno, ali postoji jedna značajna točka. Kada se miš nalazi iznad bloka u kojem se pomiče, sadržaj ovog bloka se pomiče, a ne cijela stranica.

Ovaj trenutak nije baš prikladan u praksi: morate kontrolirati mjesto na stranici gdje možete okrenuti kotačić 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, u njega možete samo donijeti njegovu bit, zabranivši njegovo pomicanje. Ali kada je korisnik obratio pozornost na njega, dok drži pokazivač miša neko vrijeme, potrebno je proširiti blok na željenu veličinu i unijeti sav sadržaj u njega.

U ovom utjelovljenju, stranica će biti koncentrirana sadržaj, koji, ako je potrebno, posjetitelj sam može otkriti.

U općem smislu, pri stvaranju blok elemenata, trebali biste se odmaknuti od ideje da je jedan element jedan “div”, “span” ili “td”. Razmišljanje s HTML oznakama nije jako korisno. Mnogo je praktičnije razmišljati semantičkim elementima stranice i koliko im je potrebno za implementaciju HTML oznaka je drugo pitanje.

Pokret pokretan sadržajem

Ako uzmemo ideju "postoji blok čije dimenzije određuju njegov sadržaj", onda je za CSS pravilo prelijevanja to sasvim druga opcija. Nema potrebe oslanjati se na standardno pomicanje ili pisati vlastiti JavaScript kôd.

Ako dizajnirate web-lokaciju kao skup elemenata, čija veličina i položaj određuju njihov sadržaj, tada će se, ovisno o aktivnostima posjetitelja, otkriti određeni blokovi. Moguće je da će biti otkriveni na cijeloj stranici ili na njenom značajnom dijelu.

Općenito, kretanje posjetitelja je njegovo zanimanje za informacije. Dolazeći na stranicu, on promatra svoje početno stanje i bira ono što mu je zanimljivo. Kretanje miša na zaslonu ili prstom na pametnom telefonu automatski otvara trenutni trenutni blok, ostavljajući ga dovodi do njegovog zatvaranja i otvaranja sljedećeg.

Trenutno, kada je stvaranje moderne web stranice nije tako teško, postalo je problematično iznenađenje i interes posjetitelja. Dobra ideja je prelazak s razmišljanja s HTML oznakama na manipuliranje informacijskim elementima koji su relevantni za posjetitelja.