Правило за препълване css

Не винаги е необходимо елементът на страницата да бъде видим. Често трябва само да направите видимо неговото съдържание, обикновено изображение, текст, таблица. Правилото за преливане на CSS задава режима на показване на съдържанието.

С поставянето на блокови елементи един в друг, можете ефективно да регулирате показването на съдържанието в желаните граници, да управлявате лентите за превъртане и да направите своя собствена опция за управление на съдържанието.

Общи правила за прилагане

Правилото за CSS за преливане приема пет стойности:

• видима;
• скрито;
• превъртете;
• автоматично;
• наследи.

Когато се вижда видимо, съдържанието може да се простира отвъд елемента. В случай на скрит, частта, която излиза навън, ще бъде изрязана. Използването на превъртане и автоматично ви позволява да добавяте ленти за превъртане, за да видите съдържанието извън елемента.

Размерът на елемента се определя от правилата за ширина и височина. Когато CSS правило за преливане позволява превъртане (превъртане и авто стойности), баровете му се поставят вътре в елемента. Това не винаги е удобно и в повечето случаи няма да съответства на дизайна на страницата, когато разработчикът се интересува от управление на съдържанието и не планира да използва класическите "плъзгачи".

Практиката, когато елемент със съдържание се разглежда изолирано, дава малка възможност за постигане на желания резултат. Ако даден елемент се разглежда като колекция от няколко блокови тагове, вложени или комбинирани един с друг, се отварят множество възможности.

Когато CSS на препълване не е стандартна версия на правилото, отговорността за правилното показване на съдържанието се основава на JavaScript кода.

Пример: JavaScript + препълване без CSS

Единственият "недостатък" в правилата на CSS е да изпълни мисията си, както е предписано от техния синтаксис и цел. В повечето случаи това е повече от достатъчно.

В идеалния случай използвайте overflow css (стойности за автоматично или превъртане). Когато тествате, винаги можете да видите какво се показва в определен блок.

Междувременно, дизайнът на сайта, желанието на разработчика да предложи своя собствена опция за навигация през съдържанието и, най-важното, обхвата на сайта може да изисква уникално различно решение от това, което CSS може да предложи.

В този пример блоковете не могат да съдържат само съдържание, което „се промъква” извън границите. Има нужда да се премести един спрямо друг. Един обект е емулация на електронната таблица за обмяна на валута (всъщност това е div), но две копия на съдържанието. В един случай една посока на обмен, в другата - друга.

Всеки блок може да се разтяга (свива) по височина и ширина, да се намира над другия блок. Прилагането на тези функции със стандартния CSS за преливане не е възможно. При промяна на размера на основния модул трябва да се реконструират всички вътрешни части. В същото време размерът на шрифта трябва да се променя пропорционално, тъй като възможността за прекъсване на информацията във финансовите програми изглежда неприложима.

Чист CSS преливане, но без плъзгачи

Скролирането, предлагано от HTML / CSS, несъмнено е практично, а за етапа на отстраняване на грешки е просто необходимо, но има един важен момент. Когато мишката е над блок, в който има превъртане, съдържанието на този блок се премества, а не цялата страница.

Този момент не е много удобен на практика: трябва да контролирате мястото на страницата, където можете да завъртите колелото на мишката. Някои посетители не го харесват, някои просто не обръщат внимание.

Междувременно, нищо не пречи на разработчика да комбинира възможното с желаното. Ако съдържанието на блока излезе извън неговите граници, можете само да донесете неговата същност в него, забранявайки прелистването в него. Но когато потребителят е обърнал внимание на него, докато държи курсора на мишката за известно време, е необходимо да разшири блока до желания размер и да внесе цялото съдържание в него.

В това въплъщение, страницата ще бъде съсредоточена в съдържанието, което, ако е необходимо, посетителят сам може да разкрие.

В общ смисъл, когато създавате блокови елементи, трябва да се отдалечите от идеята, че един елемент е един “div”, “span” или “td”. Мисленето с HTML тагове не е много полезно нещо. Много по-практично е да се мисли със семантичните елементи на страницата и колко много те изискват за реализиране на HTML тагове е друг въпрос.

Движение, насочено към съдържанието

Ако приемем идеята за „има блок, чиито размери определят съдържанието му“, тогава за правилото за преливане на CSS това е напълно различна опция. Няма нужда да разчитате на стандартно превъртане или да напишете свой собствен JavaScript код.

Ако проектирате сайт като колекция от елементи, размерът и позицията на които се определят от съдържанието им, тогава в зависимост от действията на посетителя ще бъдат разкрити определени блокове. Възможно е те да бъдат разкрити на цялата страница или на значителна част.

Като цяло движението на посетителя е негов интерес към информацията. Пристигайки на сайта, той наблюдава първоначалното си състояние и избира какво му е интересно. Движението на мишката върху екрана или пръста на смартфона автоматично отваря текущия действителен блок, оставяйки го до затваряне и отваряне на следващия.

В момента, когато създаването на модерен уебсайт не е толкова трудно, стана проблематично да се изненада и заинтересува посетителя. Преходът от мислене с HTML тагове към манипулиране на информационни елементи, които са от значение за посетителя, е добра идея.