Новая CSS директива @supports

[danielnewman]

только мы научились какать через котельную соломинку…

[qehgt]

Блин. Коктельную соломинку.

А «котельной соломинки» нет, хоть в интернете она часто упонимается!

[Moor]

КоктеЙльную.

[qehgt]

Спасибо

[amarao]

IE, как всегда, на вершине прогресса.

[Smerig]

Кто знает, может в какой-нибудь ночной сборке тоже есть поддержка. Правда сборки не публичны.

[DeGeek]

[Theo_from_Sed]

шедевр! подняли настроение! 5 баллов!

[TheShock]

К сожалению, это не фотошоп. Если у вас нету AdBlock, то именно такая картинка висит на Хабре справа от топика.

[friday]

@supports (@supports) {… }

[Abcd_Efgh]

@supports (@supports) { @supports not (display:inline-block) { .inline { float:left } } @supports (display:inline-block) { .inline { display:inline-block } } }
Только вложения в вложениях вложений, только хардкор.

[MuLLtiQ]

Действительно: мне кажется что именно с этой директивы и надо было разработку CSS3 начинать, а сейчас уже как-то… поздновато

[bolk]

Было уже: habrahabr.ru/post/154123/

[lkart]

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

[weiss]

Поддержка @supports и CSS.supports() реализована и в Blink: codereview.chromium.org/13646013

[Shugich]

Где это можно применять на практике? Пока что не вижу сильной пользы от этой директивы, если честно.

[bolk]

Вы смеётесь что ли? Появляются новые свойства, которые позволяют делать что-то, что раньше решалось ворохом костылей. Если упомянутое свойство поддерживается, костыли можно выключить.

[Rulexec]

Но проблема то в том, что у меня сейчас даже хром (ещё не обновился/не вышел апдейт) не поддерживает это свойство, что уж говорить про чуть более древние браузеры.

[bolk]

Умрут древние браузеры. Вы ведь не используете тег LAYER и не проверяете, что браузер DIV поддерживает? А для меня лет 15 назад это было будничным занятием.

[TheShock]

Я вижу два варианта:

1. Мы поддерживаем браузер, который не поддерживает свойство Х.
Тогда нам всё-равно придётся реализовывать при помощи старых свойств.
Тогда зачем реализовывать при помощи новых? Чтобы поддерживать две вёрстки?

2. Мы не поддерживаем старый браузер.
Тогда просто вставляем новую вёрстку и старые браузеры рушатся.

[bolk]

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

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

[lkart]

С @supports будет удобнее верстать в соответствии с подходом progressive enhancement, от меньшего к большему.
Например, на странице нужно разместить контент в шести блоках.
Если браузер не поддерживает 3D transforms, то, к примеру, задаем каждому ширину 300px, float:left и изменение цвета фона при наведении мышки на блок.
Если же браузер поддерживает 3D transforms, то можно разместить блоки совершенно иным образом, задать иную ширину и при наведении делать transform: rotateY(130deg); вместо изменения цвета фона.

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

[Theo_from_Sed]

Поддерживает браузер скруглённые углы — рисуем углы. Поддерживает флекс — используем… Тот же modernizr, вид в профиль.

[bolk]

Тот же Modernizr, только без JS и позволяющий проверить даже самые тонкие аспекты поддержки.

[TheShock]

Поддерживает браузер скруглённые углы — рисуем углы

А разве мы и так не можем нарисовать скруглённые углы? Ну например чем отличаются следующих два кода?

.target {
  border-radius: 5px;
}

@supports (border-radius) {
  .target {
    border-radius: 5px;
  }
}

[bolk]

Ничем. Вы рассматриваете не тот случай, для которого @supports нужен.

[termi]

Реально можно применять на практике, чтобы «включить» Flexbox последней спецификации

[termi]

CSS.supports polyfill IE6+ и всё остальные браузеры.