6 мощных возможностей CSS, которые позволяют обойтись без JavaScript

[pansom]

А теперь всё тоже самое только с результатами caniuse.com

[dmitryredkin]

Я не знаю почему, но всякий раз, когда я встречаю «заменим JS на CSS», оказывается, что вариант CSS жрет больше ресурсов и сильнее тормозит…

[maxzhurkin]

И совместим не со всеми браузерами

[domix32]

В такой ситуации у меня обычно тормозят шрифты и картинки, запрос до которых почему-то в статусе stalled повисает секунд на 10-15.

[Alexandroppolus]

Даже анимация?

[vvovas]

К сожалению, text-overflow: ellipsis, насколько я помню, работает только на однострочном тексте. Бывает, что нужно так обрезать многострочный текст и тут приходится выкручиваться другими способами.

[zorn_v]

Например line-clamp указанный в статье…
Хотя я о нем тоже первый раз услышал )

[DrZlodberg]

Раньше, для оснащения страницы плавной прокруткой, требовалось задействовать несколько строк JS-кода

Раньше для этого нужно было поставить галочку в настройках браузера. Или убрать. А как быть с этим если я не хочу плавную?

2. Закрепление элементов

Всё отлично. Только закрепление ломает прокрутку и приходится юзать скрипты уже для правки этого. Попробуйте почитать хабр без скриптов. Клавиши Pgup/PgDn работают со всем окном и без скриптов получается систематический перелёт, т.к. панелька сверху отжирает часть окна.

[Metotron0]

Проверил в файрфоксе, всё работает
developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

[Metotron0]

Но ведь и у меня smooth scrolling в настройках выключен, но прокручивает плавно с этим свойством.

[FTOH]

Попробуйте почитать хабр без скриптов. Клавиши Pgup/PgDn работают со всем окном и без скриптов получается систематический перелёт, т.к. панелька сверху отжирает часть окна.

Не смог воспроизвести ни в Chrome, ни в Firefox

[DrZlodberg]

Waterfox. В обычной фоксе тоже работало так. Скрипты точно отключены? Со скриптами работает нормально

[FTOH]

Да, отключены.

[fomiash]

После того, как в CSS появилась директива supports, проверять возможности браузеров стало можно прямо из CSS-кода.

Правильно ли я понимаю, что новая директива проверки накладываемых ограничений для старых браузеров поддерживается только на современных? Было бы уместно указать поддержку в данном случае как это работает. Логично было бы, если свойство только устанавливало выполнение включенного блока, а на устаревших браузерах он пропускался, но

Она поддерживает различные комбинации выражений, построенные с помощью условных операторов AND, OR и NOT

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

[pansom]

Safari эту директиву не понимает. Итого пишем прогрессивный css с даунгрейдом по умолчанию, что сводит любые телодвижения к нулю ибо профитней чисто даунгрейженый css оставить (с навеской js по желанию) и не заморачиваться.
Я когда-то именно supports для position: sticky использовал (ну и так по мелочи), а потом нарвался на геморрой в поведении Safari, после чего решил ну его в пень.

[turone]

text-overflow: ellipsis — почти полная поддержка всех браузеров — это не так!

[nomn]

Зачем вставлять «скриншот» codepen, а ниже ссылку? ruvds со своими переводами всего и вся, мне кажется, начали сходит с ума

[Mitai]

спасибо было интересно, возможно когда нибудь в далеком будущем, можно будет все делать на одном css, без жаба-скрипта, это будет афигенски

[Metotron0]

Ссылка на caniuse говорит, что edge поддерживаект прокрутку с января этого года.

[Metotron0]

А что в опере было важнее, функции или движок?

[pansom]

Есть ещё как бы мобильный рынок.

[pansom]

Ну Blink в 2013 в сторонку отошел, так что WebKit не устаревший, а параллельно развивающийся.
Эт раз.
Второе, море народа сидит на браузерах которые сжимают трафик (аналоги OperaMini) и ещё куча шлака всякого. Пока ты сайтом не продаёшь тебе то и насрать, а как узнаешь процентаж трафика со странных устройств и процентаж отказов, так сразу и айайай.

[Snova_s_vami]

