dppx в CSS


Содержание

Введение в CCSS (Компонентный CSS)

CCSS или компонентный CSS , это архитектура, которая упрощает составление CSS для крупных веб-приложений.

Большие веб-приложения, как правило, содержат много CSS файлов, над которыми работают разные разработчики.

С появлением такого большого количества фреймворков, руководств, инструментов и методологий ( OOCSS, SMACSS, BEM и т.д.), разработчики нуждаются в CSS архитектуре, которая обеспечит простое сопровождение, управление и масштабирование проектов.

Как инженер интерфейсов, я считаю, что веб-разработка на основе компонентов, это именно то, что нужно. Веб-компоненты представляют собой набор стандартов, которые работают через W3C . Они позволяют нам обернуть разметку и стили в многократно используемые элементы HTML , действительно инкапсулированные.

Это означает, что мы должны задуматься о разработке CSS на основе компонентов. В то время как разработчики браузеров реализуют эти стандарты, мы можем использовать инкапсуляцию софта.

Давайте рассмотрим, что такое CCSS и как вы можете использовать его в настройке архитектуры CSS для сложного веб-приложения.

Элементы CCSS

Ниже приведены основные элементы, используемые либо полностью, либо в измененном виде, чтобы достичь оптимальной конфигурации архитектуры CCSS .

SMACSS

SMACSS, был создан Джонатаном Снуком , и расшифровывается, как Scalable and Modular Architecture for CSS ( Масштабируемая и модулируемая архитектура для CSS ). Это, скорее, руководство по стилям, чем фреймворк. Для получения более детальной информации о том, как он используется в структуре CCSS , прочитайте статью SMACSS .

BEM был создан разработчиками Yandex , расшифровывается, как “ Block ”, “ Element ”, “ Modifier ” (« Блок «, « Элемент «, « Модификатор «). Эта методология предлагает новый подход при разработке веб-интерфейсов. Более подробную информацию по BEM вы можете найти в отличной статье Гарри Робертса .

Sass — это CSS с суперсилами. Я очень рекомендую именно его, но вы можете использовать также Less . Дополнительную информацию вы можете найти в документации Sass .

Compass

Compass не содержит определения классов; это расширение для Sass , предоставляющее много дополнительных утилит. Оно используется для создания примесей и компиляций Sass .

Примеси Compass практически всегда должны использоваться, когда нам нужны префиксы. Опять же, его применение весьма желательно, или по своему усмотрению вы можете использовать Bourbon .

Принципы CCSS

Теперь давайте рассмотрим основные принципы CCSS .

Компонентная основа

Создание малых и независимых компонентов, которые могут быть применены в разных местах. Многократно используемый компонент CSS может размещаться в различных частях дерева DOM и не требует использования только определенных типов элементов.

При необходимости нужно использовать дополнительные элементы HTML , чтобы сделать возможным многократное использование компонента.

Модульность и изолированность

Компоненты должны иметь все необходимое для определенной части пользовательского интерфейса и фокусироваться на одном элементе. Каждый компонент должен быть изолирован, то есть он должен быть независим от других компонентов.

Изолированность даже более важна, чем возможность повторного использования кода, так как повторное использование может увеличить зависимость и количество связей, что в конечном итоге делает CSS менее управляемым.

Возможность компоновки

При составлении CSS должно уменьшаться количество времени, необходимое для написания CSS , и соответственно нужно больше времени на изменение HTML-классов элементов, модифицируя их или добавляя новые стили.

Для всех разработчиков гораздо проще составлять CSS -код, похожий на блоки конструктора « Лего », чем участвовать в CSS войне. Классы CSS являются строительными блоками, которые используются для составления стилей.

Предсказуемость

Предсказуемость означает, что, когда вы составляете CSS , ваши правила стилей ведут себя, как вы ожидаете. Это важно для больших приложений, которые содержат много страниц. Избегайте использования чрезмерно сложных селекторов и имен классов, так как они могут сделать CSS -код непредсказуемым.

Документирование

Большинство людей считают, что CSS не требует пояснений. На самом деле это, как правило, не так! Компоненты CSS должны быть четко задокументированы, с тем, чтобы в описаниях было подробно разъяснено, что они делают и как они должны использоваться.

Структура каталогов

Ниже для облегчения восприятия приводится пример структуры папок. Я также разместил пример настройки CCSS в хранилище на GitHub :

Нужно только отредактировать / составить файлы в папке scss/ дерева папок , приведенного выше. Это позволяет легко обновлять внешние библиотеки, расположенные в папке ext/ .

Многие приложения поддерживаются внешними CSS -фреймворками, такими как Bootstrap или Foundation , поэтому я добавил их в этом примере в папку ext/ . Хотя конечно здорово, если все CSS -коды пишутся с нуля; тем не менее, вы можете использовать описанный выше метод.

Папка components/ отлично подходит для применения AngularJS , но ее можно настроить под другие фреймворки или приложения. Более подробно я расскажу об этом в разделе « Архитектура ».

На странице HTML , включающей в себя все файлы .css из папки style/ , содержатся все скомпилированные CSS-коды ( из Grunt, Compass и т.д .). Никогда не изменяйте их.

Конвенция имен — упрощенный BEM

  • u-className — глобальные базовые классы / классы утилит;
  • img-className — глобальные классы изображений;
  • animate-className — глобальные классы анимации;
  • ComponentName — стандартные компоненты (B);
  • ComponentName-elementName — элементы компонента (E);
  • ComponentName—modifierName — модификатор компонента (М).

Обратите внимание на название стиля компонентов UpperCamelCase , это основной элемент; это означает, что он является верхним элементом компонента. Имена элементов и модификаторов — elementName и modifierName , соответственно. Не используйте дефис (-), чтобы разделять имена компонентов, так как он означает начало элемента / имени элементов.

Архитектура и дизайн

Давайте рассмотрим архитектуру, построенную согласно принципам CCSS .

Grunt

Grunt является отличным элементом для запуска задач, который автоматизирует многие рутинные действия ( например, компиляцию CSS или проверку HTML ).

