CSS справочник
Цвет
Свойство | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|---|
color | Задает цвет текста. | 1.0 | 1.0 | 3.5 | 1.0 | 3.0 | 12.0 |
opacity | Определяет уровень прозрачности для элемента. | 4.0 | 2.0 | 9.0 | 3.1 | 9.0 | 12.0 |
Фон и границы
Свойство | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|---|
background | Позволяет установить все свойства фона в одном объявлении (универсальное свойство). | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
background-attachment | Устанавливает, поведение фонового изображения во время прокрутки (фиксированное или прокручивается с остальной частью страницы). | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
background-blend-mode | Определяет режим смешивания слоя каждого фонового цвета ( и / или изображения). | 35.0 | 30.0 | 22.0 | 7.1* | Нет | Нет |
background-color | Определяет цвет фона элемента. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
background-image | Задает одно или несколько фоновых изображений для элемента. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
background-position | Задает положение (позицию) фонового изображения. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
background-repeat | Устанавливает, как будет повторяться фоновое изображение. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
background-clip | Определяет область элемента для которой будет задан задний фон. | 4.0 | 4.0 | 10.5 | 3.0 | 9.0 | 12.0 |
background-origin | Определяет как позиционируется фоновое изображение/-я относительно элемента. | 4.0 | 4.0 | 10.5 | 3.0 | 9.0 | 12.0 |
background-size | Определяет размер фонового изображения/-ий. | 4.0 1.0 -webkit- | 4.0 3.6 -moz- | 10.5 10.0 -o- | 4.1 3.0 -webkit- | 9.0 | 12.0 |
border | Позволяет установить все свойства границ в одном объявлении. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
border-bottom | Устанавливает все свойства нижней границы в одном объявлении. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
border-bottom-color | Устанавливает цвет нижней границы. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
border-bottom-left-radius | Определяет форму границы нижнего левого угла. | 5.0 4.0 -webkit- | 4.0 3.0 -moz- | 10.5 | 5.0 3.1 -webkit- | 9.0 | 12.0 |
border-bottom-right-radius | Определяет форму границы нижнего правого угла. | 5.0 4.0 -webkit- | 4.0 3.0 -moz- | 10.5 | 5.0 3.1 -webkit- | 9.0 | 12.0 |
border-bottom-style | Устанавливает стиль нижней границы. | 1.0 | 1.0 | 9.2 | 1.0 | 5.5 | 12.0 |
border-bottom-width | Устанавливает ширину нижней границы. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
border-color | Устанавливает цвет для всех границ в одном объявлении. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
border-image | Позволяет указать изображение, которое будет использовано вместо границы вокруг элемента. Свойство является универсальным и позоляет установить значения для всех border-image-* свойств в одном объявлении. | 16.0 4.0 -webkit- | 15.0 3.5 -moz- | 15 11.0 -o- | 6.0 3.1 -webkit- | 11.0 | 12.0 |
border-image-outset | Определяет величину, на которую область границы изображения выходит за пределы блока границы. | 15.0 | 15.0 | 15.0 | 6.0 | 11.0 | 12.0 |
border-image-repeat | Определяет, должна ли граница изображения быть повторена, масштабируема или растянута. | 15.0 | 15.0 | 15.0 | 6.0 | 11.0 | 12.0 |
border-image-slice | Определяет, как разделить изображение, используемое в роли изображения-границы и указанное в свойстве border-image-source. | 15.0 | 15.0 | 15.0 | 6.0 | 11.0 | 12.0 |
border-image-source | Указывает путь к изображению, которое будет использовано в качестве границы. Допускается использование градиентов вместо изображения. | 15.0 | 15.0 | 15.0 | 6.0 | 11.0 | 12.0 |
border-image-width | Задает ширину границы-изображения путем определения смещения (внутрь элемента от края границы). | 15.0 | 13.0 | 15.0 | 6.0 | 11.0 | 12.0 |
border-left | Устанавливает все свойства левой границы в одном объявлении. | 1.0 | 1.0 | 1.0 | 3.5 | 4.0 | 12.0 |
border-left-color | Устанавливает цвет левой границы. | 1.0 | 1.0 | 1.0 | 3.5 | 4.0 | 12.0 |
border-left-style | Устанавливает стиль левой границы. | 1.0 | 1.0 | 9.2 | 1.0 | 5.5 | 12.0 |
border-left-width | Устанавливает ширину левой границы. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
border-radius | Позволяет определить форму границ элемента. Это свойство является короткой записью для свойств border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius и border-top-right-radius . | 5.0 4.0 -webkit- | 4.0 3.0 -moz- | 10.5 | 5.0 3.1 -webkit- | 9.0 | 12.0 |
border-right | Устанавливает все свойства правой границы в одном объявлении. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
border-right-color | Устанавливает цвет правой границы. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
border-right-style | Устанавливает стиль правой границы. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
border-right-width | Устанавливает ширину правой границы. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
border-style | Устанавливает стиль для всех границ в одном объявлении. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
border-top | Устанавливает все свойства верхней границы в одном объявлении. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
border-top-color | Устанавливает цвет верхней границы. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
border-top-left-radius | Определяет форму границы в верхнем левом углу. | 5.0 4.0 -webkit- | 4.0 3.0 -moz- | 10.5 | 5.0 3.1 -webkit- | 9.0 | 12.0 |
border-top-right-radius | Определяет форму границы в верхнем правом углу. | 5.0 4.0 -webkit- | 4.0 3.0 -moz- | 10.5 | 5.0 3.1 -webkit- | 9.0 | 12.0 |
border-top-style | Устанавливает стиль верхней границы. | 1.0 | 1.0 | 9.2 | 1.0 | 5.5 | 12.0 |
border-top-width | Устанавливает ширину верхней границы. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
border-width | Устанавливает ширину для всех границ в одном объявлении. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
box-decoration-break | Устанавливает поведение фона и границы элемента на разрыве страницы, или для inline элементов при разрыве строки. | 45.0 -webkit- | 42 | 34.0 -webkit- | 9.0 -webkit- | Нет | Нет |
box-shadow | Добавляет одну или несколько теней к элементу. | 10.0 4.0 -webkit- | 4.0 3.5 -moz- | 10.5 | 5.1 3.1 -webkit- | 9.0 | 12.0 |
Основные свойства
Свойство | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|---|
bottom | Определяет смещение позиционированного элемента относительно нижнего края. | 1.0 | 1.0 | 6.0 | 1.0 | 5.0 | 12.0 |
clear | Определяет с какой стороны текущего элемента не допускаются плавающие элементы (у которых свойство float имеет значение left или right). | 1.0 | 1.0 | 6.0 | 1.0 | 5.0 | 12.0 |
clip | Определяет размеры абсолютно позиционированного элемента, в пределах которого содержимое будет видимым (остальное обрезается). | 1.0 | 1.0 | 7.0 | 1.0 | 8.0 | 12.0 |
display | Определяет, как должен отображаться определенный элемент HTML. | 4.0 | 3.0 | 7.0 | 3.1 | 8.0 | 12.0 |
float | Определяет будет ли элемент плавающим. | 1.0 | 1.0 | 7.0 | 1.0 | 4.0 | 12.0 |
height | Устанавливает высоту области содержимого элемента. | 1.0 | 1.0 | 7.0 | 1.0 | 4.0 | 12.0 |
left | Указывает направление смещения позиционированного элемента от левого края. | 1.0 | 1.0 | 5.0 | 1.0 | 5.5 | 12.0 |
margin | Устанавливает величину отступа от каждого края элемента в одном объявлении. | 1.0 | 1.0 | 3.5 | 1.0 | 6.0 | 12.0 |
margin-bottom | Устанавливает величину отступа от нижнего края элемента. | 1.0 | 1.0 | 3.5 | 1.0 | 6.0 | 12.0 |
margin-left | Устанавливает величину отступа от левого края элемента. | 1.0 | 1.0 | 3.5 | 1.0 | 6.0 | 12.0 |
margin-right | Устанавливает величину отступа от правого края элемента. | 1.0 | 1.0 | 3.5 | 1.0 | 6.0 | 12.0 |
margin-top | Устанавливает величину отступа от верхнего края элемента. | 1.0 | 1.0 | 3.5 | 1.0 | 6.0 | 12.0 |
max-height | Устанавливает максимальную высоту элемента. | 1.0 | 1.0 | 7.0 | 2.0.2 | 7.0 | 12.0 |
max-width | Устанавливает максимальную ширину элемента. | 1.0 | 1.0 | 7.0 | 2.0.2 | 7.0 | 12.0 |
min-height | Устанавливает минимальную высоту элемента. | 1.0 | 1.0 | 4.0 | 2.0.2 | 7.0 | 12.0 |
min-width | Устанавливает минимальную ширину элемента. | 1.0 | 1.0 | 4.0 | 2.0.2 | 7.0 | 12.0 |
overflow | Указывает, что произойдёт, если содержимое переполняет размеры элемента. | 1.0 | 1.0 | 7.0 | 1.0 | 4.0 | 12.0 |
overflow-x | Указывает, что произойдёт, если содержимое переполняет левый, либо правый край элемента. | 4.0 | 3.5 | 9.5 | 3.0 | 9.0 | 12.0 |
overflow-y | Указывает, что произойдёт, если содержимое переполняет верхний, либо нижний край элемента. | 4.0 | 3.5 | 9.5 | 3.0 | 9.0 | 12.0 |
padding | Устанавливает величину внутренних отступов элемента в одном объявлении. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
padding-bottom | Устанавливает нижний внутренний отступ элемента. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
padding-left | Устанавливает левый внутренний отступ элемента. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
padding-right | Устанавливает правый внутренний отступ элемента. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
padding-top | Устанавливает верхний внутренний отступ элемента. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
position | Указывает какой тип позиционирования используется для элемента (статический, относительный, абсолютный или фиксированный). | 1.0 | 1.0 | 4.0 | 1.0 | 7.0 | 12.0 |
right | Указывает направление смещения позиционированного элемента от правого края. | 1.0 | 1.0 | 5.0 | 1.0 | 5.5 | 12.0 |
top | Указывает направление смещения позиционированного элемента от верхнего края. | 1.0 | 1.0 | 6.0 | 1.0 | 5.0 | 12.0 |
visibility | Определяет, является ли элемент видимым. | 1.0 | 1.0 | 4.0 | 1.0 | 4.0 | 12.0 |
width | Устанавливает ширину области содержимого элемента. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
vertical-align | Определяет вертикальное позиционирование встроенных строчных (inline) элементов или ячеек таблицы (table-cell). | 1.0 | 1.0 | 4.0 | 1.0 | 4.0 | 12.0 |
z-index | Определяет порядок расположения позиционированных элементов по оси Z (порядок наложения элементов друг на друга). | 1.0 | 3.0 | 4.0 | 1.0 | 4.0 | 12.0 |
Flexible Box Layout
Свойства для работы с flex-контейнером
Свойство | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|---|
align-content | Определяет как браузер распределяет пространство между и вокруг флекс элементов вдоль поперечной оси контейнера (вертикально), или производит выравнивание всего макета сетки по оси столбца grid-контейнера. | 21.0 | 28.0 | 12.1 | 9.0 7.0 -webkit- | 11.0 | 12.0 |
align-items | Производит выравнивание всех элементов внутри флекс контейнера вдоль поперечной оси, или производит выравнивание всех элементов макета сетки по оси столбца. | 21.0 | 20.0 | 12.1 | 9.0 7.0 -webkit- | 11.0 | 12.0 |
flex-direction | Указывает направление, в соответствии с которым располагаются флекс элементы внутри контейнера. | 29.0 21.0 -webkit- | 28.0 18.0 -moz- | 17.0 | 9.0 6.1 -webkit- | 11.0 | 12.0 |
flex-flow | Свойство позволяет в одном объявлении указать значения свойств flex-direction (направление, в соответствии с которым располагаются флекс элементы внутри контейнера) и flex-wrap (определяет, будет ли флекс контейнер однострочным или многострочным). | 29.0 21.0 -webkit- | 28.0 18.0 -moz- | 17.0 | 9.0 6.1 -webkit- | 11.0 | 12.0 |
flex-wrap | Определяет, будет ли флекс контейнер однострочным или многострочным. Если в контейнере разрешена многострочность, то это свойство также позволяет контролировать направление, в котором размещаются флекс элементы. | 29.0 21.0 -webkit- | 28.0 18.0 -moz- | 17.0 | 9.0 6.1 -webkit- | 11.0 | 12.0 |
justify-content | Определяет как браузер распределяет пространство между и вокруг флекс элементов вдоль главной оси контейнера (горизонтально), или производит выравнивание всего макета сетки по оси строки grid-контейнера. | 29.0 21.0 -webkit- | 28.0 18.0 -moz- | 17.0 | 9.0 6.1 -webkit- | 11.0 | 12.0 |
place-content | Определяет как браузер распределяет пространство между и вокруг флекс элементов вдоль поперечной оси контейнера (вертикально) и вдоль главной оси контейнера (горизонтально), или производит выравнивание всего макета сетки по оси столбца и по оси строки grid-контейнера (является сокращенным свойством для свойств align-content и justify-content). | 54.0* | 52.0 | 44.0 | 10.3 | 10.0* -ms- | 16.0 12.0 -ms- |
Свойства для работы с flex-элементом
Свойство | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|---|
align-self | Задает выравнивание отдельных элементов строки внутри флекс контейнера, или производит выравнивание элемента макета сетки внутри ячейки по оси столбца grid-контейнера. | 21.0 | 20.0 | 12.1 | 9.0 7.0 -webkit- | 11.0 | 12.0 |
flex | Это свойство является короткой записью для свойств, которые позволяют определить размер для флекс элемента, установленный по умолчанию, указать на сколько элемент может увеличиться, либо уменьшится по отношению к остальным флекс элементам в одном контейнере. | 29.0 21.0 -webkit- | 28.0 18.0 -moz- | 17.0 | 9.0 6.1 -webkit- | 11.0 10.0 -ms- | 12.0 |
flex-basis | Определяет размер для флекс элемента, установленный по умолчанию перед распределением пространства в контейнере. | 29.0 21.0 -webkit- | 28.0 18.0 -moz- | 17.0 | 9.0 6.1 -webkit- | 11.0 | 12.0 |
flex-grow | Указывает на сколько элемент может увеличиться по отношению к остальным флекс элементам в одном контейнере. | 29.0 21.0 -webkit- | 28.0 18.0 -moz- | 17.0 | 9.0 6.1 -webkit- | 11.0 | 12.0 |
flex-shrink | Определяет, как элемент будет сжиматься относительно остальных флекс элементов в контейнере (при недостатке свободного пространства). | 29.0 21.0 -webkit- | 28.0 18.0 -moz- | 17.0 | 9.0 6.1 -webkit- | 11.0 | 12.0 |
order | Устанавливает порядок следования флекс элемента в контейнере относительно остальных. | 29.0 21.0 -webkit- | 28.0 18.0 -moz- | 17.0 | 9.0 6.1 -webkit- | 11.0 | 12.0 |
CSS Grid Layout
Свойства для работы с grid-контейнером
Свойство | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|---|
align-content | Определяет как браузер распределяет пространство между и вокруг флекс элементов вдоль поперечной оси контейнера (вертикально), или производит выравнивание всего макета сетки по оси столбца grid-контейнера. | 54.0* | 52.0 | 44.0 | 10.3 | 10.0* -ms- | 16.0 12.0 -ms- |
align-items | Производит выравнивание всех элементов внутри флекс контейнера вдоль поперечной оси, или производит выравнивание всех элементов макета сетки по оси столбца grid-контейнера. | 54.0* | 52.0 | 44.0 | 10.3 | 10.0* -ms- | 16.0 12.0 -ms- |
grid | Определяет количество, наименование и ширину столбцов и строк в макете сетки, задает шаблон макета сетки, ссылаясь при этом на имена областей элементов, которые задаются с помощью свойства grid-area, задает размер неявно созданных строк и столбцов в контейнере сетки макета, а так же позволяет указать как работает алгоритм автоматического размещения для неявно созданных элементов макета, указывая как они будут размещены в сетке макета. Является сокращенным свойством для свойств grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns и grid-auto-flow. | 54.0* | 52.0 | 44.0 | 10.3 | 10.0* -ms- | 16.0 12.0 -ms- |
grid-auto-columns | Задает размер неявно созданных столбцов в контейнере сетки макета. | 54.0* | 52.0 | 44.0 | 10.3 | 10.0* -ms- | 16.0 12.0 -ms- |
grid-auto-flow | Определяет, как работает алгоритм автоматического размещения для неявно созданных элементов макета, указывая как они будут размещены в сетке макета. | 54.0* | 52.0 | 44.0 | 10.3 | 10.0* -ms- | 16.0 12.0 -ms- |
grid-auto-rows | Задает размер неявно созданных строк в контейнере сетки макета. | 54.0* | 52.0 | 44.0 | 10.3 | 10.0* -ms- | 16.0 12.0 -ms- |
grid-column-gap(column-gap) | Определяет расстояние (промежуток) между столбцами в макете сетки. | 54.0* | 52.0 | 44.0 | 10.3 | 10.0* -ms- | 16.0 12.0 -ms- |
grid-gap(gap) | Определяет расстояние (промежуток) между строками и столбцами в макете сетки и является сокращенным свойством для свойств grid-row-gap и grid-column-gap. | 54.0* | 52.0 | 44.0 | 10.3 | 10.0* -ms- | 16.0 12.0 -ms- |
grid-row-gap(row-gap) | Определяет расстояние (промежуток) между строками в макете сетки. | 54.0* | 52.0 | 44.0 | 10.3 | 10.0* -ms- | 16.0 12.0 -ms- |
grid-template | Определяет количество, наименование и ширину столбцов и строк в макете сетки, задает шаблон макета сетки, ссылаясь при этом на имена областей элементов, которые задаются с помощью свойства grid-area. Является сокращенным свойством для свойств grid-template-rows, grid-template-columns и grid-template-areas. | 54.0* | 52.0 | 44.0 | 10.3 | 10.0* -ms- | 16.0 12.0 -ms- |
grid-template-areas | Определяет шаблон макета сетки, ссылаясь при этом на имена областей элементов, которые задаются с помощью свойства grid-area. | 54.0* | 52.0 | 44.0 | 10.3 | 10.0* -ms- | 16.0 12.0 -ms- |
grid-template-columns | Определяет количество, наименование и размер столбцов (дорожек) в макете сетки. | 54.0* | 52.0 | 44.0 | 10.3 | 10.0* -ms- | 16.0 12.0 -ms- |
grid-template-rows | Определяет количество, наименование и размер строк в макете сетки. | 54.0* | 52.0 | 44.0 | 10.3 | 10.0* -ms- | 16.0 12.0 -ms- |
justify-content | Определяет как браузер распределяет пространство между и вокруг флекс элементов вдоль главной оси контейнера (горизонтально), или производит выравнивание всего макета сетки по оси строки grid-контейнера. | 54.0* | 52.0 | 44.0 | 10.3 | 10.0* -ms- | 16.0 12.0 -ms- |
justify-items | Производит выравнивание всех элементов макета сетки по оси строки grid-контейнера. | 54.0* | 52.0 | 44.0 | 10.3 | 10.0* -ms- | 16.0 12.0 -ms- |
place-content | Определяет как браузер распределяет пространство между и вокруг флекс элементов вдоль поперечной оси контейнера (вертикально) и вдоль главной оси контейнера (горизонтально), или производит выравнивание всего макета сетки по оси столбца и по оси строки grid-контейнера (является сокращенным свойством для свойств align-content и justify-content). | 54.0* | 52.0 | 44.0 | 10.3 | 10.0* -ms- | 16.0 12.0 -ms- |
place-items | Производит выравнивание всех элементов макета сетки по оси столбца и по оси строки grid-контейнера (является сокращенным свойством для свойств align-items и justify-items). | 54.0* | 52.0 | 44.0 | 10.3 | 10.0* -ms- | 16.0 12.0 -ms- |
Свойства для работы с grid-элементом
Свойство | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|---|
align-self | Задает выравнивание отдельных элементов строки внутри флекс контейнера, или производит выравнивание элемента макета сетки внутри ячейки по оси столбца grid-контейнера. | 54.0* | 52.0 | 44.0 | 10.3 | 10.0* -ms- | 16.0 12.0 -ms- |
grid-area | Задает элементу имя, на которое можно сослаться при определении шаблона сетки, созданного с помощью свойства grid-template-areas. Является сокращенным свойством для свойств grid-row-start, grid-row-end, grid-column-start и grid-column-end. | 54.0* | 52.0 | 44.0 | 10.3 | 10.0* -ms- | 16.0 12.0 -ms- |
grid-column | Определяет с какого столбца будет начинаться элемент, сколько столбцов будет занимать элемент, или на каком столбце завершится элемент. Является сокращенным свойством для свойств grid-column-start и grid-column-end. | 54.0* | 52.0 | 44.0 | 10.3 | 10.0* -ms- | 16.0 12.0 -ms- |
grid-column-end | Определяет сколько столбцов будет занимать элемент, или на какой строке столбца завершится элемент. | 54.0* | 52.0 | 44.0 | 10.3 | 10.0* -ms- | 16.0 12.0 -ms- |
grid-column-start | Определяет с какого столбца будет расположен элемент в макете сетки, или какое количество столбцов будет охватывать элемент. | 54.0* | 52.0 | 44.0 | 10.3 | 10.0* -ms- | 16.0 12.0 -ms- |
grid-row | Определяет с какой строки в макете сетки будет начинаться элемент, сколько строк будет занимать элемент, или на какой строке завершится элемент в макете сетки. Является сокращенным свойством для свойств grid-row-start и grid-row-end. | 54.0* | 52.0 | 44.0 | 10.3 | 10.0* -ms- | 16.0 12.0 -ms- |
grid-row-start | Определяет сколько строк будет занимать элемент, или на какой строке начинается элемент в макете сетки. | 54.0* | 52.0 | 44.0 | 10.3 | 10.0* -ms- | 16.0 12.0 -ms- |
grid-row-end | Определяет сколько строк будет занимать элемент, или на какой строке завершится элемент в макете сетки. | 54.0* | 52.0 | 44.0 | 10.3 | 10.0* -ms- | 16.0 12.0 -ms- |
justify-self | Производит выравнивание элемента макета сетки внутри ячейки по оси строки grid-контенера. | 54.0* | 52.0 | 44.0 | 10.3 | 10.0* -ms- | 16.0 12.0 -ms- |
place-self | Производит выравнивание элемента макета сетки внутри ячейки по оси столбца и по оси строки grid-контенера. Является сокращенным свойством для свойств align-self и justify-self. | 54.0* | 52.0 | 44.0 | 10.3 | 10.0* -ms- | 16.0 12.0 -ms- |
Текст
Свойство | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|---|
hanging-punctuation | Свойство указывает, может ли знак препинания быть вынесен за пределы линейного блока в начале и в конце полной строки текста. | Нет | Нет | Нет | Нет | Нет | Нет |
hyphens | Сообщает браузеру, как расставлять переносы слов в блоке текста. | 13.0 -webkit- | 43.0 6.0 -moz- | Нет | 5.1 -webkit- | 10.0 -ms- | ? |
letter-spacing | Увеличивает или уменьшает интервал между символами в тексте. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
line-break | Сообщает браузеру, как осуществлять разрыв строк. | 1.0 | Нет | Да | Да | 5.5 | 12.0 |
line-height | Устанавливает межстрочный интервал (интерлиньяж). | 1.0 | 1.0 | 7.0 | 1.0 | 4.0 | 12.0 |
overflow-wrap | Указывает браузеру, переносить или нет длинные слова, которые не помещаются по ширине в заданную область (разрешается ли разрывать строки внутри слов). Свойство имеет ограниченную поддержку - используйте альтернативное свойство word-wrap. | 23.0* | Нет* | 12.1 | 7.0 | Нет* | Нет* |
tab-size | Изменяет ширину отступа, заданного с помощью символа табуляции (Tab, Юникод - U+0009). | 21.0* | 4.0 -moz- | 15.0 10.6 -o- | 7.0 | Нет | Нет |
text-align | Задает горизонтальное выравнивание текста. | 1.0 | 1.0 | 3.5 | 1.0 | 3.0 | 12.0 |
text-align-last | Задает горизонтальное выравнивание последней строки текста, а так же тексту перед принудительным разрывом строки. Свойство применяется только к тексту, который имеет горизонтальном выравнивании по ширине (свойство text-align со значением justify). | 47.0* | 49.0 12.0 -moz- | 34.0* | Нет | 5.5* | 12.0 |
text-indent | Задает отступ первой строки в текстовом блоке. | 1.0 | 1.0 | 3.5 | 1.0 | 3.0 | 12.0 |
text-justify | Определяет, как текст с выравниванием justify должен быть выровнен и разнесен. | Нет | Нет | Нет | Нет | 5.5 | 12.0 |
text-transform | Управляет регистром текста. | 1.0 | 1.0 | 7.0 | 1.0 | 4.0 | 12.0 |
user-select | Определяет может ли пользователь выделить текст элемента. | 54.0 1 -webkit- | 69.0 1 -moz- 49 -webkit- | 15.0 | 2 | 10.0 -ms- | Да -ms- или -webkit- |
white-space | Определяет как отображать пробелы внутри элемента. | 1.0 | 3.5 | 9.5 | 3.0 | 8.0 | 12.0 |
word-break | Указывает, как делать перенос строк внутри слов, которые не помещаются по ширине в заданную область. Свойство используется для определения правил переноса, когда в тексте встречается одновременно как CJK, так и не-CJK текст(Китайский, Японский, Корейский). | 4.0 | 15.0 | 15.0 | 3.1 | 5.5 | 12.0 |
word-spacing | Увеличивает или уменьшает пробел между словами в тексте. | 1.0 | 1.0 | 3.5 | 1.0 | 6.0 | 12.0 |
word-wrap | Указывает браузеру, переносить или нет длинные слова, которые не помещаются по ширине в заданную область (разрешается ли разрывать строки внутри слов). | 4.0 | 3.5 | 10.5 | 3.1 | 5.5 | 12.0 |
Оформление текста
Свойство | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|---|
text-decoration | Добавляет декорирование текста (подчеркивание, перечеркивание, линия над текстом). В CSS3 является короткой записью для свойств text-decoration-color, text-decoration-line и text-decoration-style. | 1.0 | 1.0 | 3.5 | 1.0 | 3.0 | 12.0 |
text-decoration-color | Устанавливает цвет декоративной линии, которая добавляется через свойство text-decoration. | 57.0 | 40.0 6.0* -moz- | 44.0 | 7.1 -webkit- | Нет | Нет |
text-decoration-line | Определяет тип декоративной линии. В настоящее время свойство имеет ограниченную поддержку, используйте короткую запись - text-decoration. | 57.0 | 40.0 6.0* -moz- | 44.0 | 7.1 -webkit- | Нет | Нет |
text-decoration-style | Устанавливает стиль декоративной линии, которая добавляется через свойство text-decoration. | 57.0 | 40.0 6.0* -moz- | 44.0 | 7.1 -webkit- | Нет | Нет |
text-shadow | Добавляет тень к тексту. | 4.0 | 3.5 | 9.6 | 4.0 | 10.0 | 12.0 |
text-underline-position | Указывает положение линии, которая добавляется через свойство text-decoration. | 33.0* | Нет | Нет | Нет | 6.0* | ? |
Свойства шрифта
Свойство | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|---|
@font-face | Правило, которое позволяет веб-сайтам скачать и использовать шрифты, отличные от "безопасных веб-шрифтов". | 4.0* | 3.5* | 9.0* | 3.1* | 6.0* | 12.0* |
@font-feature-values | Позволяет использовать общее название в font-variant-alternate (активируются по-разному в шрифтах OpenType). Это позволяет упростить CSS при использовании нескольких шрифтов. | Нет | 34.0 | Нет | Нет | Нет | Нет |
font | Устанавливает все свойства шрифта в одном объявлении. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
font-family | Задает шрифт для элемента. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
font-feature-settings | Позволяет контролировать расширенные типографские возможности шрифтов OpenType. | 48.0 31.0 -webkit- | 43.0 25.0 -moz- | 33.0 -webkit- | 9.1 | 10.0 | 13.0 |
font-kerning | Контролирует использование кернинга (изменение интервала между буквами в зависимости от их формы). | 43.0 31.0 -webkit- | 42.0 | 33.0 | 8.4 -webkit- | Нет | Нет |
font-language-override | Управляет использованием языковых специфических символов в шрифте. | Нет | 34.0 4.0 -moz- | Нет | Нет | Нет | Нет |
font-size | Задает размер шрифта элемента. | 1.0 | 1.0 | 7.0 | 1.0 | 5.5 | 12.0 |
font-size-adjust | Сохраняет читаемость текста, когда возникает подмена шрифта (браузер будет регулировать размер шрифта, чтобы быть тем же самым независимо от шрифта). | Нет | 3.0 | Нет | Нет | Нет | Нет |
font-stretch | Устанавливает узкое, нормальное или широкое начертание шрифта. | Нет | Нет | Нет | Нет | Нет | Нет |
font-style | Задает стиль шрифта для элемента. | 1.0 | 1.0 | 7.0 | 1.0 | 4.0 | 12.0 |
font-synthesis | Управляет тем, какие отсутствующие шрифты (жирный шрифт или курсив), могут быть синтезированы с помощью браузера. | Нет | 34.0 | Нет | Нет | Нет | Нет |
font-variant | Указывает, должен ли текст быть выведен в капители (оставить без модификаций строчные буквы или установить строчные знаки как уменьшенные заглавные). | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
font-variant-alternates | Контролирует использование альтернативных символов, связанных альтернативным именем, определенных в @font-feature-values. | Нет | 34.0 | Нет | Нет | Нет | Нет |
font-variant-caps | Управляет использованием альтернативных символов для прописных букв. | Нет | 34.0 | Нет | Нет | Нет | Нет |
font-variant-east-asian | Управляет использование альтернативных символов для сценариев Восточной Азии (например, Японский и Китайский). | Нет | 34.0 | Нет | Нет | Нет | Нет |
font-variant-ligatures | Контролирует какие лигатуры и контекстные формы используются в текстовом содержимом элемента (возможность включить автоматическую подстановку лигатур для шрифтов, поддерживающих данное свойство). | 34.0 31.0 -webkit- | 34.0 | 19.0 -webkit- | 7.0 -webkit- | Нет | Нет |
font-variant-numeric | Управляет использованием альтернативных символов для чисел, дробей и порядковых маркеров. | Нет | 34.0 | Нет | Нет | Нет | Нет |
font-variant-position | Управляет использование альтернативных символов меньшего размера, позиционируемых как с верхним или нижним индексом относительно базовой линии шрифта. | Нет | 34.0 | Нет | Нет | Нет | Нет |
font-weight | Устанавливает насколько жирным будет выглядеть текст в элементе. | 2.0 | 1.0 | 3.5 | 1.3 | 4.0 | 12.0 |
Режимы написания
Свойство | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|---|
direction | Указывает направление текста/направление письма. | 2.0 | 1.0 | 9.2 | 1.3 | 5.5 | 12.0 |
text-orientation | Определяет ориентацию текста в строке. | 48.0 ? -webkit- | 41.0 | ? -webkit- | Нет | Нет | Нет |
text-combine-upright | Указывает браузеру, что необходимо размещать текст (символы) в пространстве одного символа (для вертикальных текстов сверху-вниз). | 48.0 ? -webkit- | Нет | ? -webkit- | ? -webkit- | 11.0 -ms- | ? |
unicode-bidi | Свойство используется совместно со свойством direction, чтобы установить должен ли текст быть переопределен для поддержки нескольких языков в одном документе. | 2.0 | 1.0 | 9.2 | 1.3 | 5.5 | 12.0 |
writing-mode | Определяет как будут располагаться строки текста, горизонтально или вертикально, а также направление, в котором блоки формируются. | 31.0 -webkit- | 41.0 18.0 -moz- | 33.0 -webkit- | 9.0 -webkit- | 8.0 -ms- | 13.0 |
Таблицы
Свойство | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|---|
border-collapse | Устанавливает, как отображать границы вокруг ячеек таблицы. | 1.0 | 1.0 | 4.0 | 1.2 | 5.0 | 12.0 |
border-spacing | Задает расстояние между границами соседних ячеек. | 1.0 | 1.0 | 4.0 | 1.0 | 8.0 | 12.0 |
caption-side | Устанавливает расположение заголовка таблицы (над/под таблицей). | 1.0 | 1.0 | 4.0 | 1.0 | 8.0 | 12.0 |
empty-cells | Устанавливает, следует ли отображать границы и фон пустых ячеек в таблице. | 1.0 | 1.0 | 4.0 | 1.2 | 8.0 | 12.0 |
table-layout | Определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на ее содержимом. | 14.0 | 1.0 | 7.0 | 1.0 | 5.0 | 12.0 |
Списки и счетчики
Свойство | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|---|
counter-increment | Увеличивает одно или более значений счетчика. Чаще всего используется вместе со свойствами counter-reset и content. | 4.0 | 2.0 | 9.6 | 3.1 | 8.0 | 12.0 |
counter-reset | Создает или сбрасывает один, либо несколько счетчиков. Чаще всего используется вместе со свойствами counter-increment и content. | 4.0 | 2.0 | 9.6 | 3.1 | 8.0 | 12.0 |
list-style | Устанавливает все свойства списка в одном объявлении. | 1.0 | 1.0 | 7.0 | 1.0 | 4.0 | 12.0 |
list-style-image | Позволяет задать изображение в качестве маркера элемента списка. | 1.0 | 1.0 | 7.0 | 1.0 | 4.0 | 12.0 |
list-style-position | Определяет расположение маркера относительно элемента списка (внутри элемента списка вместе с содержимым, либо за границей элемента списка). | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
list-style-type | Указывает тип маркера элемента списка. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0* | 12.0 |
Анимация
Свойство | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|---|
@keyframes | Позволяет контролировать промежуточные этапы анимации путем создания ключевых кадров (или точки) в процессе анимации. | 43.0 4.0 -webkit- | 16.0 5.0 -moz- | 30.0 15.0 -webkit- | 9.0 4.0 -webkit- | 10.0 | 12.0 |
animation | Позволяет задать все свойства анимации в одном объявлении. | 43.0 4.0 -webkit- | 16.0 5.0 -moz- | 30.0 15.0 -webkit- | 9.0 4.0 -webkit- | 10.0 | 12.0 |
animation-delay | Определяет задержку для запуска анимации. | 43.0 4.0 -webkit- | 16.0 5.0 -moz- | 30.0 15.0 -webkit- | 9.0 4.0 -webkit- | 10.0 | 12.0 |
animation-direction | Определяет будет ли анимация воспроизводиться в обратном направлении, или в виде чередующихся циклов. | 43.0 4.0 -webkit- | 16.0 5.0 -moz- | 30.0 15.0 -webkit- | 9.0 4.0 -webkit- | 10.0 | 12.0 |
animation-duration | Определяет, сколько секунд или миллисекунд затрачивается на выполнение одного цикла анимации. | 43.0 4.0 -webkit- | 16.0 5.0 -moz- | 30.0 15.0 -webkit- | 9.0 4.0 -webkit- | 10.0 | 12.0 |
animation-fill-mode | Задает стиль для элемента, когда анимация не воспроизводится (когда она будет закончена, или когда она имеет задержку, установленную свойством animation-delay). | 43.0 4.0 -webkit- | 16.0 5.0 -moz- | 30.0 15.0 -webkit- | 9.0 4.0 -webkit- | 10.0 | 12.0 |
animation-iteration-count | Указывает, сколько раз анимация должна быть воспроизведена. | 43.0 4.0 -webkit- | 16.0 5.0 -moz- | 30.0 15.0 -webkit- | 9.0 4.0 -webkit- | 10.0 | 12.0 |
animation-name | Указывает имя анимации/список анимаций, которые должны быть применены к выбранному элементу. Каждое имя указывает на правило (@keyframes), которое определяет значения свойств анимации. | 43.0 4.0 -webkit- | 16.0 5.0 -moz- | 30.0 15.0 -webkit- | 9.0 4.0 -webkit- | 10.0 | 12.0 |
animation-play-state | Определяет состояние анимации (анимация воспроизводится, либо приостановлена). | 43.0 4.0 -webkit- | 16.0 5.0 -moz- | 30.0 15.0 -webkit- | 9.0 4.0 -webkit- | 10.0 | 12.0 |
animation-timing-function | Определяет кривую скорости для анимации (используется математическая функция - кубическая кривая Безье). Кривая скорости определяет время анимации, используемое, чтобы изменить один набор стилей CSS на другой. | 43.0 4.0 -webkit- | 16.0 5.0 -moz- | 30.0 15.0 -webkit- | 9.0 4.0 -webkit- | 10.0 | 12.0 |
Трансформация
Свойство | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|---|
backface-visibility | Определяет, должна ли быть видна задняя сторона элемента или нет. | 36.0 12.0 -webkit- | 16.0 10.0 -moz- | 23.0 15.0 -webkit- | 4.0 -webkit- | 10.0 | 12.0 |
perspective | Определяет на сколько элемент удален от точки обзора. | 36.0 12.0 -webkit- | 16.0 10.0 -moz- | 23.0 15.0 -webkit- | 9.0 3.2 -webkit- | 10.0 | 12.0 |
perspective-origin | Устанавливает начало координат для свойства перспективы (perspective). | 36.0 12.0 -webkit- | 16.0 10.0 -moz- | 23.0 15.0 -webkit- | 9.0 4.03 -webkit- | 10.0 | 12.0 |
transform | Применяет двухмерные или трехмерные трансформации к элементу (функции преобразования элемента). | 36.0 12.0* -webkit- | 16.0 10.0* -moz- | 23.0 15.0 -webkit- | 9.0 3.2 -webkit- | 10.0 9.0* -ms- | 12.0 |
transform-origin | Указывает начало координат преобразования (трансформации) элемента. | 36.0 12.0* -webkit- | 16.0 10.0* -moz- | 23.0 15.0 -webkit- | 9.0 4.0* -webkit- | 10.0 9.0* -ms- | 12.0 |
transform-style | Определяет как вложенные элементы(дочерние элементы) отображаются в трехмерном пространстве. | 36.0 12.0 -webkit- | 16.0 10.0 -moz- | 23.0 15.0 -webkit- | 9.0 4.0 -webkit- | 11.0* | 12.0 |
Переходные эффекты
Свойство | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|---|
transition | Позволяет задать все свойства эффекта перехода (переход между двумя состояниями элемента) в одном объявлении. Это свойство является короткой записью для свойств transition-delay, transition-duration, transition-property и transition-timing-function. | 26.0 4.0 -webkit- | 16.0 4.0 -moz- | 12.1 10.5 -o- | 6.1 3.1 -webkit- | 10.0 | 12.0 |
transition-duration | Определяет, сколько секунд или миллисекунд эффект перехода занимает времени. | 26.0 4.0 -webkit- | 16.0 4.0 -moz- | 12.1 10.5 -o- | 6.1 3.1 -webkit- | 10.0 | 12.0 |
transition-property | Указывает имя свойства CSS для которого используется переходный эффект. | 26.0 4.0 -webkit- | 16.0 4.0 -moz- | 12.1 10.5 -o- | 6.1 3.1 -webkit- | 10.0 | 12.0 |
transition-timing-function | Используется, чтобы описать, как рассчитываются промежуточные значения CSS свойства, которое находится под воздействием эффекта перехода, используя при этом математическую функцию (кубическую кривую Безье). Это, по сути, позволяет создать кривую "разгона", так что скорость перехода может меняться в течение длительности эффекта перехода. | 26.0 4.0 -webkit- | 16.0 4.0 -moz- | 12.1 10.5 -o- | 6.1 3.1 -webkit- | 10.0 | 12.0 |
transition-delay | Указывает, когда эффект перехода начнется (выступает в роли задержки начала эффекта). | 26.0 4.0 -webkit- | 16.0 4.0 -moz- | 12.1 10.5 -o- | 6.1 3.1 -webkit- | 10.0 | 12.0 |
Пользовательский интерфейс
Свойство | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|---|
box-sizing | Используется для изменения, применяемой по умолчанию CSS модели, с помощью которой вычисляются ширина и высота элементов. | 10.0 4.0 -webkit- | 29.0 2.0 -moz- | 9.5 | 5.1 3.2 -webkit- | 8.0 | 12.0 |
content | Используется с псевдоэлементами :before и :after для вставки сгенерированного контента. | 1.0 | 1.0 | 4.0 | 1.0 | 8.0* | 12.0 |
cursor | Определяет тип, отображаемого курсора. | 5.0 | 4.0 | 9.6 | 5.0 | 5.5 | 12.0 |
ime-mode | Контролирует состояние редактора метода ввода для текстовых полей. | Нет | 3.0 | Нет | Нет | 5.0 | ? |
nav-down | Указывает, куда перемещаться (при использовании навигационной клавиши со стрелкой вниз). | Нет | Нет | Нет* | Нет | Нет | Нет |
nav-index | Определяет порядок табуляции для элемента. | Нет | Нет | Нет* | Нет | Нет | Нет |
nav-left | Указывает, куда перемещаться (при использовании навигационной клавиши со стрелкой влево). | Нет | Нет | Нет* | Нет | Нет | Нет |
nav-right | Указывает, куда перемещаться (при использовании навигационной клавиши со стрелкой вправо). | Нет | Нет | Нет* | Нет | Нет | Нет |
nav-up | Указывает, куда перемещаться (при использовании навигационной клавиши со стрелкой вверх). | Нет | Нет | Нет* | Нет | Нет | Нет |
outline | Устанавливает все свойства контура элемента в одном объявлении (контур не является частью элемента и не влияет на его ширину). | 1.0 | 1.5 | 7.0 | 1.2 | 8.0* | 12.0 |
outline-color | Устанавливает цвет контура элемента. | 1.0 | 1.5 | 7.0 | 1.2 | 8.0* | 12.0 |
outline-offset | Добавляет пространство между контуром и краем элемента или его границы (при наличии). | 4.0 | 3.5 | 10.5 | 3.1 | Нет | Нет |
outline-style | Устанавливает стиль контура элемента (за пределами границы). | 1.0 | 1.5 | 7.0 | 1.2 | 8.0* | 12.0 |
outline-width | Задает ширину контура элемента. | 1.0 | 1.5 | 7.0 | 1.2 | 8.0* | 12.0 |
resize | Указывает, может ли размер элемента изменяться пользователем. | 4.0 | 5.0 4.0 -moz- | 15.0* | 4.0 | Нет | Нет |
text-overflow | Указывает, что должно произойти, когда текст переполняет, содержащий элемент. | 4.0 | 7.0 | 11.0 9.0 -o- | 3.1 | 6.0 | 12.0 |
Свойства столбцов
Свойство | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|---|
break-after | Определяет как проиcходят разрывы страниц(при печати), колонок или определённых областей после указанного элемента. | Нет | Нет | Нет* | Нет | 10.0* | 12.0* |
break-before | Определяет как проиcходят разрывы страниц(при печати), колонок или определённых областей перед указанным элементом. | Нет | Нет | Нет* | Нет | 10.0* | 12.0* |
break-inside | Определяет как проиcходят разрывы страниц(при печати), колонок или определённых областей внутри указанного элемента. | Нет | Нет | Нет* | Нет | 10.0 | 12.0 |
column-count | Определяет количество колонок, на которое следует разделить элемент. | 50.0 4.0 -webkit- | 2.0 -moz- | 37.0* 15.0 -webkit- | 9.0 3.1 -webkit- | 10.0 | 12.0 |
column-fill | Указывает, как содержимое заполняется внутри столбцов (содержимое во всех столбцах будет иметь одинаковую высоту, либо занимает столько прострванства сколько ему потребуется). | Нет | 13.0 -moz- | Нет | Нет | Нет | Нет |
column-gap | Указывает величину зазора (промежуток) между колонками элемента, который отображается в виде многоколоночного текста. | 50.0 4.0 -webkit- | 2.0 -moz- | 37.0* 15.0 -webkit- | 9.0 3.1 -webkit- | 10.0 | 12.0 |
column-rule | Позволяет в одном объявлении указать следующие значения разделительной линии: ширина (column-rule-width), стиль (column-rule-style) и цвет (column-rule-color). | 50.0 4.0 -webkit- | 2.0 -moz- | 37.0* 15.0 -webkit- | 9.0 3.1 -webkit- | 10.0 | 12.0 |
column-rule-color | Определяет цвет разделительной линии между колонками. | 50.0 4.0 -webkit- | 2.0 -moz- | 37.0* 15.0 -webkit- | 9.0 3.1 -webkit- | 10.0 | 12.0 |
column-rule-style | Определяет стиль разделительной линии между колонками. | 50.0 4.0 -webkit- | 2.0 -moz- | 37.0* 15.0 -webkit- | 9.0 3.1 -webkit- | 10.0 | 12.0 |
column-rule-width | Определяет ширину разделительной линии между колонками. | 50.0 4.0 -webkit- | 2.0 -moz- | 37.0* 15.0 -webkit- | 9.0 3.1 -webkit- | 10.0 | 12.0 |
column-span | Определяет, должен ли элемент пересекать все колонки, либо позиционируется в одной из них. | 50.0 4.0 -webkit- | Нет | 37.0* 15.0 -webkit- | 9.0 3.1 -webkit- | 10.0 | 12.0 |
column-width | Задает оптимальную ширину для колонок. | 50.0 4.0 -webkit- | 2.0 -moz- | 37.0* 15.0 -webkit- | 9.0 3.1 -webkit- | 10.0 | 12.0 |
columns | Позволяет указать в одном объявлении значения свойств column-width(оптимальная ширина колонок) и column-count(оптимальное количество колонок). | 50.0 4.0 -webkit- | 2.0 -moz- | 37.0* 15.0 -webkit- | 9.0 3.1 -webkit- | 10.0 | 12.0 |
widows | Задает минимальное число строк текста, которое располагается на следующей странице при печати документа, когда происходит разрыв страницы внутри элемента (работает при условии, что текст размещается на двух и более страницах). | 25.0 | Нет | 9.2 | Нет | 8.0 | 12.0 |
Постраничный вывод
Свойство | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|---|
marks | Свойство, которое отвечает за выравнивание и обрезку печатаемого элемента. | Нет | Нет | Нет | Нет | Нет | Нет |
orphans | Задает минимальное число строк текста, которое располагается в нижней части страницы при печати документа, когда происходит разрыв страницы внутри элемента (работает при условии, что текст размещается на двух и более страницах). | 25.0 | Нет | 9.2 | Нет | 8.0 | 12.0 |
page-break-after | Определяет наличие или отсутствие разрыва страницы после заданного элемента при печати документа. | 1.0* | 1.0* | 7.0* | 1.2* | 10.0* | 12.0 |
page-break-before | Определяет наличие или отсутствие разрыва страницы перед заданным элементом при печати документа. | 1.0* | 1.0* | 7.0* | 1.2* | 10.0* | 12.0 |
page-break-inside | Определяет наличие или отсутствие разрыва страницы внутри заданного элемента при печати документа. | 1.0 | 19.0 | 7.0 | 1.3 | 8.0 | 12.0 |
quotes | Определяет тип кавычек для встраиваемых цитат. | 11.0 | 1.5 | 4.0 | 5.1 | 8.0* | 12.0 |
Фильтры
Свойство | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|---|
filter | Устанавливает визуальный эффект (фильтр) для элемента (например, размытие или изменение цвета). | 18.0 -webkit- | 35.0 | 15.0 -webkit- | 9.1 6.0 -webkit- | Нет | 13.0* |
Изображения и замещаемое содержимое
Свойство | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|---|
image-orientation | Задает вращение (направление по часовой стрелке) по умолчанию. | Нет | 42.0 | Нет | Нет | Нет | Нет |
image-rendering | Сообщает браузеру, какой алгоритм следует использовать для масштабирования изображений. Это относится и к самому элементу, а также любых изображений, поставляемых в другие свойства для элемента. | 41.0* | 36.0 3.6* -moz- | 26.0 11.60* -o- | Да* | Нет | Нет |
image-resolution | Позволяет изменить разрешение конкретных изображений (пользовательское масштабирование). | ? | ? | ? | ? | ? | ? |
object-fit | Управляет соотношением сторон заменяемых элементов (изображения/видео), когда у них задана ширина или высота, а также способом их масштабирования на странице. | 31.0 | 36.0 | 19.0 11.60 -o- | Да | Нет | Нет |
object-position | Устанавливает положение контента внутри заменяемого элемента (изображения/видео) по горизонтали и вертикали. | 31.0 | 36.0 | 19.0 11.60 -o- | Нет | Нет | Нет |
Свойства маски
Свойство | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|---|
mask | Позволяет пользователям изменять видимость элемента, либо частично или полностью скрывает элемент. Это достигается путем маскировки или обрезки изображения в определенных точках. | Да* | Да* | Да* | Да* | ? | ? |
mask-type | Свойство, которое определяет какое значение (luminance/alpha mask) имеет SVG элемент (<mask>). | 24.0 | 35.0 | 15.0 | 7.0 -webkit- | Нет | Нет |
Свойства речи
Свойство | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|---|
mark | Сокращенное свойство для установки свойств mark-before и mark-after. | ? | ? | ? | ? | ? | ? |
mark-after | Позволяет назначить маркер и прикрепить его к аудио потоку (служит для отметки начальной определенной точки в потоке). | ? | ? | ? | ? | ? | ? |
mark-before | Позволяет назначить маркер и прикрепить его к аудио потоку (служит для отметки конечной определенной точки в потоке). | ? | ? | ? | ? | ? | ? |
phonemes | Задает фонетическое произношение для текста, содержащегося в соответствующем элементе. | ? | ? | ? | ? | ? | ? |
rest | Сокращенное свойство для установки свойств rest-before и rest-after properties | ? | ? | ? | ? | ? | ? |
rest-after | Задает паузу после произнесения содержимого элемента. | ? | ? | ? | ? | ? | ? |
rest-before | Задает паузу перед произнесением содержимого элемента. | ? | ? | ? | ? | ? | ? |
voice-balance | Задает баланс между левым и правым каналами. | ? | ? | ? | ? | ? | ? |
voice-duration | Определяет, сколько потребуется, чтобы отображать выбранный элемент (указывает значение в секундах или миллисекундах). | ? | ? | ? | ? | ? | ? |
voice-pitch | Указывает среднюю высоту (частоту) голоса. | ? | ? | ? | ? | ? | ? |
voice-pitch-range | Тон человеческого голоса определяется фундаментальной частотой и обычно имеет значение 120 Гц для мужского голоса и 210Hz для женского голоса. Это свойство задает диапазон, в котором фундаментальная частота может отклоняться от среднего тона. | ? | ? | ? | ? | ? | ? |
voice-rate | Контролирует скорость речи. | ? | ? | ? | ? | ? | ? |
voice-stress | Указывает на силу интонации, которая должна применяться к тексту которому уделено особое внимание. | ? | ? | ? | ? | ? | ? |
voice-volume | Задает громкость звука (размер медианы звуковой волны). | ? | ? | ? | ? | ? | ? |
Бегущая строка
Свойство | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|---|
marquee-direction | Устанавливает направление перемещения содержимого. | ? | ? | ? | ? | ? | ? |
marquee-play-count | Устанавливает, сколько раз содержимое движется. | ? | ? | ? | ? | ? | ? |
marquee-speed | Устанавливает, насколько быстро содержимое пролистывается. | ? | ? | ? | ? | ? | ? |
marquee-style | Установка стиля для перемещаемого содержимого. | ? | ? | ? | ? | ? | ? |
Прочее
Свойство | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|---|
@media | Правило, которое используется для изменения CSS стилей на основании определенных характеристик устройства, связанных с отображением контента, таких как ширина, высота, ориентация, разрешение экрана и так далее. Имеет широкое применение в адаптивном веб-дизайне. | 21.0 | 3.5 | 9.0 | 4.0 | 9.0 | 12.0 |
all | Сбрасывает все свойства к их первоначальному или унаследованному значению (за исключением свойства direction, отвечающего за направление текста и свойство unicode-bidi, которое позволяет задействовать двунаправленный алгоритм отображения текста. | 37.0 | 27.0 | 24.0 | 9.1 | Нет | Нет |