Overflow css: відображення змісту елемента

Таблиці каскадних стилів прості у використанні, то й говорити про нетрі спадкування, розподілу пріоритетів, класової структури, теоретичних моментів і практичного досвіду.

Основне призначення кожного властивості CSS - відобразити, але це зовсім не означає тільки "visible": Не менше важлива конструкція "CSS Overflow hidden".

елементи сторінки

Сторінка містить не тільки елементи, на ній можуть бути розташовані елементи елементів, будь то фрейми (а це може бути не тільки набір компонентів, але і інший сайт цілком) або власноруч виготовлені системи об`єктів.

Природно, переважна кількість розробників сайтів практикує гумову верстку, змушені рахуватися зі зростаючими обсягами інформації та тим, що бар`єр в 800 на 600 пікселів - зовсім не бар`єр в 640 Кб, які кілька десятків років долав менталітет творців MS DOS, ніж ускладнював життя програмістам і користувачам перших персоналок.

У сайтобудування спочатку все простіше: не поміщається сторінка на екран, браузер робить їй скролінг. Хоча розробник може передбачити висновок вмісту сторінки у вікно без смужок скролінгу і без інших властивостей: вміст сторінки ніколи не вилізе за межі виділеного їй вікна. Це природно, за межами вікна знаходяться інші додатки, а вікно браузера - нічим не краще за інших вікон: операційна система завжди стоїть за рівноправність додатків.

Втім, як би не були розставлені пріоритети у виборі варіанту верстки, як би не розподілявся інтерес відвідувачів до оптимального вирішення екрана для перегляду сайтів, сьогодні є різні екрани, у яких далеко не завжди прямокутні можливості фіксованого розміру.

Динамічний світ крізь Overflow CSS

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

Все безперервно змінюється. Навіть якщо сайт такий, що його контент не може бути змінений протягом багатьох років, немає ніякої гарантії, що несподіваний відвідувач не відкриє його на новий пристрій, про який розробник цього сайту навіть не здогадувався.

Варіантів властивостей у правила Overflow CSS передбачає всього чотири: допускається приховувати все, що виходить за межі області елемента, відображати, надавати скролінг завжди або тільки в разі потреби, або наслідувати значення від предка.

У першому випадку (overflow: hidden), весь контент, який виходить за межі елемента, буде прихований, а то, що сховалося, що не буде доступно. Така позиція ефективна, але не менш цікавий варіант показувати все, що виходить за межі (overflow: visible). Так розробник надає відвідувачеві можливість завжди мати уявлення про повну контенті елемента і управляти його обсягом. Менші можливості дає скролінг (overflow: scroll - смуги прокрутки завжди є-або overflow: auto - смуги прокручування з`являються у міру потреби).

Відео: CSS Tutorials # 11. властивість Display

Особливості використання правила Overflow

Елементи, які знаходяться всередині тега, що має сенс CSS "text overflow", Представляють особливий інтерес, тільки коли вони являють собою текст. Розміщення інших компонентів, як правило, фіксується за координатами або за відносними позиціями.

Відео: HTML, CSS

Текстові елементи не завжди містять фіксовану кількість знаків, а якщо виникла необхідність використання правила overflow, CSS доручається контролювати варіанти непередбаченого зміни обсягу контенту.

Відео: Уроки CSS Урок 4 Властивість display Відмінність div від span

Зокрема, на етапі налагодження можна застосувати значення властивостей auto або scroll, а потім заблокувати відображення всього, що виходить за межі області, надавши відвідувачеві набір кнопок, якими він буде переміщати невидиме вміст в видиму область. Це звичайна практика. Далеко не всім імпонує смужка скролінгу, деякі вважають за краще їй чотири кнопки: до початку, вперед, назад, до кінця.

До того ж правило overflow CSS в значенні auto / scroll приносить на сторінку елемент неприємної невизначеності: браузер переносить пріоритет в частині скролінгу зі сторінки на її елемент, коли над ним знаходиться покажчик мишки.

Коли елемент являє собою текстовий блок, це не дуже помітно і незручно, але якщо по всій ширині вікна розмістити слайдер (блок елементів-картинок), то подолати таку конструкцію не завжди можна мишкою, часто доводиться використовувати кнопки "на початок" або "в кінець сторінки".

пріоритети скролінгу

Діалог сторінки сайту з відвідувачем має істотне значення, як і її дизайн, розробка, контент. Оскільки сайт відкриває браузер і робить це у власному вікні або окремій вкладці, то, швидше за все, право на скролінг повинна мати сторінка, а не її елемент. Останніх може бути не тільки багато, але у кожного може бути власна функція.

Сайт завжди несе в собі конкретний зміст, навіть якщо він відноситься до області філософії, містики або іншого непередбаченого контенту. Саме тому завжди можна припустити конкретну диалоговую навантаження на елементи з правилом overflow CSS.

Відео: Уроки CSS - Урок 5 - Властивості float, clear. Бестаблічная верстка

Зокрема, якщо елемент є селектор вибору року (дати), то класичний селектор буде незручний, а його смуга скролінгу буде доставляти явне незручність. Застосовуючи в такому випадку overflow, CSS ефектно можна використовувати на додаток: внутрішні поля в елементі, виділити періоди, надати можливість відвідувачеві швидко і зручно задати потрібні число, місяць, рік.