Смуга, вужча за власне вікно

Кожна сторінка нашої панелі прокручувалася вбік за ширини вікна 768 пікселів. Вісім пікселів зайвих англійською, тридцять вісім румунською. Так було вже певний час, девʼятьма мовами, на кожному маршруті. Ці числа походять із проби у двох записах валюти; попереднє окреме зчитування тієї самої смуги давало три.

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

Вікно не є смугою

Від середньої точки зламу бічна панель стоїть поруч зі смугою, а не за компактним меню, і коштує шістнадцять rem. Отже, за вікна в 768 пікселів рамка вмісту смуги має 464 пікселі. Не 768 і не 736.

Обидва правила, що мали б завадити переповненню, приховування назви облікового запису і стискання пігулки зʼєднання до крапки, були написані під малу точку зламу: 640 пікселів вікна. Це на 128 пікселів раніше за місце, де зʼявляється бічна панель і забирає свої шістнадцять rem. Між цими двома числами лежить смуга значень, де заголовок вважає, що місця вдосталь, а насправді має менше, ніж за будь-якої вужчої ширини, бо на 640 бічна панель була ще прихована.

Це не проблема Tailwind і не точка зламу, поставлена на щабель нижче. Це помилка категорії. Медіазапит відповідає на те, яким великим є видиме поле. Питання, на яке заголовку потрібна відповідь, полягає в тому, скільки місця він отримав, і до появи запитів контейнера поставити його було нічим.

Міряйте те, що рядок просить, а не те, що він робить

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

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

Зроблено на 768 пікселях у ширшому запису валюти, девʼятьма мовами, і частини виходять такі.

Звідси випливають два пороги, і обидва сформульовані щодо рамки вмісту смуги, а не щодо вікна. Показ назви облікового запису потребує 524 пікселів, тож він починається з 34 rem, із двадцятьма пікселями запасу. Показ пігулки замість крапки потребує 622,8, тож він починається з 40 rem, із сімнадцятьма. Нижче порога назви рядок просить 422,3 пікселя, і це вільно вміщається у 464, які він отримує.

Приємне в тому, щоб ставити питання контейнера замість питання вікна, полягає в тому, що діється далі без жодного зайвого рядка. Коли бічна панель згортається до рейки, те саме вікно в 768 пікселів лишає 656 пікселів смуги, і назва та пігулка повертаються самі. Ніщо не знає про рейку; смуга просто зміряла себе ще раз.

Мова з нульовим переповненням

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

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

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

Два способи, якими вимірювання бреше

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

Клон на максимальній ширині вмісту слід міряти всередині контейнера. Наш чіплявся до тіла документа, а воно лежить цілком поза смугою, тож запит контейнера не збігався ніколи, і клон малювався у вузькій подобі: 394,8 пікселя там, де справжній рядок просив 515,3. Прочитане як «до» і «після», це виглядає точно як вдала полагодка. Це та сама пастка, що й міряти в євро, доки клієнт бачить долари, або міряти сторінку, чиї дані так і не прийшли: число не є хибним, воно є відповіддю на інше питання.

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

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

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

Обрізати, не ламаючи кнопки

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

Обрізання живе на елементі всередині кнопки, а не на кнопці. Поставити overflow: hidden на саму кнопку означає обрізати її власну зону натискання і її кільце фокуса, а це перетворює косметичну правку на дефект доступності з клавіатури.

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

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

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

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

Що ми б записали

1. 01Медіазапит відповідає на питання про видиме поле. Якщо компонент ділить свою ширину з бічною панеллю, це хибне питання, і відповідь хибна рівно на ширину тієї панелі.
2. 02Керуйте тим, що рядок просить, а не тим, що він робить. Гнучка модель спершу стискає дітей, тож екран показує вам кінцевий симптом.
3. 03Міряйте клон усередині контейнера. Ззовні запит не збігається, і ви міряєте вузьку подобу, що читається як полагодка.
4. 04Нуль пікселів переповнення може бути зламаним випадком. Текст, що покидає свою рамку, документа не розширює; перевіряйте текст проти власної рамки і рахуйте рядкові коробки.
5. 05Дайте сканерові що знайти. Режим доведення, який садить відомі дефекти, є єдиним способом відрізнити «нічого поганого» від «не дивиться».
6. 06Обрізайте на внутрішньому елементі. Обрізати кнопку означає обрізати кільце фокуса, а доступна назва має лишатися цілою.
7. 07Оберіть, який елемент стискається. Полишена сама на себе, гнучка модель ділить біль порівну між усім.

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

Із платформної роботи над Provibr. Сторінку, чиє переповнення це почало, описано в не в мережі поруч із заголовком, що каже про мережу, а що девʼять мов роблять із набором елементів керування сталого розміру, описано в шістнадцять тисяч ключів і девʼять мов.