С ростом поддержки свойства определения поддержки функционала в CSS, под названием @supports, я понял, что это могло бы быть клёвой идеей взять и немного углубиться в эту тему, рассказав про неё как можно больше информации.
Итак, вот быстрое описание того, что же свойство @supports всё таки делает. По своей сути, @supports работает как обычный медиа запрос, но детектит определенный функционал, вместо размеров viewport, меида типов и т.д. Более менее, но это функция запроса. Использование @supports в браузерах, которые поддерживают его (Все, кроме IE11 и ниже в этом направлении), дает нам возможность проверять, поддерживается ли определенный функционал браузером или нет. Если да, то последующие CSS правила будут применены, а если браузер не поддерживает какое-либо свойство, то оно будет проигнорировано без какого-либо вреда для верстки.
Теоретически, тут суть в том, чтобы дать нам возможность условно применять CSS, основываясь на поддержке его функционала самим браузером. У меня есть четкое представление об этом, но в поисках материала для этого поста, мне было немного сложно найти примеры для этого правила, которые реально заслуживают внимания. Давайте посмотрим на некоторые простые сценарии, которые пришли мне на ум в первую очередь.
\n\n\n\nИтак, ваш коллега только что отправил вам отличный дизайн. Хороший сеточный шаблон. Настало время размять свои CSS мускулы и применить немного flexbox. Но нет! Аккаунт менеджеры только что сообщили вам, что вам нужна поддержка IE9. Хороший выстрел, ребята) Давайте разыграем сценарий, который бы имел место быть с @supports. Давайте применим классический кейс с flexbox. У вас есть несколько предметов (класс .thing) c заголовком и описанием внутри. Текст описания варьируется по длине и вам надо убедиться в том, что все .thing одной высоты, вне зависимости от длины контента. Может что-то типа этого нам подойдет?
.thing {\n border: 2px solid #efefef;\n margin: 10px;\n padding: 20px;\n\n // Fallback for IE9 if browser\n // doesn't support flexbox.\n float: left;\n width: calc(33.333333% - 20px);\n\n h2 {\n color: #2b2b2b;\n }\n\n .description {\n font-size: 1rem;\n }\n }\n\n // Insert fanciness here\n @supports (display: flexbox) {\n .thing-wrapper {\n align-items: stretch;\n display: flex;\n justify-content: center;\n }\n\n .thing {\n flex: 0 1 33.333333%;\n }\n }Отлично! Это выглядит как отличный пример использования @supports. У нас есть процентная ширина и флоаты, примененные к .thing, а также фолбэк, если не поддерживается flexbox!
Однако, давайте поиграем в адвоката дьявола и посмотрим, что же нас остановило от использования такого подхода:
\n\n\n\n.thing-wrapper {\n align-items: stretch;\n display: flex;\n justify-content: center;\n }\n\n .thing {\n border: 2px solid #efefef;\n flex: 0 1 33.333333%;\n margin: 10px;\n padding: 20px;\n\n //IE9 support\n float: left;\n width: calc(33.333333% - 60px);\n\n h2 {\n color: #2b2b2b;\n }\n\n .description {\n font-size: 1rem;\n }\n }.thing-wrapper свойства будут проигнорированы, так как IE9 просто не воспримет их, а float и width свойства будут проигнорированы в новых браузерах из-за применения display: flex. Сейчас, в организационном плане, возможно было бы хорошим тоном откинуть старые свойства, которые не поддерживают старые браузеры. Но в функциональном плане, выгода кажется слегка ограниченной.
Давайте возьмем ещё один пример. Правило @support также принимает несколько дополнительных операторов: not, and и or. Вы можете связать эти операторы, чтобы улучшить свои результаты. Для примера, вы можете указать правилу @supports запускаться когда браузер не поддерживает CSS свойство.
Давайте, к примеру, попробуем новые модные CSS переменные. Если браузер не поддерживает CSS переменные, то мы запустим CSS код, который компенсирует это.
\n\n\n\n@supports not (--color-1: #c0ffee) {\n .coffee {\n color: #c0ffee;\n }\n }Простой пример, но он успешно делает свою работу. Что мы хотим тут сказать, так это то, что если браузер не поддерживает использование CSS переменных, то мы применяем цвет прямо к диву .coffee. Это звучит очень круто, но сейчас нам надо рассмотреть примет ли браузер этот код, даже поддерживая правило @supports. Если браузер не поддерживает правило @supports, с которого мы начинаем, этот отрезок кода будет пропущен и наш div .coffee не получит стилизации, которую мы ему выдали.
Для уточнения, CSS переменные не поддерживаются в EDGE v14. Однако @supports да. Следовательно, этот код будет работать! Что кстати великолепно, это определенно выглядит идеальным примером использования в этом случае.
Постарайтесь остаться непредвзятым как я после этих двух кейсов, я пробежался по нескольким другим сценариям, которые я не стал так описывать, как предидущие два.
\n\n\n\nЯ пытался найти некую выгоду в использовании правила для CSS keyframes, которая закончилась также как и в первом примере c flexbox. Я проверил новое свойство display: flow-root, это аккуратное свойство, которое замещает уже застоявшийся clearfix. Это был отличный кейс для оператора not, почти как и с нашим примером по теме CSS переменных. И в конце я проверил кейс с использованием CSS 3D трансформаций. И также как и с flexbox примером, выявил те же проблемы.
И под конец, конечно же @supports правило было бы фантастикой во былые времена, когда поддержка браузеров для разного CSS представляла собой невероятный беспорядок. Но сегодня, разработчики браузеров начинают поддерживать новые свойства чуть ли не одновременно. И даже если нет, то применяется не та логика, как в JavaScript. Если браузер не понимает CSS свойство, то он его пропускает и идет дальше. По факту, нет ощутимой выгоды в использовании @supports, пока что. Есть определенно хорошие кейсы его применения и оператора not. Особенно в старых версиях Edge, который не поддерживает такие фишки, как CSS переменные. Однако, для меня, @supports правило кажется скорее косметическим и дает ясный способ организации CSS свойств, которые необходимы для вашего нынешнего проекта, следуя его рекомендациям, которые могут не позволить вам использовать эти свойства в полной мере.
С ростом поддержки свойства определения поддержки функционала в CSS, под названием @supports, я понял, что это могло бы быть клёвой идеей взять и немного углубиться в эту тему, рассказав про неё как можно больше информации.
\n","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2020/08/DglYtvO7Bn0-1.jpg"},"interesting":[{"title":"Viewport единицы в CSS","slug":"viewport-edinitsy-v-css","type":"html-css"},{"title":"Прокачиваем навыки работы с CSS селекторами","slug":"prokachivaem-naviki-raboty-s-css-selectorami","type":"html-css"},{"title":"Великолепный hover эффект с CSS переменными","slug":"velikolepnyi-hover-effect-s-css-peremennimy","type":"html-css"}]}},"staticQueryHashes":["3576131997","63159454"]}