Media queries: стилове според условията на показване

Полезно е да знаеш

Една страница може да бъде отворена в тесен прозорец, на широк монитор или в режим за печат. Media queries позволяват част от CSS да се прилага според такива условия. Те могат да проверяват характеристики на областта за показване, ориентация и определени потребителски предпочитания. Това предоставя механизъм за адаптиране, без да е необходимо всеки възможен размер да има напълно отделен документ. Основната задача е правилото да отговаря на действителна нужда на съдържанието. [1]

Чрез конструкцията @media се задава условие и група от стилове, които се използват, когато условието съвпада. [2] Самата ширина не е име на конкретно устройство. Тесен прозорец на настолен компютър може да постави подобни ограничения като телефон, а широк телефон в хоризонтално положение може да даде различно пространство. Затова прагът за промяна е по-лесен за обосноваване чрез поведението на страницата, отколкото чрез списък с търговски модели.

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

Условията не се изчерпват с размерите. Media queries могат да отчитат например предпочитание за намалено движение или възможност за посочване с устройство, което поддържа задържане над елемент. [1, 2] Това помага адаптирането да бъде разглеждано по-широко от пренареждане на колони. При проект с анимирана галерия можем отделно да опишем какво остава необходимо за ориентация и коя част от движението е само декоративна. Така промяната има конкретна цел за човека.

Практическата проверка трябва да включва стойности около избрания праг. Отваряме страницата малко преди промяната, точно при нея и малко след нея. После използваме реалистично дълги заглавия и различни количества текст. Този подход открива проблеми, които не се виждат в пример с еднакви кратки надписи. За печат може да се избере отделна проверка на разпечатвания изглед, вместо да се приема, че той трябва да повтаря всеки декоративен елемент на екрана.

При поддръжката е полезно условията да бъдат малко, ясно групирани и свързани с описани промени. Например „картите стават една колона, когато текстът вече не се побира удобно“ е разбираемо основание. Само число без причина е по-трудно за преглед след редакция на съдържанието. Media queries предоставят точния механизъм, а добрият резултат идва от наблюдение на страницата в непрекъснат диапазон от условия и от запазване на основната ѝ задача във всяка от избраните форми.