Ширина в медіа запитах і вертикальний скроллбар
Медіа запити являють собою відмінний інструмент для маніпуляції макетом веб-сайту в залежності від таких параметрів як ширина видимої частини вікна браузера (вьюпорте), але іноді результат їх застосування може відрізнятися в залежності від використовуваного браузера, що дратує. Наочним прикладом може бути випадок, коли невідомо, чи враховується вертикальна смуга прокрутки, якщо така є, в процесі розрахунку вьюпорті.
Що застосовується в медіа правилах властивість width вказує на доступну ширину екрана цільового пристрою виводу. Стосовно до пристроїв з безперервною середовищем відображення, це ширина вьюпорті (в тому понятті, як це описано в пункті 9.1.1 CSS2 специфікації [CSS21]). включаючи розмір представленої смуги прокрутки (якщо така є).
Тобто специфікація досить чітко визначає те, що повинні робити в цьому випадку браузери. Але на практиці ситуація не настільки однозначна. Результат залежить не тільки від використовуваного браузера і операційної системи, але також і від налаштувань. Для того щоб простежити за поведінкою поширених на даний момент браузерів, я створив найпростіший документ тестування значень властивості width в рамках конструкцій медіа запитів, в якому передбачено певну кількість перехідних значень (брейкпоинтов) і перевірив його в безлічі браузерів.
В результаті побачив три основні закономірності в їх поведінці:
Розмір смуги прокрутки включається в ширину медіа запиту.
Багато десктоп браузери враховують розмір скроллбар при визначенні ширини вьюпорті. Це Firefox. Opera і Internet Explorer.
Розмір смуги прокрутки не включається в ширину медіа запиту.
Як уже згадувалося в моїй попередній статті, на яку я посилався на початку посту, настільні версії браузерів на движку WebKit. такі як Chrome. Safari та інші, не враховують величину скроллбар при визначенні зазначеної в конструкції медіа запиту ширини. Трохи складніше, якщо, звичайно, не брати до уваги такий випадок.
Смуга прокрутки входить в ширину медіа запиту, але не впливає на ширину області контенту.
У Mac OS X 10.7 і вище передбачені налаштування на вкладці General системного конфігураційного меню, що дозволяють встановити відображення смуг прокрутки тільки в тому випадку, якщо користувач прокручує вікно. І якщо користувач активував цю функцію, то браузер включає розмір скроллбар в ширину медіа запиту, але відображає його тільки в тому випадку, коли прокручується вікно браузера. Крім того, смуга прокрутки відображаються зверху. а не як належить збоку області контенту. З цієї причини в даному випадку ширина області контенту, що знаходиться в рамках вьюпорті, ширше на розмір скроллбар, ніж в інших браузерах.
Аналогічним чином поводяться і протестовані мною мобільні браузери (різні пристрої з iOS і її версії, Opera Mobile. Android 2.3.3 і 4.1.2).
Виникає питання. Чи суперечить така поведінка браузерів специфікації Media Queries. Важко дати однозначну відповідь. Адже, врешті-решт, скроллбар включається в значення ширини, але в даному питанні мене цікавить те, чи дійсно така поведінка розглядалося CSS робочою групою консорціуму при створенні специфікації.
У більшості випадків це не є проблемою, але може стати.
Як же це на практиці стосується вас, як веб-розробника? Як приклад давайте розглянемо як бездоганно обробляється адаптивний дизайн в останніх версіях Firefox. Вони включають вертикальну смугу прокрутки в ширину вьюпорті і як тільки контент сторінки не вміщається в вікно браузера вертикально, відображають її безперервно, а не тільки під час прокрутки його вмісту. А це означає, що якщо ви будете використовувати ці браузери для перевірки коректності відображення свого дизайну в розмірах вьюпорті, характерних мобільних пристроїв, ви не отримаєте об'єктивних результатів, які будуть в точності відображати справжнє поведінка сайту при досягненні перехідних точок, властивих розміром вьюпорті реального пристрою, його симулятора або емулятора.
Така ж поведінка характерно настільним версіями браузерів Safari і Chrome (крім тих випадків, коли вони встановлені на Mac з OS X 10.7 або вище і конфігурацією системи передбачено відображення скроллбар тільки при прокручуванні вмісту вікна).
У більшості випадків ці відмінності у відображенні не є серйозною перешкодою для веб-розробників і іноді можуть бути просто непомітні, за умови що дизайн вашого сайту моментально реагує на зміну розміру вікна браузера. Але в тому випадку, якщо дизайном передбачені фіксовані точки переходу (брейкпоінт) на різні варіанти макета сайту, адаптовані під певну ширину вьюпорті і / або його контент має справжню, властиву йому ширину, яка вимагає точного визначення точок переходу, то ви повинні брати до уваги згадані вище відмінності. На мою думку, існує кілька способів, що дозволяють спростити задачу:
- Якимось чином (наприклад, розпізнавання браузера користувача за допомогою скриптів або інших альтернативних методів) визначити чи включає браузер скроллбар в ширину медіа запитів.
- Визначаючи позиції для точок переходу, додавайте до їх значенням ширину вертикальної смуги прокрутки, що запобіжить поява горизонтальної смуги прокрутки в тих браузерах, які включають розмір скроллбар в ширину вьюпорті і постійно його відображають (не залежно від того прокручує користувач вікно браузера чи ні).
- Зробіть шаблон сайту максимально гнучким, який має на увазі плавне зміна ширини області контенту, так що відмінності відображення скроллбар не матимуть значення (у всякому разі вирішального значення).
Я, звичайно ж, віддаю перевагу третій позиції. Однак, я мав справу і з такими дизайнами, які насправді не можуть забезпечити достатню гнучкість, тоді більш відповідним буде другий варіант. Що стосується першого пункту, то я виключаю його, принаймні, поки не буде знайдений більш надійний спосіб, ніж старомодне, часто супроводжується помилками, розпізнавання користувача браузера.
А що може бути кращою альтернативою? Наприклад, можливість включення в конструкцію медіа запиту фрагмента, котрий перевіряє стан скроллбар. Таким ось чином:
@media only screen and (max-width: 768px) and (vertical-scrollbar: [inside | outside | on-top]) / * необхідні перетворення * /
>
Але навіть в цьому випадку, для того, щоб отримати користь з цієї конструкції, вам все одно потрібно знати ширину смуги прокрутки (яка може відрізнятися і залежить від операційної системи), коли вона відображається не у верхній частині області контенту, а збоку від неї . Тому я не впевнений, що від цього способу буде багато користі.