Як розібратися в CSS

2585
  • Height і width — розміри області з контентом в CSS
  • Overflow — приховування (hidden, visible) і прокручування (scroll, auto)
  • Height і width у відсотках — навіщо потрібен doctype
  • Здрастуйте, шановні читачі блогу . Сьогодні ми поговоримо про те, як можна задавати розміри для області вмісту за допомогою height і width і як налаштувати відображення цього вмісту у разі, якщо його буде більше, ніж зможе поміститися у відведене для нього місце (css правило overflow зі значеннями hidden, scroll, auto).

    Як розібратися в CSS

    У передостанній статті довідника ми розглянули з вами кілька основних правил, які використовуються в блокової верстки: margin (взаємодія з межами сусідніх елементів), border (рамка) і padding (відстань від рамки до області з контентом). У тій статті ми не розглянули тільки те, якими правилами описується вміст, що зараз і спробуємо виправити.

    Height і width — розміри області з контентом в CSS

    Для цього в мові стильової розмітки CSS передбачені правила описують ширину (width) і висоту (height) цієї самої області. Ширина визначатиметься розміром контейнера, тобто того простору, в якому стоять Html елементи. Як тільки ми її змінюємо, то вміст підлаштовується під цю ширину. А ось її висота залежить від його змісту.

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

    Правила, які регулюють дані розміри, називаються width і height. Нагадаю, що вони не обрізають зображення фізично, тому попередньо потрібно буде зменшити розмір фотографій (стиснути їх) і вже тільки потім завантажувати на сайт. У цих правил за замовчуванням використовується значення Auto (самостійний розрахунок — віддається на розсуд браузера).

    Т. о. абсолютно для всіх тегів, якщо значення width і height не задані в явному вигляді, вони будуть розраховуватися браузером автоматично, починаючи з самого зовнішнього елемента.

    Ну, а крім Auto значеннями для них можуть служити величини в розмірах використовуються в CSS або ж відсотки (про особливості використання відсотків читайте трохи нижче):

    Як розібратися в CSSЯк розібратися в CSS

    Самим зовнішнім елементом є тег Html, для якого допустима ширина контенту дорівнює області перегляду розміру видимої частини екрану). Далі браузер буде розраховувати width для тега body і так далі, аж до потрібного нам елемента. У підсумку виходить, що ширина елемента буде підлаштовуватися під доступну йому (не зайняту іншими елементами) область і займати її цілком.

    З цієї самої причини всі блокові елементи (читайте про них докладніше в статті про CSS правило display block), для яких не вказали в явному вигляді значення width, будуть намагатися зайняти весь доступний їм місце по ширині, а при зміні області перегляду (наприклад, зменшення вікна браузера) горизонтальні розміри блочних елементів теж буде змінюватися відповідним чином.

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

    Але в той же час, якщо ми жорстко поставимо width для блокового елемента (наприклад, абзацу укладеного в контейнер DIV), а широту зовнішнього контейнера не будемо явно вказувати (браузер тоді буде для нього використовувати типове значення Auto), то при зменшенні області перегляду вікна браузера) може вийти так, що абзац вилізе за розміри контейнера Div, в якому він був укладений:

    Як розібратися в CSSЯк розібратися в CSS

    Це зайвий раз підтверджує, що широта області вмісту зовнішньої величиною, ніяк не пов’язаної з розміром контейнера, в якому це саме вміст укладено (запросто може виходити за його межі). А ось з висотою, яка задається через height, такий фокус не пройде. Якщо ми збільшимо висоту параграфа, то автоматично збільшиться і висота контейнера Div, в якому він укладений.

    Але крім усього вищеописаного можливий такий варіант, що ви поставите жорстко область з вмістом (наприклад, width і height для параграфа), але вміст при цьому в ці розміри не впишеться (тексту в параграфі, припустимо, виявиться більше). От як раз для розв’язання схожих ситуацій і було придумано CSS правило overflow.

    Overflow — приховування (hidden, visible) або прокручування (scroll, auto)

    Давайте для наочності розглянемо два абзаци йдуть один за одним в Html коді. Для наочності подсветим області, відведені під низ, різним кольором з допомогою background:

    Текст першого абзацу

    Текст другого

    Як розібратися в CSSЯк розібратися в CSS

    Т. к. width і height для цих параграфів не вказано, то за замовчуванням браузер сам розраховує їх, виходячи зі свого власного розуміння значення Auto. В результаті абзаци займають по ширині все їм доступне місце, а по висоті відповідають висоті укладеного в них вмісту.

    Тепер Давайте внесемо перша зміна і задамо жорстко широту першого абзацу (width:50px):

    Текст першого

    Текст другого

    Як розібратися в CSSЯк розібратися в CSS

    Загалом відбулося очікуване — розмір по горизонталі зменшився до заданої width:50px величини, ну, а висота параграфа як і раніше формується завдяки height:auto (умолчательному значенням). У результаті вона стала такою, щоб вмістити в себе весь текст.

    Але тепер давайте обмежимо і висоту контейнера з допомогою height:15px.

    Як розібратися в CSSЯк розібратися в CSS

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

    Overflow означає «сверхпоток» або, іншими словами, «переповнення контенту». Воно говорить про те, що має статися з вмістом, якщо він не вмістився у межі тієї області (контейнера), яка йому була відведена.

    У Overflow є декілька допустимих значень, але за замовчуванням використовується visible (показувати):

    Як розібратися в CSSЯк розібратися в CSS

    Саме тому в нашому останньому прикладі текст верхнього абзацу наїхав на нижній (за замовчуванням використовувалося overflow:visible — показувати вміст не вмістилося в контейнер). Ми могли б використовувати іншу крайність — overflow:hidden. Тоді б усе, що не помістилося всередині контейнера, не показувалося на вебсторінці:

    Як розібратися в CSSЯк розібратися в CSS

    Інші два значення цього CSS властивості дозволяють скролити не вмістилося в контейнер вміст (щось схоже ми вже спостерігали, коли вивчали атрибути Html тега Frame). Отже, scroll відобразить смуги прокручування по вертикалі і горизонталі навіть у тому випадку, якщо зміст благополучно вміщується у відведеному для нього контейнері:

    Як розібратися в CSSЯк розібратися в CSS

    Але набагато більш логічним буде використання значення Auto для Overflow, якщо вам необхідно зробити смуги прокручування. В цьому випадку браузер сам буде розраховувати, коли потрібно їх відображати і за якими саме осях.

    Наприклад, у разі використання overflow:auto ми отримаємо можливість прокрутки тільки з тієї осі, де вміст не вміщується в межах контейнера:

    Текст першого

    Текст другого

    Як розібратися в CSSЯк розібратися в CSS

    Резюмуючи можна сказати, що Overflow дозволяє досить гнучко налаштувати варіанти показу вмісту у тому випадку, коли він вилазить за межі свого контейнера. У вас буде можливість виїхав контент показувати (visible), не показувати (обрізати — hidden), або робити обов’язкову прокручування (scroll) або ж прокручування по необхідності (auto).

    Є ще варіанти написання цього правила відносяться до CSS3, але які підтримуються всіма браузерами, а значить їх можна буде сміливо використовувати. Я кажу про варіанти overflow-x і overflow-y, які дозволяють ставити або не ставити прокручування по окремих осях (x — горизонтальна, y — вертикальна).

    Якщо вам, наприклад, потрібно зробити так, щоб по горизонталі прокрутка не з’являлася ніколи, а по вертикалі з’являлася б лише за необхідності (якщо контент не вміщується), то для Html-елемента потрібно буде прописати overflow-x:hidden і overflow-y:auto. Все, завдання буде вирішено, бо цей фінт вухами підтримується всіма браузерами.

    Height і width у відсотках — навіщо потрібен doctype

    Тепер давайте поговоримо про те, від чого вважається ширина задана у відсотках. Пам’ятаєте, на початку статті я обіцяв на цьому ще загострити нашу увагу. Ну, власне, CSS правило width тут не є винятком і точно так само, як і padding та margin, вважається у відсотках від горизонтального розміру контейнера з контентом.

    Кілька заплутаніше йде справа з висотою області вмісту заданої у відсотках. Було б логічно припустити, що аналогічно — від висоти контейнера. Але тут ми з вами починаємо зіштовхуватися з дуалізмом (двома моделями поведінки) — як робили раніше і як роблять зараз з прийнятим стандартам. У зв’язку з цим слід ще раз торкнутися теми режимів відображення і розглянуту нами раніше декларацію doctype.

    Історично так склалося, що після прийняття стандартів залишалося все одно велика кількість документів, сформованих за старими правилами чистого мови Html і з ними потрібно щось робити. У той же час стандарт мови Html теж розвивався (виділився мова стильової розмітки і застаріли деякі теги і атрибути), тому знадобилося якимось чином показати браузеру, за яким саме стандартам потрібно буде йому розбирати даний код.

    Для того, щоб відокремити нові документи (які враховували всі з’явилися стандарти) та старі (не враховують найчастіше нічого, крім чистого Html), компанією Мелкософт було запропоновано використовувати невелику фішечку з тільки що з’явився тоді мови XML. Родзинка ця була службової і називається зараз декларація doctype.

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

    Таким чином браузер отримав маркер того, за якими стандартами йому розбирати документ. Якщо декларація doctype проставлена, тоді він переходить в режим відповідності стандартам (standarts mode). Якщо ж в коді документа на його першій сходинці doctype браузер не виявить (або вона буде написана не правильно, що ідентично її відсутності), то тоді він переходить в так званий режим прийомів (quirks mode).

    Документ, у якому відсутній doctype, в браузері буде відображатися таким чином, як ніби він дуже старий (старовинний). Якщо в цей же документ додати декларацію, то оглядач вже скине свій наліт старовини і почне працювати з кодом документа по всім прийнятим зараз стандартам.

    От тільки поняття старовини дуже різне. Яка, наприклад, старина може бути у популярного зараз браузера Google Chrome, який з’явився тільки в 2008 році? У IE, природно, історія є і досить багата. Тому всі браузери будь-якої версії будуть відображати документ без декларації (в режимі quirks mode або хитрощів) точно так само, як це б робив старовинний IE 5.5, бо саме ця версія вважається базовою.

    Чому я так довго говорив про режими відображення браузерів? А тому, що для цих двох режимів завдання висоти (height) області вмісту у відсотках дуже сильно відрізняється по відношенню до розрахунку цієї самої висоти.

    Завдання висоти (у відсотках) області з контентом в режимі проходження стандартів (standarts mode — коли прописаний правильний doctype на початку документа) буде взагалі не можливо, якщо не буде де-небудь задана висота для контейнера, в який укладено цей вміст (задана вами у відсотках висота буде ігноруватися).

    Зміст

    Як розібратися в CSSЯк розібратися в CSS

    Якщо декларацію doctype з коду документа прибрати, то ми побачимо наступну картину:

    Як розібратися в CSSЯк розібратися в CSS

    Для режиму слідування стандартам (на початку документа прописана декларація) необхідно попередньо задати висоту контейнера (в нашому випадку для Div контейнер буде служити тег Body) і тільки тоді браузер правильно відпрацює height:100%:

    Зміст

    Як розібратися в CSSЯк розібратися в CSS

    В результаті вийшли два абсолютно різних підходу при завданні висоти області вмісту у відсотках, тому для уникнення проблем раджу вам в обов’язковому порядку вказувати правильну декларацію doctype на початку всіх ваших документів (вебсторінок). Є і ще один приклад, коли різниця між режимом слідування стандартам і режимом прийомів буде колосальною.

    Якщо ви поставите для будь-якого Html-елемента height і width для області контенту, а також вкажіть для цього тега внутрішні відступ (padding) і ширину рамки (border), то в режимі прийомів (quirks mode — без прописаної декларації) в різних браузерах це все може бути витлумачено по-різному.

    У старому браузері IE 5.5 внутрішні відступи та ширина рамки будуть відраховувати всередину від заданих через height і width розмірів. Тобто загальний розмір елемента буде відповідати тому, що задано в цих CSS властивості (це застаріла схема, яка зараз не використовується).

    В інших сучасних браузерах відступи padding та ширина рамки border будуть додаватись до тих розмірів, що були задані в height і width. Тобто у цьому випадку (режим прийомів без doctype) спочатку задані розміри області контенту будуть розширені на величину внутрішніх відступів і рамки.

    Ну, а якщо в документі прописати директиву, то абсолютно у всіх сучасних і старих браузерах цих проблем з подвійністю підходу вже можна буде запросто уникнути. У цьому випадку і в IE 5.5 величина внутрішніх відступів і ширина рамки буде підсумовуватися з розмірами області вмісту, як цього і вимагають сучасні стандарти CSS. Тому для уникнення завжди прописуйте doctype.

    Удачі вам! До зустрічей на сторінках блогу