Комментарии 28
только мы научились какать через котельную соломинку…
IE, как всегда, на вершине прогресса.
@supports (@supports) {… }
@supports (@supports) { @supports not (display:inline-block) { .inline { float:left } } @supports (display:inline-block) { .inline { display:inline-block } } }
Только вложения в вложениях вложений, только хардкор.
Только вложения в вложениях вложений, только хардкор.
Действительно: мне кажется что именно с этой директивы и надо было разработку CSS3 начинать, а сейчас уже как-то… поздновато
Было уже: habrahabr.ru/post/154123/
Поддержка @supports и CSS.supports() реализована и в Blink: codereview.chromium.org/13646013
Где это можно применять на практике? Пока что не вижу сильной пользы от этой директивы, если честно.
Вы смеётесь что ли? Появляются новые свойства, которые позволяют делать что-то, что раньше решалось ворохом костылей. Если упомянутое свойство поддерживается, костыли можно выключить.
Но проблема то в том, что у меня сейчас даже хром (ещё не обновился/не вышел апдейт) не поддерживает это свойство, что уж говорить про чуть более древние браузеры.
Умрут древние браузеры. Вы ведь не используете тег LAYER и не проверяете, что браузер DIV поддерживает? А для меня лет 15 назад это было будничным занятием.
Я вижу два варианта:
1. Мы поддерживаем браузер, который не поддерживает свойство Х.
Тогда нам всё-равно придётся реализовывать при помощи старых свойств.
Тогда зачем реализовывать при помощи новых? Чтобы поддерживать две вёрстки?
2. Мы не поддерживаем старый браузер.
Тогда просто вставляем новую вёрстку и старые браузеры рушатся.
1. Мы поддерживаем браузер, который не поддерживает свойство Х.
Тогда нам всё-равно придётся реализовывать при помощи старых свойств.
Тогда зачем реализовывать при помощи новых? Чтобы поддерживать две вёрстки?
2. Мы не поддерживаем старый браузер.
Тогда просто вставляем новую вёрстку и старые браузеры рушатся.
В варианте номер один вы забываете, что эмуляция свойств, которых нет в старых браузерах, часто делается допобвязкой и костылями, которая может тормоза давать при сложной вёрстке.
Кроме того, вы не рассмотрели вариант №3:
если свойство поддерживается, делаем эффект на нём, если нет, делаем что-нибудь, на что хотя бы не противно смотреть.
Кроме того, вы не рассмотрели вариант №3:
если свойство поддерживается, делаем эффект на нём, если нет, делаем что-нибудь, на что хотя бы не противно смотреть.
С @supports будет удобнее верстать в соответствии с подходом progressive enhancement, от меньшего к большему.
Например, на странице нужно разместить контент в шести блоках.
Если браузер не поддерживает 3D transforms, то, к примеру, задаем каждому ширину 300px, float:left и изменение цвета фона при наведении мышки на блок.
Если же браузер поддерживает 3D transforms, то можно разместить блоки совершенно иным образом, задать иную ширину и при наведении делать
Да, придется поддерживать 2 разных набора стилей для элемента. Если бы стояла цель добиться определнной эффектности на каком-то сайте с помощью использования новейших css фич, то я бы поддерживал.
Например, на странице нужно разместить контент в шести блоках.
Если браузер не поддерживает 3D transforms, то, к примеру, задаем каждому ширину 300px, float:left и изменение цвета фона при наведении мышки на блок.
Если же браузер поддерживает 3D transforms, то можно разместить блоки совершенно иным образом, задать иную ширину и при наведении делать
transform: rotateY(130deg); вместо изменения цвета фона.Да, придется поддерживать 2 разных набора стилей для элемента. Если бы стояла цель добиться определнной эффектности на каком-то сайте с помощью использования новейших css фич, то я бы поддерживал.
Поддерживает браузер скруглённые углы — рисуем углы. Поддерживает флекс — используем… Тот же modernizr, вид в профиль.
Тот же Modernizr, только без JS и позволяющий проверить даже самые тонкие аспекты поддержки.
Поддерживает браузер скруглённые углы — рисуем углы
А разве мы и так не можем нарисовать скруглённые углы? Ну например чем отличаются следующих два кода?
.target {
border-radius: 5px;
}
@supports (border-radius) {
.target {
border-radius: 5px;
}
}
Реально можно применять на практике, чтобы «включить» Flexbox последней спецификации
CSS.supports polyfill IE6+ и всё остальные браузеры.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Новая CSS директива @supports