Да, всё это конечно круто, но я уже год локти кусаю по поводу проксей из JavaScript и проблем с customElements с IE11. А тут такая же ситуация, supports, grid-Ы, прокрутка через CSS, это всё не сегодня. Через пару лет надеюсь, в лучшем случае. Пока IE11 всё ещё жив, обычный работяга всё ещё в пролете мимо новшеств мира сайтостроения))

[devopg]

неясно зачем они к такой нужной фишки как ограничение колво строк текста засунули какой то display -webkit-box

[blackrama13]

Пару раз пробовал использовать плавную прокрутку на css и всеравно возвращался к js. А все потому, что если header на позиции fixed, то элемент к которому скролим — частично прячется под этим header и еще были какие-то нестыковки, но уже не помню какие.

[blackrama13]

Так не от меня же зависит, прикреплять шапку или нет, желание заказчика

[blackrama13]

Ну и при чем тут дизайн градиента к реализации скролла? Если дизайн заказчику нравится, то мне абсолютно всеравно какие там вырвиглазные цвета или кривые отступы у похожих блоков, тут в теме было, что реализация некоторой логики на css — лучше чем на js. Но в итоге из-за разного рода багов, всеравно лучше использовать js. А по поводу дизайнов, так о них не спорят, посмотрите, что студия Лебедева толкала за бешеные бабки. Что для нас не очень, то кому-то всеравно понравится

[Metotron0]

Я делаю элемент нулевой высоты, смещённый вверх на высоту шапки, и скролю к нему.

[Metotron0]

Ну а как же пользователю давать доступ к меню? Свайп сбоку делать? Придётся делать обучалку для сайта, потому что это не очевидно. А у некоторых браузеров это вообще системное поведеление для «назад».

[Metotron0]

А я о телефонах.
У хабра есть всплывашка в низу страницы, но чтобы её увидеть, нужно отмотать достаточно далеко вниз, чтобы был запас для возврата наверх, а то она просто так не появляется.

[Metotron0]

А как быть с навигацией? Её можно спрятать за экран, как я выше писал, но как научить пользователя? Тем более, что многие места за экраном уже заняты.

[Metotron0]

Я имею в виду спрятать, скажем, за правый край экрана

[vladbov]

Противопоставление этих двух технологий — что-то новое в разработке. Но лучше использовать CSS там, где нужен CSS. И javascript там, где он нужен.

[inkShio]

position: sticky; хорошая тема, но плохо дружит с overflow:hidden. Я сталкивался с таким вариантом.

[Feeel]

Это все очень весело, но я бы выделил две явных проблемы:
1) трудноуловимый источник странных проблем. Хорошо, если разработчик — я, и я примерно в теме того, где я понавертел всяких модных CSS-штук, а если нет — тушите свет! То, что раньше надо было выкапывать в 3-4 подключённых JS файлах, теперь надо будет искать ещё и в груде CSS, и дай бог, чтоб это не было "костылем", и не оказалось реализоваео в виде стиля прописанного прямо к элементу, прямо где-нибудь в PHP-коде!

З.Ы. Только не говорите про отладчик… На всяких айфонах — это отдельные боль и страдания.

2) Удвоение работы по разработке таким способом: сначала делаем для современных браузеров, а потом берём IE9 и проделываем все заново! Блеск!

[Feeel]

Нельзя в окно! Это засорение окружающей среды токсичными отходами!

А если серьёзно — то все было бы очень круто, если бы в целевой аудитории многих компаний не сидели государственники с win XP и дефолтным браузером IE9, а за пультом этих шайтан-машин не сидели бабульки, которые при виде поехавшей вёрстки (или не дай боже ошибки какой) неистово крестятся и жмут на крестик.

[Feeel]

посыпал голову пеплом
Блин, точно! В хрюшке ж IE8…
Ну обосрался, ну бывает… IE8 судя по метрикам всё-таки почти вымер, а вот IE9 вижу стабильно.

[PHIL__andelfia]

Не ясно как работает темная тема(для меня).
Она зависит от того какая тема стоит в браузере? да?

[Metotron0]

Я пока не тестировал эту штуку, и мне интересно, оно способно узнать, что я в XFCE выбрал тему с тёмными элементами? Или оно только для винды и макоси?