Есть и другие элементы для запуска задач; идеальный рабочий процесс должен включать в себя такой элемент, который будет отслеживать файлы, находящиеся в процессе разработки, и перекомпилировать CSS при внесении изменений.

Организация файлов

Посмотрите еще раз на структуру папок, которая является производной от SMACSS . Обратите внимание на папку ext/ , которая содержит все внешние фреймворки ( такие как Bootstrap ). Для более простого внесения изменений изменения и расширения должны вноситься не в нее, а в папку base/ .

base/ — это место, где хранятся глобальные базовые стили, используемые приложением в целом.
_base.scss — базовые стили только для селекторов элементов. Они являются своего рода « CSS-переключателями «.
_base-classes.scss — все классы утилит, используемые по всему приложению в разных представлениях, компонентах и на страницах. Используется префикс имени класса u- .
images.scss используется в качестве источника компиляции SCSS . Должен определять и встраивать все изображения сайта, как Data URI . /app/styles/images.css генерируется из этого файла.
_animate.scss содержит все классы анимации всего приложения.
_bootstrap-overrides.scss содержит только файлы, измененные фреймворком. Иногда уровень, назначенный селекторам фреймворка, настолько высок, что их переопределение требует дополнительных селекторов. Изменение на глобальном уровне не может быть осуществлено в контексте компонента SCSS . Вместо этого все глобальные изменения собираются здесь.

Компоненты

Любой блок многоразово используемого CSS -кода, не упомянутого выше, считается « компонентом «. Мы используем AngularJS , поэтому я разделяю их на три основные категории: представления / страницы, директивы и стандарты; следовательно, структура этих папок опирается на SMACSS .

В примере настроек, размещенном на GitHub , я, чтобы было понятнее, создал отдельные папки.

Если ваше приложение невелико, вы можете собрать их все в одну папку. Все компоненты, созданные в соответствии с модифицированной конвенцией имен BEM , используются в сочетании с CamelCase .

Это дало мне огромный плюс, так как стимулировало остальных членов команды следовать синтаксису BEM . Это также позволило избежать путаницы при отходе от использования типичного стиля BEM с его символами -, — и __, которые генерируют такие имена классов, как module-name__child-name—modifier-name !

Также важно, что порядок определения классов CSS в компоненте отражает представление HTML . Это облегчает сканирование, назначение стилей, редактирование и применение классов.

Наконец, хорошо иметь для веб-приложения обширное руководство по стилям и следовать гайдлайнам по CSS и Sass ( например, избавиться от необходимости использования @extend ).

Пример CCSS

Смотрите код примера настроек CSS .

Вот пример компонента на Sass :

Это код компилируется в следующий CSS :

И ваш HTML -код может выглядеть приблизительно следующим образом:

Вы можете задействовать упрощенную BEM-примесь , которая для достижения этой цели использует эталонный селектор, и является более простой, чем @at-root .

В Sass 3.3+ работать с BEM стало намного проще, что дает нам возможность поддерживать и сопровождать код, который легко понять.

Ваше участие

Ваше участие в развитии материалов, размещенных на GitHub , в виде просьб добавить больше примеров, разъяснений и т.д., будет очень полезным.

И обязательно ознакомьтесь с самими материалами, в которых вы также сможете найти дополнительную информацию и ссылки на полезные источники, связанные с CCSS . Если у вас есть вопросы или замечания, напишите о них в комментариях к этой статье или к хранилищу GitHub .

Данная публикация представляет собой перевод статьи « Introducing CCSS (Component CSS) » , подготовленной дружной командой проекта Интернет-технологии.ру

bitsofcode

Save Article for Offline Jun 28, 2020 css

Values for properties in CSS can be in a number of formats. In order for a user agent to be able to determine if a value is valid, it needs to make sure it conforms to one of the speicfic types of values. These are called data types, and are typically written in the specs like .

There are two kinds of data types — specific and generic. Specific data types are related a single property or a small group of properties. For example, the data type is used as the value for the transform property alone.

Generic data types, on the other hand, are not related to any specific property. For example we can have a value of 10px , which is a data type, for the margin , font-size or a number of other propertes.

In this article, I’m going to give an overview of all the generic data types.

Textual Data Types

Keywords

The data type refers to the pre-defined keywords in CSS. This includes both the unique values for certain properties, for example block for the display property, as well as the CSS-wide values initial , inherit and unset (See Initial, Inherit, Unset, and Revert).

These keywords are case-insensitive and must always be written without quotes, less they be misinterpreted as the data type.

Custom Keywords

The (also referred to as ) data type refers to keywords that have been defined by the author of the stylesheet. There are restrictions as to what can be a valid , for example it cannot be one of the CSS-wide values.

A common example of a custom keyword is the value for the animation-name property. This property can accept as its value the name of a custom animation, as defined by the stylesheet author.

Quoted Strings

The data type refers to any quoted string. The text within the quotes can be any sequence of Unicode characters.

Resource Locators

The data type is used to reference a resource file or fragment. This data type is typically written using the url() function, but can be represented as a in some cases, notably with the @import rule.

There are three types of URLs that can be used with this data type —

  • Absolute URLs are those that specify a protocol and domain. The resource these URLs direct to are not necessarily in the same domain as the stylesheet they are referred from.
  • Relative URLs are those that are refer to a file using the referring stylesheet’s location as the base location.
  • Fragment URLs are used to refer to elements in the host document itself. The reference is the ID of the element, not a path to a file.

Basic Numeric Data Types

Integers

An data type is the same as an integer as defined mathematically. It is a whole number, i.e. not a fraction, and can be position or negative. The first digit may be preceded by a — or + to indicate it’s sign, although a + is implied if nothing is specified.

Real Numbers

The data type is a «real number». It can be an , 0 , or a fraction written as a decimal. Like integers, real numbers can be positive or negative, as indicated by a sign preceding the first digit.

Ratios

The data type specifies a relationship between two numbers, specifically two positive s. Although ratios can be written in different ways in mathematics, in CSS they are always written as / .

Ratio data types are typically used in media queries to target device aspect ratios.

Percentages

data type is made up of a followed by a % sign. It represents a value that is a fraction of some other value with it’s own data type. Therefore, we can have different kinds of the percentage data type, depending on what data type the value is.

