Этот полный справочник по поддержке CSS в браузерах предназначен для помощи разработчикам в планировании кросс-браузерной совместимости. В нём подробно описаны все основные свойства CSS, свойства CSS3 и CSS4, Flexbox, Grid и псевдоклассы. Каждое свойство включает информацию о поддержке в браузерах Chrome, Firefox, Safari, Edge, Internet Explorer, iOS Safari и Android, а также примечания по совместимости. Табличный формат позволяет быстро находить нужные данные, облегчая принятие решений при разработке. С этим справочником можно определить, какие функции безопасны для использования в продакшн-среде, а какие требуют fallback’ов или префиксов.
📊 Basic CSS Properties Support
| Property |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| color |
1 |
1 |
1 |
12 |
3 |
1 |
1 |
CSS 1 |
Универсальная поддержка |
| background-color |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Универсальная поддержка |
| font-family |
1 |
1 |
1 |
12 |
3 |
1 |
1 |
CSS 1 |
Универсальная поддержка |
| margin |
1 |
1 |
1 |
12 |
3 |
1 |
1 |
CSS 1 |
Универсальная поддержка |
| padding |
1 |
1 |
1 |
12 |
3 |
1 |
1 |
CSS 1 |
Универсальная поддержка |
| border |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Универсальная поддержка |
| width |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Универсальная поддержка |
| height |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Универсальная поддержка |
| display |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Универсальная поддержка |
| position |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 2 |
Универсальная поддержка |
| float |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS 1 |
Универсальная поддержка |
📊 CSS3 Properties Support
| Property |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| border-radius |
5 |
4 |
5 |
12 |
9 |
4 |
2.1 |
CSS3 |
Требуется префикс -webkit в старых версиях |
| box-shadow |
10 |
4 |
5.1 |
12 |
9 |
5 |
4 |
CSS3 |
Требуется префикс -webkit в старых версиях |
| text-shadow |
2 |
3.5 |
4 |
12 |
10 |
4 |
2.1 |
CSS3 |
Префикс не нужен |
| opacity |
1 |
1 |
2 |
12 |
9 |
2 |
1 |
CSS3 |
Фоллбек filter: alpha() для IE8 |
| rgba() |
1 |
3 |
3.1 |
12 |
9 |
3.2 |
2.1 |
CSS3 |
Фоллбек в hex для старых браузеров |
| transform |
36 |
16 |
9 |
12 |
9 |
9 |
3 |
CSS3 |
Требуется префикс -webkit в старых версиях |
| transition |
26 |
16 |
9 |
12 |
10 |
9 |
4 |
CSS3 |
Требуется префикс -webkit в старых версиях |
| linear-gradient |
26 |
16 |
7 |
12 |
10 |
7 |
4.4 |
CSS3 |
Требует большого количества префиксов |
📊 Flexbox Support
| Property |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| display: flex |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE10-11 использует -ms-flex |
| flex-direction |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE использует другую синтаксис |
| flex-wrap |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
Только IE11+ |
| justify-content |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE использует -ms-flex-pack |
| align-items |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE использует -ms-flex-align |
| flex-grow |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE использует -ms-flex-positive |
| flex-shrink |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE использует -ms-flex-negative |
| order |
29 |
28 |
9 |
12 |
11 |
9 |
4.4 |
CSS3 |
IE использует -ms-flex-order |
📊 CSS Grid Support
| Property |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| display: grid |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE10-11 использует старый синтаксис с -ms- |
| grid-template-columns |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE использует -ms-grid-columns |
| grid-template-rows |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE использует -ms-grid-rows |
| grid-gap |
57 |
52 |
10.1 |
16 |
No |
10.3 |
57 |
CSS3 |
Использовать gap для современной синтаксиса |
| grid-column |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE использует -ms-grid-column |
| grid-row |
57 |
52 |
10.1 |
16 |
10 |
10.3 |
57 |
CSS3 |
IE использует -ms-grid-row |
| justify-items |
57 |
52 |
10.1 |
16 |
11 |
10.3 |
57 |
CSS3 |
Ограниченная поддержка в IE |
📊 Modern CSS Features Support
| Property |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| custom properties |
49 |
31 |
9.1 |
16 |
No |
9.3 |
49 |
CSS3 |
Не поддерживается в IE |
| calc() |
26 |
16 |
7 |
12 |
9 |
7 |
4.4 |
CSS3 |
Ограниченная поддержка в старых версиях |
| clamp() |
79 |
75 |
13.1 |
79 |
No |
13.4 |
79 |
CSS4 |
Только современные браузеры |
| filter |
53 |
35 |
9.1 |
12 |
No |
9.3 |
53 |
CSS3 |
Ограниченная поддержка в IE с -ms-filter |
| clip-path |
55 |
3.5 |
13.1 |
12 |
No |
13.1 |
55 |
CSS3 |
Требуется префикс -webkit |
| object-fit |
32 |
36 |
10 |
16 |
No |
10 |
32 |
CSS3 |
Не поддерживается в IE |
| aspect-ratio |
88 |
89 |
15 |
88 |
No |
15 |
88 |
CSS4 |
Только современные браузеры |
📊 Pseudo-class Support
| Selector |
Chrome |
Firefox |
Safari |
Edge |
IE |
iOS Safari |
Android |
First Support |
Notes |
| :hover |
1 |
1 |
1 |
12 |
4 |
1 |
1 |
CSS1 |
Универсальная поддержка |
| :focus |
1 |
1 |
1 |
12 |
8 |
1 |
1 |
CSS2 |
Универсальная поддержка |
| :first-child |
1 |
1 |
3 |
12 |
7 |
1 |
1 |
CSS2 |
Универсальная поддержка |
| :last-child |
1 |
1 |
3 |
12 |
9 |
1 |
1 |
CSS3 |
Только IE9+ |
| :nth-child() |
1 |
3.5 |
3 |
12 |
9 |
3.2 |
1 |
CSS3 |
Только IE9+ |
| :not() |
1 |
1 |
3.2 |
12 |
9 |
3.2 |
1 |
CSS3 |
Ограниченная поддержка в IE9+ |
| :focus-visible |
86 |
85 |
15.4 |
86 |
No |
15.4 |
86 |
CSS4 |
Только современные браузеры |
| :has() |
105 |
121 |
15.4 |
105 |
No |
15.4 |
105 |
CSS4 |
Только очень современные браузеры |
/* Сброс стилей для всех браузеров */
* {
box-sizing: border-box;
}
/* Flexbox с fallbacks */
.flex-container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
/* Grid с fallback для IE */
.grid {
display: -ms-grid;
display: grid;
}
Всегда предоставляйте fallbacks для новых CSS-свойств. Используйте подход progressive enhancement и тестируйте на целевых браузерах, особенно на мобильном Safari и IE. Рассмотрите использование CSS-препроцессоров, таких как SASS или Autoprefixer, для автоматического добавления префиксов. Применяйте правило @supports для современных функций. Следите за долей браузеров среди вашей аудитории и используйте инструменты вроде “Can I Use” для актуальных данных о совместимости. Эти практики обеспечивают корректное отображение дизайна на всех устройствах.
