Удобство от устройство до устройство
Механизмът за зависим от устройството стил, описан за първи път в CSS2 и отразен с малки промени в CSS2.1, е доразвит в CSS3 - главно в модула Media Queries. Спецификацията Media Queries не отменя, а разширява познатия синтаксис, обсъден в първата част от нашата поредица от статии, поради изясняващи условия. И така, вместо "класическия":
вече можем да напишем:
Изграждане на изрази
Медийните заявки се основават на логически изрази, които, в зависимост от характеристиките на средата или изходното устройство, могат да приемат стойностите "true" или "false". В кодовия фрагмент по-горе примерен израз е screen and (min-width: 640px) . Съответният блок от CSS правила се прилага само ако изразът е верен.
Има смисъл да се разгледат принципите за конструиране на изрази, като се използват конкретни примери.
Следният пример проверява дали устройството е цветно:
Ключовата дума all , отнасяща се до всички типове среди и устройства, в този случай може да бъде пропусната:
И видът на медията, и изразът с участието на медийната характеристика, и двата компонента могат да бъдат пропуснати наведнъж. На теория има право на съществуване следната конструкция:
Съответният блок от правила ще се прилага за всички среди и устройства.
Запетаята в медийните изрази всъщност действа като логично „или“:
Ключовата дума not се използва като логически оператор за отрицание:
Изразът не екран и (цвят) ще бъде верен, когато изразът екран и (цвят) е невярно и обратно.
И накрая, единствената ключова дума е специално проектирана да бъде съвместима с наследени браузъри, коитоможе да тълкува погрешно конструкции като @media screen и (цвят) като @media screen. Ето пример за използването му:
Преглед на характеристиките на медиите
В първата част от нашата поредица от статии предоставихме таблица, отразяваща връзката между различните видове и групи медии и изходни устройства. Този етикет всъщност беше директен цитат от спецификацията на CSS2.1 (до факта, че съдържанието на някои клетки беше преведено на български).
Струваше ми се, че би било разумно да организирам информацията за медийните характеристики, описани в спецификацията на CSS3 Media Queries, също под формата на таблица. Но, за разлика от таблицата от първата част на нашата история, следващият „мамичен лист“ вече не е цитат от спецификацията, а вид кратко резюме. Вярвам, че този плод на аматьорска дейност е по-визуален от "листа" на текста и вероятно е по-удобно да се използва като ежедневен справочен инструмент, отколкото оригиналната спецификация. Необходимите разяснения ще бъдат дадени по-долу.
| ширина, височина | визуални, тактилни | да | , например: 1024px , 20em ; отразява ширината/височината на прозореца за изглед или полето на страницата |
| ширина на устройството, височина на устройството | визуални, тактилни | да | , например: 1024px , 20em ; отразява ширината/височината на екрана или листа |
| ориентация | растерно изображение | Не | портрет или пейзаж |
| аспектно съотношение, аспектно съотношение на устройството | растерно изображение | да | , например: 16/9 или 1280/720 |
| цвят | визуален | да | неотрицателни , например: 8 ; отразява броя на битовете на компонент за представяне на цвета (inв случай на неравномерно разпределение съответства на най-малкото число); 0 - устройството не е цветно |
| цветен индекс | визуален | да | неотрицателни , например: 16 ; отразява броя на цветовете във фиксирана палитра |
| монохромен | визуален | да | неотрицателни , например: 8 ; отразява броя на битовете на пиксел; 0 - устройството не е монохромно |
| резолюция | растерно изображение | да | например: 300 dpi или 118 dpcm |
| сканиране | телевизия | Не | прогресивен или преплетен |
| решетка | визуални, тактилни | Не | 0 или 1 |
И така, обещаните обяснения.
Групите или видовете медии, които се появяват във втората колона на таблицата, в контекста на които има смисъл тази или онази медийна характеристика, отново се отнасят до таблото, разгледано в първата част.
Сега нека обясним по-подробно предназначението на всяка от медийните характеристики.
Свойствата за ширина на устройството и височина на устройството приемат ширината и височината на устройството (като екрана) като цяло.
Характерната ориентация (ориентация) предполага две стойности: портрет (портрет) или пейзаж (пейзаж). Първото се приема, когато стойността на височината на характеристиката на носителя е по-голяма или равна на стойността на ширината, второто е в обратната ситуация.
Характеристиката на монохромната медия предава дълбочината на цвета в битове на пиксел, ако устройството е монохромно. Ако устройството не е монохромно, а цветно, тази медийна характеристика ще приеме стойност 0 .
Характеристиката на разделителната способност отразява разделителната способност на изходното устройство в точки на инч ( точки на инч , dpi ) или на сантиметър ( точки насантиметър, dpcm). Примерните стойности, дадени в нашата таблица, са еквивалентни.
Свойството сканиране на носител е доста специфично и е приложимо само за устройства от тип tv. Тази характеристика отразява типа сканиране, използвано от такова устройство, и предполага две възможни стойности: прогресивно (серийно) или презредово (преплетено).
И накрая, последното медийно свойство, описано в спецификацията на Media Queries, grid, се използва за определяне дали дадено устройство използва мрежа с фиксирани знаци за показване на знаци с фиксиран размер или е устройство с растерна графика. На персоналните компютри първият преди много време се наричаше "текстов режим", за разлика от "графичен режим". Текстовият режим е по-бърз и изисква по-малко памет, но не позволява показването на произволни геометрични обекти. Повечето съвременни потребители могат да наблюдават текстов режим само когато компютърът е включен по време на инициализация на BIOS, но нещо подобно се съхранява на бюджетни мобилни устройства, в текстови конзоли от зли администратори и на специализирани брайлови дисплеи.
- Търсене в сайта:
- Споделете връзка към тази страница:
Проектът се разработва с подкрепата на RU-CENTER.