Dimensional Data Types

Dimensions are numeric data types, specifically s, but qualified by a unit of measurement. They are written as a followed by the unit identifier. When the is 0 , however, it can be written without it’s unit.

Distances

The data type represents units of distance. There are two types of length units.

  • Absolute units, for example px , cm , and pt , are fixed and (mostly) relate to some physical measurement. Once they are declared, their size cannot be altered by changing the font size of a containing element.
  • Relative units, for example em , rem , and the viewport units, do not have an objective measurement. Instead, their actual size is determined by the size of a parent element. This means that their size can be altered by changing the sizing of that dependent element.

Angles

  • The deg unit represents the angle in Degrees. There are 360 degrees in a full circle.
  • The grad unit represents the angle in Gradians. There are 400 gradians in a full circle.
  • The rad unit represents the angle in Radians. There are 2πrad in a full circle (roughly 57.29rad).
  • The turn unit represents the angle in Turns. There is 1 turn in a full circle.

These units can be positive or negative, denoting if the turn is happening clockwise or anti-clockwise, respectively. Below is an example of how a 90 degrees clockwise turn can be written in each of these units.

Duration

The data type represents a unit of time. There are two units we can use to define duration.

  • The s unit represents a Second.
  • The ms units represents a Millisecond. There are 1000 milliseconds in one second.

Frequency

The data type represents the sound frequency. There are two units we can use to define frequency.

  • The kHz unit represents a KiloHertz.
  • The Hz units represents a Hertz. There are 1000 KiloHertz in one Hertz.

Resolution

The data type represents resolution of the user’s current device. The resolution itself is the size of a single «dot». The size of this dot is calculated by indicating how many of them will fit in a CSS inch, centemetre, or pixel. Depending on which CSS unit we are using, we can specify resolution in one of four units.

  • The dpi unit represents a represents how many dots will fit in a CSS Inch.
  • The dpcm unit represents a represents how many dots will fit in a CSS Centemetre.
  • The dppx unit represents a represents how many dots will fit in a CSS Pixel.

Other Data Types

Colours

The data type is used to define a colour value. The data type can be one of two formats.

  • A keyword, which can either one of the pre-defined colours (e.g. cornflowerblue ), the transparent keyword, or the currentColor keyword.
  • A numeric value using one of the colour notations; #rgb rgb() , rgba() , hsl() , hsla() .

Below is an example of how we can achieve the colour black using these different formats.

Images

The data type represents a 2D image. It can be one of three formats.

  • A URL reference, specified using the data type.
  • An element in the document, using the element() function. (Note — This function is has very limited support).
  • A gradient function, using the data type.

Position

data type denotes the position of an element within a containing area or element. It can be one of three other data types —

  • A keyword of either top , right , bottom , left , or center .
  • A length value.
  • A percentage, specifically , value.

Below is an example of how to achieve getting a background image (100x100px) to be positioned in the bottom right hand corner of it’s container (300x300px) —

Dppx в CSS

CSS – это формальный язык, служащий для описания оформления внешнего вида документа, созданного с использованием языка разметки (HTML, XHTML, XML). Название происходит от английского Cascading Style Sheets, что означает «каскадные таблицы стилей».

Зачем используется CSS

Назначение CSS – отделять то, что задает внешний вид страницы, от ее содержания. Если документ создан только с использованием HTML, то в нем определяется не только каждый элемент, но и способ его отображения (цвет, шрифт, положение блока и т. д.). Если же подключены каскадные таблицы стилей, то HTML описывает только очередность объектов. А за все их свойства отвечает CSS. В HTML достаточно прописывать класс, не перечисляя все стили каждый раз.

  • обеспечивает относительно простую и быструю разработку, потому что однажды созданное оформление можно применять ко многим страницам;
  • повышает гибкость и удобство редактирования – достаточно внести правку в CSS, чтобы оформление изменилось везде;
  • делает код более простым, снижая повторяемость элементов. Его проще читать программистам и поисковым ботам;
  • ускоряет время загрузки, потому что CSS может кэшироваться при первом открытии, а в последующих считываются только структура и данные;
  • увеличивает количество визуальных решений для представления содержимого;
  • обеспечивает возможность легко применять к одному документу разные стили (например, создавать адаптированную версию для мобильных устройств или специальные стили для слабовидящих).

То есть каскадные таблицы служат не только для воплощения дизайна, но и кардинально меняют подход к сайтостроению, упрощая труд разработчиков и обеспечивая гибкость реализации. Вот для чего нужен CSS.

Развитие CSS

Необходимость разработки CSS была признана консорциумом W3C в 1990-х годах. В 1996 году был принят стандарт CSS1, позволяющий изменять параметры шрифта, цвет, атрибуты текста, выравнивания и отступы. В 1998 году состоялся выход CSS2, добавивший возможности использования блочной верстки, звуковых таблиц, генерируемого содержания, указателей, страничных носителей. Версия CSS3 заметно увеличила возможности стилей: стало доступным создание анимированных элементов без использования JavaScript, появилась поддержка сглаживания, теней, градиентов и т. д. Спецификация была разделена на модули, каждый из которых стал развиваться обособленно. С 2011 года ведется разработка модулей CSS4. Возможности пока описаны в черновых вариантах.

Структура языка

CSS можно охарактеризовать простыми словами как набор правил, описывающих, как должен выглядеть элемент.

Правило состоит из селектора и блока объявлений.

Селекторы

Селектор сообщает, к какому элементу будут применены описываемые в CSS свойства стиля. В качестве селектора может выступать любой тег, которому задается форматирование (размер, цвет и т. д.). Если для тега нужно задать разные стили или применить один для отличных элементов, используются классы и запись вида «Тег.Класс <свойство: значение;>». Имя класса задается латиницей, может содержать подчеркивание или дефис. Если не указывать тег, а начинать запись с «.Класс», то можно использовать правило для любого тега. Если перечислять несколько классов для одного тега, к нему применятся все описанные стили. Идентификатор задает уникальное имя элемента для изменения стиля или обращения с помощью скрипта. Запись «#Идентификатор <свойство: значение;>». Название идентификатора состоит из букв латинского алфавита, допустимо использовать дефис и подчеркивание. Чтобы применить идентификатор к конкретному тегу, указывается его имя, потом без пробела и через знак решетки название идентификатора.

Блок объявлений

Блок объявлений состоит из пар «свойство: значение» (запись всегда черед двоеточие), размещенных в фигурных скобках. Записи заканчиваются точкой с запятой. CSS нечувствителен к табуляции, пробелам, регистру. Выбор способа записи (столбиком с отступами или просто в строчку) остается на усмотрение разработчика. Если для одного селектора прописаны разные значения для одного свойства, то приоритет отдается нижней записи.

Подключение CSS

CSS можно связать с HTML несколькими способами:

  • внутри тега с помощью атрибута style. При этом нет нужды указывать селектор;
  • добавить тег с атрибутом type=»text/css»;
  • подключить внешнюю таблицу стилей:
  • .

Третий способ является наиболее популярным и рекомендуемым, потому что позволяет в полной мере пользоваться преимуществами разделения формы и содержания, обеспечиваемого с помощью CSS.

CSS вьюпорт единицы измерения: быстрый старт

Дата публикации: 2020-04-04

От автора: с первого показа вьюпорт единиц в CSS прошло несколько лет. Это реально адаптивные единицы измерения длины, их значение меняется под размеры окна браузера. Если вы слышали о них, но никогда не вдавались в детали, эта статья для вас.

Единицы измерения и их значение

В CSS есть 4 типа вьюпорт единиц: vh, vw, vmin и vmax.

Viewport height (vh) – основаны на высоте вьюпорта. Значение 1vh равно 1% высоты вьюпорта.

Viewport width (vw) – основаны на ширине вьюпорта. Значение 1vw равно 1% ширины вьюпорта.

Viewport minimum (vmin) – основаны на минимальной стороне вьюпорта. Если высота вьюпорта меньше ширины, значение 1vmin будет равно 1% от высоты. Точно так же если ширина меньше высоты, то 1vmin будет равен 1% от ширины вьюпорта.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Viewport maximum (vmax) – основаны на большой стороне вьюпорта. Если высота вьюпорта больше ширины, то значение 1vmax будет равно 1% от высоты вьюпорта. Если ширина вьюпорта больше высоты, то 1vmax будет равен 1% от ширины.

Давайте посмотрим, какие значения мы получим в разных ситуациях:

Если вьюпорт 1200px в ширину и 1000px в высоту, то значение 10vw будет равно 120px, а 10vh – 100px. Ширина вьюпорта больше высоты, поэтому 10vmax будет равно 120px, а 10vmin – 100px.

Если повернуть устройство, чтобы ширина стала 1000px, а высота 1200px, то 10vh будет равно 120px, а 10vw превратится в 100px. Интересно, но 10vmax так и останется 120px, потому что теперь значение определяется по высоте вьюпорта. Значение 10vmin также останется 100px.

Если сузить окно браузера до 1000px в ширину и 800px в высоту, то 10vh будет 80px, а 10vw будет 100px. Точно так же значение 10vmax станет 100px, и 10vmin – 80px.

На данный момент вьюпорт единицы для вас могут несильно отличаться от процентов, однако разница велика. В случае с процентами ширина и высота дочерних элементов зависят от родительского блока. Пример:

В демо видно, как ширина первого дочернего элемента занимает 80% ширины от родителя. У второго дочернего элемента ширина равна 80vw, что делает его шире родителя.

Применение вьюпорт единиц измерения

Эти единицы основаны на размерах вьюпорта, поэтому их очень удобно использовать в ситуациях, когда ширина, высота или размеры элементов должны изменяться в зависимости от размеров вьюпорта.

Полноэкранные фоновые изображения и секции

В сети довольно часто можно встретить фоновые изображения на элементах, которые занимают весь экран. Точно так же можно сделать в дизайне сайта, чтобы отдельная секция о товаре или услуге занимала весь экран. В таких случаях можно задать ширину элементов в 100%, а высоту в 100vh.

Разберем следующий пример HTML:

CSS ниже растянет секцию под фоновое изображение на всю ширину:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Идеально подходящие заголовки

Вы могли слышать или даже использовать jQuery плагин FitText . С помощью этого плагина можно масштабировать заголовки таким образом, чтобы они занимали всю ширину родительского элемента. Как я сказала раньше, значение вьюпорт единиц напрямую зависит от размеров вьюпорта. То есть если указывать font-size заголовков во вьюпорт единицах, то они идеально будут подходить под каждый экран. Если изменится ширина вьюпорта, браузер автоматически изменит заголовок. Нужно лишь определить правильное первоначальное значение для font-size.

Главная проблема с font-size и вьюпорт единицами заключается в том, что размер текста будет сильно варьироваться в зависимости от вьюпорта. Например, font-size со значением 8vw сделает заголовок размером в 96px для вьюпорта с шириной 1200px, 33px для ширины в 400px и 154px для ширины вьюпорта в 1920px. Шрифт может быть, как слишком большим, так и слишком маленьким для удобного чтения. Более подробно прочитать о правильной установке размеров текста с помощью единиц измерения и функции calc() можно в замечательной статье о типографике на вьюпорт единицах .

Легкое центрирование элементов

Вьюпорт единицы могут очень сильно помочь, когда необходимо поместить элемент точно в цент экрана пользователя. Если высота элемента известна, то нужно всего лишь задать верхнее и нижнее значение свойства margin в [(100 — height)/2]vh.

Forums

This topic contains 7 replies, has 5 voices, and was last updated by oviliz 4 years, 9 months ago.

I have a subtle pattern as background image. One image for regular resolutions and one double the size for retina displays. i wanted to display the retina background image starting with a resolution of 1.5 . But no matter what i try either with 1.5 dppx or without:

Chrome is throwing a recommendation at me in the console:

Consider using ‘dppx’ units instead of ‘dpi’, as in CSS ‘dpi’ means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual ‘dpi’ of a screen. In media query expression: (-webkit-min-device-pixel-ratio: 1.5), not all, (min-resolution: 144dpi)

No matter if i leave (min-resolution: 1.5dppx), in or cut it out. What is the reason for that behaviour? Safari isn’t showing anything similar. :/ Best regards Ralf

Safari isn’t showing anything similar.

Peter Beverloo

Published on June 22nd, 2012 in Google Chrome, Last Week, tech, WebKit. Version: Chrome 21

A total of 1,814 commits landed in the projects last week, 625 for WebKit and 1,189 for Chromium.

Web Inspector switched to using Chas Emerick’s jsdifflib for creating diffs between revisions. A dock-to-right icon has been added to the status bar, the settings screen has been rearranged and the list of local modifications may now be cleared. Furthermore, removing a result in the Profiles Panel can now be done through a context menu, and JavaScriptCore now supports breaking from native callbacks.

Following Chromium for Mac, Tony made sure that the Windows and Linux versions now also support color profiles in images, by utilizing ICCJPEG and QCMS libraries.

Animations and transitions may now be applied to :first-element pseudo-elements. The accept attribute of input elements now accepts file extensions and accuracy of state tracking in radio button groups has been improved. David Barr is making good progress on implementing CSS’ image-resolution property, also adding support for the dppx, dpi and dpcm units.

The Blob.slice method has lost its prefix. The document.documentURI property is now read-only, the overset property of Named Flows will return true when no region chain has been attached and the Pointer Lock implementation was updated with the pointerLockElement property, and the requestPointerLock and exitPointerLock methods.

Luke landed the initial implementation of CSS Variables in WebKit. While it’s disabled by default and not enabled on any platform yet, it’s very exciting that work is on its way.

Other changes which occurred last week:

  • Garden-o-matic has been updated to feature support for the Apple Mac port.
  • Chromium’s threaded compositor now properly supports fixed positioned objects.
  • Goeffrey improved performance of JavaScriptCore’s garbage collection by 1.7 times!
  • Support for the font-feature-settings property is now available for Chromium on Mac.
  • More IndexedDB error codes have been aligned with the specification.
  • Padding and margins can’t cause integer overflows in the block layout anymore.
  • Chromium’s new tab button will receive a minor graphical update.
  • Developers working on extensions which don’t use the second manifest version will now be shown a warning.
  • The maximum number of concurrent SPDY streams has been increased.
  • Shadow DOM and Scoped Stylesheets are now enabled for Chrome Extensions.
  • Silvia is still going strong on Chrome’s media element UI updates, more on that later!

There will only be a brief update next week, while there won’t be any at all the week after.

23 Responses to “Color Profiles, the DPPX, DPI and DPCM units and CSS Variables”

Both comments and pings are currently closed.

Kevin Sweeney

Since Blob.slice() used to be implemented, but was then removed in such a way that backward compatibility broke (http://goo.gl/U9mE5), what’s the best order to check support and end up with the most recent implementation?

CSS 与 HTML5 响应式图片 | w3ctech

[…] 「4」David Barr 在 Webkit 实现了 CSS3「image-resolution」属性, 并且支持了 dppx,dpi 和 dpcm 单位,具体 Chrome 哪个版本开始支持可以自行测试,相信 Media Queries 中很快也会支持了。 […]

CSS 与 HTML5 响应式图片 _ 美术的那点事!

[…] 「4」David Barr 在 Webkit 实现了 CSS3「image-resolution」属性, 并且支持了 dppx,dpi 和 dpcm 单位,具体 Chrome 哪个版本开始支持可以自行测试,相信 Media Queries 中很快也会支持了。 […]

CSS 与 HTML5 响应式图片 « 人人都是产品经理

[…] 「4」David Barr 在 Webkit 实现了 CSS3「image-resolution」属性, 并且支持了 dppx,dpi 和 dpcm 单位,具体 Chrome 哪个版本开始支持可以自行测试,相信 Media Queries 中很快也会支持了。 […]

read.guoruEi » Blog Archive » CSS 与 HTML5 响应式图片

[…] 「4」David Barr 在 Webkit 实现了 CSS3「image-resolution」属性, 并且支持了 dppx,dpi 和 dpcm 单位,具体 Chrome 哪个版本开始支持可以自行测试,相信 Media Queries 中很快也会支持了。 […]

CSS 与 HTML5 响应式图片 | 科技改变世界,点滴创造生活

[…] 「4」David Barr 在 Webkit 实现了 CSS3「image-resolution」属性, 并且支持了 dppx,dpi 和 dpcm 单位,具体 Chrome 哪个版本开始支持可以自行测试,相信 Media Queries 中很快也会支持了。 […]

CSS 与 HTML5 响应式图片

[…] 「4」David Barr 在 Webkit 实现了 CSS3 image-resolution 属性, 并且支持了 dppx,dpi 和 dpcm 单位,具体 Chrome 哪个版本开始支持可以自行测试,相信 Media Queries 中很快也会支持了。 […]

CSS 與 HTML5 回應式圖片 — ::Game2.tw::台灣遊戲Blog — 台灣遊戲,網頁遊戲資訊博客,提供最新網頁遊戲報導和免費遊戲資料

[…] 「4」David Barr 在 Webkit 實現了 CSS3「image-resolution」屬性, 並且支援了 dppx,DPI 和 dpcm 單位,具體 Chrome 哪個版本開始支援可以自行測試,相信 Media Queries 中很快也會支援了。 […]

CSS 与 HTML5 响应式图片 | 5迷3道 | HTML5和CSS3的真材实料

[…] 「4」David Barr 在 Webkit 实现了 CSS3 image-resolution 属性, 并且支持了 dppx,dpi 和 dpcm 单位,具体 Chrome 哪个版本开始支持可以自行测试,相信 Media Queries 中很快也会支持了。 […]

火枪手团队博客 » CSS 与 HTML5 响应式图片

[…] 「4」David Barr 在 Webkit 实现了 CSS3「image-resolution」属性, 并且支持了 dppx,dpi 和 dpcm 单位,具体 Chrome 哪个版本开始支持可以自行测试,相信 Media Queries 中很快也会支持了。 […]

CSS 与 HTML5 响应式图片

[…] 「4」David Barr 在 Webkit 实现了 CSS3「image-resolution」属性, 并且支持了 dppx,dpi 和 dpcm 单位,具体 Chrome 哪个版本开始支持可以自行测试,相信 Media Queries 中很快也会支持了。 […]

CSS 与 HTML5 响应式图片 – Zero design

[…] 「4」David Barr 在 Webkit 实现了 CSS3 image-resolution 属性, 并且支持了 dppx,dpi 和 dpcm 单位,具体 Chrome 哪个版本开始支持可以自行测试,相信 Media Queries 中很快也会支持了。 […]

CSS与HTML5响应式图片 | 火舞

[…] 「4」David Barr 在 Webkit 实现了 CSS3 image-resolution 属性, 并且支持了 dppx,dpi 和 dpcm 单位,具体 Chrome 哪个版本开始支持可以自行测试,相信 Media Queries 中很快也会支持了。 […]

【转】CSS与HTML5响应式图片 | Dev.Conris — Team Knowledge Sharing

[…] 「4」David Barr 在 Webkit 实现了 CSS3 image-resolution 属性, 并且支持了 dppx,dpi 和 dpcm 单位,具体 Chrome 哪个版本开始支持可以自行测试,相信 Media Queries 中很快也会支持了。 […]

CSS 与 HTML5 响应式图片 — 程序猿的那点事

[…] 「4」David Barr 在 Webkit 实现了 CSS3「image-resolution」属性, 并且支持了 dppx,dpi 和 dpcm 单位,具体 Chrome 哪个版本开始支持可以自行测试,相信 Media Queries 中很快也会支持了。 […]

CSS 与 HTML5 响应式图片 | life

[…] 「4」David Barr 在 Webkit 实现了 CSS3「image-resolution」属性, 并且支持了 dppx,dpi 和 dpcm 单位,具体 Chrome 哪个版本开始支持可以自行测试,相信 Media Queries 中很快也会支持了。 […]

天一生水 | CSS 与 HTML5 响应式图片

[…] 「4」David Barr 在 Webkit 实现了 CSS3 image-resolution 属性, 并且支持了 dppx,dpi 和 dpcm 单位,具体 Chrome 哪个版本开始支持可以自行测试,相信 Media Queries 中很快也会支持了。 […]

HTML5SALON沙龙

[…] 「4」David Barr 在 Webkit 实现了 CSS3「image-resolution」属性, 并且支持了 dppx,dpi 和 dpcm 单位,具体 Chrome 哪个版本开始支持可以自行测试,相信 Media Queries 中很快也会支持了。 […]

CSS 与 HTML5 响应式图片 | 基爱崖blog

[…] 「4」David Barr 在 Webkit 实现了 CSS3 image-resolution 属性, 并且支持了 dppx,dpi 和 dpcm 单位,具体 Chrome 哪个版本开始支持可以自行测试,相信 Media Queries 中很快也会支持了。 […]

CSS 与 HTML5 响应式图片 | w3cBeta

[…] 「4」David Barr 在 Webkit 实现了 CSS3「image-resolution」属性, 并且支持了 dppx,dpi 和 dpcm 单位,具体 Chrome 哪个版本开始支持可以自行测试,相信 Media Queries 中很快也会支持了。 […]

分享一个非常有用的HTML5+CSS3响应式图片案例 – 欲思博客

[…] 「4」David Barr在 Webkit 实现了 CSS3 image-resolution 属性, 并且支持了 dppx,dpi 和 dpcm 单位,具体 Chrome 哪个版本开始支持可以自行测试,相信 Media Queries 中很快也会支持了。 […]

干货!CSS与HTML5响应式图片案例 – 精品代码jphtml.com

[…] 「4」David Barr在 Webkit 实现了 CSS3 image-resolution 属性, 并且支持了 dppx,dpi 和 dpcm 单位,具体 Chrome 哪个版本开始支持可以自行测试,相信 Media Queries 中很快也会支持了。 […]

CSS 与 HTML5 响应式图片 | 老顽童博客 | 关注前端设计和开发的一个2B青年

[…] 「4」David Barr 在 Webkit 实现了 CSS3「image-resolution」属性, 并且支持了 dppx,dpi 和 dpcm 单位,具体 Chrome 哪个版本开始支持可以自行测试,相信 Media Queries 中很快也会支持了。 […]

Categories

Weblog Meta

Archives

Latest Articles

  • Element.matches(), the Cr tool an.. Wednesday 18 December 2013 — 2 comments
  • Web Animations Engine, Promises a.. Tuesday 3 December 2013 — no comments
  • Faster Web Font Downloads, Disabl.. Wednesday 27 November 2013 — no comments

My Whereabouts

About this site

The personal weblog and portfolio of Peter Beverloo, with content that mostly focusses on his work, interests and hobbies.

Responsive Images 101, Part 8: CSS Images

Written by Jason Grigsby on June 3, 2015

Most of the time when people refer to responsive images, they are referring to inline images, not CSS images.

This is because before

and srcset there were no good solutions for inline responsive images. When it comes to CSS images, we could always use media queries. So why worry?

But now it is time to revisit responsive CSS images and look at the solutions anew based on what we’ve learned about inline images.

image-set() for resolution switching

Just like when we’re working with inline images, one of the first questions we’ll need to ask ourselves is whether we’re dealing with the resolution switching or art direction use case.

For resolution switching, we should strive to provide the browser with options and let the browser pick the best possible image. The browser is in a better position to know what image will work best based on user preference, network conditions, etc.

To provide the browser with options, we should use the image-set() syntax.

You may notice some similarity between image-set() and srcset. In fact, srcset was modeled after image-set().

Like srcset, image-set’s value contains a comma-separated list of image URIs along with a display density descriptor. If a display density descriptor isn’t provided, it is assumed to be 1x.

However, image-set() does not support width descriptors yet. The plan is to refine image-set() to provide feature parity with srcset.

While most of the examples you will see for image-set() show it applied to background-image, it can be applied to any CSS property that accepts images.

image-set(): The forgotten responsive images standard

image-set() was the first responsive images specific syntax, and as mentioned, it was the foundation for srcset.

However, because we had solutions for CSS responsive images using media queries, image-set() was ignored by nearly everyone. The Responsive Images Community Group didn’t spend much time discussing it. Browsers didn’t prioritize implementing it.

Once we were nearing completion of the

and srcset standards, we looked around and realized that we had neglected image-set(). Work is underway to increase the functionality of image-set() to bring it in line with srcset.

But as of publication, despite being the first responsive images standard, browser support for image-set() is lacking. It is available with a webkit prefix in Chrome, Opera, and Safari. Neither Firefox nor Microsoft have implemented it yet.

So why include it in this Responsive Images 101 series?

Because image-set() is the correct solution for resolution switching. When image-set() is widely supported, we should use it for all of the same reasons we use srcset instead of

with the media attribute when we’re dealing with resolution switching.

Until image-set() is widely supported, you’ll probably end up using the CSS art direction solution for resolution switching.

Art direction

What is the CSS solution for art direction? Media queries.

It’s that simple. In fact, I’m going to assume you know media queries so no syntax sample here.

But as long as I’ve got your ear, make sure your media queries for images don’t overlap or you’ll end up with duplicate downloads. If you have any doubts, check out Tim Kadlec’s Media Query & Asset Downloading Results.

Resolution media queries

If you want to support high density displays in art direction, you’ll probably want to use the new resolution media queries.

The resolution media query allows you to apply specific CSS rules to devices that meet the display density that you define.

(Much thanks to CSS Tricks for this syntax sample.)

The first thing you’ll notice in the syntax above is that we’re including a -webkit prefixed media query. This is for devices that support the old device-pixel-ratio syntax. The only devices that got in the wild with this syntax used the -webkit prefix which is why it is the only one listed.

The syntax going forward is the resolution media query. In our example, we’re using min-resolution, but as you probably guessed, there is a complimentary max-resolution feature that can be used instead.

The resolution media query can check one of three things:

  • dpi — dots per inch
  • dpcm — dots per centimeter
  • dppx — dots per px unit

The first two are fairly straight-forward, but I found dppx confusing. The Mozilla Developer Network documentation defines ddpx thusly:

This unit represents the number of dots per px unit. Due to the 1:96 fixed ratio of CSS in to CSS px, 1dppx is equivalent to 96dpi, that corresponds to the default resolution of images displayed in CSS as defined by image-resolution.

Confused? I certainly was when I first read it.

Here’s the way I’ve begun to think about it, the idea of 1x, 2x, 3x, etc. is based on an imprecision. The value of 1x on some devices is different than others because some devices are 72dpi or 96dpi or whatever.

But from a CSS perspective, these differences don’t matter. The CSS Working Group has decided that there will always be a 1:96 fixed ratio of CSS inches to CSS pixels.

So while 1x might leave things up to interpretation because of 72dpi vs. 96dpi screens, 1dppx will always be what you and I think of as “1x”.

You may be asking yourself, why was 1x sufficient for srcset and image-set, but for min-resolution, it was necessary to use dppx?

I don’t know. All I know is that you can think of 1dppx as 1x, 2dppx as 2x, and so on. At this point, I’ve just accepted the inconsistency and decided to move on with my life. I recommend you do the same. ��

Now comes the hard part

Believe it or not, responsive images syntax is the easy part. In Part 9, we’ll discuss the vexing challenge of picking your image breakpoints.

Responsive Images 101 Series

Jason Grigsby is one of the co-founders of Cloud Four, Mobile Portland and Responsive Field Day. He is the author of Progressive Web Apps from A Book Apart. Follow him at @grigs.

Never miss an article!

Turn Off Notifications

Get Weekly Digests

Get Weekly Digests

Comments

“Until image-set() is widely supported, you’ll probably end up using the CSS art direction solution for resolution switching.”

What? How? Didn’t you mean, we’ll end up using resolution media queries instead?

Replies

No, I realize this is a little confusing, but from a use case perspective, resolution switching covers both scenarios of display density and also the same image displayed in the page at different sizes (what we typically think of when we say responsive images).

So the resolution media query is great for 1x, 2x, etc, but won’t help you provide a 200×200 image source if the viewport is smaller than 400px wide and a 500×500 image source if the viewport is smaller than 800 pixels, etc. For that, you just need same media queries that you use to modify layout (max-width, min-width, etc.).

Replies

I see (I assumed resolution switching == display density.) However, the current -webkit-image-set() implementation is restricted to display density, so its functionality can be achieved using resolution media queries, or?

Replies

The difference between image-set and resolution media queries is very similar to the difference between srcset and picture using the media attribute.

When using image-set or srcset, you’re giving the browser options and letting the browser choice the best source based on whatever heuristics it can use to make a smart decision.

When using the media attribute on picture source elements or when using the resolution media query, you’re dictating to the browser what source it MUST use.

Whenever we’re dealing with the resolution switching use case, I have a strong bias for letting the browser have choice as the browser is in a better position to know user preference.

You should put all the responsive image posts into an ALA book!

Jason really worth content on responsive images.
I want to know that is it any possible way to make the image with IMG tag a responsive one? Because main product photos and few fancybox gallery need image tag instead of calling from css. And when viewed on ipad or mobile device need to resize image size so that it look like gallery. Facing the issue mainly in gallery as have to call big size image for monitors and have to call the same for mobile small screens also.
Page I am talking about is Brass Battery Terminals page of my website.
Expecting helpful reply.

Replies

For inline images, you should look at srcset and sizes. Check out the other articles in this 10-part series. Links are at the end of the article.

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 5340546168918e29 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

Единицы измерения: px, em, rem и другие

В этом очерке я постараюсь не только рассказать о различных единицах измерения, но и построить общую картину – что и когда выбирать.

Пиксели: px

Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.

Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.

Пиксели могут быть дробными, например размер можно задать в 16.5px . Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px , его нужно разделить на три части – волей-неволей появляются 33.333. px . При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.

Для мобильных устройств, у которых много пикселей на экране, но сам экран маленький, чтобы обеспечить читаемость, браузер автоматически применяет масштабирование.

  • Главное достоинство пикселя – чёткость и понятность
  • Другие единицы измерения – в некотором смысле «мощнее», они являются относительными и позволяют устанавливать соотношения между различными размерами

Существуют также «производные» от пикселя единицы измерения: mm , cm , pt и pc , но они давно отправились на свалку истории.

Вот, если интересно, их значения:

  • 1mm (мм) = 3.8px
  • 1cm (см) = 38px
  • 1pt (типографский пункт) = 4/3 px
  • 1pc (типографская пика) = 16px

Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.

В реальной жизни сантиметр – это эталон длины, одна сотая метра. А пиксель может быть разным, в зависимости от экрана.

Но в формулах выше под пикселем понимается «сферический пиксель в вакууме», точка на «стандартизованном экране», характеристики которого описаны в спецификации.

Поэтому ни о каком соответствии cm реальному сантиметру здесь нет и речи. Это полностью синтетическая и производная единица измерения, которая не нужна.

Относительно шрифта: em

1em – текущий размер шрифта.

Можно брать любые пропорции от текущего шрифта: 2em , 0.5em и т.п.

Размеры в em – относительные, они определяются по текущему контексту.

Например, давайте сравним px с em на таком примере:

24 пикселей – и в Африке 24 пикселей, поэтому размер шрифта в

А вот аналогичный пример с em вместо px :

Так как значение в em высчитывается относительно текущего шрифта, то вложенная строка в 1.5 раза больше, чем первая.

Выходит, размеры, заданные в em , будут уменьшаться или увеличиваться вместе со шрифтом. С учётом того, что размер шрифта обычно определяется в родителе, и может быть изменён ровно в одном месте, это бывает очень удобно.

Что такое «размер шрифта»? Это вовсе не «размер самой большой буквы в нём», как можно было бы подумать.

Размер шрифта – это некоторая «условная единица», которая встроена в шрифт.

Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание. Но при этом «хвосты» букв, таких как р , g могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.

В спецификации указаны также единицы ex и ch, которые означают размер символа «x» и размер символа «0» .

Эти размеры присутствуют в шрифте всегда, даже если по коду этих символов в шрифте находятся другие значения, а не именно буква «x» и ноль «0» . В этом случае они носят более условный характер.

Эти единицы используются чрезвычайно редко, так как «размер шрифта» em обычно вполне подходит.

Проценты %

Проценты % , как и em – относительные единицы.

Когда мы говорим «процент», то возникает вопрос – «Процент от чего?»

Как правило, процент будет от значения свойства родителя с тем же названием, но не всегда.

Это очень важная особенность процентов, про которую, увы, часто забывают.

Отличный источник информации по этой теме – стандарт, Visual formatting model details.

Вот пример с % , он выглядит в точности так же, как с em :

В примере выше процент берётся от размера шрифта родителя.

А вот примеры-исключения, в которых % берётся не так:

margin-left При установке свойства margin-left в % , процент берётся от ширины родительского блока, а вовсе не от его margin-left . line-height При установке свойства line-height в % , процент берётся от текущего размера шрифта, а вовсе не от line-height родителя. Детали по line-height и размеру шрифта вы также можете найти в статье Свойства font-size и line-height. width/height Для width/height обычно процент от ширины/высоты родителя, но при position:fixed , процент берётся от ширины/высоты окна (а не родителя и не документа). Кроме того, иногда % требует соблюдения дополнительных условий, за примером – обратитесь к главе Особенности свойства height в %.

Единица rem: смесь px и em

Итак, мы рассмотрели:

  • px – абсолютные, чёткие, понятные, не зависящие ни от чего.
  • em – относительно размера шрифта.
  • % – относительно такого же свойства родителя (а может и не родителя, а может и не такого же – см. примеры выше).

Может быть, пора уже остановиться, может этого достаточно?

Э-э, нет! Не все вещи делаются удобно.

Вернёмся к теме шрифтов. Бывают задачи, когда мы хотим сделать на странице большие кнопки «Шрифт больше» и «Шрифт меньше». При нажатии на них будет срабатывать JavaScript, который будет увеличивать или уменьшать шрифт.

Вообще-то это можно сделать без JavaScript, в браузере обычно есть горячие клавиши для масштабирования вроде Ctrl + + , но они работают слишком тупо – берут и увеличивают всю страницу, вместе с изображениями и другими элементами, которые масштабировать как раз не надо. А если надо увеличить только шрифт, потому что посетитель хочет комфортнее читать?

Какую единицу использовать для задания шрифтов? Наверно не px , ведь значения в px абсолютны, если менять, то во всех стилевых правилах. Вполне возможна ситуация, когда мы в одном правиле размер поменяли, а другое забыли.

Следующие кандидаты – em и % .

Разницы между ними здесь нет, так как при задании font-size в процентах, эти проценты берутся от font-size родителя, то есть ведут себя так же, как и em .

Вроде бы, использовать можно, однако есть проблема.

Попробуем использовать этот подход для
.

Есть ли способ использовать DPI в css-медиа-запросах вместо px

Количество пикселей и высота не всегда говорят всю историю. Это отлично подходит для добавления или удаления элементов с экрана, но не совсем правильно для установки правильного изображения. С отображением сетчатки на MBP окно браузера, установленное на половину экрана, будет иметь такое же количество пикселей в ширину, как и большинство машин сегодня. Тем не менее, отображаемые изображения, вероятно, будут слишком малы, если вы получите более высокий DPI.

Есть ли способ изменить изображения на основе DPI, а не на количество пикселей и высоту?

Вы можете сделать либо:

Что вы ищете, так это соотношение пикселей устройства. Потому что такие вещи, как iPhone, выглядят как экран 320 пикселей, но с макетом 640 пикселей (соотношение пикселей 2). В мультимедийных запросах используйте «отношение пикселей к устройствам». Хотя я бы не стал использовать префиксы поставщика.

Илон Маск рекомендует:  ltrim - Удаляет пробелы из начала строки
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL
Category Name Type
Textual Keywords
Custom Keywords
Quoted Strings
Resource Locators
Basic Numeric Integers
Real Numbers
Ratios
Percentages
Dimensions Distances
Angles
Duration
Frequency
Resolution
Other Colours
Images
Position